Tutorial de HTML
Las etiquetas HTML son elementos utilizados para estructurar y dar formato al contenido de una página web. Cada etiqueta HTML comienza con un signo de menor que (<) seguido del nombre de la etiqueta y termina con un signo de mayor que (>). Algunas etiquetas tienen contenido que se encuentra entre las etiquetas de apertura y cierre, mientras que otras no lo tienen.
<!DOCTYPE>
es una declaración especial al inicio de un documento HTML, no es técnicamente una etiqueta HTML ya que no tiene un cierre correspondiente. Es una instrucción que indica al navegador la versión de HTML que se está utilizando y cómo debe interpretar el código HTML que sigue.
<!--
y -->
no son propiamente etiquetas HTML, son delimitadores de comentario. Se utilizan para agregar comentarios en el código HTML y no tienen un contenido específico ni atributos.
Etiquetas estructurales
<html>
: Define el inicio y el final de un documento HTML.<head>
: Contiene información de encabezado del documento, como títulos y enlaces a estilos y scripts.<title>
: Define el título del documento que se muestra en la pestaña del navegador.<body>
: Contiene todo el contenido visible del documento, como texto, imágenes y enlaces.<article>
: Define un artículo independiente en una página.<section>
: Define una sección de contenido dentro de un documento.<nav>
: Define un conjunto de enlaces de navegación.<header>
: Define la parte superior de un documento o sección.<footer>
: Define la parte inferior de un documento o sección.<aside>
: Define contenido que está relacionado pero no es parte del flujo principal del contenido.<main>
: Define el contenido principal de un documento.<div>
: Define una sección genérica de contenido.
Etiquetas de meta y enlace
<meta>
: etiqueta para agregar metadatos al documento HTML, como descripciones, palabras clave y autoría<title>
: etiqueta para definir el título del documento HTML, que se muestra en la pestaña del navegador y en los resultados de búsqueda<link>
: etiqueta para enlazar a otros recursos, como hojas de estilo, iconos y archivos JavaScript<style>
: etiqueta para agregar estilos CSS al documento HTML<script>
: etiqueta para agregar scripts JavaScript al documento HTML<noscript>
: etiqueta que proporciona contenido alternativo para los usuarios que tienen JavaScript desactivado en su navegador<base>
: etiqueta para especificar la URL base para todas las URL relativas en el documento HTML
Etiquetas de texto
<h1>
a<h6>
: etiquetas de encabezado que indican los niveles de encabezado (1 es el más importante y 6 es el menos importante)<p>
: etiqueta de párrafo para el contenido de texto normal<strong>
: etiqueta para hacer que el texto se muestre en negrita<em>
: etiqueta para hacer que el texto se muestre en cursiva<u>
: etiqueta para subrayar el texto<strike>
: etiqueta para hacer que el texto se muestre tachado<sup>
: etiqueta para hacer que el texto se muestre en una posición superior<sub>
: etiqueta para hacer que el texto se muestre en una posición inferior<abbr>
: etiqueta para definir una abreviatura<cite>
: etiqueta para citar una referencia a una obra o publicación<code>
: etiqueta para mostrar código de programación<pre>
: etiqueta para mostrar texto preformateado con espacios y saltos de línea originales<blockquote>
: etiqueta para citas o textos destacados
Etiquetas de lista
<ul>
: etiqueta para crear una lista desordenada, que se muestra con viñetas<ol>
: etiqueta para crear una lista ordenada, que se muestra con números<li>
: etiqueta para cada elemento de una lista (<li>
significa "list item")<dl>
: etiqueta para crear una lista de definición<dt>
: etiqueta para definir un término en una lista de definición (<dt>
significa "definition term")<dd>
: etiqueta para definir la definición de un término en una lista de definición (<dd>
significa "definition description")
Etiquetas de imagen y multimedia
<img>
: etiqueta para insertar imágenes en un documento HTML<audio>
: etiqueta para insertar audio en un documento HTML<video>
: etiqueta para insertar video en un documento HTML<source>
: etiqueta para especificar una fuente de multimedia para la etiqueta<audio>
o<video>
<track>
: etiqueta para especificar pistas de texto, como subtítulos, para la etiqueta<video>
<map>
: etiqueta para crear mapas de imagen, que permiten hacer clic en diferentes partes de una imagen para enlazar a diferentes páginas o recursos<area>
: etiqueta para definir una zona de un mapa de imagen, que se puede hacer clic para enlazar a diferentes páginas o recursos<figure>
: etiqueta para agrupar imágenes u otros elementos multimedia con su correspondiente leyenda o título (<figcaption>
)
Etiquetas de tabla
<table>
: etiqueta para crear una tabla en un documento HTML<tr>
: etiqueta para definir una fila en una tabla (<tr>
significa "table row")<th>
: etiqueta para definir una celda de encabezado en una tabla (<th>
significa "table header")<td>
: etiqueta para definir una celda en una tabla (<td>
significa "table data")<thead>
: etiqueta para agrupar las celdas de encabezado de una tabla<tbody>
: etiqueta para agrupar las celdas de datos de una tabla<tfoot>
: etiqueta para agrupar las celdas de pie de página de una tabla<colgroup>
: etiqueta para agrupar columnas en una tabla y aplicar estilos y atributos a todas las celdas en esas columnas<col>
: etiqueta para especificar una columna en una tabla, dentro de un elemento<colgroup>
<caption>
: etiqueta para agregar un título o leyenda a una tabla
Etiquetas de formulario
<form>
: etiqueta para crear un formulario en un documento HTML<input>
: etiqueta para agregar campos de entrada en un formulario, como campos de texto, botones de radio, casillas de verificación, botones de envío y más<label>
: etiqueta para etiquetar campos de entrada en un formulario y hacer que sean más accesibles para los usuarios de asistentes de pantalla<select>
: etiqueta para crear una lista desplegable o cuadro de selección en un formulario<option>
: etiqueta para agregar opciones en una lista desplegable o cuadro de selección<textarea>
: etiqueta para crear un área de texto grande para que los usuarios ingresen texto en un formulario<button>
: etiqueta para crear botones en un formulario, que se pueden usar para enviar el formulario o realizar otras acciones<fieldset>
: etiqueta para agrupar campos de formulario relacionados juntos y agregar un borde alrededor de ellos<legend>
: etiqueta para agregar un título a un grupo de campos de formulario agrupados con una etiqueta de campo (<fieldset>
)