HTML5 en 5 minutos: Etiquetas esenciales
HTML5 es actualmente la tecnología estándar para crear la web. Aprende lo esencial y lo más importante de HTML5 en este artículo.
Aprende lo más importante de HTML5 en 5 minutos
¿Qué es una página web?
Una página web es un documento de texto escrito en un lenguaje de marcas estándar (HTML5) para visualizar información a través del servicio WWW de Internet. HTML es un lenguaje de marcas para representar texto (párrafos, listas, hipertexto, etc), imágenes, audio y video en una página web. Una página web puede ser estática (el usuario no puede cambiar el contenido de la página) o dinámica (el usuario puede cambiar el contenido de la página pues está trabaja con un lenguaje de programación y bases de datos).
¿Qué es un sitio web?
Es una agrupación de páginas web relacionadas, sean éstas estáticas o dinámicas.
¿Qué es una aplicación web?
Toda página o sitio web dinámico es una aplicación web. Una aplicación web es toda aquella aplicación que requiere de un navegador para ser ejecutada.
¿Cómo está estructurada una página web?
Una página web debe incluir:
- La declaración doctype
- El head
- El body
Para qué sirve doctype
Al principio de toda página web se escribe:
<!DOCTYPE html>
Esta declaración le indica al navegador que interprete el código como HTML5. Es importante que utilicemos solo etiquetas de HTML5. Muchas etiquetas que se utilizaban antes (por ejemplo, <CENTER>), ya no son válidas y los buscadores como Google, penalizan las páginas que las incorporan.
Etiqueta HEAD
<head>
En el head escribimos datos y metadatos, es decir información sobre la página web que leerá el navegador así como los motores de búsqueda (por ejemplo, Google). En el head puede ir información sobre las hojas de estilo y los javascript. Por lo general los javascript van en el head. Sin embargo, si un Javascript es muy pesado puede ir en el body, para que la página cargue más rápido.
Meta charset
<meta charset=“utf-8”>
La etiqueta meta junto con el atributo charset indica a la página el conjunto de caracteres a utilizar. Utf-8 es un formato de codificación de caracteres Unicode (admite los acentos, las eñes, etc).
Etiqueta Title
<title> Titulo de mi página </title>
La etiqueta title se utiliza para escribir el título de la página que aparecerá en la barra de título del navegador o en una pestaña. Su uso es muy importante si deseamos posicionamiento en los buscadores.
Etiqueta body
<body>
…
</body>
En esta sección va el contenido visual de la página. Se puede afirmar que tiene tres hijos o elementos principales:
- Header
- Section
- Footer
Etiqueta Header en HTML5
<header>
Es la cabecera principal que aparece en las páginas. Sirve para dar la bienvenida o mostrar el titulo principal de una pagina, su logotipo, menú de navegación o un banner llamativo.
No se debe confundir con head (explicado anteriormente). Header es parte del body, es decir, es parte de la pagina.
Por ejemplo, el header de la página de Apple muestra el logotipo, una barra de navegación y un banner.
HTML5: El header de la página de Apple contiene: logotipo, barra de navegación, frase principal y un banner.
Etiquetas h1, h2, etc.
Las etiquetas h1, h2, h3, h4, h5 y h6 son titulares del texto de la página. No cumplen la misma función que title, pues los titulares se utilizan dentro del body.
Un H1 es el título principal, y por lo general el header debería incluir un H1. Realmente un H1 puede ir en cualquier parte de la página. Sin embargo, si el H1 está dentro de un header la frase o palabra titular resultará mejor posicionado en los buscadores.
Lo mejor es que exista solamente un único H1. Pueden haber varios si el diseñador web así lo decide, pero el “valor” de un H1 se “diluye” entre todos los H1 de la página.
H2 es un titular secundario o subtítulo. Aunque visualmente los navegadores muestran un H1 estándar en una fuente más grande que el H2, el tamaño de la letra no es lo mas importante, pues éste puede ser alterado usando CSS. Lo que cuenta es el valor semático que tiene cada etiqueta. Puede haber varios H2, así como los H3 que el texto requiera.
Hgroup
Hgroup es una etiqueta nueva en HTML5. Se utiliza para relacionar varios titulares Por ejemplo:
<hgroup> <h1> Naps Tecnología y Educación </h1> <h2> Investigación en Ciencias Computacionales, Informática y Sistemas </h2> </hgroup>
En este ejemplo, el H2 está relacionado semánticamente con el anterior H1, y tendrá más valor para los buscadores que el resto de los H2.
Etiquetas Nav, ul, ol, li
Menus de navegación
Es importante utilizar la etiqueta nav para crear los menús de navegación. Tal vez haya notado que en algunos resultados de Google aparece algo como lo siguiente:
HTML5: Google puede utilizar los elementos de nav para crear sub-resultados
Aunque esto es decisión del motor de búsqueda, contribuimos a que se genere si utilizamos la etiqueta nav, que expresa claramente las secciones de nuestro sitio web. Así, cuando se hagan búsquedas en Google, los elementos de nav podrían ser mostrados como sub-resultados de la búsqueda.
ul
<ul> representa una lista no ordenada.
<ul>
…
</ul>
Una lista está compuesta de elementos <li>
Aunque se pueden imprimir elementos li sin necesidad de ul, la importancia de ul radica en que los li están agrupados y relacionados semánticamente. <ul> permite agruparlos y dar a entender que pertenecen a la misma lista.
<ol>
…
</ol>
<ol> es una lista ordenada. Por default mostrará números consecutivos para cada elemento de la lista, aunque este comportamiento puede ser modificado con CSS.
Enlaces
<a href=“pagina.html”> Clic aquí </a>
Los enlaces (o links) nos permiten crear hipervínculos hacia otra página web. Lo que está dentro de <a href=“pagina.html”> y su etiqueta de cierre </a> es lo que aparecerá en la página en forma de enlace. Esto puede ser una frase o una imagen.
Un menú de navegación está compuesto de una lista de enlaces, entonces surge la siguiente pregunta.
¿Cómo tiene que ir? ¿<li> <a> o bien <a> <li>?
A nivel semántico lo correcto es que una lista (ul) este compuesto de elementos li, no de elementos <a>. Es por eso que lo correcto es <li> <a>. Si esta solución llega a ocasionar problemas, el problema no está en el HTML sino en el CSS.
Abrir en una pestaña diferente
<a href=“” target=“_blank”>
Se utiliza el atributo target con valor “_blank” para que al dar el clic el usuario abra una nueva pestaña o ventana en vez de que se abra la página en la misma pestaña o ventana.
Ir a una sección de la página
Los elementos html pueden ser nombrados por identificadores. Por ejemplo, cierta sección de la página pudiera estar etiquetada de esta forma:
<section id=“ejemplo”>
En ese caso, el enlace hacia esa sección de la página sería:
<a href=“#ejemplo”>
Cuando el archivo esta dentro de una carpeta
<a href=“prueba/archivo.html”>
En ocasiones la página que queremos abrir está en una carpeta. Si esa carpeta están en el mismo directorio de nuestro archivo HTML, entonces la forma correcta de escribir el enlace es:
<a href=“carpeta/archivo.html”>
Cuando la carpeta esta en una directorio superior
<a href=“../prueba/archivo.html”>
Si la carpeta no está en el mismo directorio de nuestro archivo HTML, sino en un directorio superior, la forma de escribir el enlace sería como la siguiente:
<a href=“../carpeta/archivo.html”>
Los dos puntos consecutivos (..) indican que busque en la carpeta o directorio superior al actual.
Etiquetas P y span
<p>
La etiqueta para formar párrafos es <p>. Cada párrafo genera un salto de línea y genera un nuevo bloque. Generar un salto de línea en el código HTML no genera un salto de línea en la pantalla (en la página web). Se requiere de la etiqueta <p> para escribir correctamente los párrafos.
Span
<span>
Por el contrario, <span> no genera un salto de linea. Se utiliza para marcar una frase dentro de un párrafo con el fin de destacarlo de cierta manera. Con CSS se podría cambiar su color u otros atributos.
Etiquetas Strong, em
<strong>
La etiqueta strong sirve para destacar una frase de entre otras semánticamente. Es el equivalente a escribir en negritas en un documento de texto. Da a entender que esa frase es muy importante dentro de ese texto.
<em>
Em también destaca el texto, sin embargo, no con tanta fuerza como strong. Se utiliza para darle relevancia al texto. Es el equivalente a escribir algo en letra cursiva.
Salto de línea intencional
<br>
La etiqueta br se utiliza para crear un salto de línea. Aunque aún es válida, ya no es necesaria. Si un diseño web requiere de utilizarla, es porque el CSS no está bien estructurado.
Etiqueta Section
<section>
La etiqueta section define una sección dentro de la página. Sirve para englobar un conjunto de contenidos relacionados entre sí. Por ejemplo, una página de comercio electrónico puede visualizar en su página de inicio, diversos artículos de los diversos departamentos. Se crearía un section para cada departamento, y para cada artículo se utilizaría un <article>.
Un <section> puede estar formado por muchos <article>
Section son áreas globales, mientras que article son más específicos.
Etiqueta article
<article>
Definen un elemento de información, por ejemplo un post o entrada de un blog o un artículo a la venta (que incluiría nombre del articulo, foto , precio; datos independientes que juntos representan un elemento de información). Un article permite relacionar datos que en forma independiente no representarían nada, pero juntos producen cierta información.
Etiqueta aside
<aside>
Se tiende a pensar que aside es el contenido que está a un lado de la página. Esto no es del todo correcto. <aside> representa contenido que está relacionado con el principal. Por ejemplo, en youtube, cuando abres un video, a un lado aparecen los videos relacionados.
En ese caso esta a un lado (aside) pero no necesariamente tiene que estar a un costado, pudiera estar en cualquier otra parte de la página.
Podríamos guiarnos de este principio: si no es parte del contenido principal, pero está relacionado, eso es un aside (aunque no este a un lado).
Etiqueta div
<div>
Div nos crea una división que agrupa varios elementos. Sirve para agrupar etiquetas en un bloque que no sea header ni un section, etc,
En este caso, podríamos partir de este criterio: Si existe una etiqueta para representar esa sección de la página, utilice esa etiqueta. Pero si existe una división interna más específica para la que no existe una etiqueta en HTML, se utiliza div.
Etiqueta footer
<footer>
Estamos acostumbrados a que nos indiquen el punto de finalización de casi cualquier cosa, y eso no es distinto en las páginas web. Para imprimir un pie de página se utiliza footer.
Si una página no tiene footer causa en el usuario una impresión caótica. Dentro del footer pueden ir los créditos, un resumen de los enlaces principales, etc.
Etiquetas img, figure, figcaption
<img>
La etiqueta <img> se ha utilizado siempre para mostrar una imagen y en HTML5 no es la excepción. Sin embargo, han aparecido nuevas etiquetas para darle mayor significado y relevancia a las imágenes.
Atributo alt
<img src=“imagen.jpg” alt=“regalos” >
El atributo alt se utiliza para dar información sobre la imagen. Es muy importante escribirlo siempre si no queremos ser penalizados por los buscadores. Para un buscador es muy difícil saber qué representa una imagen, y por eso se valen del atributo alt para obtener esa información.
En la mayoría de los navegadores, cuando se posa el mouse sobre una imagen aparece flotando un pequeño mensaje con el contenido que hayamos escrito en alt.
Height y width
Estos atributos pueden modificar el tamaño de una imagen y aun son válidos, pero no deben utilizarse. HTML es el lenguaje de creación de contenidos, mientras que los aspectos de diseño deben ser escritos usando CSS.
Etiqueta Figure
En html5 se debe utilizar una etiqueta figure para agrupar contenido relacionado con la imagen.
<figure> <img> <figcaption> Mensaje que acompaña la imagen </figcaption> </figure>
Aunque el mensaje de figcaption puede ser escrito usando cualquier otra etiqueta, usar figcaption permite relacionarla con nuestra imagen, lo que nos permitiría un mejor posicionamiento en los buscadores.
Audio y video
Existen etiquetas especiales en HTML5 para desplegar audio y video.
Audio
<audio src=“audio.wav” type=“audio/wav” controls=“controls”> </audio>
video
<video src=“video.mov” type=“video/mov” controls=“controls”> </video>
En ambos casos se utiliza el atributo src para indicar el archivo de audio o video. El atributo type para indicar el tipo de audio o video que se reproducirá. Y el atributo controls para especificar si aparecerán o no los controles del reproductor.
El problema de utilizar estas etiquetas es que cuando se carga un video, no sabemos que navegador utiliza ni que versión de navegador utiliza, por lo que en ocasiones el equipo del usuario no está preparado para reproducir nuestros archivos. Debido a eso es mejor no utilizar video en una pagina web.Se puede subir a otro servicio como youtube y copiar el código correspondiente. En Youtube se encuentra la opción insertar, que nos da un codigo, y ese código se puede incluir e nuestro html, Google prefiere ese metodo, por ser un poco más confiable (y porque Google es dueño de Youtube).
En conclusión
Como pudiste notar, HTML5 se ha diseñado para que nuestras web sean semánticas, es decir, que todos sus elementos tengan y aporten significado a la página. Hacer un uso correcto de estas nuevas etiquetas nos permite construir webs más funcionales, atractivas y bien posisionadas en los resultados de los buscadores.
Tu comentario
Comments
CSS en 1 minuto: introducción a las hojas de estilo en cascada - | Jul 4,2018
[…] Cascading Styles Sheets son hojas de estilo en cascada que nos permiten cambiar el diseño de una página HTML. Los archivos HTML están constituidos por etiquetas, a ésas etiquetas se les da un estilo (color, tamaño, ubicación, etc) a través de las hojas de estilo en CSS. Si deseas información sobre las etiquetas HTML lee el siguiente artículo: HTML5 en 5 minutos: Etiquetas esenciales […]