Después de ver la estructura de HTML con los elementos Head, Title, Meta, y Body; ahora veamos otros elementos importantes y muy útiles al momento de crear una página web.

1. Encabezados HTML: h1 al h6

Los elementos de encabezado (Heading) están organizados en seis niveles: de h1 a h6. El tamaño del texto es mayor para <h1> (llamado etiqueta de encabezado 1/heading 1 tag) y menor para <h6> (llamada etiqueta de encabezado 6/heading 6 tag). Dependiendo de la fuente que se utilice, el texto contenido en las etiquetas <h4>, <h5>, y <h6> puede visualizarse más pequeño que el tamaño de texto predeterminado. Todo el texto contenido en las etiquetas de encabezado se muestra con peso de la fuente en negrita.

¿Por qué la etiqueta de encabezado no va en la sección head?
Hacer esto no es válido y causará problemas con la forma en que el navegador muestra la página web. Aunque “etiqueta heading” y “sección head” suenan similares, siempre codifique las etiquetas de encabezado/heading en la sección del cuerpo/body del documento de la página web
Ejemplo de encabezados HTML
Ejemplo de encabezados HTML

Para crear la página web mostrada anteriormente, ejecute el Bloc de notas u otro editor de texto. Modifica el elemento title y añada etiquetas de encabezado a la sección body como lo indica el siguiente código:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo de encabezado</title>
<meta charset="utf-8">
</head>
<body>
<h1>Encabezado Nivel 1</h1>
<h2>Encabezado Nivel 2</h2>
<h3>Encabezado Nivel 3</h3>
<h4>Encabezado Nivel 4</h4>
<h5>Encabezado Nivel 5</h5>
<h6>Encabezado Nivel 6</h6>
</body>
</html>

Las etiquetas de encabezado pueden ayudar a que tus páginas sean más accesibles. Para indicar áreas dentro de una página jerárquicamente, codifica las etiquetas de encabezado numéricamente según corresponda (h1, h2, h3, etc.) e incluya el contenido de la página en elementos de visualización de bloques como párrafos y listas.

2. Elemento de párrafo <p>

Los elementos de párrafo se utilizan para agrupar frases y secciones de texto. El texto que contienen las etiquetas <p> y <p> se muestra como un “bloque” (denominado visualización de bloques). La siguiente imagen muestra un documento de página web con un párrafo después del primer encabezado:

Ejemplo de etiqueta párrafo en HTML
Ejemplo de etiqueta párrafo en HTML

Para crear la página web mostrada anteriormente, ejecuta un editor de texto. Modifica el título de la página y añade un párrafo de texto a tu página debajo de la línea con las etiqueta <h1> y encima de la línea con las etiquetas <h2>. Utiliza el siguiente código como ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo de Párrafo</title>
<meta charset="utf-8">
</head>
<body>
<h1>Encabezado Nivel 1</h1>
<p>Esto es un ejemplo de párrafo. Las etiquetas de encabezado pueden ayudar a que tus páginas sean más accesibles y usables. Es una buena práctica de codificación utilizar etiquetas de encabezado para delinear la estructura del contenido de tu página web.
</p>
<h2>Encabezado Nivel 2</h2>
<h3>Encabezado Nivel 3</h3>
<h4>Encabezado Nivel 4</h4>
<h5>Encabezado Nivel 5</h5>
<h6>Encabezado Nivel</h6>
</body>
</html>

2.1. Alineación

Al probar tus páginas web, puede que hayas notado que los encabezados y el texto comienzan cerca del margen izquierdo. Esta colocación se denomina alineación izquierda y es la alineación predeterminada para las páginas web.

Sin embargo, hay ocasiones en las que se desea que un párrafo o encabezado esté centrado o alineado a la derecha. El atributo align puede utilizarse para este propósito. El propósito de un atributo es modificar las propiedades de un elemento HTML. En este caso, el atributo align modifica la alineación horizontal del elemento (izquierda, centro o derecha) en una página web.

  • Para centrar un elemento en una página web, utiliza el atributo align=”center”<p aling="center">..</p>
  • Para alinear a la derecha el texto dentro de un elemento, usa el atributo align=”right”<p aling="right">..</p>

En la sintaxis XHTML, el atributo align se puede utilizar con varios elementos de visualización de bloque, incluyendo las etiquetas de párrafo (<p>) y de encabezado (<h1> a <h6>). El atributo align está obsoleto en HTML5, lo que significa que aunque se puede utilizar en XHTML, el atributo se ha eliminado de la especificación HTML5 del W3C y no es válido.

En las próximas secciones aprenderás cómo configurar la alineación usando un enfoque más moderno con Hojas de Estilo en Cascada/Cascading Style Sheets (CSS).

3. Elemento salto de línea <br>

El elemento de salto de línea hace que el navegador avance a la siguiente línea antes de mostrar el siguiente elemento o porción de texto en una página web. La etiqueta de salto de línea no está codificada como un par de etiquetas de apertura y cierre. Es un elemento independiente, o de tipo void, y está codificado como <br>. La siguiente imagen muestra un documento de página web con un salto de línea después de la primera oración del párrafo:

Ejemplo salto de línea en HTML
Ejemplo salto de línea en HTML

Para crear la página web mostrada, ejecuta un editor de texto. Modifica el texto que se encuentra entre las etiquetas <p> y </p>. Prueba tu página en un navegador, y ten en cuenta que a pesar de que tu código fuente mostraba la frase “Este es un párrafo de ejemplo. Las etiquetas…” en una misma línea, el navegador no lo hizo de esa manera. Se necesita una etiqueta de salto de línea para configurar el navegador a fin de que muestre la segunda frase en una nueva línea. Edita el archivo en un editor de texto, y agrega una etiqueta <br> después de la primera oración del párrafo, como se muestra en el siguiente fragmento de código:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo de Párrafo</title>
<meta charset="utf-8">
</head>
<body>
<h1>Encabezado Nivel 1</h1>
<p>Este es un párrafo de ejemplo. <br> Las etiquetas de encabezado pueden ayudar a que tus páginas sean más accesibles y usables. Es una buena práctica de codificación utilizar etiquetas de encabezado para delinear la estructura del contenido de tu página web.
</p>
<h2>Encabezado Nivel 2</h2>
<h3>Encabezado Nivel 3</h3>
<h4>Encabezado Nivel 4</h4>
<h5>Encabezado Nivel 5</h5>
<h6>Encabezado Nivel 6</h6>
</body>
</body>
</html>

4. Elemento cita en bloque <blockquote>

Además de organizar el texto en párrafos y encabezados, a veces es necesario añadir una cita a una página web. El elemento blockquote se utiliza para mostrar un bloque de texto entrecomillado de una manera especial, con sangría tanto en el margen izquierdo como en el derecho. Un bloque de texto con sangría comienza con una etiqueta <blockquote> y termina con una etiqueta </blockquote>. La siguiente imagen muestra un documento de página web con un encabezado, un párrafo y una cita en bloque:

Ejemplo de cita en bloque HTML
Ejemplo de cita en bloque HTML

Para crear la página web mostrada anteriormente, ejecuta un editor de texto. Modifica el elemento title. Agrega una etiqueta de encabezado, una etiqueta de párrafo y una etiqueta de cita en bloque a la sección del cuerpo/body como lo indica el siguiente código:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo de cita en bloque</title>
<meta charset="utf-8">
</head>
<body>
<h1>El poder de la Web</h1>
<p>Según Tim Berners-Lee, el inventor de la World Wide Web, en https://www.w3.org/WAI/:</p>
<blockquote>
El poder de la Web está en su universalidad. El acceso para todos, independientemente de la discapacidad, es un aspecto esencial.
</blockquote>
</body>
</html>

Probablemente hayas notado lo conveniente que puede ser la etiqueta <blockquote> si necesitas sangrar un área de texto en una página web. Puede que te hayas preguntado si estaría bien usar el elemento <blockquote> en cualquier momento que desees sangrar el texto o si el elemento <blockquote> está reservado sólo para citas largas.

El uso semánticamente correcto del elemento blockquote es sólo para mostrar grandes bloques de texto citado dentro de una página web. ¿Por qué debería preocuparte la semántica? Considera el futuro de la Web Semántica, descrito en Scientific American como “Una nueva forma de contenido Web que sea significativo para los ordenadores que desencadenará una revolución de nuevas posibilidades”.

Usar HTML de manera semántica y estructural es un paso hacia la Web Semántica. Por lo tanto, evita usar un elemento blockquote sólo para sangrar el texto. Aprenderás técnicas modernas para configurar los márgenes y el relleno de los elementos más adelante en este curso.

5. Elementos de frase

Los elementos de frase indican el contexto y el significado del texto entre las etiquetas de contenedor. Depende de cada navegador interpretar ese estilo. Los elementos de frase se visualizan justo en la línea con el texto (denominado como visualización en línea) y puede aplicarse a una sección de texto o incluso a un solo carácter de texto.

Por ejemplo, el elemento <strong> indica que el texto asociado a él tiene una gran importancia y debería mostrarse de forma “fuerte” en relación con el texto normal de la página.

La siguiente tabla enumera los elementos de frase comunes y ejemplos de su uso. Note que algunas etiquetas, como <cite> y <dfn>, resultan ser el mismo tipo de visualización (cursiva) que la etiqueta <em> en los navegadores más populares. Estas etiquetas describen semánticamente el texto como una cita o definición, pero la visualización física suele ser cursiva en ambos casos.

5.1. Tabla de etiquetas de frase HTML

Elemento Ejemplo Uso
<abbr> La <abbr title="Organización Mundial de la Salud">WHO</abbr> fue fundada en 1948. Identifica el texto como abreviatura; configura el atributo title con el nombre completo.
<b> texto en <b>negrita</b> Texto que no tiene ninguna importancia adicional, pero que está estilizado en negrita por uso y convención.
<cite> <p> <cite>Gates</cite> dijo: "... Y sobre todo ten en cuenta que La información es poder" </p> Identifica una cita o referencia; normalmente se muestra en cursiva.
<code>
<code><?php

echo "Hola Mundo";

?></code>
Identifica ejemplos de código de programa; normalmente una fuente de “ancho fijo”, ya que todas sus letras son de la misma anchura.
<dfn>
<p>
El <dfn>HTML</dfn> es un lenguaje de marcado para hipertextos.
</p>
Identifica una definición de una palabra o término; normalmente se muestra en cursiva.
<em>
<p>
<em>La programación</em> es importante.
</p>
Hace que el texto se destaque en relación con otro texto; normalmente se muestra en cursiva.
<i>
<p>
Texto normal y... <i>Texto inclinado</i>
</p>
Texto que no tiene ninguna importancia adicional, pero que está escrito en cursiva por uso y convención.
<kbd>
<p>
Si estás de acuerdo escribe <kbd>sí</kbd>. Si no, pulsa <kbd>esc</kbd>
</p>
Marca el texto que debe introducir el usuario; normalmente una fuente de “ancho fijo”.
<mark> Mira a tu alrededor y verás que nadie es <mark>daltónico</mark>. Texto que se resalta para ser fácilmente referenciado.
<samp>
<p>
... entonces aparecerá una ventana con el mensaje: <samp>Hola mundo</samp>
</p>
Muestra la salida de muestra del programa; normalmente una fuente de ancho fijo.
<small> <p><small>Al usar este sitio, estás de acuerdo con nuestros "Términos de uso" y nuestra "Política de privacidad".</small></p> Avisos y advertencias legales (“fine print”) en letra pequeña.
<strong>
<p>
Es importante el uso de <strong>etiquetas</strong> en HTML.
</p>
Gran importancia; hace que el texto sobresalga del texto circundante; normalmente se muestra en negrita
<sub> <p>La fórmula química de agua es H<sub>2</sub>O</p> Muestra un subíndice como texto pequeño debajo de la línea base.
<sup> <p>Notas al pie<sup>1</sup></p> Muestra un superíndice como texto pequeño por encima de la línea de base.
<var>
<p>
el bucle no se detendrá hasta que <var>suma</var> sea igual a 0.
</p>
Identifica y muestra una variable o salida de programa; normalmente se muestra en cursiva.

6. Elemento de listas ordenadas

Las listas se utilizan en las páginas web para organizar la información. Al escribir para la Web, encabezados, párrafos cortos y listas pueden hacer que tu página sea más clara y fácil de leer.

HTML se puede utilizar para crear tres tipos de listas: listas de descripción, listas ordenadas y listas no ordenadas. Esta sección se centra en la lista ordenada, que muestra un sistema de numeración o de letras para detallar la información contenida en la lista. Las listas ordenadas pueden organizarse mediante el uso de números (los predeterminados), letras mayúsculas, minúsculas, números romanos en mayúsculas y minúsculas.

Listas ordenadas en HTML
Listas ordenadas en HTML

Las listas ordenadas comienzan con una etiqueta <ol> y terminan con una etiqueta </ol>. Cada elemento de la lista comienza con una etiqueta <li> y termina con una etiqueta </li>. A continuación se muestra el código para configurar el encabezado y la lista ordenada:

<h1>Mis colores favoritos</h1>
<ol>
<li>Azul</li>
<li>Rojo</li>
<li>Verde</li>
</ol>

6.1. Atributos: type, start y reversed

  • El atributo type configura el símbolo utilizado para ordenar la lista. Por ejemplo, para crear una lista ordenada y organizada por letras mayúsculas, utilizas <ol type="A">.

La siguiente tabla documenta el atributo type y sus valores para las listas ordenadas.

Valor Símbolo
1 Números (por defecto)
A Letras mayúsculas
a Letras minúsculas
I Números romanos
i Números romanos en minúsculas
  • El atributo start es útil cuando se necesita una lista para comenzar con un valor entero distinto de 1  (por ejemplo, start="10").
  • Utiliza el nuevo atributo HTML5 reversed (set reversed=”reversed”) para configurar los marcadores de lista para que se muestren en orden descendente.

¡Manos a la obra!, usarás un encabezado y una lista ordenada en la misma página. Para crear la página web de ejemplo deberás usar un editor de texto. Modifica el elemento title y añade los elementos h1, ol y li a la sección del cuerpo/body como se indica en el siguiente código:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo de cita en bloque</title>
<meta charset="utf-8">
</head>
<body>
<h1>Mis colores favoritos</h1>
<ol set reversed="reversed">
<li>Azul</li>
<li>Rojo</li>
<li>Verde</li>
</ol>
<h1>Cursos Desde Cero</h1>
<ol start="3">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>

7. Elemento de lista no ordenada

Una lista desordenada muestra una viñeta o marcador de lista, antes de cada entrada de la lista. Esta viñeta puede ser de varios tipos: ‘disc’, (por defecto), ‘square’ y ‘circle’. Consulta la siguiente imagen para ver una lista de muestras no ordenadas:

Lista no ordenada en HTML
Lista no ordenada en HTML

Las listas desordenadas comienzan con una etiqueta <ul> y terminan con una etiqueta </ul>. Cada elemento de la lista comienza con una etiqueta <li> y termina con una etiqueta </li>. El código para configurar el encabezado y la lista desordenada es el siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo de cita en bloque</title>
<meta charset="utf-8">
</head>
<body>
<h1>Mis colores favoritos</h1>
<ul>
<li>Azul</li>
<li>Rojo</li>
<li>Verde</li>
</ul> 
<ul type="square">
<li>Azul</li>
<li>Rojo</li>
<li>Verde</li>
</ul> 
</body>
</html>

8. Elemento Lista de Descripción

HTML5 introduce un nuevo nombre de elemento, lista de descripción, para reemplazar el elemento de la lista de definición (utilizado en XHTML y versiones anteriores de HTML). Una lista de descripción es útil para organizar los términos y sus descripciones. Los términos se destacan, y sus descripciones pueden ser tan largas como sea necesario para transmitir su mensaje.

Las listas de descripción también son útiles para organizar las preguntas más frecuentes (FAQ) y sus respuestas. Las preguntas y respuestas se compensan con sangría. Mira la siguiente imagen para ver un ejemplo de una página web que utiliza una lista de descripción:

Ejemplo de Lista de Descripción en HTML
Ejemplo de Lista de Descripción en HTML

Las listas de descripción comienzan con la etiqueta <dl> y terminan con la etiqueta </dl>. Cada término o nombre en la lista comienza con la etiqueta <dt> y termina con la etiqueta </dt>. Cada descripción comienza con la etiqueta <dd> y termina con la etiqueta </dd>.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo de cita en bloque</title>
<meta charset="utf-8">
</head>
<body>
<h1>Ejemplo de Lista de Descripción</h1>
<dl>
<dt>TCP</dt>
<dd>El Protocolo de control de transmisión es un método (protocolo) utilizado junto con el Protocolo de Internet (IP) para enviar datos en forma de unidades de mensaje, llamadas paquetes, entre ordenadores a través de Internet.</dd>
<dt>IP</dt>
<dd>El Protocolo de Internet es el método o protocolo mediante el cual se envían datos de un ordenador a otro en Internet. Cada ordenador en Internet está identificado de forma única por una dirección IP.</dd>
<dt>FTP</dt>
<dd>El protocolo de transferencia de archivos es un protocolo utilizado para intercambiar archivos entre ordenadores en Internet.</dd>
<dt>HTTP</dt>
<dd>El protocolo de transferencia de hipertexto es el protocolo utilizado para intercambiar texto, imágenes gráficas, sonido, vídeo y otros archivos multimedia en la Web.</dd>
</dl>
</body>
</html>

9. Caracteres especiales

Para utilizar símbolos especiales como comillas, el signo mayor que (>), el signo menor que (<) y el símbolo de copyright (©) en el documento de tu página web, debes utilizar caracteres especiales, a veces llamados caracteres de entidad. Por ejemplo, si deseas incluir una línea de copyright en tu página de la siguiente manera:

© Copyright 2018. Desde Cero. Todos los derechos reservados

Debes utilizar el código de caracteres especiales &copy; para mostrar el símbolo de copyright, como se muestra en el siguiente código:

&copy; Copyright 2018. Desde Cero. Todos los derechos reservados

Otro código de carácter especial útil es &nbsp;, que significa espacio no descifrable. Puedes haber notado que los navegadores web tratan múltiples espacios como un solo espacio. Si necesitas un pequeño número de espacios en tu texto, puede usar &nbsp; varias veces para indicar múltiples espacios en blanco.

La siguiente tabla proporciona descripciones de los caracteres especiales y su código correspondiente.

Carácter Nombre de la Entidad Código
Comillas &quot;
Apóstrofo &#39;
© Símbolo Copyright &copy;
& Ampersand &copy;
Espacio vacío Espacio ininterrumpido &nbsp;
Guión largo &mdash;
| Barra Vertical &#124;

Si tienes alguna duda o aporte no dudes en comentar. Nos vemos en el siguiente artículo. ¡No olvides compartirlo! :’)

Todos los elementos y etiquetas básicas de HTML
5 (100%) 6 votos




Alex Walton

Alex Walton

Aprender desde Cero es tu web para conocer todo sobre informática. Mi nombre es Alex y me gustaría que dejes tu comentario ante cualquier duda o aporte.
"Si no lo consigues a la primera, llámalo versión 1.0"

Comparte este artículo:

Facebook
Google+
Twitter
LinkedIn
WhatsApp
Email
Deja tu comentario
Contenido Relacionado
Caracteres Especiales HTML Lista completa

Caracteres especiales

Como ya aprendiste, los archivos HTML son texto ASCII y no deben contener caracteres de formato o estilo/fantasía. De hecho, ...
Leer Más
Servicios de Validación código HTML5

Validación HTML5

El servicio gratuito de validación de marcas del W3C, disponible en http://validator.w3.org, validará tu código HTML y comprobará si tiene ...
Leer Más
Configurar Color y Texto con CSS

Configurar Color y Texto con CSS

Después de hacer una introducción a HTML, exploremos las Hoja de estilos en cascada/Cascading Style Sheets (CSS). Los diseñadores web utilizan ...
Leer Más
SOBRE NOSOTROS

Somos una web que busca el libre conocimiento en temas relacionados a la informática.

Todos los cursos son gratis. La publicidad nos mantiene activos así que por favor visita a nuestros anunciantes.

RECIBE MUCHOS REGALOS