CodeGym /Cursos /Frontend SELF ES /Introducción a las etiquetas HTML

Introducción a las etiquetas HTML

Frontend SELF ES
Nivel 1 , Lección 2
Disponible

1. Etiquetas

Las etiquetas son de diferentes tipos. Primero, pueden ser simples y dobles. Más comúnmente, encontrarás etiquetas dobles. Y, como probablemente ya adivinaste, siempre vienen en pares. También se les llama etiqueta de apertura y etiqueta de cierre.

La etiqueta de apertura es simplemente una palabra clave entre corchetes angulares.


<tag>

Ejemplo:

HTML
      
<h1>
      
    

La etiqueta de cierre se parece a la de apertura, pero con una barra diagonal antes de la palabra clave.


</tag>

Ejemplo:

HTML
      
</h1>
      
    

La etiqueta de apertura siempre va primero en el par. NO puede ir primero la etiqueta de cierre y luego la de apertura. Ese documento HTML será considerado inválido.

2. Árbol de etiquetas

Y aquí hay más información importante sobre las etiquetas dobles. En un documento puede haber muchas, y pueden estar anidadas. Esto significa que cualquier texto en un documento HTML puede estar rodeado (envuelto) por etiquetas, incluso si contiene otras etiquetas. Ejemplo:

HTML
      
<html>
    Texto normal
        <a href="http://codegym.cc/about">
            Enlace a algo interesante
        </a>
    otro texto más
</html> 
      
    

En pocas palabras, en un texto HTML puedes encontrar una secuencia de etiquetas:


<h1> <h2> </h2> </h1>

Pero no puedes encontrar esto:


<h1> <h2> </h1> </h2> 

Si la etiqueta de apertura <h2> está dentro del par de etiquetas <h1>, entonces también su etiqueta de cierre </h2> debe estar dentro del mismo par de etiquetas <h1>.

Así es como todas las etiquetas del documento forman un cierto árbol de etiquetas. Primero viene la etiqueta de nivel superior, que envuelve todo el documento, generalmente llamada <html>, la cual tiene pares de etiquetas hijas, y así sucesivamente.

De hecho, un programa que procesa un documento con etiquetas lo ve exactamente así: como un árbol de etiquetas con texto anidado.

3. Etiquetas simples

Etiqueta vacía

Si una etiqueta no tiene contenido, generalmente se ve así:


<tag> </tag>

Para este tipo de etiquetas, se inventó una forma compacta de escribirlas:


<tag/>

Nota que esta etiqueta es diferente de la etiqueta de cierre: la barra diagonal está al final. Es simplemente una forma abreviada de escribir un par de etiquetas vacías. Es llamada así: etiqueta vacía.

Etiquetas simples

Sin embargo, en HTML también hay etiquetas simples especiales. Estas no tienen una etiqueta de cierre. La lista de estas etiquetas está definida por el estándar HTML. Ejemplos:

  • <br> — salto de línea;
  • <hr> — línea divisoria;
  • <img> — imagen.

En total hay 14, la mitad son etiquetas de sistema, y la otra mitad surgió en las primeras versiones de HTML. Hoy en día, se intenta no introducir este tipo de etiquetas.

Comentarios
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION