Cualquier persona que usa diariamente la Internet, ha escuchado el término etiquetas, y aunque suene como algo de poco valor, te vamos a hacer cambiar de parecer. Por esta razón, descúbre qué son etiquetas en un blog, y mucho más a continuación.
Indice De Contenidos
¿Qué son etiquetas HTML y cuáles son las de mayor utilidad?
El término etiqueta, dependiendo del contexto, tiene distintos significados, ya que etiqueta puede usarse para referirse a una conducta, a un material adhesivo, a una descripción de un producto, y a un código que marca una acción. De todas las que mencionamos estaremos enfocándonos en la última, y vamos a describir bien qué son etiquetas html para que no exista confusión.
Si bien es cierto que las etiquetas html eran únicamente manejadas por informáticos, con el cambio de las tecnologías y la personalización de contenido, es necesario saber cómo manejarlas para entregar un contenido de más alta calidad.
¿Qué es una etiqueta?
Muy bien, ya sabemos que dependiendo del contexto el término etiqueta tiene una definición, y por ello vamos a explicar qué son etiquetas de post en html.
En primera instancia, HTML es un lenguaje que se usa para crear páginas en Internet, y que por sus siglas en inglés significa «Lenguaje de Marcas de Hipertexto». Esos códigos da instrucciones al navegador, le dice lo que tiene que mostrar y lo que tiene que hacer.
Ahora bien, las etiquetas es la escritura que realiza el desarrollador, y por lo tanto al escribir un código estarías escribiendo una etiqueta html. Pero algo que se debe destacar, es que los códigos tienen secuencias específicas, y por lo tanto el desarrollar debe adherirse a él.
Los caracteres básicos serían los siguientes:
«Menor que» (<)
Cualquier carácter determina la acción de la etiqueta.
Cualquier atributo debe estar escrito de la siguiente forma: Name=»valor». Además, los atributos son palabras especiales que se colocan en las etiquetas de inicio.
«Mayor que» (>)
Etiquetas básicas
Antes de conocer las etiquetas básicas de html, primero debemos saber diferenciarlas de los elementos y atributos. Como mencionamos antes, las etiquetas componen la estructura de todo código HTML, pero para que funcione bien debe tener otros elementos conocidos como atributos y contenido.
Existe en total unas 91 etiquetas, aunque 10 de ellas ya son obsoletas. No obstante, ella no tiene la información necesaria para poner en funcionamiento los comando, y es aquí cuando se involucra los atributos.
Cada etiqueta se compone de atributos, y dependiendo de las funciones cada una de ellas, pueden dividirse en las siguientes categorías:
- Atributos básicos: Son los que se aprecian en la mayoría de las etiquetas HTML y en los códigos (CSS).
- Atributos de internacionalización: Se utilizan cuando el contenido de una página se encuentra en distintos idiomas.
- Atributos de eventos: Podemos encontrarlos en las web que usan código JavaScript.
- Atributos de foco: Es cuando se selecciona una parte del contenido. Si se elimina la selección el atributo, entonces se pierde el foco.
Ahora bien, los atributos como mencionamos antes, son textos que se separan por el símbolo «=» y que se pueden apreciar al inicio de una etiqueta, y luego del nombre del elemento. Los valores siempre se separan en comillas simples o dobles.
En cuanto a los elementos, estas son las partes que integran un documento HTML, y las etiquetas más comunes que conforman dicho documento serían las siguientes:
- <body> para el contenido
- <head> Información sobre el documento
- <div> Separación dentro del contenido
- <a> para enlaces
- <strong> para tener el contenido en negrita
- <br> para saltos de línea
- <H1>…<H6> para títulos dentro del contenido
- <img> para agregar imágenes al documento
- <ol> para listas ordenadas
- <ul> para listas desordenadas
- <li> para elementos dentro de la lista
- <p> para parágrafos
- <span> para estilos de una parte del texto
Ten en cuenta que las etiquetas siempre deben abrir con los símbolos «<>» y cerrar con «</>».
<body> </body>
Esta etiqueta es bastante común, e indica el cuerpo del documento HTLM que vas a crear. Es fundamental usarla, porque sin ella no podríamos saber dónde comienza el texto que va a ser visible en nuestro documento.
<head></head>
Esta etiqueta provee datos básicos del documento HTML que vamos a crear, y se ubica al inicio de los códigos. En cuanto a la información que provee, con ella establecemos el título del documento, las hojas de estilo, enlaces Script, etc. Obviamente no podemos visualizarla en la web, pero es fundamental para darle cuerpo a la página y al contenido HTML.
<div> </div>
Su palabra indica la división de algo, y con ella agrupamos elementos, formando de esta forma una plantilla de otros atributos. Puede no parecer importante, pero esta etiqueta le da cuerpo al contenido, ya que con ella podemos colocar párrafos, encabezados, listas, tablas, por mencionar algunos, que sí vamos a poder visualizar en el blog.
<a> </a>
Es una etiqueta muy importante dentro de los códigos HTML, ya que convierte a un texto en un hipertexto, que en términos sencillos es la definición de enlaces.
Los enlaces si lo recordamos bien, nos ayudan a ir de una página a otra dentro de un mismo blog, e incluso visitar a un blog fuera del dominio.
Sin ella no podríamos visitar las páginas internas de nuestro blog, pero no todas cumplen el mismo propósito. Existen etiquetas <a> que se subdividen en atributos, los cuales serían los siguientes:
- Atributo href: Es usado para darle vida a un enlace.
- Atributo target: Con ella identificamos si el enlace nos enviará a una nueva ventana o continuaremos en la que estábamos.
Ahora, para entender de lo que estamos hablando, supongamos el siguiente ejemplo:
<a href=”https://www.dondominio.com/” target=”_blank”>aquí</a> para visitar DonDominio.
Como podemos observar con el ejemplo anterior, podemos concluir lo siguiente:
La etiqueta <a> lo estamos usando para indicar un enlace, luego agregamos el atributo href para que funcione correctamente. Posteriormente agregamos el otro atributo target, para indicar que queremos abrir el enlace en la ventana que está en uso. Y luego procedemos a cerrar la etiqueta para concluir la acción de la etiqueta </a>.
<strong> </strong>
Si tienes un texto muy largo, y deseas resaltar algo importante, la etiqueta <strong> te ayudará con ese énfasis que deseas. Realmente es simple, lo único que tienes hacer es buscar la palabra que deseas resaltar en el texto del documento, no los códigos, y poner la etiqueta en ella, como por ejemplo:
<strong>esta palabra</strong>.
<br>
Tener un bloque completo de información no se ve bonito, los espacios entre párrafos son importantes, y con esta etiqueta le dirás al navegador los saltos que debe dar.
<H1> </H1> …. <H6> </H6>
Seguramente de manera inconsciente has usado la siguiente etiqueta, ya que que se usa para redactar tu índice de contenido. El propósito es el mismo, la diferencia es que le estás definiendo al documento HTML, que lo que se encuentra dentro de dicha etiqueta son los títulos de tu contenido.
Ahora bien, esta etiqueta se divide en 6 niveles diferentes, y para poder aclarar cuál es cuál, solo debes agregar la etiqueta <H + número>.
<IMG> </IMG>
Las imágenes son sumamente importantes dentro de un blog, y para indicar que vamos a añadir una imagen en nuestro documento HTML solo debemos utilizar la etiqueta <img>. Sin embargo, dicha etiqueta no puede funcionar por sí sola, es necesario colocar el atributo src para establecer la ubicación de la imagen dentro del texto.
<OL> <li></li> <OL> | <UL> <li></li> <UL>
Si deseas crear una lista en tu contenido, necesitas recurrir a estas etiquetas. Sin embargo, debes especificar cuál de ellas vas a usar, porque cada una tiene propósitos distintos:
- OL y LI: Son para crear listas
- OL: son para listas que estén organizadas.
- UL: Para listas que no tienen orden.
Pero cuidado, siempre debes usar la etiqueta LI para decirle al documento que las etiquetas y atributos que vas a colocar, identifican una lista. Por ejemplo:
<ul>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<ul>
<P> </P>
Son las etiquetas que indican la agrupación de un texto dentro de un párrafo, y son útiles para organizar el contenido.
<Span> </Span>
No confundas esta etiqueta con la palabra Spam, ambas tienen una utilidad diferente. En este caso la etiqueta nos sirve para personalizar una parte del contenido. Como por ejemplo:
<span style=”color: red;”>esta palabra</span> en rojo.
Si deseas saber más de códigos y de lenguaje HTML, te recomendamos los siguientes artículos: