Página en desarrollo
Última edición: 20/05/2021
Un documento HTML se construye indicando los elementos que lo componen. Cada elemento se expresa entre etiquetas que delimitan el inicio y el final de su contenido, y también definen sus atributos.
Por ejemplo, la etiqueta <p> permite <p>Crear párrafos de texto.</p>.
Un elemento puede contener otros elementos, siempre que sean válidos en su modelo de contenido. Pero también existen elementos vacíos (void elements) que no pueden contener texto ni otros elementos anidados. Como <img/>, <iframe/> o <br/>.
Los elementos vacíos se distinguen en esta guía por la barra diagonal al final de la etiqueta según las reglas de formato XHTML. Sin embargo, en HTML la barra es opcional y puede omitirse, tal y como se ha hecho en los ejemplos.
A continuación se enumeran las etiquetas actualmente válidas en HTML5 con sus atributos principales y ejemplos de uso.
BÁSICAS
<!DOCTYPE>
Declaración inicial en cualquier documento HTML
No es una etiqueta HTML. Indica al navegador qué tipo de documento va a recibir. En HTML5 sólo requiere:
<!DOCTYPE HTML><!--…-->
Incluye un comentario en el código
Los comentarios no se muestran en el navegador:
<!-- Esto es un comentario en el código que no se visualiza -->
<p>Esto es un párrafo.</p>También se usan para «ocultar» los scripts en navegadores que no los soporten, y evitar que los muestre como texto plano:
<script type="text/javascript">
<!--
function mostrarSaludo() {
alert("¡Hola Mundo!");
}
//-->
</script>
Nota: Las barras // finales indican un comentario JavaScript para evitar que se ejecute la etiqueta -->.
<HTML>
Raíz del documento
El resto de elementos descienden de éste (excepto <!DOCTYPE>).
Soporta los atributos globales. Se recomienda lang para ayudar a motores de búsqueda y navegadores a identificar el idioma de la página web.
Admite un elemento <head> seguido de un elemento <body>:
<!DOCTYPE HTML>
<HTML lang="es">
<head>
<!-- Metadatos del documento -->
</head>
<body>
<!-- Cuerpo del documento -->
</body>
</HTML>
METADATA
<head>
Contenedor de metadatos del documento
Va dentro de <HTML>, antes de la etiqueta <body>.
Soporta los atributos globales.
Requiere el título en un elemento <title>. Y puede incluir <base />, <meta />, <style>, <link />, <script>, <noscript>.
<head>
<title>Aquí va el título del documento<title>
<base href="http://www.ejemplo.com/documento.HTML">
<meta http-equiv="Content-Type" content="text/HTML; charset=UTF-8">
<style type="text/CSS">
p {
color: red;
}
</style>
<link href="estilos.CSS" rel="stylesheet">
<script type="text/javascript">
<!--
function mostrarSaludo() {
alert("¡Hola Mundo!");
}
//-->
</script>
<noscript>Tu navegador no soporta JavaScript</noscript>
</head>
<title>
Título del documento
Es obligatorio en todos los documentos HTML, dentro de <head>.
Debe ser sólo texto y se mostrará en la barra de título de la ventana del navegador o en la pestaña de la página.
Soporta los atributos globales.
<head>
<title>Un buen título siempre es importante<title>
</head>
Puede tener implicaciones en SEO al ser uno de los elementos que usan los algoritmos de los motores de búsqueda para decidir el orden en el que se muestran las páginas. En general, un título descriptivo más largo funciona mejor que los títulos breves o genéricos. Y es el «gancho» inicial para atraer la atención de los lectores que miran los resultados de búsqueda.
<base/>
URL base para las URL relativas del documento
Sólo puede haber un elemento <base>, dentro de <head>. Debe estar antes de cualquier otro elemento que incluya una dirección URL relativa.
Además de los atributos globales soporta al menos uno de los siguientes:
href, URL base para las URL relativas del documento.target, contexto de navegación predeterminado para hipervínculos y formularios del documento:_self(por defecto) cargará el resultado en el contexto actual._blankcargará en un nuevo contexto de navegación._parentcargará en el contexto padre del actual. Si no existe funcionará igual que_self._topcargará en el contexto de más alto nivel (ancestro del actual y sin padre). Si no existe funcionará igual que_self.
<meta/>
Aporta información sobre el documento
Incluir en <head> para indicar el conjunto de caracteres, la descripción y palabras clave de la página, el autor, o la configuración gráfica para la ventana.
Además de los atributos globales soporta los atributos:
charset, especifica el conjunto de caracteres del documento.name, nombre para la metainformación. Ejemplos:application-name,author,copyright,description,generator,keywordsoviewport.http-equiv, proporciona un encabezado HTTP para el valor del atributocontent. Por ejemplo:content-security-policy,content-type,default-styleorefresh.content, el valor asociado anameohttp-equiv.
<style>
...
…
<link/>
...
…
ESTRUCTURA
<body>
...
…
<main>
...
…
<section>
...
…
...
…
<article>
...
…
<aside>
...
…
<header>
...
…
...
…
CONTENIDO
<h1> … <h6>
...
…
<p>
...
…
<a>
Añade un hiperenlace.
…
<br/>
...
…
<wbr/>
...
…
<hr/>
...
…
<div>
...
…
<span>
...
…
<data>
...
…
<details>
...
…
<summary>
...
…
<progress>
...
…
<template>
...
…
<iframe/>
...
…
INCRUSTAR
<img/>
...
…
<figure>
...
…
<figcaption>
...
…
<audio>
...
…
<picture>
...
…
<video>
...
…
<source>
...
…
<track>
...
…
<embed>
...
…
<map>
...
…
<area/>
...
…
<canvas>
...
…
LISTAS
<ul>
...
…
<ol>
...
…
<li>
...
…
<dl>
...
…
<dt>
...
…
<dd>
...
…
FORMATO
<abbr>
...
…
<address>
...
…
<b>
...
…
<bdi>
...
…
<bdo>
...
…
<blockquote>
...
…
<cite>
...
…
<code>
...
…
<del>
...
…
<dfn>
...
…
<em>
...
…
<i>
...
…
<ins>
...
…
<kbd>
...
…
<mark>
...
…
<meter>
...
…
<pre>
...
…
<q>
...
…
<s>
...
…
<samp>
...
…
<small>
...
…
<strong>
...
…
<sub>
...
…
<sup>
...
…
<time>
...
…
<u>
...
…
<var>
...
…
FORM’s
<form>
...
…
<input/>
...
…
<textarea>
...
…
...
…
<select>
...
…
<optgroup>
...
…
<option>
...
…
<label>
...
…
<fieldset>
...
…
<legend>
...
…
<datalist>
...
…
<output>
...
…
TABLAS
<table>
...
…
<caption>
...
…
<th>
...
…
<tr>
...
…
<td>
...
…
<thead>
...
…
<tbody>
...
…
<tfoot>
...
…
<col/>
...
…
<colgroup>
...
…
CÓDIGO
<script>
...
…
<noscript>
...
…
<object>
...
…
<param/>
...
…
NO USAR
<acronym> |
… | ||
<applet> |
… | ||
<basefont/> |
… | ||
<bgsound/> |
… | ||
<big> |
… | ||
<blink> |
… | ||
<center> |
… | ||
<dialog> |
… | ||
<dir> |
… | ||
<font> |
… | ||
<frame/> |
… | ||
<frameset> |
… | ||
<hgroup> |
… | ||
<isindex/> |
… | ||
<listing> |
… | ||
<marquee> |
… | ||
<menu> |
… | ||
<nobr> |
… | ||
<noframes> |
… | ||
<plaintext> |
… | ||
<spacer> |
… | ||
<strike> |
… | ||
<tt> |
… | ||
<xmp> |
… |
