GeneralHTMLProgramaciónTecnologíaWeb

HTML: Elementos

En este tema, veremos el formato de la página web. Descubrirá para qué se necesitan los elementos HTML a nivel de bloque, qué propiedades poseen y cómo utilizarlos de manera más efectiva para crear la estructura del código HTML.

En el artículo de hoy conocerá qué son los elementos HTML y sus tipos, lo que ayuda en el desarrollo de sitios web atractivos y orientados a los negocios. 

Cualquier cosa, desde la etiqueta inicial hasta la etiqueta final, se considera un elemento HTML. También se pueden agregar atributos a los elementos. Sin embargo, es opcional.

<etiqueta atributo="rule">Contenido aquí....</etiqueta >

<etiqueta atributo=»rule»> es una etiqueta inicial o apertura, y </etiqueta > es la etiqueta de cierre. Como se puede ver la diferencia entre ellas es en el orden o colocación y la barra «/» de las segundas.

Hay algunos elementos HTML que no necesitan cerrarse, como los elementos <img…/> , <hr /> y <br /> . Estos se conocen como elementos vacíos. También se les conoce como etiquetas emparejadas y no emparejadas.

¿Qué son los elementos HTML?

Como sabes, los archivos HTML se pueden abrir en los navegadores. Después de recibir un documento HTML, el navegador lee las etiquetas que contiene y las utiliza para crear una página HTML que los usuarios ven en las pantallas de sus monitores.

Todo lo que ve en la página en el visor de su navegador son elementos HTML. Y aquí es donde radica la diferencia entre etiquetas HTML y elementos HTML: los elementos son lo que el usuario ve en la página del navegador, mientras que las etiquetas son lo que el desarrollador escribe al crear un documento HTML.

Vale la pena recordar que no todas las etiquetas HTML son elementos. Por ejemplo, las DOCTYPE instrucciones necesarias para la interpretación correcta del código por parte de un navegador y las etiquetas en el encabezado de un documento HTML no son elementos.

Hay dos tipos principales de elementos de página: elementos a nivel de bloque y elementos en línea . Ambos tienen sus propias peculiaridades.

Elementos a nivel de bloque

Los elementos a nivel de bloque se utilizan principalmente para crear la estructura de páginas web o dividir lógicamente un documento HTML en partes. 

A continuación se muestran algunos ejemplos de elementos de bloque:

<div>es un divisor de contenido universal. Se utiliza para agrupar elementos HTML similares. Siempre que quieras dividir las secciones de la página web puedes utilizar el elemento div. Sin embargo, existen otros elementos HTML semánticos que se pueden usar para posicionar elementos específicos en la página web, los cuales aprenderá más adelante y debe usar elementos semánticos siempre que sea posible para mejorar la accesibilidad. 

Pero ahora veamos cómo puedes crear una sección usando el <div>elemento:

<div>
  <h1>Element h1 is inside the div</h1>
  <p>Element p is also inside the div</p>
</div>

<h1> - <h6> son etiquetas de encabezado:

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Como puede ver, estas etiquetas facilitan la identificación de los títulos que transmiten el nivel de importancia del texto. Se recomienda utilizar sólo una <h1>etiqueta en una página web; este debe ser el título que muestra el tema principal de la página.

<p> define un párrafo de texto:

<p>It's a paragraph of the text</p>
<p>And this is another paragraph</p>

<pre> define un bloque de texto formateado, y se puede utilizar para mostrar texto respetando el formato con el que está escrito (espacios en blanco, saltos de línea, etc.):

<pre>
........../>  フ
.........|  _  _ |
......./` ミ_xノ
....../     |
...../  ヽ   ノ
....│  | | |
/ ̄|   | | |
| ( ̄ヽ__ヽ_)__)
.\二つ
</pre>

De forma predeterminada, cualquier número de espacios que aparecen en el código seguidos se muestran como un espacio en una página web. La <pre>etiqueta muestra el texto de la forma que desee, con todos los espacios insertados entre caracteres:

<hr> crea una línea horizontal:

<hr>

Ahora veamos cómo se muestra en el navegador:

Elementos HTML anidados.

Está permitido mantener un elemento HTML dentro de otro elemento HTML:

<!DOCTYPE html>
<html>

   <head>
      <title>Nested Elements Example</title>
   </head>
	
   <body>
      <h1>This is <i>italic</i> heading</h1>
      <p>This is <u>underlined</u> paragraph</p>
   </body>
	
</html>

Esto mostrará el siguiente resultado con el uso de las etiquetas <i> y <u> para mostrar estilo en cursiva o italica y texto subrayado respectivamente:

Esta no es una lista completa de elementos a nivel de bloque; definitivamente hay muchos más elementos que recomendamos conocer. Puedes visitar la sección Elementos en Bloque de Mozilla Developer.

La especificación HTML actual incluye alrededor de 100 etiquetas. Eche un vistazo a la lista completa de todas las etiquetas existentes de W3 Schools. ¡Tomará tiempo memorizarlos todos! Es broma, muy probablemente aprendas una buena mayoría, pero con estas referencias tendrás cómo investigar el uso y sitaxis de cada una.

De igual forma, estas definiciones y las que veremos mas adelante responde a los estándares y directrices que desarrolla el Consorcio World Wide Web (W3C) para ayudar a todos a construir una web basada en los principios de accesibilidad, internacionalización, privacidad y seguridad.

Video en inglés con subtítulos en español

Conclusión

Hemos analizado las características básicas de los elementos HTML a nivel de bloque. Es de destacar que la distinción entre elementos a nivel de bloque y en línea se utilizó hasta la versión 4.0 de HTML. En HTML 5, estos conceptos fueron reemplazados por un conjunto más complejo de categorías de contenido: ahora, cada elemento HTML debe seguir las reglas que determinan qué información se puede almacenar en él. Veremos esto más de cerca un poco más adelante.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *