Blog Post

Etiquetas más usadas en HTML

Este post lo escribo porque estamos haciendo un curso en vivo sobre HTML5 con emprendedoras. Este es un proyecto de Innovacien enmarcado en el Centro POETA Digispark con Trust for the Americas, la Organización de Estados Americanos y Microsoft. Estas clases en particular son apoyadas por Corfo.

En la primera sesión de la mencionada actividad, salió la conversación sobre las etiquetas más usadas en HTML.

Entonces a continuación seleccionaré desde All The Tags las que yo creo son más usadas en la actualidad:

Etiqueta HTML
Esta se usa en especial como buena práctica junto con el protocolo DOCTYPE de HTML5. No es absolutamente necesaria para el funcionamiento, pero es recomendada. La etiqueta HTML se abre y cierra y debería estar desde el comienzo al final del documento:  
<html>...</html>

Etiquetas del HEAD

Head es una etiqueta donde alojamos toda la información no visible para el usuario, pero que son metadatos que leen los buscadores y otro tipo de software. También acá podemos linkear con las hojas de estilos (.css) o los archivos de JavaScript (.js). La etiqueta Head:

<head>...</head>

Dentro de estas se usa Tittle para definir el título del documento:

<title>Mi sitio</title>

También se usa Link para vincular el documento con hojas de estilos, javascript u otro tipo por ejemplo en las librerías:

<link href="/blog.css" rel="stylesheet" />

La etiqueta Meta se utiliza para agregar la metadata del documento o sitio:

<meta name="keywords" content="Blog" />

Las etiquetas Style y Script se usan para escribir en CSS o JS según corresponda. Esta no es exclusiva del Head, porque también se podría usar dentro del Body.

<style>.title { color: red; }</style>

<script>alert('Welcome.');</script>

Etiquetas de Body

Esta define el área de contenido visible para el usuario del sitio:

<body><h1>Bienvenidos</h1>...</body>

El Body lo podemos dividir en distintas secciones, es una buena práctica porque podríamos hacerlo todo solamente con la etiqueta Div que define bloques de contenidos diferenciados:

<div>...</div>

Pero de las de secciones en la actualidad se están usando principalmente cinco, aunque no es absolutamente necesario para el funcionamiento, pero ayuda a leer el código y comprender mejor el CSS:

La primera es Nav para la barra de navegación o el menú:

<nav><a href="/">Home</a>...</nav>

La segunda es Header para el contenido de la cabecera del sitio:

<header><h1>Title</h1>Posted 1m ago</header>

La tercera es Main para el contenido principal:

<main><h1>About Me</h1>...</main>

La cuarta es Aside para los contenidos laterales:

<aside><h1>Related Links</h1>...</aside>

La quinta y última de esta mini selección es Footer para el pie de página:

<footer>Copyright 2018</footer>
Neformal.lviv, Public domain, via Wikimedia Commons
Etiquetas de texto

Para escribir texto se utilizan principalmente las etiquetas h1, h2, h3, h4, h5 y h6 para tipos de texto destacado, en la práctica uno tiene dos o tres de estas etiquetas en el sitio:
<h1>My Blog</h1>

La etiqueta P para el párrafo:

<p>Once upon a time...</p>

Para destacar algún contenido de texto dentro de los párrafos se usa mayormente las etiquetas B, I y Span

<p>Stack uses <b>HTML</b> and <b>CSS</b>

<p>The term <i>déjà vu</i> means...</p>

<span class="name">Text</span>


Etiquetas de medios

De estas se utiliza principalmente Img para las fotos, aunque en este momento la tendencia es usar Figure como buena práctica sin ser dominante hasta el momento:

<img src="boat.png" alt="Sailing boat" />

<figure><img /><figcaption /></figure>

Para Video en nuestro hosting:
<video controls src="m.mp4" poster="p.png" />

Audio en nuestro hosting:

<audio src="m.mp3" autoplay controls />

Aunque la mayoría de los sitios prefieren alojar audios y videos en otras plataformas tipo YouTube por los costos de almacenamiento y carga del sitio. Para esto regularmente se incrusta el medio en un marco utilizando la etiqueta Iframe, esta permite definir un área de contenido que originalmente está alojado en otro sitio, pero se puede visualizar en el nuestro:

<iframe src="https://..."></iframe>

Estas son las más utilizadas. Las únicas que estamos dejando fuera son las de listas y formularios, para las cuales realizaremos un post específico a futuro.

Si quieres contestar la encuesta de esta primera clase puedes hacerlo en: https://forms.office.com/r/echnDzmJHf

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Related Posts