Estructura de un documento
Para que un navegador pueda leer de forma correcta un documento HTML, por supuesto tiene que tener un determinado orden, y la información tiene que estar encerrada en las etiquetas correctas. De nuevo, insistimos en la importancia de cerrar todas las etiquetas que se hayan abierto alguna vez.
Los documentos HTML se dividen en dos partes, el encabezado y el cuerpo. En la entrega anterior, les hablamos sobre la importancia que tenía la etiqueta <head> antes de que comience <body>. Ahora vamos a explicar un poco más al respecto. Pero antes, debemos aclarar que todos los documentos HTML se abren con la etiqueta <html> y finalizan con </html>. Puede que podamos ver el formato bien si lo probamos de forma local, pero es inaceptable -¡bajo ningún punto de vista!- comenzar un documento sin agregar esta etiqueta.
Como decíamos, la etiqueta <head> marca el comienzo del encabezado. En esta sección del documento encontraremos todos los elementos de la página que no van a ser visibles para el usuario pero que serán interpretados por el navegador. Por ejemplo, los scripts de JavaScript, la metadata, el título de la página, etc. Aquí también estará incluido el código CSS que le dará el diseño a la página. Lo que nos lleva a hacer una aclaración que profundizaremos en otra entrega: ya no son los ’90 y no estamos hosteando nuestras páginas en Geocities. No uses el HTML para intentar hacer un diseño “bonito”.
La segunda parte del documento es el cuerpo, cuyo comienzo está marcado por la etiqueta <body>. Aquí estarán todos los contenidos que serán visibles para el usuario. Por eso, todo lo que sea JavaScript, CSS, no puede estar incluido dentro del cuerpo –exceptuando enlace de los JavaScript externos antes de cerrar el cuerpo-. Las etiquetas están hechas para que podamos trabajar tranquilos y tener todos nuestros espacios bien estructurados.
Etiquetas importantes
Antes de comenzar a enumerar las etiquetas más populares tenemos que hacer una aclaración sobre los tipos de elementos que puede contener una etiqueta. Cada etiqueta puede contener dentro de sí otra etiqueta que marque determinadas características semánticas. Por ejemplo, dentro de la etiqueta <p> (deparagraph o párrafo) puedo sumar la etiqueta <font> para determinar la tipografía, la etiqueta <em> para enfatizar o <strong> para poner en negritas.
En el antiguo HTML, el más primitivo, estas dos últimas etiquetas que mencionamos estaban consideradas como un aspecto de diseño y se identificaban como <b> (de bold) e <i> (de italic). Hoy en día esto se define a través de CSS y lo que nosotros hacemos con HTML es dar una explicación semántica a ese cambio en el formato del texto. Así es como enfatizamos, pero no ponemos en negrita, porque luego a través de CSS podemos crear una regla para que todas las negritas tengan una tipografía y color diferentes, por ejemplo.
Volviendo al tema principal, esto de etiquetas dentro de etiquetas sucede porque tenemos dos tipos de elementos que el navegador puede diferenciar. Se trata de los elementos en línea o inline elements y loselementos en bloque o block elements. La diferencia entre ambos es que los elementos en bloque siempre ocupan todo el espacio del bloque, hasta el final de la línea, mientras que los elementos en línea solamente ocupan el espacio que tienen determinado. La gran mayoría de los elementos en bloque pueden contener en su interior elementos en línea, pero no así al contrario. Así, yo puedo tener un <em> dentro de un <p>, pero no viceversa.
Pasamos entonces a enumerar y describir las etiquetas más importantes de un documento HTML:
- <html>: esta etiqueta es la encargada de marcar el comienzo y el final del documento.
- <head>: está encargada de delimitar el encabezado. Aquí encontraremos información sobre la página que es importante para el navegador y para el funcionamiento de la página, pero invisible para el usuario.
- <title>: se incluye dentro del encabezado y es la encargada de titular la página. Nosotros podremos ver el nombre en la pestaña del navegador.
- <body>: marca el comienzo del documento y del contenido que podrá ver el usuario. Dentro de la etiqueta del cuerpo se encuentran todas las etiquetas que marcan la estructura y el formato de la página.
- <p>: etiqueta de párrafo. Esta etiqueta marca el comienzo y el final de un párrafo. Podemos hacer un texto continuo de varios párrafos sin usarla y veremos que el navegador no diferencia donde comienza uno y termina el otro. Esta etiqueta tiene varios atributos de formato que se pueden aplicar, como veremos más adelante.
- <h1>, <h2>, etc: son las etiquetas de los encabezados. A no confundir con la etiqueta <head>, estas etiquetas están contenidas dentro del cuerpo y sirven para crear títulos y subtítulos. A través de CSS se les puede dar atributos diferenciados.
- <table>: sirve para crear tablas dentro del documento. En los comienzos de internet, para poder darle un formato más atractivo a las páginas, se solía usar tablas HTML para crear las estructuras. Esto por supuesto le daba un peso impresionante a las páginas y era muy desprolijo, afortunadamente en el presente nos manejamos con DIV, aunque no corresponde a este curso. Las tablas, sorprendentemente, se siguen usando para crear páginas web, aunque no es recomendable.
- <form>: es la etiqueta que marca la creación de un formulario. Ahora bien, hay muchas formas de crear formularios online, y si estamos recién comenzando con HTML solamente se debería usar para practicar y nada más. Esta etiqueta tiene muchas etiquetas propias como <input> que permiten al usuario completar campos.
- <iframe>: con esta etiqueta podemos insertar páginas web completas dentro de otras páginas web. Puede servir para crear galerías de imágenes, entre otras cosas. Hoy en día su implementación máxima es en las pestañas de Facebook, con una versión mucho más moderna pero con el mismo espíritu.
- <a>: esta es la etiqueta de los vínculos. Se puede enlazar a documentos HTML externos o a diferentes partes del mismo documento a través de anclas. Por ejemplo, el menú de cada artículo de Wikipedia, cuando es muy extenso, se maneja con anclas. Cada vez que hacemos clic en uno de estos títulos el ancla nos llevará a la parte del documento a la que queremos ir.
Estas no son las únicas etiquetas HTML disponibles para un documento. A medida que vamos avanzando, vamos necesitando más etiquetas. Pero cuantas más sumamos, como por ejemplo en el caso de las tablas, más pesado será el documento y más tardará el navegador en abrirlo. La idea es hacer un sitio liviano y evitar el uso gratuito de etiquetas.
Atributos
Finalizaremos nuestra entrega de hoy con los atributos de las etiquetas. Ya se pueden ir imaginando por el nombre de qué se trata. Lo que hacen los atributos es darle al navegador información adicional sobre la etiqueta para que sea leída correctamente y nuestra página sea más completa. Los atributos son una forma de personalizar las etiquetas HTML.
Cada etiqueta HTML tiene una lista de atributos que puede ser usado. Generalmente se repiten de etiqueta a etiqueta pero algunos atributos no funcionarán en determinadas etiquetas. Los atributos que sirven para todas las etiquetas se denominan atributos comunes y en poco tiempo los tendremos memorizados. A su vez, estos atributos comunes se dividen en core, internationalization y scripting. En HTML Help pueden encontrar una lista completa con todos los atributos de este tipo.
Ahora bien, hoy en día los atributos más usados son id y class. El atributo id nos ayuda a crear un identificador único de la etiqueta, que la diferenciará del resto del documento. Con el atributo class estamos generando una clase de etiquetas, que se diferenciará del resto. La diferencia fundamental entre class y id es que varias etiquetas pueden tener la misma clase, pero el id será único de una etiqueta en particular.
¿Por qué son los más populares? Pues bien, son los más usados en CSS y en JavaScript. A través de id y class podemos crear diferentes reglas de CSS para crear formatos. Y debido a la existencia de estos dos atributos, los atributos que se solían aplicar a las etiquetas <body> o <p> ya no se usan más. Por ejemplo, si antes queríamos cambiar la tipografía de un único párrafo en todo el documento, teníamos que usar la etiqueta <font> dentro de <p> para poder hacerlo, y sumar varios atributos. Con CSS podemos crear en el HTML un id para el párrafo particular que queremos modificar, y nos estaremos ahorrando buenas líneas de código además de peso en el documento.
