6.4. Elementos básicos

Incluimos dentro de esta macrocategoría aquellos elementos de más simple uso que nos permiten escribir documentos HTML muy sencillos de texto puro, esto es, documentos que no incrustan imágenes u otros elementos multimedia.

Advertencia

La presentación de los elementos bajo este epígrafe y los siguientes y los ya vistos al tratar la cabecera es algo vaga, y no incluye exactamente cuál es el contenido admisible o cuáles pueden ser sus elementos padre. Hay para cada cual, no obstante, un enlace a su descripción en la página para desarrolladores del proyecto Mozilla, donde la información es más exhaustiva.

6.4.1. Encabezados

HTML dispone de una serie de etiquetas para definir títulos o encabezados:

<h1>	Encabezado de nivel superior
<h2>	Encabezado de segundo nivel
<h3>	Encabezado de tercer nivel
<h4>	Encabezado de cuarto nivel
<h5>	Encabezado de quinto nivel
<h6>	Encabezado de sexto nivel

h1, h2, h3, h4, h5, h6 (h1)

Permiten establecer los títulos del documento en orden decreciente de importancia. Es habitual conjugar estos elementos con el uso de los elementos semánticos de estructura, aunque por ahora podemos limitarnos a usarlos según la importancia que tenga el título:

<h1>Título de la página</h1>
<h2>Introducción</h2>
<p>Bla, bla, bla...</p>
<h2>Primeros pasos</h2>
<p>Bla, bla, bla...</p>

Son elementos de bloque que pueden contener elementos en línea.

Nota

Lo lógico es que en una página sólo exista un encabezado de primer nivel (<h1>) que, dependiendo de cómo hayamos creado la página estará en el <header> de la página o dentro del contenido en sí. Para más información échele un ojo al tutorial del W3C sobre encabezados.

6.4.2. Elementos de párrafo

Incluimos bajo este epígrafe los elementos de bloque que permiten crear párrafos o estructuras análogas:

<p>	Párrafo de texto
<pre>	Párrafo en el que se respetan espacios y saltos de línea
<blockquote>	Cita larga mostrada como texto independiente
<details>	Genera un elemento en que la información se hace visible al pinchar sobre él.
<address>	Permite especificar información de contacto

p (p)

Es el elemento en bloque apropiado para definir párrafos. Puede contener una mezcla de texto y elementos en línea, pero nunca otros elementos de bloque. Podemos prescindir de su cierre, ya que el procesador entenderá que el elemento acaba cuando comience el siguiente elemento de bloque:

<p>Esto es un párrafo bastante corto que dejamos sin cerrar.
<p>Este es un segundo párrafo, independiente del anterior, aunque aquel no
se haya cerrado, ya que un párrafo no puede contener a otro párrafo.</p>

pre (pre)

Elemento de bloque que permite escribir un texto preformateado, esto es, un texto del que el procesador respeta espacios en blanco (no se colapsan), tabulaciones, cambios de línea, etc. Al igual que el párrafo contiene texto y elementos en línea. Es muy común que se use para escribir fragmentos de código, así que suele acompañarse de <code>:

<pre><code class="javascript">
encodeImg = function(svg) {
   var type = "image/svg+xml";

   return "data:" + type + "," +
   svg.outerHTML.replace(/(:?"|'|#|\s+)/g, function(c) {
      return {
         '"': "%22",
         "'": "%27",
         "#": "%23"
      }[c] || " ";
   });
}
</code></pre>

blockquote (blockquote)

Permite incluir en el documento una cita larga que puede estar compuesta por uno o más párrafos. A diferencia de los dos elementos anteriores, es posible incluir dentro de él otros elementos de bloque:

<blockquote cite="http://www.rae.es/sites/default/files/HOJEAR_La_vida_del_Buscon.pdf">
   <p>Yo, señor, soy de Segovia. Mi padre se llamó Clemente Pablo, natural
   del mismo pueblo; Dios le tenga en el cielo. Fue, tal como todos dicen, de
   oficio barbero; aunque eran tan altos sus pensamientos, que se corría de
   que le llamasen así, diciendo que él era tundidor de mejillas y sastre de
   barbas. Dicen que era de muy buena cepa, y, según él bebía, es cosa para
   creer.
   <p>Estuvo casado con Aldonza de San Pedro, hija de Diego de San Juan y
   nieta de Andrés de San Cristóbal. Sospechábase en el pueblo que no era
   cristiana vieja, aunque ella, por los nombres y sobrenombres de sus
   pasados, quiso esforzar que era descendiente de la letanía. Tuvo muy buen
   parecer, y fue tan celebrada, que en el tiempo que ella vivió, casi todos
   los copleros de España hacían cosas sobre ella.
   <footer>
      Comienzo de la
      <cite><a
      href="https://es.wikipedia.org/wiki/La_vida_del_Busc%C3%B3n">Historia
      de la vida del buscón</a> de Francisco de Quevedo</cite>
    </footer>
</blockquote>

Atributos de blockquote

cite

url

URL de donde se obtiene el texto citado

details (details)

Sirve para ocultar detalles y que estos se hagan visibles al desplegarlos. Suele incluir un primer elemento <summary> que es lo único que se muestra cuando el elemento no está desplegado. El resto del contenido pueden ser texto, elementos de línea o elementos de bloque:

<details>
   <summary>Datos</summary>
   Extraidos del <a href="https://www.ine.es">Instituto Nacional de Estadistica</a>
</details>

Datos

Extraidos del Instituto Nacional de Estadistica.

Atributos de details

open	-	Muestra abierto los detalles.
name	token	Permite relacionar todos los elementos <details> cuyo valor de este atributo sea el mismo. Esto provoca que solamente uno del grupo pueda estar abierto.

address (address)

elemento de bloque que permite definir una información de contacto relativa a un particular o una organización:

<p>Información de contacto:

<address>
   <a href="http://www.mipagina.com">Página web personal</a><br>
   <a data-rel="external" href="mailto:elmio@pagina.com">Email: elmio@pagina.com</a><br>
   <a data-rel="external" href="tel:+34959959959">Teléfono: +34959959959</a>
</address>

6.4.3. Elementos en línea

El epígrafe está dedicado a elementos en línea que muy habitualmente se encuentran incluidos dentro de párrafos y estructuras similares.

<strong>	Marca un trozo de texto de relevancia.
<b>	Marca un texto que, sin tener especial importancia, requiere distinguirse del resto, como las palabras clave en la entradilla de un artículo.
<em>	Marca un texto que debe enfatizarse.
<i>	Marca un texto que requiere una modulación especial de la voz o que por cualquier otra razón suele escribirse en letras cursivas (título de una obra, etc.)
<u>	Marca un trozo de texto incorrecto (p.e. una palabra mal escrita).
<s>	Marca un trozo de texto inexacto o que dejó de ser válido.
<mark>	Marca un texto remarcado por alguna cuestión relevantes, como cuando se marca un texto con rotulador fosforito.
<span>	Marca de forma genérica un trozo de texto, que por alguna razón se quiere diferenciar del texto (muy probablemente para aplicarse algún estilo CSS.
<cite>	Permite referir una obra.
<q>	Representa una cita corta (frente a <blockquote> que representa una larga).
<sup>	Marca texto en superíndice.
<sub>	Marca texto en subíndice.
<small>	Marca pequeños comentarios como aquellos dedicados a definir la licencia o el copyright.
<abbr>	Marca una abreviatura o acrónimo.
<dfn>	Marca el término que se está definiendo en una sentencia.
<br>	Fuerza un cambio de línea.
<img>	Permite incrustar una imagen.
<a>	Permite hacer un hipervínculo

strong (strong)

b (b)

em (em)

i (i)

El uso de estos elementos no tiene mayor dificultad más allá de conocer exactamente cuándo deben usarse. En esta página de stellify.net discute sobre cuándo deben usarse unos u otros. Tengo presente que tanto <strong> como <b> suelen representarse con letras negritas, y tanto <em> como <i> con letras cursivas. Sin embargo, HTML5 desterró el marcado procedimental, por lo que todas estas etiquetas tienen un significado semántico.

u (u)

Permite significar que la palabra o expresión es incorrecta. Por ejemplo:

<p>Un molesto vulgarismo es el llamado <dfn id="deque">dequeismo</dfn>, que
consiste en <span role="definition" aria-labelledby="deque">incluir una
superflua preposición "de" delante de la conjunción "que" que introduce
oraciones subordinadas sustantivas: Pienso <u>de</u> que no sea en realidad
muy importante.

Un molesto vulgarismo es el llamado dequeismo, que consiste en incluir una superflua preposición "de" delante de la conjunción "que" que introduce oraciones subordinadas sustantivas: Pienso de que no sea en realidad muy importante.

Nota

El navegador, por defecto, representa esta incorrección subrayando la palabra, a pesar de que en castellano las incorrecciones se notan anteponiendo un asterisco. Para adaptarnos a las normas ortográficas del castellano podrían añadir este código CSS:

u::before { content: "*"; }
u {
   text-decoration: inherit;
   font-style: italic;
}

Ver también

En el ejemplo, se han usado atributos ARIA, que facilitan la compresión del documento a discapacitados. Puede echar un ojo a esta página al respecto.

s (s)

Dado que significa al fragmento de texto inválido, suele tener el efecto de tachar el texto:

<p>HTML, como lenguaje de marcas <s>SGML</s>, es...

HTML, como lenguaje de marcas SGML, es...

mark (mark)

Cumple la misma función que en el texto manuscrito el rotulador de color chillón: remarcar especialmente una palabra o fragmento del texto. Es muy común en los resultados de búsqueda para remarcar el término que se buscaba:

<p>Resultados para la búsqueda "HTML":
<hr>
<p><mark>HTML</mark> es un lenguaje de marcas nacido a comienzos de los 90...
<p>La sintaxis del <mark>HTML</mark> ha dejado de ser SGML...

Resultados para la búsqueda "HTML":

---

HTML es un lenguaje de marcas nacido a comienzos de los 90...

La sintaxis del HTML ha dejado de ser SGML...

span (span)

Agrupa un fragmento en línea del texto al que generalmente se le quiere asignar unas características comunes (idioma, estilos, etc). Por ejemplo:

<p>Habrá quien dude de este chascarrillo, pero <span lang="it">se non è vero,
è ben trovato</span>.

No debe usarse si se pretende notar algo para lo que ya hay un elemento específico. De hecho, el ejemplo anterior en concreto podríamos haberlo escrito:

<p>Habrá quien dude de este chascarrillo, pero <i lang="it">se non è vero,
è ben trovato</i>.

ya que suelen notarse las expresiones extranjeras de un modo distinto (cursiva) a como se escribe el resto del texto.

cite (cite)

La referencia a una obra, que exige incluir el título (o URL de la obra) y el autor:

<p><q cite="https://cvc.cervantes.es/literatura/clasicos/quijote/default.htm">En
un lugar de la Mancha...</q> arranca el primer capítulo del <cite><i>don
Quijote</i> de Miguel de Cervantes</cite>.</p>

q (q)

Es el equivalente en línea a <blockquote>. Como aquel, puede estar acompañado por un atributo cite.

sup (sup)

Permite escribir superíndices:

<p>La fórmula del <em>teorema de Pitágoras</em> es: <var>a</var><sup>2</sup>
+ <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup>.

La fórmula del teorema de Pitágoras es: a² + b² = c².

sub (sub)

Permite escribir subíndices:

<p>Es posible que si le pido H<sub>2</sub>O, así que le pediré que me
sirva agua.</p>

Es posible que si le pido H₂O, no me entienda, así que mejor le pido que me sirva agua.

small (small)

Muy comúnmente representa comentarios que incluyen el copyright o la licencia:

<p>... final del documento
<hr>
<p><small>&copy; Perico de los Palotes. Publicado bajo la <a
href="https://creativecommons.org/licenses/by/4.0/">licencia Creative
Commons</a></small>.</p>

... final del documento

---

© Perico de los Palotes. Publicado bajo la licencia Creative Commons.

abbr (abbr)

Permite notar una abreviatura o un acrónimo[1]:

<p><abbr title="HyperText Markup Language">HTML</abbr> es un lenguaje de marcas.

dfn (dfn)

Marca el término definido en una definición. Para un ejemplo de uso, consulte el ejemplo ilustrativo del uso del elemento <u>.

br (br)

Fuerza un cambio de línea. El comportamiento por defecto de HTML es colapsar los caracteres seguidos de espaciado (sean espacios, tabulaciones a cambios de línea) a un único espacio, y sólo transformar el espacio por un cambio de línea cuando se alcance la anchura del bloque contenedor, salvo dentro del elemento <pre>.

Cuando en un elemento normal se quiere forzar un cambio de línea, es preciso usar el elemento <br>:

<p>Primera línea<br>
Segunda línea</p>

Primera línea
Segunda línea

img (img)

Permite incrustar una imagen en la página HTML. Existen otros modos de incrustar imágenes que se verán más adelante.

Atributos más frecuentes para <img>

src	url	URL de donde descargar la imagen.
alt	texto	Descripción de la imagen.
height	dimension	Altura de la imagen.
width	dimension	Anchura de la imagen.

src y alt son atributos obligatorios. Si no se proporcionan dimensiones, la imagen tenderá a mostrarse en su tamaño original, y si se proprociona una de ellas, la otra adquirirá una longitud proporcional, esto es, si la anchura de la imagen es de 1200px y se fija width="600px", la anchura de la imagen pasará a ser también la mitad que la original. Lo habitual es proporcionar las dimensiones en píxeles o porcentaje sobre la dimensión original. Por tanto, para la imagen de 1200px de ancho width="600px" es equivalente a width="50%".

Advertencia

En HTML5, a diferencia de lo que ocurría en versiones anteriores, no pueden usarse porcentajes como valores de los atributos de ancho o alto. Si queremos utilizar porcentajes, deberemos recurrir a CSS.

Los navegadores suelen soportan varios tipos de imágenes: los más frecuentes son JPEG, PNG, GIF en imágenes de píxeles, y SVG en imágenes vectoriales.

Ver también

HTML5 introdujo un par de atributos más para facilitar el diseño adaptable. Más adelante se volverá a tratar este elemento.

a (a)

Es el elemento en línea que permite crear hipervínculos.

Atributos más habituales para <a>

href	url	URL del hipervínculo
download	-	Indica que el destino se debe descargar, en vez de dirigir el navegador a él
rel	texto	Tiene el mismo propósito que el atributo homónimo del elemento <link>.
target	valor	Indica dónde mostrar el destino.

El uso es bastante simple y ya se ha mostrado en ejemplo anteriores (p.e. al ilustrar el elemento <small> y enlazar con la página que contiene las cláusulas de la licencia). No obstante, es aconsejable aclarar cuáles son los valores que puede adoptar el atributo target:

_self

Carga el destino en el contexto de navegación del documento en el que se encuentra el enlace. En la mayor parte de los casos esto supone que el navegador cargue la nueva página en la misma pestaña.

_blank

Carga el destino en un nuevo contexto de navegación. Dependiendo de cómo se haya configurado el navegador esto supondrá cargar en una nueva pestaña o una nueva ventana.

_parent

Carga el destino en el contexto de navegación del documento padre. Esto tiene sentido cuando el documento se encuentra en dentro de un <iframe>, de modo que el documento padre es aquel que contiene el <iframe>. Si no es el caso, se comporta como _self.

_top

Carga el destino en el contexto de navegación del documento que es el primer ancenstro. Sólo tiene sentido cuando hay varios elementos <iframe> anidados. Si no es el caso, se comporta como _self.

6.4.4. Contenido informático

Incluimos bajo este epígrafe los elementos en línea orientados a textos de temática informática.

<kbd>	Entrada de información de usuario.
<samp>	Salida de un programa informático.
<var>	Variable (matemática o informática)
<time>	Hora y fecha legible por humanos.
<data>	Información con expresión del valor orientado a la máquina.
<code>	Fragmento de código fuente

kbd (kbd)

Marcan entradas de usuario:

<p>Para cancelar el programa basta con pulsar <kbd>Ctrl</kbd>+<kbd>T</kbd>

Para cancelar el programa basta con pulsar Ctrl+T

Nota

Para crear el efecto se ha usado el siguiente estilo:

kbd {
   font-family: Monospace;
   padding: 2px 6px;
   background: #eee;
   border: 3px solid #bbb;
   border-top-width: 1px;
   border-bottom: 3px solid #777;
}

samp (samp)

Marca un texto que representa la salida de un programa:

<p>Es posible que reciba el siguiente mensaje:</p>
<p><samp>-bash: saas: command not found</samp></p>

Es posible que reciba el siguiente mensaje:

-bash: saas: command not found

var (var)

Permite marcar texto que representa variables informáticas o matemáticas. Consulte el ejemplo dedicado a <sup>, donde se usa también este elemento.

time (time)

El elemento permite escribir una hora o fecha en formato legible por un humano, pero de modo que también pueda ser procesado por una máquina. Tiene un atributo:

Atributos para time

datetime

hora/fecha

Fecha, hora o duración en formato inteligible por la máquina.

Ejemplos:

<time datatime="2019-02-16">16 de febrero de 2019</time>
<time datatime="12:15">doce y cuarto</datetime>
<time datatime="1990-02-15T14:15">El quince de febrero de 1990 a las dos y cuarto</time>
<time datatime="P2H30M">2 horas y media</datetime>

data (data)

Se utiliza para proporcionar una versión legible por la máquina de su propio contenido. Por ejemplo:

<p>Los idiomas soportados son:</p>
<ul>
   <li><data value="en">Inglés</data></li>
   <li><data value="fr">Francés</data></li>
   <li><data value="es">Español</data></li>
   <li><data value="de">Alemán</data></li>
   <li><data value="it">Italiano</data></li>
</ul>

code (code)

Marca que su contenido es código informático:

<p>La función <code class="python">print()</code> permite imprimir mensajes en la
pantalla o, si se usa el parámetro <code class="python">file=/code> cualquier
fichero.</p>

Para códigos más largos, suele combinarse con <pre>, tal como se ilustró al tratar ese elemento. Es común que incluya un atributo class para significar el lenguaje en el que se escribe tal código. Esto es debido a que existen librerías de Javascript como highlight.js que, leyendo ese atributo, son capaces de colorear el código para hacerlo más legible.

6.4.5. Elementos de revisión

Sirven para marcar las correcciones a un documento ya publicado.

<ins>	Añade contenido con posterioridad a la fecha inicial de publicación.
<del>	Elimina contenido con posterioridad a la fecha inicial de publicación.

ins (ins)

Marca el texto añadido:

<p>Para abreviaturas y acrónimos en HTML<ins>5</ins> se usa<del>n</del> <code>abbr</code>
<del>y <code>acronym</code></del>.

Para abreviaturas y acrónimos en HTML5 se usan abbr y acronym.

del (del)

Marca el texto eliminado. Véase el ejemplo anterior.

Atributos de ins/del

cite	[url]	URL que explica el cambio
datetime	[fecha]	Fecha del cambio

6.4.6. Listas

HTML permite la generación de listas de distintos tipos.

6.4.6.1. Listas numeradas y no numeradas

Son listas de ítems antecedidos por un número (las numeradas) o por una viñeta (las no numeradas).

<ol>	Define listas numeradas
<ul>	Define listas no numeradas.
<li>	Define cada ítem en una lista numerada o no numerada

ol (ol), ul (ul)

Son elementos de bloque que declaran que se introducirán una serie de ítems que componen una lista numerada (<ol>) o no numerada (<ul>). Están constituidos exclusivamente por elementos <li>.

Tanto para uno como para otro elemento es posible añadir tres opciones:

Atributos de ol/ul

start	[num]	Define el número del primer ítem de la lista
reversed	-	Si se incluye, se numera la lista al revés
type	[1aAiI]	Tipo de numeración: números, letras minúsculas, letras mayúsculas, números romanos en minúscula, números romanos en mayúscula (sólo <ol>)

li (li)

Elemento de bloque que define cada ítem de una lista numerada o no numerada. Dentro de él se pueden incluir tanto texto como los elementos de línea descritos en el apartado anterior como otros elementos de bloque. Dentro de estos últimos, puede encontrarse otro elemento de lista, lo que permite anidarlas.

No es necesario cerrar el elemento, ya que se considera cerrado cuando se abre otro <li> o cuando acaba la lista.

Atributos de li

value

[num]

Cambia el ordinal del ítem al que se especifique como valor. Los ítems sucesivos continúan la secuencia a partir de este valor y no el que les correspondería de no haberse usado este atributo.

Por ejemplo, el código:

<ol start="2" type="i">
   <li>Primer ítem.
   <li>Segundo ítem.
   <li>Tercer ítem.
</ol>

que genera:

2. Primer ítem

3. Segundo ítem

4. Tercer ítem

Nota

Por supuesto, pueden anidarse listas. Basta con incluir elementos ol o ul dentro de alguno de los ítem (<li>).

6.4.6.2. Listas de definición

Las listas de definición consisten en una enumeración de términos de cada uno de los cuales se proporciona una definión o una descripción.

<dl>	Define una lista de definición
<dt>	Define cada término en una lista de definición
<dd>	Define cada definición o descripción de término en una lista de definicion

dl (dl)

Contiene una sucesión de parejas[2] de elementos <dt> y <dd>.

dt (dt)

Por lo general contiene elementos en línea, ya que debe incluir el término que se define, pero es posible incluir en él elementos de bloque. Lo más habitual es que sea seguido por un elemento <dd>, pero puede encontrarse dos o más elementos <dl> seguidos si todos comparten una misma definición.

dd (dd)

Contiene la descripción o definición del elemento (o los elementos) <dl> a los que sucede. Puede contener tanto elementos en línea como elementos de bloque. Lo habitual es que sólo haya una definición por término, pero pueden escribirse varias seguidas, todas referentes a él.

Un ejemplo de lista de definición es precisamente la realizada para describir estas tres etiquetas:

<dl>
   <dt>dl
   <dd>Contiene una sucesión de parejas de elementos <code>dt</code> y
   <code>dd</code>.

   <dt>dt
   <dd>Por lo general contiene elementos en línea, ya que debe incluir el
   término que se define, pero es posible incluir en él elementos de bloque.
   Lo más habitual es que sea seguido por un elemento <code>dd</code>, pero
   puede encontrarse dos o más elementos <code>dl</code> seguidos si todos
   comparten una misma definición.

   <dt>dd
   <dd>Contiene la descripción o definición del elemento (o los elementos)
   <code>dl</code> a los que sucede. Puede contener tanto elementos en línea
   como elementos de bloque.
</dl>

Nota

Es posible usar elementos <div> como hijos de <dl> para agrupar todos los elementos <dt> y <dd> que estén relacionados entre sí. Como esa es su función, el elemento <div> sólo podrá contener elementos <dt> y <dd>.

6.4.7. Contenido incontenido

Bajo este epígrafe con nombre de chanza, tratamos elementos cuyo contenido, en principio, no es visible.

<noscript>	Define contenido que sólo se añadirá a la página en caso de que el navegador tenga deshabilitado Javascript.
<template>	Define contenido que no se incluirá en la página.

noscript (noscript)

Tiene utilidad si deseamos mostrar un contenido alternativo cuando no es posible ejecutar Javascript. Por ejemplo:

<nav id="indice">
   <noscript>
      Índice automáticamente generado con Javascript. Habilítelo o cambie de navegador.
   </noscript>
</nav>

template (template)

El contenido de este elemento no forma parte de la página, pero sirve como plantilla para crear contenido dinámico con Javascript. Por ejemplo, supongamos que la página albergará una tabla cuyas filas se irán creando con una serie de datos obtenidos dinámicamente (p.e. a través de una petición AJAX que devuelve un objeto JSON). En este caso, de la tabla sólo podremos escribir el encabezado, pero ninguna fila de datos. Lo que sí podemos hacer es crear la plantilla de cómo serán esas filas para que el script la tome como base para generarlas:

<template id="fila_def">
   <tr>
      <td class="termino"></td>
      <td></td>
   </tr>
</template>

6.4.8. Ejercicios propuestos

1. Con lo aprendido hasta ahora, escriba en HTML el siguiente texto usando los elementos semánticos adecuados. No es necesario aún que estructure semánticamente el documento tal como se expone en Estructura semántica.

   Tenga presente que hemos usado algunas marcas para dar indicaciones:

   • Los encabezados están subrayados según su orden jerárquico.

   • **, significa que el texto tiene especial relevancia.

   • *, significa que el texto debe enfatizarse.

   • El texto entre corchetes ([]) son aclaraciones y no forman parte del contenido, así que no la traslade a su solución.

   HTML
   ****
   
   HTML[1], siglas en inglés de HyperText Markup Language[2]
   (lenguaje de marcado de hipertexto), hace referencia al
   **lenguaje de marcado** para la elaboración de páginas web[3]. Es un estándar que
   sirve de referencia del software[4] que conecta con la elaboración de páginas
   web[4] en sus diferentes versiones, define una estructura básica y un código
   (denominado código HTML) para la definición de contenido de una página
   web[4], como texto, imágenes, videos, juegos, entre otros. Es un estándar a
   cargo del World Wide Web Consortium[5] (W3C[1]) o Consorcio WWW[1], organización
   dedicada a la estandarización de casi todas las tecnologías ligadas a la
   web[4], sobre todo en lo referente a su escritura e interpretación. HTML[1] se
   considera el lenguaje web más importante siendo su invención crucial en la
   aparición, desarrollo y expansión de la World Wide Web[6] (WWW[1]). Es el
   estándar que se ha impuesto en la visualización de páginas web[4] y es el que
   todos los navegadores actuales han adoptado.
   
   [Insertar aquí una imagen con el logo de HTML5]
   
   Primeras especificaciones de HTML
   =================================
   Tim Berners-Lee[7] en 1991 18 elementos que incluyen el diseño inicial y
   relativamente simple de HTML[1]. Trece de estos elementos todavía existen
   en HTML[1] 4.
   
   [Los dos próximo párrafos son una cita de "A short history of the Web"
   que se encuentra en https://home.cern/science/computing/birth-web/short-history-web]
   Tim Berners-Lee wrote the first proposal for the World Wide Web in March
   1989 and his second proposal in May 1990. Together with Belgian systems
   engineer Robert Cailliau, this was formalised as a management proposal in
   November 1990. This outlined the principal concepts and it defined
   important terms behind the Web. The document described a "hypertext
   project" called "WorldWideWeb" in which a "web" of "hypertext documents"
   could be viewed by “browsers”.
   
   By the end of 1990, Tim Berners-Lee had the
   first Web server and browser up and running at CERN, demonstrating his
   ideas. He developed the code for his Web server on a NeXT computer. To
   prevent it being accidentally switched off, the computer had a
   hand-written label in red ink: "This machine is a server. DO NOT POWER IT
   DOWN!!"
   
   Marcador HTML
   =============
   El HTML[1] se escribe en forma de «etiquetas», rodeadas por corchetes
   angulares. El HTML[1] también puede describir, hasta un cierto punto,
   la apariencia de un documento, y puede incluir o hacer referencia a un
   tipo de programa llamado script[4], el cual puede afectar el comportamiento
   de navegadores web[4] y otros procesadores de HTML[1].
   
   Elementos
   ---------
   Los elementos son la estructura básica de HTML[1]. Los elementos tienen dos
   propiedades básicas: *atributos* y *contenido*. Cada atributo y contenido
   tiene ciertas restricciones para que se considere válido al documento
   HTML[1]. Un elemento generalmente tiene una etiqueta de inicio (por ejemplo,
   <nombre-de-elemento>[8]) y una etiqueta de cierre (por ejemplo,
   </nombre-de-elemento>[8]). Los atributos del elemento están contenidos en la
   etiqueta de inicio y el contenido está ubicado entre las dos etiquetas
   (por ejemplo, <nombre-de-elemento
   atributo="valor">Contenido</nombre-de-elemento>[8]). Algunos elementos, tales
   como <br>[8], no tienen contenido ni llevan una etiqueta de cierre. Debajo se
   listan varios tipos de elementos de marcado usados en HTML[1].
   
   Atributos
   ---------
   En su mayoría los atributos de un elemento son **pares nombre-valor**,
   separados por un signo de igual (=) y escritos en la etiqueta de comienzo
   de un elemento, después del nombre del elemento. El valor puede estar
   rodeado por comillas dobles o simples, aunque ciertos tipos de valores
   pueden estar sin comillas en HTML[1] (pero no en XHTML[1]). De
   todas maneras, dejar los valores sin comillas es considerado poco
   seguro. En contraste con los pares nombre-elemento, hay algunos
   atributos que afectan al elemento simplemente por su presencia
   

   [1] abreviatura

   [2] expresión en inglés

   [3] «páginas web» es un enlace a Página web.

   [4] extranjerismo (o sea, palabra de uso común, pero extranjera).

   [5] «World Wibe Web Consortium» es un enlace a W3C.

   [6] «World Wide Web» es un enlace a WWW.

   [7] «Tim Berners-Lee» es un enlace a Tim Berners-Lee.

   [8] Código

Notas al pie

[1]

Para definir acrónimos había en HTML4 un elemento ya desechado llamado <acronym>.

[2]

Esto no es cierto del todo, ya que puede haber varios elementos dl consecutivos. Se tratará a continuación.