ASESORÍA GRATUITA
EN ES

¿Cuáles son las etiquetas más importantes del HTML5?

Hay muchas maneras de crear una página web, pero siempre es recomendable hacerla en HTML5. Aunque las demás formas de crear una páginas pueden ser útiles, crear un sitio web en HTML suele ser más beneficioso para posicionar bien un negocio, blog, etc 

A continuación, te enseñamos las etiquetas más importantes que debes conocer para construir una página web. Puede sonar confuso el lenguaje HTML, pero cuando sabes cómo manejar el lenguaje de marcado puedes crear lo que se te dé la gana en el mundo del Internet. 

Tip: para conocer cómo están construidas las otras páginas web debes hacer clic izquierdo en cualquier parte y apretar ver código.

Glosarios de las etiquetas más importantes de HTML5: 

  1. <a>: define un hipervínculo o enlace, para ligar una página con otra. Seguido de eso es imprescindible utilizar el atributo href, porque indica a dónde se dirige el hipervínculo. Se puede utilizar en imágenes, texto, palabra, correo electrónico, número de teléfono o para ejecutar un javascript.

ejemplo: <a href= “https://www.creativastrog.com”> visita la agencia de marketing digital y creación web creativastrog </a>

  1. <abbr>: sirve para abreviar organizaciones, empresas, conceptos, etc.

ejemplo: <p>la <abbr title="Organización mundial de la salud">OMS</abbr> Se creó después en...</p> 

  1. <address>: sirve para dar un correo electrónico.

ejemplo: <address> cualquier consulta escribir a <a href=”[email protected]> creativastrog </a>.

  1. <article>: esta etiqueta no está limitada por su nombre, pues un article se refiere a que lo escrito tiene sentido por sí solo. Por ejemplo, puede estar inserto en un blog para diferenciar dos “artículos” distintos en la misma página. 

ejemplo: <article> <h2> comida china <h/2> <p> la comida china es originaria de….<p> </article> <article> <h2> comida tai <h2> <p> la comida thai es originaria de…

  1. <aside>: la etiqueta se relaciona de manera indirecta con el contenido principal. Normalmente, se pone el contenido del aside como una barra lateral de la página web. 

ejemplo: <p>Visité Madrid y fui al museo del Prado, visité el centro y también estuve en el parque del Retiro </p> <aside> <h4>Madrid</h4> <p> Madrid es una ciudad europea que se encuentra en españa…</p> </aside>

  1. <audio>: sirve para insertar un audio.

ejemplo:<h1>ejemplo de audio<h1> <p> aprieta aquí </p>  <audio controls> <source src=”campana.mp3” type=”audio/mpeg”>

El src es la fuente del audio (de dónde proviene)

  1. <b>: es para hacer un texto en negritas.

ejemplo: <p>esto no es negrita<b>esto es en negrita</b><p>

  1. <blockquote>: es para insertar una cita.

ejemplo: <h1>Pablo Neruda<h1> <p>cita extraída de la página oficial de Pablo Neruda<p><blockquote cite=” www.pabloneruda.com”>me gustas cuando callas porque estás como ausente.></blockquote>

  1. <body>: es lo que define el cuerpo de la página web. Contiene listas, párrafos, títulos, imágenes, etc.
  1.   <br>: sirve para saltarse a la siguiente línea, es decir, equivale como a un “enter”. 

ejemplo: <p><br>esto hace,</br>saltarse líneas</p>

  1. <caption>: define el título de una tabla, por lo que debe ponerse justo después de la etiqueta <table>

ejemplo: <h1>Gasto en Europa</h1><table><caption>Gasto en españa </caption> <tr><th>mes</th><th>gasto</th></tr><tr><th>enero</th><th>febrero</th></tr>

  1. <cite>: suele ser el título de una obra. Puede ser: una canción, libro, poema, etc. 

ejemplo: <h1>Libros que no te puedes perder</h1><img scr=”img_100_años_de_soledad.jpeg” width=”200” high=”220” alt=”portada 100 años de soledad”><p><cite>100 años de soledad</cite>escrito por Gabriel García Márquez.</p>

  1. <details>: se utiliza para que el usuario pueda desglosar y así tener más información sobre algo. Después de esta etiqueta va el tag <summary>.

ejemplo: <h1>Paises de latinoamerica</h1><details><summary>Chile</summary><p>es un país largo y angosto que tiene mucho mar…</p></details>

  1. <div>: es la sección o una división en un documento HTML. Es un contenedor (que contiene) que luego se estiliza con CCS o se anima con Javascript.

ejemplo: <h1>Países del mundo</h1><div class=”nombredeldiv”> <h2>Título del div</h2><p>texto dentro del div</p></div><p>texto fuera del div</p>

  1. <dl>: es la descripción de los elementos de una lista. Siempre va junto a <dt> y <dd>; el primero define el término y el segundo lo describe. 

ejemplo: <h1>Carta de desayuno </h1><dl><dt>Café colombiano</dt><dd>granos extraídos de la sierra colombiana…</dd><dt>Jugo de frutos del bosque</dt><dd>fresa, frambuesa, arándano…</dd></dl>

  1. <em>: hace cursiva o un palabra o texto destacado.

ejemplo: <p>Hola <em>mundo</em></p>

  1. <footer>: Es lo que va al final de la página web. Dicho de otra manera, es el pie de página. Normalmente ahí va información de contacto, enlaces del sitio, páginas relacionadas, ubicación, etc.

ejemplo: <body><h1>título</h1><footer>para más información contactar a [email protected]</footer></body>

  1. <h1...h6>: Se utiliza para hacer títulos. El h1 es el más importante hasta el h6 que es el menos importante. Nunca utilizar más de un h1; los demás “h” se pueden repetir.
  1. <head>: contenedor de los metadatos y se pone entre la etiqueta < html > y la etiqueta <body>.  
  1. <header>: es un contenedor y pueden haber varios de esto. Dentro de él pueden estar los títulos, logos, información de autoridad, etc. 

ejemplo: <body><header><h1>un título</h1><p>un texto</p></header></body>

  1. <hr>: sirve para hacer cambios de tema (pone una línea divisora)

ejemplo: <h1>Cultura Chilena</h1><p>la cueca el es baile nacional…</p><hr><p>las empanadas de carnes son…</p><hr><p>....

  1. <html>: es la raíz de todo documento HTML.
  1. <img>Sirve para vincular una imagen en el documento HTML. 

ejemplo:<img scr=”logo” alt=logo creativastrog width=”200” high=”220>

  1. <ins>: es para subrayar palabras.

ejemplo: <p>esto no está subrayado<ins>esto sí</ins><p>

  1. <ol><ul><il>: La primera y segunda etiqueta define una lista; orden numérico y la otra sin números. La otra define los elementos de una lista.

ejemplo: <p>lista para el supermercado</p><ul><il>tomante</il><il>jamón</il><il>pan</il></ul>

  1. <main>: contenido principal del documento HTML. No puede haber más de uno y no puede contener elementos que se repitan en otras partes de la página web.

ejemplo: <main><h1>Celular de última generación</h1><p>este celular…</p></main><h2>otros equipos móviles</h2>... 

  1. <mark>: palabra o texto subrayado con destacador. 
  1. <meta>: son información sobre datos. No se ven en la pantalla cuando el usuario navega, pero sí son leídos por los robots que interpretan la información. Existen varios metadatos y siempre van dentro del <head>.
  1. <nav>: son los enlaces de navegación de un sitio web
  1. <p>: indica un párrafo. 
  1. <q>: sirve para hacer una cita breve. 
  1. <strong>: sirve para indicar que un texto o palabra es importante. 
  1. <title>: una de las etiquetas más importante. Son alrededor de 60 caracteres y sirve para decirles a los robots de qué va la página web de un sitio web.
Agencia Digital
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram