En este artÃculo vamos a ver las etiquetas HTML esenciales. Para que sea más sencillo las voy a dividir por secciones: de cabecera, semánticas y de contenido. Asà tendrás toda la información organizada. Además, después de cada sección te adjunto una imagen donde podrás ver todas las etiquetas de forma resumida.
Etiquetas de la cabecera
Son las primeras etiquetas que se van a ver en tu archivo HTML.
head
El elemento principal del documento contiene metadatos del documento, como un tÃtulo y enlaces a recursos estáticos.
title
Define el tÃtulo del documento.
<title>Mi Blog</title>
link
Se utiliza para vincular hojas de estilo css.
<link href="/blog.css" rel="stylesheet" />
meta
Se usa para definir meta datos de la página.
<meta name="keywords" content="Blog" />
style
Para definir css en lÃnea.
<style>.title { color: black; }</style>
script
Es para añadir código en lÃnea javascript o una url.
<script>alert('Bienvenido');</script>
noscript
Si quieres anular el Javascript en algún elemento. En el ejemplo estamos indicando que en los párrafos no se muestre el Javascript.
<noscript><p>No JS.</p></noscript>
Etiquetas semánticas
Son las etiquetas visibles que se van a ver los visitantes a tu página web de como está configurada la página web, si tiene una barra lateral, si tiene cabecera, footer…
body
El elemento principal del documento contiene metadatos del documento, como un tÃtulo y enlaces a recursos estáticos.
<body><h1>Bienvenido</h1>...</body>
main
Contenido principal del documento.
<main><h1>Presentación</h1>...</main>
section
Contiene elementos agrupados por tema.
<section><h1>TÃtulo sección</h1>...</section>
nav
Navegación de la página web.
<nav><a href="/">Inicio</a>...</nav>
article
ArtÃculo de la página donde se indica el tÃtulo, descripción, foto… o los datos que queramos.
<article><h1>TÃtulo del artÃculo</h1>...</article>
aside
Barra lateral a la izquierda o a la derecha de la página web con información que queremos destacar.
<aside><h1>Links relacionados</h1>...</aside>
header
Es la primera parte visible en la web y normalmente incluye el logo, los elementos del menú, un buscador, datos de contacto… y todo lo que se quiera.
<header><h1>Nombre</h1></header>
footer
Es la última parte visible en la web y normalmente incluye links que queremos que estén en la página pero no son tan relevantes como por ejemplo, la polÃtica de privacidad, aviso legal…
<footer>Copyright 2022</footer>
Etiquetas de contenido
Si quieres indicar partes del contenido como párrafo, tÃtulos, dirección…
h1, h2, h3, h4, h5, h6
Son los tÃtulos de la página web, es muy importante que sólo exista un h1 en la página web y esté en primer lugar. A continuación estará el h2 que pueden haber más de uno, y dentro del h2 estará si se quiere un h3 y asà sucesivamente.
<h1>Mi Blog</h1>
address
IrÃa en esta parte toda la información de la empresa o persona: teléfono, email…
<address>Email <a href="..." /></address>
p
Contenido dentro de un párrafo.
<p>Texto del párrafo...</p>
hr
Cambio de tema entre párrados. Si te fijas, se añade esta etiqueta fuera del párrafo.
<p>Texto</p><hr /><p>Texto</p>
br
Salto de lÃnea dentro del contenido.
<p>Nombre<br />Dirección<br />Teléfono</p>
blockquote
Esta etiqueta se usa para indicar una cita o frase a resaltar.
<blockquote>Contenido citado</blockquote>
div
Contenedor sin significado semántico.
<div>...</div>
Próximamente añadiremos las etiquetas html de listas, multimedia, de formularios y de tablas.
¿Te ha gustado este listado de etiquetas html? Como has podido ver son las etiquetas html más comunes.
