¿Qué es el formato en HTML?
Cuando se habla de formatear en HTML se refiere al proceso de estructurar y diseñar el contenido de las páginas web, como textos e imágenes, usando etiquetas HTML. Con el uso adecuado de estas etiquetas se puede mostrar el contenido de forma clara, organizada y visualmente atractiva.
Definición: ¿qué significa formatear en HTML?
El lenguaje de marcado HTML proporciona herramientas esenciales para estructurar los elementos de una página. A través de las etiquetas HTML, se pueden organizar los elementos individuales, lo que se denomina formato en HTML. Esto permite definir cómo se mostrarán los textos, las imágenes y otros elementos en un documento HTML. Con estas etiquetas, es posible configurar encabezados, crear párrafos y presentar listas enumeradas.
¿Para qué sirve el formato en HTML?
El formato en HTML o formatear en HTML permite optimizar tanto la estructura como la apariencia visual de los diferentes elementos de una página web. Una buena estructura y formato no solo mejora la legibilidad de los textos, sino que también facilita a los usuarios la navegación por la web. Además, el formato HTML favorece la optimización para motores de búsqueda o SEO, ya que una web clara y bien estructurada es más fácil de analizar para los rastreadores de motores de búsqueda (programas que analizan el contenido de las páginas web).
En nuestra guía “Tutorial básico de HTML: crea tu propio proyecto web” ofrecemos conocimientos básicos sobre el lenguaje de marcado HTML.
¿Qué tipos de etiquetas existen para el formato en HTML?
En el formato en HTML se distinguen entre etiquetas físicas y lógicas (conocidas en inglés como “physical tags” y “logical tags”):
- Las etiquetas físicas: definen la apariencia exacta de un elemento en la página, es decir, determinan cómo se mostrarán visualmente los textos y otros elementos. Por ejemplo, la etiqueta
<b>muestra el texto en negrita y la etiqueta<i>en cursiva. Sin embargo, las etiquetas físicas no proporcionan contexto semántico. - Las etiquetas lógicas: establecen el significado de un elemento, ayudando así a estructurar semánticamente la página. Esto facilita la comprensión del contenido a los motores de búsqueda, los navegadores y las tecnologías asistivas. Un ejemplo de ello es la etiqueta
<em>, que se utiliza para resaltar partes de un texto y suele marcar los pasajes correspondientes en cursiva.
- Tiempo de actividad de 99.99 % y seguridad garantizada
- Aumenta el rendimiento según el tráfico de tu página web
- Incluye dominio, SSL, e-mail y soporte 24/7
Las etiquetas más importantes para el formato en HTML
HTML ofrece una amplia variedad de etiquetas para formatear contenidos web. Estas etiquetas permiten desde estructurar diseños de página completos hasta adaptar elementos individuales. Nuestra guía sobre etiquetas HTML ofrece una visión general de los comandos más importantes. La siguiente lista se centra específicamente en las etiquetas para formatear textos en HTML y sus principales funciones:
| Etiqueta HTML | Descripción |
|---|---|
<b>
|
Etiqueta física que muestra una palabra, frase o sección de texto en negrita. |
<strong>
|
Etiqueta lógica que resalta secciones de texto, tanto visualmente como para el navegador. |
<i>
|
Etiqueta física que muestra palabras, frases o secciones de texto concretas en cursiva. |
<em>
|
Etiqueta lógica para enfatizar partes importantes del texto, que generalmente se muestran en cursiva. |
<u>
|
Subraya el texto seleccionado. |
<h1> a <h6>
|
Estas etiquetas crean encabezados, siendo el nivel 1 el más grande y el 6 el más pequeño. |
<p>
|
Esta etiqueta crea párrafos. |
<big>
|
Con esta etiqueta se aumenta el tamaño del texto seleccionado. |
<small>
|
Esta etiqueta reduce el tamaño de letra de un fragmento. |
<sup>
|
La etiqueta se utiliza para elevar caracteres individuales, como en la ecuación e = mc², que se muestran más pequeños y ligeramente por encima de la línea de texto. |
<sub>
|
Con esta etiqueta, los caracteres se muestran en subíndice. Un ejemplo de ello es la fórmula química del agua: H2O. |
<ins>
|
La etiqueta indica que se ha insertado texto en un documento. |
<del>
|
La etiqueta indica que se ha eliminado texto. |
<strike>
|
Esta etiqueta se usa para tachar secciones de texto. |
<mark>
|
Con esta etiqueta HTML se puede resaltar el fondo de palabras, frases y secciones de texto con color. |
- Certificado SSL Wildcard gratis
- Registro privado
- Función Domain Connect para una configuración DNS simplificada gratis
Ejemplos de uso del formato en HTML
Formatear en HTML ofrece muchas posibilidades para estructurar y presentar de manera atractiva los textos y otros elementos de una página web. Para aprovechar al máximo el potencial del formato en HTML, es importante saber cómo utilizar bien las etiquetas HTML. Los siguientes ejemplos prácticos muestran cómo funciona esto en términos generales.
Ejemplo 1: mostrar texto en negrita
Para mostrar en negrita una palabra o un fragmento de un texto, se usa la etiqueta <b>. Esta etiqueta física solo modifica el aspecto visual de la palabra o fragmento correspondiente.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de texto en negrita</title>
</head>
<body>
<p>Con la etiqueta correcta, el texto se muestra en <b>negrita</b>.</p>
</body>
</html>Resultado:
Con la etiqueta correcta, el texto se muestra en negrita.
Ejemplo 2: resaltar fragmentos de un texto
Si deseas resaltar un fragmento tanto para los lectores como para los motores de búsqueda y los navegadores, utiliza la etiqueta HTML <strong>. Esta etiqueta enfatiza la importancia de la sección marcada. También en este caso, el fragmento correspondiente generalmente se muestra en negrita.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo para resaltar fragmentos de texto</title>
</head>
<body>
<p>La última palabra de la frase se <strong>resalta</strong>.</p>
</body>
</html>Resultado:
La última palabra de la frase se resalta.
Ejemplo 3: mostrar palabras o fragmentos de un texto en cursiva
Las palabras extranjeras a menudo se muestran en cursiva dentro de los textos para que llamen la atención al leer. En este caso, se utiliza la etiqueta HTML <i>.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de texto en cursiva</title>
</head>
<body>
<p>La siguiente palabra está en <i>cursiva</i>.</p>
</body>
</html>Resultado:
La siguiente palabra está en cursiva.
Ejemplo 4: subrayar texto
Por supuesto, el formato en HTML también ofrece la posibilidad de subrayar palabras o secciones completas de texto, es decir, añadir una línea debajo. Para ello, es necesario utilizar la etiqueta <u>.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de texto subrayado</title>
</head>
<body>
<p><u>Subrayar</u> una palabra es útil en algunas situaciones.</p>
</body>
</html>Resultado:
Ejemplo 5: tachar texto
El contenido entre la etiqueta <strike> se muestra tachado. El uso de esta etiqueta HTML es útil, entre otras cosas, para marcar información obsoleta o que ya no es actual.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de texto tachado</title>
</head>
<body>
<p>La oferta es válida hasta el <strike>1 de noviembre</strike> 1 de diciembre.</p>
</body>
</html>Resultado:
