¿Cómo se escribe en código HTML?
Como ya dijimos, el HTML, o HyperText Markup Language, es un lenguaje de marcado simple y define la estructura de la página web además de su contenido. La idea es que se forman estructuras de árbol con elementos individuales.
Un ejemplo de elemento es:
Como podemos ver, estos elementos tienen un nombre. En el ejemplo es "div", y se colocan entre los signos <> para la apertura y < / > para el cierre. Al medio de la apertura y cierre se encuentra el contenido del elemento que a su vez puede tener otros elementos combinados con el texto, por ejemplo:
Nombres de elementos HTML
El código HTML tiene nombres de elementos específicos para ciertos elementos. La lista completa llega casi a los 150 elementos, pero muchos ya quedaron en desuso o son demasiado modernos para algunos navegadores.
En esta lista te mostramos los más utilizados:
- html Es la etiqueta que engloba a todo el contenido de una página.
- head Es la etiqueta en la que colocamos los metadatos de una página, por ejemplo, el título y descripción de la misma. Estos elementos, a excepción del título, no son visibles en el navegador.
- body Es la etiqueta que contiene a todos los elementos visibles de la página. Dentro de esta podemos encontrar:
- header Es la etiqueta donde colocamos el encabezado de una página.
- sidebar Es la etiqueta donde colocamos la barra lateral de una página.
- footer Es la etiqueta donde colocamos el pie pie de página.
- div Es una etiqueta genérica para cualquier bloque de contenido o texto.
- h1, h2, h3, h4, h5, h6 Son los encabezados o títulos que van de mayor a menor importancia.
- p Es la etiqueta de un párrafo.
- a Es la etiqueta para los enlaces a otra página interna o externa al sitio.
- strong Es la etiqueta para resaltar un texto en negrillas.
- em Es la etiqueta para colocar un texto en cursivas.
- ul Es la etiqueta para una lista no ordenada.
- ol Es la etiqueta para una lista ordenada.
- li Es la etiqueta para un elemento de una lista
- img Es la etiqueta para colocar imágenes.
- audio Es la etiqueta para colocar archivos de audio.
- video Es la etiqueta para colocar videos en un sitio.
- form Es la etiqueta para crear un formulario.
- input Es la etiqueta para crear elementos de un formulario como una caja de introducción de texto, botón de radio o casillas de verificación.
- button Es la etiqueta para crear botones en los formularios.
No vale la pena conocer a todos los elementos pues los más usados no pasan de una veintena, el resto se quedan solo como referencias. En todo caso nunca esta por demás revisar la lista oficial de las especificaciones de la W3C.
Atributos de los elementos
Cada elemento, además del nombre y del contenido, puede tener atributos. Estos se escriben en la apertura del elemento, por ejemplo:
Cada atributo tiene un nombre y un valor escrito entre comillas. En el ejemplo anterior vemos que el elemento div tiene los atributos "class" y "id", ambos con valores "titulo_rojo" y "titulo_principal" respectivamente.
Algunos elementos tienen atributos especiales, pero la mayoría comparte los siguientes:
- id - Es el identificador único de un elemento, en una página no deberían existir dos elementos con el mismo id.
- class - Es la clase del elemento, sirve para crear grupos de elementos, por ejemplo " los parrafos rojos", o "los enlaces importantes".
- style - Es un atributo para colocar el estilo visual de un elemento.
- lang - Es un atributo que define el idioma en el que esta el contenido del elemento.
- src - Es la fuente desde la cual se debe leer el contenido de un elemento imagen, video o audio.
- href - Es el atributo para escribir la dirección URL de un enlace
¿Qué sucede si escribo mal mi código HTML?
Muchas veces los desarrolladores web olvidamos cerrar alguna etiqueta, o colocamos etiquetas adyacentes como:
Lo sorprendente es que, en la mayoría de los casos, el sitio web se verá de la misma forma que si estuviera escrito bien. Eso sucede pues estos errores eran bastante comunes en los primeros desarrolladores y los navegadores web logran corregir la mayoría en el momento de mostrar un sitio.
Sin embargo, si los errores son realmente evidentes sucederá que se verá el sitio web se verá mal, probablemente con contenido cortado o inexistente.
