Original article: What is HTML – Definition and Meaning of Hypertext Markup Language
HTML, Lenguaje de marcado de hipertexto o HyperText Markup Language por sus siglas en inglés. Es un lenguaje que permite definir y darle estructura a las páginas web.
Es una de las partes más básicas de todas las páginas web, por lo que es muy importante aprenderlo si se quiere tener una carrera en el mundo del desarrollo web.
En este artículo explicaré en detalle que es HTML, como funciona en una página web y veremos una parte muy interesante de HTML - HTML semántico.
¿Que es HTML?
Para entender "HTML" al derecho y al revés, veamos cada letra de esta contracción:
Hypertext (hipertexto): texto (usualmente enlaces) que está organizado de manera que conecta elementos relacionados.
Markup (marcado): Es una guía de estilo para representar elementos que son mostrados de forma visual en el navegador.
Language (lenguaje):Un lenguaje que entiende una computadora y utiliza para interpretar comandos.
HTML determina la estructura de las páginas web. Sin embargo, esta estructura no es suficiente para hacer que una página luzca bien y sea interactiva, por lo que necesitas otras tecnologías como CSS y JavaScript, que harán que tu HTML luzca bien y sea interactivo, respectivamente.
En seguida describiré los 3 lenguajes- HTML, CSS y JavaScript - utilizando el cuerpo humano como analogía:
- HTML es el esqueleto.
- CSS es la piel.
- JavaScript es el sistema circulatorio, digestivo y respiratorio que le da al esqueleto y a la piel vida.
También puedes mirar a HTML, CSS y JavaScript de la siguiente forma:
- HTML es la estructura de la casa.
- CSS es la decoración interior y exterior.
- JavaScript es el sistema eléctrico, del agua y otras funcionalidades que hace de tu hogar habitable
Etiquetas HTML
Ya que HTML define la estructura de una página web, querrás que el texto, imágenes y otros elementos se muestren de cierta forma.
Por ejemplo, que un texto se vea grande y otro pequeño, que esté en negritas, cursiva, o sea una lista con viñetas.
HTML tiene "etiquetas" que te dejan hacer esto y mucho más. Hay etiquetas para crear títulos, párrafos, resaltar palabras, escribir en cursiva, etc.
La siguiente imagen describe la anatomía de una etiqueta HTML:
Elementos HTML
Un elemento consiste de una etiqueta de apertura, un contenido y una etiqueta de cierre.
También existen "elementos vacíos" que solo utilizan una etiqueta, no necesitan etiqueta de cierre, en su lugar utilizan un enlace o una fuente, ha contenido que quieras insertar en la página web.
Un ejemplo de este tipo de elementos es <img>, que se utiliza para insertar imágenes en una página web
Elementos HTML y etiquetas HTML son términos que por lo general se utilizan indistintamente, pero hay una pequeña diferencia entre ellos. Un elemento es la combinación de la etiqueta de apertura, la etiqueta de cierre y el contenido entre ellas.
Aquí hay otra imagen para ayudarte a visualizar la anatomía de un elemento HTML:
Atributos HTML
Las etiquetas HTML también acepta "atributos". Los atributos se añaden en la etiqueta de apertura y pueden ser de tipo style, id, class, etc. Los atributos toman un valor, que le da información extra a un elemento para agregar estilos o interactividad con JavaScript
En la siguiente infografía, la etiqueta de apertura contienen un atributo class con el valor “text”. Esto puede ser útil para darle estilo al elemento o seleccionarlo con JavaScript para hacerlo interactivo.
Aquí está la anatomía básica de una página HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Definition of HTML</title>
</head>
<body>
<!--Contenido de la páguina, por ejemplo, texto e imagenes-->
</body>
</html>
Veamos las diferentes partes del código anterior:
<!Doctype html>: Especifica que estamos utilizando HTML5 en el código, antes de la introducción de HTML5 en la etiqueta <!Doctype> se tenía que especificar que versión de HTML se estaba utilizando. Por ejemplo, HTML4.0, 3.2, etc. Esto ya no es necesario, ahora el navegador automáticamente asume que estás programando con HTML5.
<html></html>: elemento raíz o principal de todo documento HTML. Los demás elementos irán dentro de este.
<head></head>:Una de las partes más importantes del documento HMTL. Los "Web crawlers" (escanean internet) miran dentro de este elemento para obtener información importante acerca de la página. Contiene información como el título de la página, enlaces que dan estilo a la página, meta-información para SEO (Optimización para motores de búsqueda) y mucho más.
<meta />: Este es un elemento vacío que contiene meta-información acerca de la página, por ejemplo, el autor, tipo de codificación de caracteres (casi siempre es UTF-8), adaptabilidad del diseño web, compatibilidad y mucho más. Los Web crawlers siempre miran las etiquetas meta para obtener información acerca de la página web, lo cual será muy importante para el SEO.
<title></title>: Aquí se especifica el nombre de la página web, este siempre se muestra en las pestañas del navegador.
<body></body>: Todo el contenido del documento HTML se inserta entre las etiquetas body. Solo puede haber un elemento <body>en la página.
¿Que es HTML semántico?
HTML semántico significa, usar las etiquetas HTML correctas para cada tipo de contenido.
La semántica ha sido una parte integral de HTML desde su creación, a principios de los años 90, pero tomó mayor relevancia a finales de los 90, cuando CSS comenzó a funcionar en los navegadores.
Con HTML semántico, el uso de etiquetas genéricas como <div> y<span> está mal visto, ya que etiquetas más descriptivas como <header>, <nav>, <main>, <section>, <footer> y<article> pueden hacer lo mismo.
Una gran ventaja de utilizar etiquetas semánticamente correctas, es que los web crawlers pueden indexar fácilmente una página o sitio web, lo que mejorara el SEO.
Además, una página con una semántica correcta se vuelve informativa, adaptable y accesible para aquellos que utilicen lectores de pantalla.
Etiquetas semánticas principales y que hacen.
Veamos algunas de las etiquetas más importantes en HTML semántico:
<header>: El elemento <header> define la sección introduciría de la página web. Contiene elementos como el logo, barra de navegación, cambiador de tema y barra de búsqueda.
<nav>: El elemento <nav> especifica los elementos de navegación de la página, por ejemplo, home (inicio), contact (contacto), about (acerca de), FAQs (preguntas frecuentes), etc.
<main>: El elemento <main> contiene las secciones principales del documento HTML, a excepción de los elementos <header> y <footer>. Idealmente, solo debería de haber un solo elemento <main> en todo el documento HTML
<section>: EL elemento <section> define una sección específica de la página web. Esta puede ser la sección acerca de, la sección de contactos, etc. Puedes utilizar diferentes secciones en el documento HTML.
<article>: EL elemento <article> representa una parte de la página web que transmite un tipo de información. Por ejemplo, puede ser una combinación de imágenes, texto, videos, etc. Como su nombre sugiere, este elemento representa un artículo independiente en un blog que podría tener más artículos
<aside>: el elemento <aside> representa contenido, que aunque no sea parte de la información principal, está relacionada indirectamente.
<footer>: El <footer> posiciona diferentes elementos, como enlaces destacados, información sobre derechos de autor o información relevante acerca de la página o sitio web.
Recuerda que los elementos semánticos están relacionados con el tipo de contenido que tienen (como usar nav para una barra de navegación, <article> para un artículo, etc.). Estos elementos no se posicionan automáticamente donde deberían ir, esto se tiene que hacer con CSS
Ejemplo de un documento básico utilizando HTML semántico:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Definicion de HTML</title>
</head>
<body>
<header>
<h1 class="logo">LOGO</h1>
<nav>
<ul>
<li>Inicio</li>
<li>Acerca de</li>
<li>Contacto</li>
<li>Preguntas Frecuentes</li>
</ul>
</nav>
</header>
<main>
<section class="about-me">
<article>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio magni
est asperiores nemo, adipisci minus itaque quam, rem libero aliquam
nesciunt, nisi inventore assumenda earum repellat labore ratione
architecto eos quis. Soluta mollitia cupiditate dolorem. Consequatur a
soluta laudantium nihil. Molestias, officiis ut! Nobis adipisci
voluptatem quam at officia beatae!
</article>
</section>
<section class="contact-me">
Me puedes encontrar en
<a href="https://twitter.com/koladechris">Twitter</a> Me puedes encontrar en
<a href="https://Instagram.com/koladechris">Instagram</a>
</section>
<aside class="address">Mi direccion</aside>
</main>
<footer>© 2020 Todos los derechos reservados</footer>
</body>
</html>
Así luce en el navegador:
Puedes notar como el contenido de <aside> es parte del contenido principal y el contenido de <nav> no aparece como una barra de navegación automáticamente. Por esta razón, aún tienes que hacer que luzca como debería, haciendo uso de CSS.
Conclusión
Espero que este artículo te haya ayudado a aprender lo básico de HTML y que es lo que hace. Ahora puedes comenzar a aprender tecnologías más avanzadas como CSS o JavaScript y comenzar a formar una carrera sólida en el desarrollo web
Muchas gracias por haber leído y espero que te encuentres bien.