HTML para principiantes (Parte 2): Etiquetas, contenidos y elementos

Redes sociales

Conforme progreses en el aprendizaje de HTML, encontrarás diferentes recursos en los que utilizar los elementos HTML y las etiquetas de forma intercambiable. Sin embargo, lo primero, es aprender a diferenciar entre elementos HTML y etiquetas HTML.

¿Cuál es la diferencia?

Técnicamente, los documentos HTML, se caracterizan por contener etiquetas. Cuando se accede a ellos a través de un navegador, los documentos HTML son analizados para que éstos pudieran visualizarse mediante el “Modo de Objetos del Documento” o “Document Object Model” (DOM). Las etiquetas están ahí en el documento HTML, pero los elementos HTML sólo aparecen después de que el documento se ha analizado.

Pero no vamos a entrar en la parte técnica y en lugar de ello, vamos a intentar explicarlo de forma sencilla. En pocas palabras, las etiquetas HTML son el lenguaje de marcado que se utiliza en HTML. Se trata generalmente de etiquetas de inicio, etiquetas de cierre o etiquetas vacías. Las etiquetas se incluyen entre paréntesis angulares <>.

Los elementos HTML, por otra parte, incluyen el contenido.

Así, en este código HTML:

 <p> Etiquetas, contenidos y elementos </p>

Las etiquetas aquí son <p> y </ p>, mientras que todo el conjunto se llama un elemento HTML.

Elementos HTML

vamos a echar un vistazo a los elementos HTML.

Un elemento HTML tiene la siguiente sintaxis:

  1. Un elemento HTML comienza con una etiqueta de apertura o inicial, por ejemplo, <h1>.
  2. Un elemento HTML termina con una etiqueta de cierre o final, por ejemplo, </h1>.
  3. El contenido de un elemento HTML está encerrado dentro de las etiquetas de inicio y final, por ejemplo, <h1> Este es el contenido del elemento. </h1>.
  4. También puede contener atributos (los veremos en un próximo artículo).

Elementos HTML

1. Elementos vacíos

Algunos elementos HTML no tienen contenido y se llaman “elementos vacíos”. Estos elementos, generalmente, sólo tienen etiqueta de inicio o de fin, pero no ambas, por ejemplo, <br />.

2. Elementos anidados

Los “elementos anidados” son elementos HTML que se encuentran dentro de otros elementos HTML.

Por ejemplo, este es un elemento anidado:

<p> No sé <strong> qué era </strong>. </p>

Por último, un elemento HTML puede contener atributos, de los que hablaremos más adelante.

3. Algunas de las etiquetas HTML más usadas son:

<a> – que muestra un hipervínculo
<b> – que muestra texto en negrita
<br> – que añade un salto de línea
<div> – que introduce una sección en el documento
<em> – que muestra énfasis
<h1>, <h2>, <h3> hasta <h6> – muestra diferentes niveles de títulos o encabezamientos
<hr> – que inserta una línea horizontal
<p> – que inserta un párrafo
<table> – que inserta una tabla

4. Tipos de elementos HTML

Los elementos HTML sirven para varios propósitos:

1. Hay elementos HTML que pueden utilizarse para dar estructura al documento. Un buen ejemplo de elemento estructural HTML son <h1>, <h2> y otros niveles de título HTML. Por ejemplo,

<H1> Introducción </ h1>

indica que “Introducción” es un primer nivel de título. Ten en cuenta que los elementos HTML estructurales sólo articulan el documento, no especifican como se va a mostrar. Los navegadores, sin embargo, tienen por defecto, formas para mostrar estos elementos, por tanto, los textos incluidos en estas etiquetas, serán de mayor tamaño que el texto normal.

2. Hay elementos HTML que pueden dictar cómo se mostrarán ciertos contenidos. Por ejemplo, el uso de <b> hará que el texto se visualice en negrita, mientras que el uso de <i> hará que lo haga en cursiva.

<b>Este texto se mostrará en negrita</b> y <i>este texto se mostrará en cursiva</i>

3. Hay elementos HTML que se emplean para enlazar un documento HTML a otros documentos. Por ejemplo, la etiqueta <a> enlaza un documento a otro documento.

Consejos

1. poner siempre la etiqueta de cierre.

Hay elementos HTML que no son elementos vacíos, pero que se pueden escribir sin etiqueta de cierre. Dado que los navegadores son capaces de reconocerlos, no presentan ningún problema. Por ejemplo, el elemento <p>, para insertar un salto de párrafo, a menudo no se cierra.

<p>Esto es lo que estamos hablando.

Sin embargo, la mejor práctica será siempre cerrar los elementos HTML.

La mayoría de los navegadores web considerarán la etiqueta de cierre de párrafo </p> opcional y el párrafo se mostrará correctamente sin ella. Sin embargo, este podría no ser el caso para todos los navegadores web. Para estar seguro, que tu código es totalmente compatible, siempre pon la etiqueta de cierre al final del elemento.

¿Cuál es la diferencia con los elementos vacíos? Un elemento vacío es aquel que no tiene etiqueta de cierre. Por ejemplo, <br> no tiene una etiqueta de cierre correspondiente, </br> no existe en HTML.

2. Utiliza minúsculas al escribir etiquetas.

Las etiquetas HTML no distinguen entre mayúsculas y minúsculas. Esto significa que puedes escribir <p> <P> o </P> o </p>.

Sin embargo, las normas y recomendaciones del Consorcio World Wide Web o W3C recomiendan el uso de minúsculas para las etiquetas HTML. Así que si vas a a empezar a diseñar páginas web, hazlo bien desde el principio y escribe las etiquetas HTML en minúsculas.

.

Redes sociales

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.