HTML: Etiquetas y Semántica

Picture of Dani García
Dani García

Informático apasionado por el diseño y desarrollo Web.

Conoce las principales etiquetas y características del lenguaje HTML fundamental para la web.

Índice del artículo

Aunque crearemos la Web con WordPress y un editor visual como Elementor que hace el trabajo duro por nosotros, es decir nos evita tener que programar. Es muy importante tener unas nociones del lenguaje lo que nos permitirá entender la importancia de usar una etiqueta u otra en el editor.

A la hora de ver el lenguaje HTML, en concreto su última versión (5), lo haremos desde dos enfoques diferentes, por un lado la estructura básica de la web (semántica) y por otro los elementos que componen cada bloque de dicha estructura.

Las etiquetas llevarán la siguiente estructura:

Básico: Las etiquetas tienen apertura y fin
  <etiqueta>...</etiqueta>
Con atributos: En la etiqueta de apertura puede haber atributos.
  <etiqueta atributo="valor">...</etiqueta>

Como norma general, todo en minúsculas y todo con etiqueta de cierre.
Aunque te traigo un resumen y lo más destacado para lo que necesitaremos en nuestro día a día con WordPress, te recomiendo que visites la siguiente web de Mozilla donde podrás conocer con mucho más detalle cada elemento (al final del artículo encontrarás un botón con el enlace).

Estructura (Semántica)

Este trabajo WordPress lo hará a las mil maravillas, en función del elemento que estemos creando se encargará de respetar la estructura semántica definida por el lenguaje (ver en la siguiente imagen).
Esta estructura, ayuda al navegador, a google, etc. a entender el contenido de nuestra página pudiendo entender que se está representando en cada bloque.

Es importante destacar que no es necesario usar todos los elementos anteriores, es decir, se usarán en función de lo que estemos mostrando.

header (Cabecera)

El bloque Header representa la cabecera de la página, que no hay que confundirlo con el siguiente elemento que está relacionado.

nav (Zona de navegación)

Esta etiqueta es la que indica que el contenido es de navegación, es decir donde irá ubicado nuestro menú.

aside (Barra lateral)

Se usan para el contenido que está relacionado de forma indirecta, por ejemplo un submenu, zona con banner publicitaria, elementos de búsqueda, etc. La zona de barra vertical, sidebar.
Con el cambio en la forma de estructurar las web, pasando a diseño responsivo, es decir diseñando para el movil (el famoso responsive y mobile first), según el cuál la web se diseña para los dispositivos móviles y luego se adapta para el resto de dispositivos, se ha perdido la relevancia que tenía antiguamente aunque no ha desplazado la importancia de este elemento sobre todo en ciertos tipos de web.

main (Sección principal)

Indica la sección principal de la página (solo tiene que haber uno)

section / article (Sección / Artículo)

Los dos siguientes elementos los veremos juntos, y siempre me gusta explicarlos pensando en una revista con varias secciones (Section) y con varios artículos (Article) dentro de cada sección, seguro que con esta similitud ya tienes una imagen mental de que contiene cada uno y cuando se usa.

En un blog, por ejemplo cada entrada (Post) sería el contenido de una sección con su artículo.

Pueden ser independientes.

Section, representa la sección (bloque)
Article, si están anidados es porque representan algo del principal, por ejemplo en un blog la entrada es un artículo y si dentro hay anidado otro puede ser los comentarios del mismo.

footer (Pie de página)

Pie de página, es otro de los elementos fáciles de distinguir ya que suelen estar diferenciados con un color de fondo diferente. Se suele usar para algún menú secundario, datos de contacto, datos legales o del autor, etc.

Elementos (objetos)

Aunque no es una definición formal, y a un purista le estarían sangrando los ojos con este artículo, el objetivo es entender bien lo que son las etiquetas, cómo y cuando se tienen que usar, por eso me gusta hacer esa analogía.
Dentro de esta clasificación también lo voy a dividir en dos conceptos los contenedores y los objetos en sí mismo, los primeros nos servirán para ubicar los segundos.

html (Etiqueta de contenido html)

Indica que el contenido es html

head (Etiqueta de cabecera html)

Indica la cabecera html, es importante no confundirlo con los header, este bloque se usa para la cabecera de html, que suele contener otros elementos que indican atributos o código de estilo (css o link a las hojas de estilo), o código script (js o link a los ficheros) o etiquetas de metadatos.

meta (Metadatos en cabecera html)

Se usan para metadatos, que indican datos, por ejemplo el lenguaje, que se refresque la página, que no se almacene en la cabecera de los navegadores, etc.

title (Título de la página en cabecera html)

Título de la página

link (Referencia a ficheros externos en cabecera html)

Se usa para hacer referencia a otros ficheros que contienen código (CSS, JS), es una buena práctica para tenerlo en un fichero reutilizable en lugar de tener que poner lo mismo una y otra vez en cada página.

div (Contenedor)

Sin duda uno de las etiquetas más importantes, ya que es un contenedor que nos permitirá jugar con la posición y estructura de la web.
Para hacernos una idea de que son, podemos imaginar una estantería típica del Ikea, que tiene varios huecos cuadrados donde podemos dejarlo vacío, poner un cajón que ocupe todo el hueco, o poner varios cajones o estantes creando nuevos huecos dentro del hueco principal, o incluso juntar varias estanterías y jugar con diferentes formas.

Ese mismo objetivo es el de la etiqueta div, es decir es un contenedor, que además en combinación con CSS nos permitirá un mundo casi infinito de posibilidades creativas.


Nota: Es el equivalente al section, cuando no se trata de un bloque semántico.

h (Título del 1 al 6)

La etiqueta «H» va siempre acompañada con un número del 1 al 6, es decir H1, H2, H3, H4, H5, H6. Esta etiqueta representa los títulos y subtítulos, siendo el H1 el título principal de una página y los siguientes números los subtítulos.

El H1 representará al título principal de la página, los H2 a cada uno de los subtítulos que queramos representar en la página y dentro de estos los H3, etc.

Cuando se usan en Elementor / WordPress no solemos prestar atención y eso hará que google entienda mal la importancia que le queremos dar a cada título, el índice cómo el que tiene este artículo o el aspecto.

p (Párrafo)

Elemento para los párrafos de texto.

em (Resaltar texto)

Se usa para destacar algo importante en el texto. (Elemento semántico)

strong (Énfasis en el texto)

Se usa para dar énfasis (Elemento semántico)

b (Texto en negrita)

Etiqueta usada para negrita. (Elemento de estilo)

i (Texto en cursiva)

Se usa para poner el texto en cursiva, si se combina con la b, se puede poner en negrita cursiva. (Elemento de estilo)

br (Salto de línea)

Salto de línea

ol / ul / li (Listas y elementos de la lista)

Las etiquetas ol ul y li se usan para las listas.
ul y ol representa la lista (el segundo es para lista ordenada, por ejemplo una numerada) y contienen tantos li como elementos tenga esa lista.

a (Enlaces)

Se usar para los links, la estructura habitual es como la que sigue:
<a href=’url’ target=’_blank’>Texto mostrado</a>
Acompañado de href para indicar la dirección, puede ser una url completa para apuntar a una web diferente o relativa es decir, sin incluir toda la dirección lo que indica que es un vínculo a otro elemento de la misma web. No se suele indicar el href, lo que hace que la página se mueva al vínculo, pero a veces queremos que se abra en una página nueva lo que hará para lo que podemos usar _blank.

img (Imágenes)

Usado para las imágenes, acompañado por src para indicar la url de la imagen como en el caso de la etiqueta a, también es importante incluir la alt para indicar el texto alternativo, eso permite que google entienda que representa la imagen, o a las personas invidentes les permite igualmente saber que representa la imagen, por eso es otra que no se suele rellenar y es muy importante, en wordpress en el editor de medios es lo que viene como texto alternativo

form y sus elementos (Formularios)

Cuando se necesite hacer un formulario, estará contenido con la etiqueta form, que tiene atributos para indicar la acción que lleva asociada.
Varios elementos para los diferentes tipos de objetos del formulario:
Input para entrada de texto (según los atributos se puede indicar que es un teléfono, un correo, etc)
Textarea, para introducir un bloque de texto
Radio / Checkbox se usa para seleccionar entre opciones, en el primer caso se selecciona una opción entre varias, en el segundo se pueden marcar varias opciones.
Select, sirve para crear un desplegable
Button, para crear un botón (de enviar el formulario por ejemplo, hay que tener en cuenta que también se puede definir un input de tipo button.

Ejemplo HMTL

<!DOCTYPE html>
<html>
    <head>
        <!-- Etiquetas Meta -->
        <meta charset="utf-8">
        <!-- Título de la página -->
        <title>Título de la página</title>
        <!-- Etiquetas link (por ejemplo para vincular los JS o CSS -->
        <!-- aquí irian las link... -->
    </head>
    <body>
        <!-- Esto es un comentario -->
        <!-- Cabecera principal -->
        <header style="background-color:#ffccaa">
            <!-- Imagen, por ejemplo el Logo -->
            <img src="https://elrincondedanigarcia.com/wp-content/uploads/2020/06/logo_Dani-1250x250-1.png" alt="Logotipo">
            <!-- Sección de navegación -->
            <nav>
                <!-- Lista no ordenada -->
                <ul>
                    <!-- Cada elemento de la lista -->
                    <li><a href="https://elrincondedanigarcia.com">El Rincón de Dani García</a></li>
                    <li><a href="/tutoriales/">Tutoriales</a></li>
                    <li><a href="https://google.es">Google</a></li>
                </ul>
            </nav>
        </header>

        <!-- Contenido principal (no tendría que estar anidado dentro de otro objeto que no sea el main) -->
        <main>
            <!-- Inicio del artículo -->
            <article>
                <!-- Títulos en los 6 tamaños posibles-->
                <h1>Título H1</h1>
                <h2>Título H2</h2>
                <h3>Título H3</h3>
                <h4>Título H4</h4>
                <h5>Título H5</h5>
                <h6>Título H6</h6>
                <!-- Párrafo de texto, y dentro con textos en negrita, cursiva, destacado y salto de línea -->
                <p>Esto es un párrafo, con un <b>texto en negrita</b>, con <i>otro en cursiva</i>, uno <strong>destacado</strong>,con
                    un salto de Línea.<br>Empezando otra línea.</p>
                <!-- Podemos crear una sección dentro del artículo, si por ejemplo estamos creando un bloque (sección para los comentarios del artículo) -->
                <section>
                    <h2>Ejemplo de sección</h2>
                    <p>Comentarios dentro del artículo</p>
                    <!-- El div, es un elemento NO semantico, que nos sirve para crear bloques -->
                    <div style="background-color:yellow;">
                        <!-- Formulario -->
                        <form action="ejemplo_html.html">
                            <label>Ejemplo de etiqueta</label>
                            <input type="text" placeholder="Introduce un texto">
                            <button type="submit">Enviar</button>
                        </form>
                    </div>
                    <div style="background-color:orange;"><span>Hola</span></div>
                    <div style="background-color:salmon;"><span>Adios</span></div>
                </section>
            </article>
            <!-- Contenido lateral (se puede contener dentro del main) -->
            <aside style="background-color:deepskyblue">
                <ol>
                    <li>Opción 1</li>
                    <li>Opción 2</li>
                    <li>Opción 3</li>
                </ol>
            </aside>
        </main>

        <section>
            <h2>Ejemplo de otra sección</h2>
            <p>Bloque independiente</p>
        </section>

        <!-- Pie de la página -->
        <footer style="background-color: darkgray">
            <div>
                <p>Texto en el footer</p>
            </div>
        </footer>
    </body>
</html>

Más adelante ampliando con más elementos y crearé un artículo por cada uno de ellos para conocerlos en detalle, pero de momento tenemos una visión de cómo son y cuales son los principales que veremos en WordPress / Elementor.


En los siguientes dos botones que dejo información oficial por si quieres profundizar más en el tema.

Comparte este artículo

Un comentario

Deja una respuesta