Ediciones ENI Editorial | líder en informática
El documento HTML
Objetivos
En este capítulo, comenzaremos por familiarizarnos con la sintaxis HTML, con los elementos y los atributos de las etiquetas. Esta sintaxis es común a todos los componentes de las páginas web.
A continuación, se tratarán los elementos HTML que permiten construir las páginas web. Estos elementos deben estar presentes en todas las páginas de los sitios web con el fin de que sean válidas y puedan interpretarlas todos los navegadores.
Los elementos HTML
El lenguaje HTML se escribe utilizando elementos HTML compuestos por tres partes constituyentes: la etiqueta de apertura, el contenido y la etiqueta de cierre.
La etiqueta de apertura comienza con el carácter <, seguido inmediatamente por el nombre del elemento, y termina con el carácter >. Por ejemplo, el elemento que permite insertar un párrafo de texto se denomina p y la sintaxis de su etiqueta de apertura es la siguiente: <p>.
La segunda parte corresponde al contenido textual. Se trata de elementos HTML que contienen texto, como títulos, párrafos, citas... A continuación, el texto se escribe de la forma habitual, sin ningún formato.
La mayoría de los elementos HTML tienen una etiqueta de cierre. Su sintaxis utiliza el mismo principio de la etiqueta de apertura, pero con la adición del carácter/ que precede al nombre del elemento. Este carácter indica el final del elemento. Siguiendo con el ejemplo del párrafo, la etiqueta de cierre es: </p>.
He aquí un ejemplo completo de un elemento HTML que inserta un párrafo:
<p>El texto de mi párrafo.</p> Este conjunto de tres partes se denomina elemento HTML. Y puede decirse que se está utilizando la etiqueta <p>.
Es importante señalar que algunos elementos HTML que no tienen contenido textual ni otros elementos anidados no incluyen, lógicamente, una etiqueta...
Los atributos de las etiquetas
Los atributos permiten modificar el comportamiento estándar de las etiquetas HTML. Una etiqueta HTML puede no tener ningún atributo, tener uno solo o, en algunos casos, varios. Algunos atributos son obligatorios, mientras que otros son opcionales. La mayoría de los atributos tienen valores, aunque no todos. Los atributos que no requieren valor se denominan booleanos. En todos los casos, los atributos se colocan dentro de la etiqueta de apertura de los elementos.
Conviene señalar que cada etiqueta HTML puede tener atributos específicos para ella. Sin embargo, existe un gran número de atributos globales (global attributes en inglés), que pueden aplicarse a cualquier etiqueta HTML. En esta URL puede encontrar una lista de estos atributos universales: https://developer.mozilla.org/es/docs/Web/HTML/Reference/Global_attributes
He aquí algunos atributos de uso común:
-
accesskey: indica la tecla que permite acceder a un elemento de la interfaz, sin necesidad de utilizar el ratón. Ejemplo: accesskey="A".
-
class: especifica el nombre de la clase CSS que se aplicará al elemento. Ejemplo: class="titulo-intro".
-
dir: indica la dirección de escritura, de izquierda a derecha o de derecha a izquierda. Ejemplo: dir="ltr", para Left To Right.
-
Hidden: booleano que indica si el elemento está oculto o no. Ejemplo: hidden, la sola presencia de este atributo...
La declaración del tipo de documento
Todas las páginas web deben comenzar con una declaración del tipo de documento para indicar qué lenguaje se está utilizando. De hecho, es importante saber que HTML es una aplicación de un lenguaje de nivel superior llamado SGML (Standard Generalized Markup Language, https://es.wikipedia.org/wiki/SGML). SGML se utiliza para crear lenguajes basados en etiquetas, como HTML.
Por este motivo, la primera línea de una página web debe mostrar esta declaración de tipo de documento: <!doctype html>. Cabe señalar que esta declaración de tipo de documento no es un elemento HTML.
El elemento <html>
El elemento <html> es el elemento raíz de las páginas HTML. La etiqueta de apertura, <html>, sigue inmediatamente a la declaración del tipo de documento y la etiqueta de cierre, </html>, marca el final de la página.
Entre los atributos globales, el atributo lang no es obligatorio, pero se recomienda encarecidamente usarlo. Este atributo indica al navegador qué idioma se utiliza en la página web. También es útil para la indexación por parte de los motores de búsqueda y para los navegadores con síntesis de voz para personas con discapacidades visuales.
He aquí la sintaxis habitual:
<html lang="es"> El elemento <head>
1. Los elementos hijos del encabezado
El elemento <head> es realmente muy importante. Contiene toda una serie de elementos hijos esenciales para la página; estos elementos secundarios y sus atributos no se indican en ningún otro lugar que no sea aquí.
2. Los elementos <meta>
El elemento <meta> permite incluir varios metadatos, algunos de los cuales son importantes, como la codificación de caracteres.
Es importante indicar la codificación de los caracteres justo después de la etiqueta de apertura <head> porque esta codificación afectará a todos los demás elementos que seguirán. Actualmente, la codificación utilizada es UTF-8 (Universal Character, Set Transformation Format, en 8 bits). A continuación, se muestra la sintaxis de los metadatos de codificación de caracteres:
<meta charset="UTF-8"> Los metadatos también se utilizan para completar la información que utilizan los robots de indexación de los motores de búsqueda. He aquí algunos ejemplos:
<meta name="description" content="Descripción de mi página">
<meta name="keywords" content="sitios web, diseño, html, css, javascript">
<meta name="author" content="Christophe AUBRY">
<meta name="generator"...El elemento <body>
El elemento <body> incluirá todos los elementos de contenido de la página web. Su etiqueta de apertura, <body>, se coloca justo después de la etiqueta de cierre del encabezado </head>. Su etiqueta de cierre, </body>, se sitúa justo antes de la del cierre de documento </html>.
Los comentarios
Como en cualquier lenguaje informático, se recomienda encarecidamente comentar el código, tanto para el propio desarrollador como para otro que pudiera retomar ese código más adelante. Los comentarios pueden colocarse en cualquier parte de la página. Esta es la sintaxis de un comentario:
<!-- El texto de mi comentario --> Ejemplo de estructura de una página web
Para terminar este capítulo, he aquí un ejemplo de estructura de una página web que contiene los diversos elementos HTML presentados anteriormente:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>El título de mi página</title>
</head>
<body>
<p>El contenido de mi página.</p>
</body>
</html>