<html>
HTML es la etiqueta principal de cualquier documento HTML. Con ella se dá inicio a un html. Posee un atributo como lang para poder especificar en que idioma estará la página que es recomenable su uso por cuestiones de SEO. Además tiene algunos elementos importantes a tener en cuenta.
<head>
La etiqueta head es la etiqueta que contiene todos los metadatos sobre la página. Si usamos algun IDE como Visual Studio Code con solo escribir html:5 creamos un head preparado para la ultima versión de HTML. Hay algunos elementos importantes que hay que tener en cuenta en el head.
-
<meta>
Permite alojar metadatos de la página. Posee algunos atributos interesantes como charset, que indica que codificación de caracteres se utilizarán en la página (el estandar es UTF-8. Otro es el viewport, que por defecto viene preparado para poder visualizar tu pagina en dispositivos moviles.
-
<title>
Dentro del title va el titulo que tendrá la página web. El título no se verá en el documento HTML sino que se verá en la pestaña del navegador.
-
<link>
Permite agregar links a archivos de interes para la pagina web, por ejemplo paginas de estilos. Ej:
Queremos agregar nuestro archivo CSS para que trabaje con la pagina
<link rel="stylesheet" href="styles.css">El atributo rel sirve para identificar de que se trata ese link, en este caso, una hoja de estilos.
Hasta acá, todas estas cuestiones las resuelve automaticamente nuestro IDE, si bien es importante saberlas, tenes que saber que podes ahorrarte tiempo escribiendo en VS Code “html:5” y listo.
<script>
Dentro de script uno puede agregar links a archivos de JavaScript o dentro de las etiquetas ejecutar código de JavaScript. Ej
<script src="script.js">
ATENTI
Script tiene atributos como defer o async, que permiten que el script se empiece a ejecutar despues de cargar toda la pagina. Son utiles para poder trabajar estos.
Script suele verse en el head de una página, sin embargo, es recomendable ponerlo antes de que termine el body. Esto es así para lograr que lo ultimo que cargue la página sea el script y el mismo pueda ser ejecutado una vez que ya toda la página está cargada.
<main>
La etiqueta main hace referencia a lo principal de la página. Debajo de <main> debería ir la parte mas importante de tu página. Sirve para que los buscadores sepan que es lo principal que hay en tu página.
<header>
La etiqueta header hace referencia a la cabecera de una página. Suele contener informacion sobre navegación o ayudas para llegar a una parte determinada del sitio web. Te muestro algunos ejemplos de headers:
Header de la página de la realeza britanica
_17.06.42.png)
Header de la página oficial de River
_17.05.26.png)
Header de la página de Apple
_17.05.50.png)
<nav>
La etiqueta nav hace referencia a la barra de navegación de una pagina de internet. Esta se encuentra dentro del header ya que es de las primeras cosas que se ven en una pagina, sirve para que el usuario pueda navegar por la misma.
_21.28.43.png)
Nav de PlayStation
_21.28.54.png)
Nav de MercadoLibre
_21.29.27.png)
Nav del Estudio Juridico VS
<footer>
La etiqueta footer hace referencia al pie de pagina de un sitio web. Se debe utilizar para la ultima parte de una página. Estos son algunos ejemplos de footers:
Footer de MDN:
_16.18.44.png)
Footer de RiverID
_16.19.28.png)
Footer de la página de la realeza britanica
_16.20.52.png)
<address>
La etiqueta address sirve para agregar información de contacto en la página. Generalmente se encuentra dentro del footer, donde esta la informacion de contacto de la empresa o la persona de quien se trata la página. Ej:
<footer>
<address>
<p>Telefono: 0912-2018</p>
<p>Dirección: Estadio Mâs Monumental</p>
</address>
</footer>
Algunos ejemplos graficos:
_01.06.09.png)
Address del Estudio Marval Ofarrell
_01.06.48.png)
Address de River Plate
_01.09.03.png)
Address de C5N
<section>
La etiqueta section sirve para definir secciones de tu página. De esta forma se puede separar en el código cada una de las partes que componen la totalidad de la pagina. Un ejemplo de seccion puede ser un carrusel con posteos, o una galeria de imagenes. Ej:
<main>
<section>
<h2>Mira los ultimos posteos de River</h2>
</section>
</main>
<article>
La etiqueta article sirve para contener informacion dentro de un mismo elemento. Se parece a section pero se utiliza mas para articulos (como su nombre lo dice), por ejemplo posteos de un foro, una noticia o una nota. Ej:
<main>
<section class="posts">
<article id="post1">
<p>River jugo bien hoy! Me gustó mucho como juega Solari</p>
</article>
</section>
</main>
<aside>
La etiqueta aside sirve para agregar elementos en el costado de una pagina. Puede utilizarse para hacer barras laterales o espacios al costado de una pagina. Ej:
<main>
<section class="posts">
<article id="post1">
<p>River jugo bien hoy! Me gustó mucho como juega Solari</p>
</article>
<aside>
<p>Ingresá a la Tienda River para conseguir tu nueva camiseta</p>
</section>
</main>
Algunos ejemplos gráficos:
_20.17.32.png)
En este ejemplo, el cuadro de informacion de la Libertadores es un aside
_20.19.55.png)
En este ejemplo, el espacio de transferencias bancarias y el del certificado iram constituyen un aside
<figure>
La etiqueta figure sirve para incluir contenido multimedia. No sirve para agregar el contenido sino para estructurarlo semanticamente. Por ejemplo, con la etiqueta figure no puedo agregar imagenes pero puedo agregar dentro una etiqueta img para poder agregarlo. Ejemplo.
<main>
<figure>
<img src="www.river.com.ar/logo.jpg">
</figure>
</main>
En el caso del ejemplo dentro del main tenemos una seccion figure con un img adentro.
El elemento figure tiene disponible la etiqueta figcaption, que sirve para agregarle un epigrafe al elemento multimedia que se encuentra dentro de figure. Agreguemos la etiqueta figcaption al ejemplo de arriba.