Etiquetas básicas HTML

Etiquetas.
El lenguaje HTML se construye con etiquetas o tags. Una etiqueta html es un comando descriptivo usado para indicarle a los navegadores una orden. La estructura básica de una etiqueta es la siguiente:

<nombre_etiqueta> Contenido</nombre_etiqueta>

Algunas etiquetas no tienen etiqueta de cierre. En este caso la estructura se simplifica.

<nombre_etiqueta/>

Atributos y valores.
A estos parámetros básicos pueden agregárseles atributos que contienen especificaciones en cuanto a su propósito y uso. Estas especificaciones se denominan valores.

<nombre_etiqueta atributo=”valor”>Contenido</nombre_etiqueta>

A continuación veremos 10 etiquetas básicas de HTML de uso general que nos ayudaran a tener una comprensión general de este lenguaje. Aunque muchas de estas etiquetas pueden ser enriquecidas mediante atributos y valores, el mejoramiento en la apariencia es dejado a cargo del CSS.

1. Etiqueta de Párrafos.

<p>Este es un párrafo escrito en HTML</p>

Todo contenido escrito esta presentado en párrafos. Estos párrafos son unidades de texto individual, relacionado entre sí, pero que expresan unidades de pensamiento autónomos. El contenido que se incluya dentro de esta etiqueta será mostrado con las mismas características que un párrafo escrito debe tener, con espaciado superior e inferior.

2. Salto de línea.

<br/>

Esta etiqueta, que no tiene sierre, nos permite hacer saltos de línea en un párrafo. El equivalente a un Enter en el teclado mientras usamos MicrosoftWord.

3. Etiqueta para Línea Horizontal.

<hr/>

Aunque en desuso esta etiqueta nos permite pintar una línea horizontal con espaciado en la ventana del navegador, como la que vemos a continuación.

Las siglas hr significan Horizontal Rule (Línea Horizontal)

---

Esta línea simple puede ser enriquecida mediante atributos de color, grosor, anchura y  alineación. Veamos un ejemplo y su resultado.

<p>Las siglas hr significan Horizontal Rule (Línea Horizontal)</p><hr align="left" width="90%" color="#0c7fd1" size="6px" />

 Las siglas hr significan Horizontal Rule (Línea Horizontal)

---

4. Etiqueta para Citas.

<blockquote>Vibra en los aires su nombre sonoro</blockquote>

Esta etiqueta es usada para las citas textuales que sea necesario introducir a nuestro contenido. Por defecto se muestra con un sangrado mayor al del párrafo normal.

5. Etiqueta de información y contacto.

<address>Autor: Fulano de Tal</address>

Su función consiste en indicarle al navegador que su contenido hase referencia al autor y su contacto telefónico o email. Lo que hace es sencillamente mostrar el texto en cursiva.

6. Etiqueta para Centrar elementos.

<center>Elementos y textos</center>

La función de esta etiqueta no requiere mucha explicación. Todos los elementos que contenga serán mostrados en el centro de la ventana del navegador.

7. Etiqueta para insertar imágenes.

<img src=”URL”/>

Mediante esta etiqueta podemos mostrar imágenes incrustadas en el contenido. Esta etiqueta no necesita cierre, pero sí requiere de un atributo que enlace (URL) la dirección de la imagen que deseemos presentar.

8. Etiqueta de hipertexto.

<a href=”URL-enlace”>Texto de enlace o hipertexto</a>

Para direccionar a una página externa dentro del contenido textual, se crea un enlace que afecte a alguna palabra o frase en particular, a este tipo de textos se le conoce como links (enlaces de híper texto). Por defecto los navegadores muestran el texto contenido dentro de esta etiqueta en color azul y subrayado.

9. Etiqueta de Anclas.

A partir de la etiqueta anterior existe una variante que nos permite crear anclas en nuestro contenido. Un ancla sería un link que nos direcciona a un lugar dentro de los mismos contenido. Esta etiqueta puede usarse al agregar referencias al pie de página, indicadas por números superiores. Aquí un ejemplo¹.
Para utilizar esta etiqueta se crea primero el lugar al cual direccionara el hipertexto, dando un atributo name a la etiqueta.

<a name=”nombredelancla”>Contenido con un ancla</a>

Lo aplicamos usando la etiqueta <a> con un atributo href indicando en su valor el símbolo # seguido del nombre del ancla.

<a href=”#nombredelancla”>Este es el contenido desde el cual dirigiremos hacia el ancla</a>

10. Nube de texto o bocadillo.

 <a title=”Este es el mensaje adicional al texto”>Este el contenido del hipertexto</a>

Otra variante, bastante usada, de la etiqueta <a> es la que nos permite darle a un contenido determinado un mensaje de texto extra, normalmente descriptivo, mostrado por los navegadores en una nube de texto o bocadillo que aparece al pasar el cursor por encima del texto.
Para usarlo agregamos a la etiqueta el atributo title con un valor que contenga el mensaje que queramos mostrar. Pruebalo aquí.

Hola, esta es la dirección del ancla.