¿Qué es HTML y cómo funciona?
Es un lenguaje de marcado de hipertexto el cual tiene como propósito la definición de la estructura de nuestra página web. Con un conjunto de etiquetas que juegan el papel de “simular” un cuerpo humano.
Podemos crear un archivo HTML guardando un archivo con la extensión .html y lo podemos ejecutar con doble clic y eligiendo el navegador o con el navegador predeterminado del sistema.
La forma de declarar una etiqueta HTML es con los signos <> y dentro el nombre de la etiqueta, <etiqueta> esta es la apertura de la etiqueta. Estas se cierran escribiendo el signo / justo después del signo < en este caso etiqueta de cierre, ejemplo: <etiqueta></etiqueta>. No siempre es necesario la etiqueta de cierre, existen algunas excepciones como la etiqueta img que se cierra automáticamente antes del signo >, ejemplo: <img/>.
Las etiquetas toman el papel de etiquetas padres y etiquetas hijas de acuerdo a donde estén situadas, si una etiqueta X está dentro de otra etiqueta, automáticamente nos referimos a esta como etiqueta hija y a la que lo engloba como etiqueta padre (en CSS esto es muy importante saberlo y es bueno conocerlo desde el principio). Ejemplo:
<Etiqueta Padre>
<Etiqueta Hija>
Contenido
</Etiqueta Hija>
</Etiqueta Padre>Existen etiquetas que tienen un valor semántico por encima de otras, podemos destacar entre las más importantes:
<head></head>
<body></body>
<main></main>
<header></header>
<nav></nav>
<footer></footer>
<a></a>
Por otro lado, existen de menor relevancia semántica en un documento HTML, donde vemos:
<span></span>
<article></article>
<aside></aside>
<code></code>Además reciben ciertos atributos como: class, id, style, title, etc. La forma de insertar estos atributos en una etiqueta es justo después de el nombre de la etiqueta de apertura, nombre del atributo, signos =”” y dentro el valor del atributo. Ejemplo: <h1 class="valor"></h1>.
Algunos atributos son opcionales, pero algunas etiquetas como img requieren un atributo para funcionar, en este caso el atributo “src”. Ejemplo: <img src="url de la imagen" />
Una de las etiquetas más importantes es <a></a> para navegar entre documentos HTML con su atributo “href”, ejemplo: desde el archivo index.html enlazamos a un archivo about.html de la siguiente manera: <a href="about.html">Texto ancla</a>.
Aprende más sobre HTML, todas las etiquetas, atributos y su funcionamiento: clic aquí.
const message = "Alexander"
const message = "Hola"