¿Qué es HTML (Hyper Text Markup Language)?
HTML es uno de los lenguajes de marcado más utilizados en el diseño web en todo el mundo. Sus puntos fuertes radican en una sintaxis uniforme y claramente estructurada, un enfoque de código abierto y gratuito y una gran facilidad de aprendizaje. Cualquiera que quiera introducirse en el diseño web rápido y sin mucho esfuerzo encontrará en HTML la base adecuada para programar una página web moderna, atractiva y con elementos interactivos.
Qué significa HTML: Hyper Text Markup Language
HTML significa “Hyper Text Markup Language” (‘Lenguaje de Marcado de Hipertexto’) y, junto a Java y CSS, es uno de los lenguajes de marcado basados en texto más utilizados en el mundo. Tim Berners-Lee, inventor de la World Wide Web, sentó las bases de HTML en 1992 con la primera especificación HTML. El Consorcio World Wide Web (W3C) declaró HTML 4.0 estándar oficial en diciembre de 1999. Desde entonces, alrededor del 63 % de todas las páginas web se basan en código HTML. En la actualidad (2023), las versiones XHTML y HTML5 se utilizan principalmente para la creación de páginas web optimizadas para SEO.
El lenguaje HTML tiene principalmente las siguientes características:
- En la creación de páginas web, se utilizan tags HTML para describir y estructurar los elementos de la página.
- La sintaxis de HTML es uniforme y textual, y consta siempre de una etiqueta de inicio y otra de fin.
- Por ello, HTML se considera un lenguaje de marcado o markup.
HTML no es un lenguaje de programación
En principio, HTML no cuenta como lenguaje de programación. A diferencia de los lenguajes de programación y scripting como PHP o JavaScript, HTML no puede utilizarse para crear algoritmos, tareas, condiciones o bucles debido a su falta de estructura de comandos. Por tanto, HTML pertenece a los lenguajes de marcado. Mientras que HTML describe y estructura una página web con una sintaxis estática basada en texto, los lenguajes de programación crean contenidos dinámicos, tareas lógicas complejas, comandos y algoritmos.
¿Quieres tener una página web profesional en pocos pasos? Con el equipo de expertos de IONOS, puedes encargar tu diseño web fácilmente.
Usos del HTML
HTML se utiliza para crear y editar páginas web privadas o empresariales. La estructura básica, también llamada código fuente, siempre tiene un aspecto similar para las páginas web basadas en HTML debido a su sintaxis uniforme. El código fuente HTML muestra a los navegadores, junto con el CSS (Cascading Style Sheets), cómo se debe mostrar y componer visualmente la página web en el dispositivo final, incluyendo el diseño, la tipografía y los colores.
Con la versión actual HTML5 están disponibles nuevas posibilidades de uso y atributos HTML.
Entre los usos y funciones de HTML se incluyen:
- Describir el diseño y el aspecto de una página web
- Ejecutar vídeos insertados en HTML, elementos de audio y hojas de cálculo
- Integrar diferentes dispositivos estilísticos para la presentación de textos
- Navegar dentro de una página web mediante hipervínculos
- Crear formularios para la generación de clientes potenciales, como formularios de registro, newsletters, solicitudes de contacto o descargas
- En combinación con plugins, integración de formularios de búsqueda y opciones de reserva
- Ejecución de contenidos de página dinámicos mediante referencias a hojas de estilo CSS o archivos JavaScript
Crear una página web: IONOS te ofrece para ello diseños de alta calidad, así como tu propio dominio, SSL y buzón de correo electrónico.
¿Cómo es la estructura del código HTML?
La estructura HTML subyacente siempre tiene un aspecto muy similar debido a la uniformidad de la sintaxis. Los documentos HTML constan siempre de los tres elementos básicos siguientes:
DOCTYPE
La llamada declaración de tipo de documento se encuentra siempre en la parte superior y al principio de un documento HTML. La marca DOCTYPE html tiene el formato <!DOCTYPE html>. Indica al navegador de qué tipo de documento y de qué sintaxis de código y versión HTML se trata. En el caso de HTML5, por ejemplo, puede ser <html5>. Dado que la etiqueta DOCTYPE no es un elemento HTML en sentido estricto, puede ser la única antes de la sección HTML del documento.
Cabecera HTML
La cabecera HTML transmite al navegador detalles importantes y metainformación sobre el cuerpo del documento. Se marca como <head> y viene inmediatamente después de la etiqueta <html> que abre la sección HTML. La cabecera HTML puede contener, entre otros, los siguientes elementos:
- Título del documento
- Descripción
- Autor y copyright
- Juego de caracteres
- Información de escalado para móviles
- Información sobre estilos y scripts incluidos en archivos CSS o JavaScript y otros recursos incluidos
- Información meta robots (instrucciones de indexación para los rastreadores de los motores de búsqueda)
Cuerpo HTML
El cuerpo HTML se abre con la etiqueta <body> y contiene toda la información sobre el diseño visible y sobre los elementos dinámicos integrados en la página. Mediante etiquetas HTML, el cuerpo describe todo lo que los visitantes de la página deben ver en el área de visualización del navegador cuando abren la página web.
Estructura básica de un documento HTML
A continuación, te mostramos la estructura básica de un documento HTML:
<!DOCTYPE html>
<hmtl>
<head>
<title>…</title>
<meta …/>
</head>
<body>
</body>
</html>La estructura de las etiquetas HTML
Aparte de la etiqueta DOCTYPE, que no requiere etiqueta final, todos los elementos del documento HTML siguen el mismo principio de tres componentes:
- Etiqueta de apertura < >: las etiquetas de apertura siempre van entre corchetes angulares de apertura y cierre y muestran al navegador dónde comienza el elemento con contenido a mostrar.
- Contenido: entre la etiqueta de apertura y la de cierre se encuentra el contenido que el navegador debe mostrar o ejecutar. Esto abarca desde párrafos de textos y reproductores de vídeo hasta imágenes y formularios.
- Etiqueta final </>: la etiqueta final va entre dos corchetes con una barra. Indica al navegador dónde termina el elemento HTML.
La estructura de un elemento HTML es la siguiente:
<…>Texto de ejemplo</...>Las 10 etiquetas HTML más importantes
Hay una etiqueta HTML adecuada para casi cualquier deseo de diseño. Como la lista de todas etiquetas HTML es demasiado larga, a continuación te indicamos las más importantes.
| Etiqueta HTML | Función |
|---|---|
<!DOCTYPE>
|
Determina el tipo de documento HTML |
<html>
|
Muestra el inicio del área HTML |
<head>
|
Abre la cabecera HTML |
<body>
|
Abre el cuerpo HTML |
<h1>â¦</h1>
|
Muestra los encabezados H1 (lo mismo sucede con las etiquetas H2 y H3) |
<a href="Link-URL">Término vinculado</a>
|
Identifica los enlaces en el documento HTML |
<p>â¦</p>
|
Marca los párrafos del documento |
<ul>â¦</ul>
|
Indica las listas |
<li>â¦</li>
|
Aparece en combinación con listas e identifica los elementos de las mismas |
<i>â¦</i>
|
Indica cursiva |
¿Qué papel desempeña el HTML en el SEO?
Un código HTML limpio y correcto determina si los navegadores, motores de búsqueda y rastreadores de motores de búsqueda muestran e indexan correctamente tu página. Por tanto, una estructura básica cuidada de los documentos HTML, incluidos los elementos integrados en CSS, JavaScript u otros lenguajes, tiene un efecto positivo en tu posicionamiento. Por otro lado, incluso una etiqueta final olvidada puede hacer que las páginas no se muestren correctamente. Las metaetiquetas también determinan cómo se ven los fragmentos en los motores de búsqueda y si estos indexan correctamente una página.
Las etiquetas HTML importantes que puedes utilizar para mejorar el SEO incluyen:
- Title tag: la etiqueta
<title>…</title>de la cabecera HTML sirve también de cabecera para los fragmentos de los motores de búsqueda y desempeña un papel importante en la clasificación. - Meta description: la meta description resume el contenido de la página web de forma breve y concisa. También aparece en la cabecera HTML y en los resultados de búsqueda, por lo que es muy relevante para el SEO.
- Robots meta tags: las robots meta tags dan instrucciones a un motor de búsqueda para el funcionamiento de crawlers o para la indexación de páginas. Esto te permite determinar qué página debe ser indexada y cuál no.
- Alt tag: con las etiquetas
<alt>…</alt>describes el contenido de las imágenes incrustadas y garantizas la accesibilidad, así como un mejor posicionamiento en la búsqueda de imágenes. - Anchor tag: con una anchor tag
<a>…</a>se pueden integrar hipervínculos en el documento HTML que enlacen a contenidos internos o externos. Mejoran el tiempo de carga y la facilidad de uso de una página, lo que también mejora la clasificación.
¿Qué programas HTML existen?
Dado que HTML es gratuito, es muy fácil y sencillo diseñar tu propia página web con él. Sin embargo, para ello se necesitan editores HTML, capaces de crear, guardar y publicar documentos HTML. Existen editores gratuitos y de pago, ya sea como software instalable o como editores online.
Los mejores editores HTML son:
- Notepad++ (gratuito)
- NoteTab (versión gratuita y de pago)
- CoffeeCup (versión gratuita y de pago)
- Visual Studio Code (gratuito)
- Atom (gratuito)
- Sublime Text 3 (versión gratuita y de pago)
- Android Studio (gratuito)
- Brackets (gratuito)
- CotEditor (gratuito)
- Bluefish (gratuito)
- Komodo Edit (gratuito)
Aprender HTML fácilmente
HTML no solo es uno de los lenguajes de marcado más utilizados en el diseño web, sino también uno de los más fáciles de aprender. Además, HTML se considera un conocimiento estándar en el desarrollo web para desarrolladores y programadores. Si deseas aprender sobre HTML te beneficiarás de una sintaxis limpia y clara y de una base óptima para diversos proyectos web. El diseño de páginas web para principiantes es muy fácil y rápido con editores basados en el principio WYSIWYG (What You See Is What You Get), que no requieren conocimientos profundos de HTML. El editor se encarga de introducir el código HTML mediante funciones integradas de estructuración, introducción y arrastrar y soltar.