Esqueleto de documento HTML
Un documento HTML consiste en un «árbol»de etiquetas. Aquí tienen el conjunto mínimo de etiquetas que sirve como base para cualquier documento HTML, como base para el hogar.
<!DOCTYPE html>
<html lang="es">
<head>
<!-- La información interna -->
</head>
<body>
<!-- Contenido -->
</body>
</html>
Declaración de tipo de documento
<!DOCTYPE > - No es una etiqueta, sino una instrucción de declaración de tipo
de documento obligatoria. Es necesario para indicar al navegador en qué versión
de HTML está escrito el documento.
Por DOCTYPE el navegador determina la versión HTML y muestra la página correctamente. La declaración de tipo de documento debe ser lo primero que ve el navegador durante el procesamiento del documento HTML.
<!-- Señala que el documento está escrito según la especificación HTML Living Standard -->
<!DOCTYPE html>
HTML tenía versiones la última es HTML5. Hoy día HTML Living Standard es una especificación única del lenguaje HTML la que no tiene versiones, simplemente se actualiza. Si se habla de HTML5, es lo mismo que «HTML moderno» o HTML Living Standard lo único, es que se escribe más corto.
Elementos de nivel superior
Están destinados a formar la estructura principal de una página web y definen las secciones del encabezado y el cuerpo del documento.
La etiqueta <html>
El elemento raíz del documento es como un contenedor que tiene todo el contenido de la página. Todo lo que está fuera de él no es percibido por el navegador como código HTML y no se procesa.
<!DOCTYPE html>
<html lang="es"></html>
El atributo lang indica en qué idioma está escrito el texto de la página. Es
necesario para las tecnologías de asistencia, como Screenreaders, etc.
La etiqueta <head>
Sirve para guardar la información interna sobre la página: título, descripción, codificación, etc. Toda esta información no aparece en la ventana del navegador, pero contiene datos que indican al navegador cómo manejar la página.
<!DOCTYPE html>
<html lang="es">
<head>
<!-- La información interna -->
</head>
</html>
La etiqueta <body>
Contiene el contenido de una página web futura. El contenido que se mostrará en la página debe estar ubicado dentro de esta etiqueta.
<!DOCTYPE html>
<html lang="es">
<head>
<!-- La información interna -->
</head>
<body>
<!-- Contenido -->
</body>
</html>
Las etiquetas de título del documento
Es un grupo de etiquetas de servicio que se encuentran en el encabezado del documento. La mayoría de ellos no se muestran directamente en la ventana del navegador.
El título de la página
El texto colocado dentro de la etiqueta <title> se muestra en la pestaña del
navegador. La longitud del encabezado no debe ser más de 60 caracteres para que
quepa completamente en el encabezado. El texto del encabezado debe contener una
breve descripción del contenido de la página web.
<!DOCTYPE html>
<html lang="es">
<head>
<title>¡HTML5 es fácil!</title>
</head>
<body>
<!-- Contenido -->
</body>
</html>
Metadatos
La etiqueta <meta> se usa para almacenar información destinada al navegador y
los motores de búsqueda para establecer la codificación del documento,
transmitir información a los motores de búsqueda y más. Puede haber varias
etiquetas meta porque llevan la información diferente dependiendo de los
atributos utilizados Debe especificar la codificación de la página para que el
navegador muestre correctamente el texto. Si no lo hace o si especifica una
codificación incorrecta, el navegador puede mostrar jeroglíficos en lugar de
caracteres.
<!DOCTYPE html>
<html lang="es">
<head>
<!-- utf-8 - la codificación más común -->
<meta charset="utf-8" />
<title>¡HTML5 es fácil!</title>
</head>
<body>
<!-- contenido -->
</body>
</html>
Una breve descripción del contenido ayuda a los motores de búsqueda a indexar mejor la página.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta
name="description"
content="El estudio de los conceptos básicos de HTML5 para principiantes"
/>
<title>¡HTML5 es fácil!</title>
</head>
<body>
<!-- contenido -->
</body>
</html>
Las etiquetas especiales que Google entiende
Flujo de documento
Flujo es el orden vertical y horizontal de visualización de los elementos en una página. Verticalmente, el flujo va de arriba a abajo y, de forma predeterminada, los elementos se muestran en la página en el orden en que se especifican en el documento HTML. Horizontalmente, el flujo va de izquierda a derecha (o de derecha a izquierda, para los países del este).
Todos los elementos, sin excepción, son áreas rectangulares que ocupan un lugar específico en así llamadas "líneas", como las palabras de una oración en una hoja en regla. Hay dos tipos principales de elementos: en bloque y en línea.
<!-- El párrafo es el elemento en bloque -->
<p>Elemento en bloque 1</p>
<p>Elemento en bloque 2</p>
<p>Elemento en bloque 3</p>
<!-- El enlace es un elemento en línea -->
<a href="">Elemento en línea 1</a>
<a href="">Elemento en línea 2</a>
<a href="">Elemento en línea 3</a>
El elemento en bloque (block-level element) - ocupa toda la línea, es independiente del volumen de su contenido por eso varios elementos en bloque van visualmente de arriba a abajo uno tras otro.
El elemento en línea (inline element) - ocupa espacio de acuerdo con el volumen de su contenido, por lo que varios elementos en línea pueden colocarse en la misma fila. Cuando una fila no tiene el espacio suficiente para acomodar un elemento de línea, se transfiere a una nueva fila.
Con el flujo de documento, elemento en bloque, elemento en línea así como con elementos flex nos familiarizaremos detalladamente en las clases siguientes.