HTML: formato
Si usa un procesador de texto, debe estar familiarizado con la capacidad de hacer que el texto esté en negrita, cursiva o subrayado; estas son solo tres de las diez opciones disponibles para indicar cómo puede aparecer el texto en HTML y XHTML.
Texto en negrita
Todo lo que aparece dentro <b>...</b> elemento, se muestra en negrita como se muestra a continuación:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>Esto producirá el siguiente resultado:
Texto en cursiva
Todo lo que aparece dentro <i>...</i> El elemento se muestra en cursiva como se muestra a continuación:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>
</html>Esto producirá el siguiente resultado:
Texto subrayado
Todo lo que aparece dentro <u>...</u> elemento, se muestra con subrayado como se muestra a continuación:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>
</html>Esto producirá el siguiente resultado:
Strike Text
Todo lo que aparece dentro <strike>...</strike> El elemento se muestra tachado, que es una línea delgada a través del texto como se muestra a continuación:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>Esto producirá el siguiente resultado:
Fuente monoespaciada
El contenido de un <tt>...</tt>El elemento está escrito en fuente monoespaciada. La mayoría de las fuentes se conocen como fuentes de ancho variable porque diferentes letras tienen diferentes anchos (por ejemplo, la letra 'm' es más ancha que la letra 'i'). Sin embargo, en una fuente monoespaciada, cada letra tiene el mismo ancho.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>Esto producirá el siguiente resultado:
Texto en superíndice
El contenido de un <sup>...</sup>el elemento está escrito en superíndice; el tamaño de fuente utilizado es del mismo tamaño que los caracteres que lo rodean, pero se muestra la mitad de la altura de un carácter por encima de los demás.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>Esto producirá el siguiente resultado:
Texto de subíndice
El contenido de un <sub>...</sub>el elemento está escrito en subíndice; el tamaño de fuente utilizado es el mismo que el de los caracteres que lo rodean, pero se muestra la mitad de la altura de un carácter debajo de los demás caracteres.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>Esto producirá el siguiente resultado:
Texto insertado
Todo lo que aparece dentro <ins>...</ins> El elemento se muestra como texto insertado.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>Esto producirá el siguiente resultado:
Texto eliminado
Todo lo que aparece dentro <del>...</del> elemento, se muestra como texto eliminado.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>Esto producirá el siguiente resultado:
Texto más grande
El contenido del <big>...</big> El elemento se muestra un tamaño de fuente más grande que el resto del texto que lo rodea, como se muestra a continuación:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>Esto producirá el siguiente resultado:
Texto más pequeño
El contenido del <small>...</small> El elemento se muestra con un tamaño de fuente más pequeño que el resto del texto que lo rodea, como se muestra a continuación:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>Esto producirá el siguiente resultado:
Agrupar contenido
los <div> y <span> Los elementos le permiten agrupar varios elementos para crear secciones o subsecciones de una página.
Por ejemplo, es posible que desee colocar todas las notas al pie de una página dentro de un elemento <div> para indicar que todos los elementos dentro de ese elemento <div> se relacionan con las notas al pie. A continuación, puede adjuntar un estilo a este elemento <div> para que aparezcan utilizando un conjunto especial de reglas de estilo.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>
<div id = "content" align = "left" >
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>Esto producirá el siguiente resultado:
El elemento <span>, por otro lado, se puede usar para agrupar elementos en línea solamente. Entonces, si tiene una parte de una oración o párrafo que desea agrupar, puede usar el elemento <span> de la siguiente manera.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style = "color:green">span tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>
</html>Esto producirá el siguiente resultado:
Estas etiquetas se usan comúnmente con CSS para permitirle adjuntar un estilo a una sección de una página.