Las etiquetas HTML son la base principal del lenguaje que se usa para elaborar páginas web y que entienden los navegadores para construir la página correctamente y mostrarla al usuario a través de éste.
En esta entrada te enseñaré las etiquetas básicas que deberías conocer por si necesitas hacer alguna modificación en tu página web, o por si al contrario te has animado a tocar el código y has hecho algún desajuste.
Etiquetas HTML, lo mínimo que deberías conocer
Primero de todo hay que saber que una etiqueta HTML se caracteriza por ir entre corchetes <> para la apertura y </> para el cierre.
Por ejemplo, para poner el texto en negrita:
<strong>Negrita</strong>
Prácticamente todas las etiquetas se abren y cierran de este modo, a excepción de dos o tres que veremos mas adelante.
Estructura básica de una página web
La estructura básica de una página web con sus correspondientes etiquetas la tenéis a continuación:
[code language=»html»]
<html>
<head>
Aquí va todo lo relacionado con el título, estilos css, etc.
</head>
<body>
Aquí va el contenido de la página.
</body>
</html>
[/code]
La etiqueta html engloba toda la página y es imprescindible para que el navegador sepa que lo que está cargando es una página web.
La etiqueta head incluye el título de la web, estilos css, scripts, palabras claves y demás información que es interpretada por los navegadores para comenzar a construir la web y por los buscadores para indexar la página web en sus directorios.
Dentro de la etiqueta body es donde va todo el contenido de la web, las imágenes, el texto… lo que el usuario final verá en la pantalla.
Etiquetas HTML que más se utilizan
<title>: Define el título de la página web. Es una etiqueta importante para el SEO. También es la que se muestra en la barra de título del navegador. Se inserta siempre dentro de la etiqueta head.
<h1><h2><h3>… hasta <h6>: Encabezados. Existen seis tipos de encabezados por orden de relevancia. Estas etiquetas también son importantes para el SEO, ya que Google los rastrea para encontrar contenido relevante.
<a>: Usaremos esta etiqueta para añadir enlaces tanto internos como externos a nuestra web. Añadiremos el atributo href=»url_web» para la dirección web, y target=»_blank» para hacer que el enlace se abra en una nueva ventana del navegador.
<img>: Como indican sus siglas se emplea para añadir imágenes, siempre va a ir acompañado del atributo src=»ruta_de_la_imagen» para mostrar la imagen. En este caso en concreto la etiqueta img no se cierra.
<strong>: Para poner el texto en negrita. De nuevo importante para el SEO, especialmente para destacar palabras clave.
<em>: Etiqueta HTML que pone el texto en cursiva.
<p>: Delimita un párrafo normal, o lo que es lo mismo, añade un salto de linea.
<div>: La etiqueta div se emplea para definir un bloque de contenido o una sección de nuestra página web. Es una etiqueta muy compleja que se apoya en la hoja de estilos CSS para darle color, o posicionarlo para colocar el bloque en cualquier parte de la página que estemos diseñando.
Bonus, etiquetas HTML 5
HTML5 es la actualización del antiguo HTML, pero no te asustes, las etiquetas HTML siguen siendo las mismas, simplemente se añaden nuevas. HTML5 tiene unas características especiales para el desarrollo de aplicaciones modernas basadas en el navegador y para hacer la experiencia web mas semántica.
Algunas de las nuevas etiquetas HTML 5 son las siguientes:
<nav>: Se emplea para colocar un menú de navegación.
<section>: Delimita un área específica donde hay contenido. Por ejemplo, en un blog sería donde van todos los artículos, al igual que en la parte de los comentarios, ya que delimita otra zona de la página web.
<article>: Indica contenido independiente. Siguiendo el ejemplo de un blog, si estamos diseñando la página principal, cada post podría ser un article.
<aside>: Vendría a ser el menú lateral que tienen la mayoría de páginas web y que muestran información como las categorías, enlaces, etc.
<video>: Con esta etiqueta insertamos un vídeo. Viene acompañado de los atributos src para indicar la url del vídeo o width y height para definir el ancho y alto.
<audio>: Funciona de la misma manera que la anterior etiqueta, pero esta vez para insertar audio.
<footer>: Marca el pié de la página web, o lo que es lo mismo, la parte final de la web, donde aparece el autor, términos de uso, licencia, etc.
Ahora que ya conoces un poco mas el lenguaje HTML, aquí te dejo con un tutorial para hacer bordes redondeados con CSS.
Estas son algunas de las etiquetas HTML mas comunes que te puedes encontrar si vas a modificar tu página web y que deberías saber cual es su uso.
Si quieres aprender más sobre el lenguaje HTML te dejo el siguiente manual.