Introducción a HTML5
HTML5 es la versión más reciente de HTML, la cual introduce nuevos elementos, atributos y comportamientos, permitiendo la creación de sitios web y aplicaciones más diversas y potentes.
HTML (HyperText Markup Language) es el lenguaje estándar para la creación de páginas web.
Conceptos Básicos
- Elementos: Están identificados por marcas o etiquetas.
- Etiquetas: Se escriben en minúsculas, compuestas por un nombre rodeado de
< >. Existen etiquetas de apertura y de cierre. - Elementos vacíos (o nulos): Son etiquetas que no requieren una etiqueta de finalización, como
<br>.
Las etiquetas o elementos de HTML marcan el contenido, indicando su significado. Los navegadores no muestran las etiquetas HTML, sino que las utilizan para procesar y estructurar el contenido en forma de árbol.
Entidades de caracteres: Existen caracteres reservados en HTML que se reemplazan por entidades, las cuales comienzan con el símbolo & y terminan con ;.
Estructura y Sintaxis
<!DOCTYPE html>: Identifica el tipo de documento que va a procesar el navegador.<html>...</html>: Elemento raíz donde se encuentra todo el contenido de la página.<head>...</head>: Incluye información no visible en la representación de la página, pero que afecta a su presentación (título de la pestaña, hojas de estilos, etc.).<body>...</body>: Elemento donde reside el contenido visible de la página.
Atributos
Los atributos proporcionan información adicional sobre los elementos HTML. Reglas clave:
- Debe haber un espacio entre el atributo y el nombre del elemento.
- El nombre del atributo suele ir seguido de un signo de igual (
=). - Los valores suelen ir entre comillas.
- Los atributos booleanos no usan «true» o «false»; para representar un valor falso, el atributo simplemente se omite.
Atributos Globales
- Class: Agrupa elementos.
- Contenteditable: Indica si el contenido es editable.
- Hidden: El elemento no se representa en el navegador.
- Id: Identifica el elemento de manera única.
- Lang: Determina el idioma.
- Spellcheck: Indica si el elemento debe ser revisado ortográficamente.
- Style: Asigna estilos CSS al componente.
- Tabindex: Define el orden de selección al pulsar la tecla Tab.
- Title: Especifica información extra.
- Translate: Indica si el elemento debe ser traducido.
Clasificación de Elementos en el Body
Los elementos dentro del <body> se clasifican en:
Elementos de Bloque (Block)
Se posicionan verticalmente, uno debajo del otro, formando un nuevo salto de línea. Pueden contener otros elementos de tipo inline y block.
| Elemento | Descripción |
|---|---|
<address> | Información de contacto. |
<article> | Sección autónoma de contenido. |
<aside> | Contenido complementario. |
<blockquote> | Cita de otra fuente. |
<details> | Elemento plegable con contenido adicional. |
<dialog> | Ventana de diálogo interactiva. |
<div> | Contenedor genérico sin significado semántico. |
<dl>, <dt>, <dd> | Lista de términos y definiciones. |
<figure> / <figcaption> | Contenido multimedia y su descripción. |
<footer> | Pie de página. |
<header> | Cabecera de sección o documento. |
<hr> | Línea horizontal de separación. |
<li> | Elemento de lista (dentro de <ul> o <ol>). |
<main> | Contenido principal único. |
<nav> | Sección de navegación. |
<p> | Párrafo de texto. |
<pre> | Texto preformateado. |
<section> | Sección lógica o temática. |
<form> / <fieldset> | Formularios y agrupación de campos. |
<table> | Tablas de datos. |
Elementos de Línea (Inline)
Se posicionan uno al lado del otro en la misma línea, sin saltos de línea automáticos.
<a>: Enlace.<abbr>: Abreviatura.<b> / <strong>: Texto en negrita o énfasis fuerte.<br>: Salto de línea.<cite>: Referencia a una obra.<code>: Código fuente.<del> / <ins>: Texto eliminado o añadido.<dfn>: Definición de término.<em> / <i>: Énfasis o cursiva.<iframe>: Marco incrustado.<kbd>: Entrada de teclado.<mark>: Texto resaltado.<q>: Cita en línea.<s>: Texto tachado.<samp>: Salida de programa.<small>: Texto pequeño.<span>: Contenedor para estilos.<sub> / <sup>: Subíndice y superíndice.<time>: Fecha u hora.<var>: Variable.