El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de datos. Como lo sugiere el título, este artículo te dará una comprensión básica de HTML y cúal es su función.
HTML no es un lenguaje de programación; es un lenguaje de marcado que define la estructura de tu contenido. HTML consiste en una serie de elementos que usarás para encerrar diferentes partes del contenido para que se vean o comporten de una determinada manera. Las etiquetas de encierre pueden hacer de una palabra o una imagen un hipervínculo a otro sitio, se pueden cambiar palabras a cursiva, agrandar o achicar la letra, etc. Por ejemplo, tomemos la siguiente línea de contenido:
1 - Mi gato es muy gruñon
Si queremos especificar que se trata de un párrafo, podríamos encerrar el texto con la etiqueta de párrafo (<p>) :
1 - <p>Mi gato es muy gruñon</p>
Exploremos este párrafo en mayor profundidad.
Las partes principales de nuestro elemento son:
1. La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p), encerrado por paréntesis angulares (< >) de apertura y cierre. Establece dónde comienza o empieza a tener efecto el elemento — en este caso, dónde es el comienzo del párrafo.
2. La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una barra de cierre (/) antes del nombre de la etiqueta. Establece dónde termina el elemento — en este caso dónde termina el párrafo.
3. El contenido: este es el contenido del elemento, que en este caso es sólo texto.
4. El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido equivale al elemento.
Los elementos pueden también tener atributos, que se ven así:
Los atributos contienen información adicional acerca del elemento, la cual no quieres que aparezca en el contenido real del elemento. En este caso, el atributo class permite darle al elemento un nombre identificativo, que puede ser usado luego para apuntarle al elemento información de estilo y demás cosas.
Un atributo debe tener siempre:1. Un espacio entre éste y el nombre del elemento (o del atributo previo, si el elemento ya posee uno o más atributos).
2. El nombre del atributo, seguido por un signo de igual (=).
3. Comillas de apertura y de cierre, encerrando el valor del atributo.
Puedes también colocar elementos dentro de otros elementos — esto se llama anidamiento. Si, por ejemplo, queremos resaltar una palabra del texto (en nuestro ejemplo la palabra "muy"), podemos encerrarla en un elemento <strong>, que significa que dicha palabra debe ser enfatizada:
1 - <p>Mi gato es <strong>muy</strong> gruñon.</p>
Debes asegurarte que los elementos estén correctamente anidados: en el ejemplo de abajo, creamos la etiqueta de apertura del elemento <p> primero, luego la de <strong>, por lo tanto, debemos cerrar ésta etiqueta primero, y luego la de <p>. Esto es incorrecto:
1 - <p>Mi gato es <strong>muy gruñon.</p></strong>