Quizá muchas personas piensan que crear o modificar el contenido de una página web es un trabajo demasiado complicado. Obviamente recurrimos a los desarrolladores e ingenieros web cada vez que es necesario, pero existen algunos aspectos que no son tan especializados. Las etiquetas de HTML son muestra de esto.

Si esta es la primera vez que escarbas un poco al respecto, podemos decirte que creamos una guía sencilla con todo lo básico. Porque, si tienes un sitio web de tu empresa, producto, servicio o blog te conviene saberlo.

<< Guía básica sobre HTML y CSS para marketers [Descargar gratis] >> 

Gracias a las etiquetas de HTML, la construcción de una página puede entenderse sin tantos rodeos por máquinas y por humanos, pues el código se basa en la descripción de los elementos que la componen. Lo mejor de todo es que es bastante accesible y sencilla de aprender, por lo que no necesitas ser un experto en desarrollo web para insertar imágenes, videos, enlaces, documentos o darle formato enriquecido a tus contenidos. O, mejor aún, para corregir algún error.

Cuando tienes acceso a la estructura de una página web, reconocerás las etiquetas de HTML de inmediato, pues están escritas entre estos signos: <tipo-de-etiqueta>texto</tipo-de-etiqueta>. La primera parte encerrada en signos es la apertura de la etiqueta, y la segunda, que cuenta con una diagonal, indica el cierre de esa etiqueta. Esto sirve para indicarle al navegador la porción de texto que se modifica por dicha indicación. Si se trata de una imagen, un salto de línea o video no es necesario indicar cierre, pero eso lo hablaremos un poco más adelante.

Por otro lado, todas las páginas web que utilizan este lenguaje lo indican desde la primera etiqueta, al inicio, y luce así: <HTML>. Al pie de esa página, se muestra la de cierre: </HTML>.

Para ser más claros, te mostraremos cuáles son las partes básicas de las etiquetas de HTML:

  • Elemento: es el nombre de la etiqueta, generalmente pareada (es decir: con apertura y cierre, como lo acabamos de mencionar), y aparece entre los signos de apertura. Por ejemplo: <title>Partes básicas de etiquetas HTML</title>, que indica que esa frase es un título.
  • Atributo: es lo que diferencia a un elemento y que le da ciertas características, como tamaño, color, tipo de fuente. Se escribe antes del signo de igual (=), junto al elemento de la etiqueta, únicamente en la apertura, y antes de la variable. Por ejemplo: <font face=»Arial»>. Este texto aparecerá en tipografía Arial</font>. El atributo es el tipo letra, es decir: face.
  • Contenido: es el texto que modifica las etiquetas, lo que aparece entre las etiquetas y atributos.
  • Variable: es la característica del atributo de una etiqueta: color, tamaño, tipo de letra, y se escribe generalmente entrecomillado después del signo de igual. En el ejemplo de atributo, la variable es Arial.

Existen muchas etiquetas de HTML, al fin y al cabo son las que se encargan de la apariencia, estructura y organización de la información visible de las páginas web. De hecho, es posible utilizar varias junto a distintos atributos para un mismo contenido, según como deseas que lo vean tus visitantes. 

Sin embargo, existen algunas que son básicas, y de esas queremos hablarte. Te aseguramos que, una vez que las aprendas y reconozcas, el resto te serán más sencillas. 

Para aspectos básicos del documento

1. <!doctype>

Esta etiqueta indica el tipo de lenguaje en el que está configurado el texto.

Tipo de etiqueta de HTML !doctype

2. <html>…</html>

Define el documento entero de una página.

Ejemplo de cómo se inserta la etiqueta  en el código de una página web

Fuente

3. <head>…</head>

En ella se encuentra información sobre el documento, que no se muestra al usuario. Ahí se puede encontrar el título que tendrá la pestaña de la página web, metadatos de la autoría o licencia.

Este es un ejemplo de cómo luce en el código de una página.

Etiqueta de HTML head

4. <title>…</title>

Aquí va el título del documento, como aparecerá en la barra del navegador y en la pestaña en la que esté abierta. No es el título del texto, sino de la página, y se incluye junto a la etiqueta de <head>.

Etiqueta de HTML title

5. <body>…</body>

Una vez que se cierra el contenido con la etiqueta </head>, la de <body> abre el texto, como si se tratara de los límites del contenido que se muestra en la página web y que puede ver el usuario. Para poner un símil con un libro, esta etiqueta indica dónde inicia la primera línea y dónde termina la última de una página.

Etiqueta de HTML body

6. <h1>…</h1> a <h6>…</h6>

Con ellas indicas los títulos y subtítulos de un texto, en diferentes tamaños, según su nivel de importancia. El <h1> es el más grande, y debería dedicarse al título del texto. En el caso de una de nuestras publicaciones de blog, ese lugar le corresponde al que resaltamos:

Ejemplo de cómo luce para un visitante una etiqueta de HTML h1

Si quieres saber la proporción que hay para cada uno, aquí te dejamos otro ejemplo de cada título, por número:

Muestra de cómo escribir y alinear títulos con etiquetas HTML y cómo lucen en la página web

7. <p>…</p>

Con ellas puedes indicar dónde empieza y termina cada párrafo de texto, para que los bloques de información no aparezcan como una lista larga sin pausas. Es decir, agrega un salto de línea entre párrafos.

Así lucen las etiquetas de párrafo para el segundo que puedes leer en esta nota del diario El País, y es la razón por la que está separado del primero y el tercero:

Etiqueta de HTML para párrafo, conocido como p, según el diseño de un artículo del diario El País

Para formato de caracteres

8. <font>…</font>

Esta es la etiqueta básica para indicar la fuente que se utilizará en una selección de texto. Sin embargo, por sí sola no funciona, pues necesita atributos y variables que indiquen cuál tipografía será, tamaño y colores.

Si debes indicar la fuente, la etiqueta se escribe así:

<font face=»Garamond»>…</font>

Para que aparezca en otro color, puedes utilizar como variable el código hexadecimal o el RGB, como prefieras. Pero si te inclinas por uno de los colores básicos, solo escribe su nombre en inglés:

<font color=»red»>…</font>

Para cambiar el tamaño de la fuente, pero sin indicar que es un título o subtítulo que cambia de tema, puedes elegir entre el 1 y 7. El número base es 3, para que te des una idea:

<font size=»5″>…</font>

9. <strong>…</strong>

Con ella conviertes a negrita el texto señalado, para resaltar una idea o un concepto. También puedes utilizar esta: <b>…</b>, que se refiere al término «bold», como lo hacen los creadores de tipografías. 

Etiqueta de HTML para negrita

10. <em>…</em>

Cuando quieras convertir en cursivas una porción de tu texto, esta es la etiqueta que buscas. Otra variante es <i>…</i>, pero la primera es más utilizada.

Etiqueta de HTML para cursivas, conocida como em

11. <u>…</u>

Para subrayar un texto, que no tendrá hipervínculo, esta es la etiqueta adecuada.

12. <sub>…</sub>

Sobre todo al compartir un texto que tiene llamados de citas a pie de página, el subíndice ayuda a enumerarlas correctamente, o cuando se escribe un artículo científico. Con esta etiqueta podrás alinear el llamado en la parte baja de la línea de texto a la que acompaña.

13. <sup>…</sup>  

El superíndice se utiliza mucho en textos científicos y matemáticos. O quizá lo utilices para agregar una marca que lleve a una nota a pie de página, como una aclaración o un dato legal sobre la información que compartes. En ese caso necesitarás esta etiqueta para que el llamado aparezca, más pequeño que el texto al que acompaña, en la parte superior del renglón.

Por ejemplo, este artículo de Wikipedia sobre el Apollo 11 tiene las citas marcadas como superíndices, y en el código de la página aparece así la etiqueta:

Ejemplo de cómo se insertan las etiquetas <sup> en HTML

Para partir líneas de texto

14. <br>

Para indicar que deseas agregar un salto de línea, aunque no se trate del final de un párrafo, esta etiqueta es tu aliada. Ya que no le agrega formato a un texto, no se necesita indicar el cierre, solo la apertura, y es muy útil cuando deseas que la línea se corte en cualquier punto, de manera que, si lo considera necesario, el navegador agregará una barra de deslizado vertical.

El periódico argentino Página 12 lo utilizó en uno de sus artículos, para que la etiqueta que añadieron aquí:

Etiqueta de HTML br, según el código de un artículo del diario Página 12

luzca al lector como un salto de párrafo más amplio:

Cómo luce para el lector la etiqueta de HTML br

15. <nobr>

Si, por el contrario, quieres que el contenido se extienda horizontalmente, sin romper líneas de texto, indícalo con esta etiqueta al inicio. Así, el lector podrá avanzar hacia la derecha gracias al cursor que el navegador agregará, horizontalmente. 

Debido a que no es tan amigable para la lectura, te recomendamos que no la utilices mucho.

Para formato de párrafos

16. <P align=»…»>…</P>

Esta combinación de etiqueta, atributo y variable te permite alinear tu párrafo en la dirección que prefieras. Solo debes cambiar la variable, que está entre comillas, según lo que quieras: left (izquierda), right (derecha), center (al centro), justify (para justificar el texto).

Como puedes intuir, está pensada para párrafos completos. Pero cuando desees hacerlo solo con líneas de texto, de forma independiente, cambia la P por DIV.

Para listas

17. <ul>…</ul>

Si la lista que agregarás solo tendrá viñetas, es decir que no tiene que enumerarse en orden, utiliza esta etiqueta. Quiere decir que lo que escribas de contenido entre los elementos (que están entre los signos) se acompañará por un punto a la izquierda.

18. <ol>…</ol>

En cambio, si necesitas que los elementos de la lista aparezcan enumerados en orden ascendente, esta es la etiqueta correcta. 

Y los elementos listados, ¿cómo se escriben?

19. <li>…>/li>

Cada uno de los elementos de una lista debe escribirse con esta etiqueta, no importa si serán numerados o no. Así que una lista luce de esta manera cuando se escribe en HTLM, por ejemplo en un artículo de nuestro blog donde se mencionan ideas para hacer un mejor trabajo para presentar una idea:

Ejemplo de los elementos listados sin numeración, con etiqueta de HTML

Para enlaces a otros documentos

Para agregar hipervínculos que llevan a otros documentos, existe una etiqueta general:

20. <a href=»destino»>…</a>

que indica al navegador que, cuando se le dé clic al enlace, este se abra en la misma ventana. «Destino» es el enlace a donde llevará a los visitantes, y los puntos suspensivos son el texto que se convertirá en el hipervínculo.

El código de una página de Buzzfeed nos indica dónde colocaron un enlace y sobre cuál texto:

Etiqueta de HTML para enlaces, conocida como a, según el código de una página de Buzzfeed

Te tenemos un tip: si quieres que el enlace se abra en una ventana nueva, toma este modelo: <a href=»destino» target=»_blank»>…</a>

Por supuesto, sumado a las páginas de otros a los que podemos vincular, existen otros elementos externos que pueden enlazarse en tus contenidos, como correos y servidores FTP. También están los locales (dentro del mismo directorio) o los que se conocen como ancla, que son muy útiles para lectura cuando se trata de un texto amplio, con diferentes secciones a las que se puede «brincar» haciendo clic en una lista de títulos y subtítulos, en lugar de mover el cursor durante horas.

Para imágenes

21. <img>

Cuando quieras incluir imágenes en tu contenido, debes agregar el atributo src («source», u «origen» en español), porque es el que indica la ruta en donde se encuentra la imagen. Esta puede estar en el mismo directorio HTML que tu texto o en una URL. Te recomendamos que sea la primera opción, porque al elegir una que está alojada de manera externa, pondrás a tu servidor a buscar el enlace cada vez que alguien abra la página.

Así que, siguiendo el ejemplo de una imagen que está dentro del mismo directorio HTML, tendría que escribirse así:

<img src=»nombredelarchivo.jpg»>.

Si está en un subdirectorio, se indica de esta manera: 

<img src=»nombredelsubdirectorio/nombredelarchivo.jpg»>.

Y cuando se trata de una URL: 

<img src=»https://sitioweb.com/paginadeimagen/nombredelarchivo.jpg»>

Este es un ejemplo real que corresponde dos imágenes que aparecen en otro artículo de HubSpot sobre marketing en Facebook:

Ejemplo de cómo insertar la etiqueta de HTML para imágenes, img, en una página web

Al igual que la etiqueta HTML <br>, no necesita cierre.

Las etiquetas de HTML tienen bastante lógica, si lo revisas bien. Podría decirse que la base está en aprenderse un par de atajos, y listo: ya puedes editar y mejorar los aspectos más importantes de tus páginas web sin caer en el pánico.

HTML y CSS

 
HTML CSS

Powered by WPeMatico

Comenta activando la opción de publicar también en Facebook. Gracias

comentarios