Instrucciones para texto en HTML

Instrucciones para texto en HTML

Instrucciones para texto en HTML

El texto es una de las formas de comunicación mas importantes en la vida cotidiana, y sin duda, también lo es en línea, a través de una página web. Es por eso que conocer las instrucciones específicas para texto en HTML nos permitirá sacar el mayor provecho de esta forma de comunicación.

Instrucciones para texto en HTML

Encabezados (Heading)
<h1></h1> a <h6></h6>

Elemento en bloque Elemento en bloque

Los encabezados son los títulos de un documento, en HTML, el orden de importancia va del 1 al 6, siendo h1 el título principal, h2 el subtítulo, h3 el sus-sub-título, así sucesivamente hasta h6.

Por omisión, el Navegador la muestra mas grande con h1 y va descendiendo el tamaño hasta llegar al mas pequeño, que es h6.

See the Pen encabezados by Miguel Méndez (@codigo-web) on CodePen.0

Párrafos (Paragraph)
<p></p>

Elemento en bloque Elemento en bloque

Los párrafos son bloques compuestos generalmente de texto, pueden incluir imágenes y/o algunos otros elementos. Se distinguen por iniciar con una letra en mayúscula  y terminar con un punto y aparte.

Por omisión, el Navegador la muestra dejando un margen superior y otro inferior.

See the Pen parrafo by Miguel Méndez (@codigo-web) on CodePen.0

Negritas (Strong)
<strong></strong>

elementoLinea Elemento en línea

La negrita es una forma común de denotar una palabra o un grupo de palabras indicando que tiene(n) una fuerte importancia, haciendo su trazo mas grueso que el resto.

Por omisión, el Navegador la muestra en Negrita.

See the Pen negritas by Miguel Méndez (@codigo-web) on CodePen.0

Anteriormente se utilizaba la instrucción <b></b> (bold), pero debido a que la instrucción bold representa un estilo, y a partir de HTML 4 se depreciaron las etiquetas y atributos que representaban estilos, se recomienda el uso de strong, que representa un texto con importancia.

Itálicas (Emphasis)
<em></em>

elementoLinea Elemento en línea

Las itálicas son otra forma de destacar una palabra o grupo de palabras, proporcionándole(s) un énfasis, generalmente inclinando las letras que conforman la palabra o grupo de palabras.

Por omisión, el Navegador la muestra en Itálicas.

See the Pen enfasis by Miguel Méndez (@codigo-web) on CodePen.0

Anteriormente se utilizaba la instrucción <i></i> (italic), pero por la misma causa que bold, (representa un estilo), se recomienda el uso de em, que representa un texto con énfasis.

Marca (Mark)
<mark></mark>

elementoLinea Elemento en línea

La marca a un texto representa a un texto con un propósito de referencia.

Por omisión, el Navegador la muestra con un color amarillo claro de fondo.

See the Pen marca by Miguel Méndez (@codigo-web) on CodePen.0

Salto de línea (Break)
<br>

elementoLinea Elemento en línea

Un salto de línea genera una ruptura entre elementos, de modo que lo que se encuentra después de la instrucción, se ve en una línea nueva.

See the Pen salto de línea by Miguel Méndez (@codigo-web) on CodePen.0

Línea horizontal (Horizontal rule)
<hr>

Elemento en bloque Elemento en bloque

Dibuja una línea horizontal como separador entre dos elementos.

See the Pen linea_horizontal by Miguel Méndez (@codigo-web) on CodePen.0

Subíndice (Subscript)
<sub></sub>

elementoLinea Elemento en línea

Define una letra, palabra o palabras que aparecerá(n) de forma mas pequeña y mas baja de la línea base del texto que le rodea.

Muy útil para caracteres matemáticos o químicos.

See the Pen subindice by Miguel Méndez (@codigo-web) on CodePen.0

Superíndice (Superscript)
<sup></sup>

elementoLinea Elemento en línea

Define una letra, palabra o palabras que aparecerá(n) de forma mas pequeña y mas alta de la línea base del texto que le rodea.

Muy útil para caracteres matemáticos o químicos.

See the Pen superindice by Miguel Méndez (@codigo-web) on CodePen.0

Bloque de cita (Block Quotation Element)
<blockquote></blockquote>

Elemento en bloque Elemento en bloque

Representa un bloque que contiene una cita amplia , también conocida como sangría.

Por omisión, el Navegador la muestra indentada con relación al texto que la rodea.

See the Pen bloque de cita by Miguel Méndez (@codigo-web) on CodePen.0

Cita con comillas (Quote)
<q></q>

elementoLinea Elemento en línea

Se emplea para hacer notar una cita corta. Por omisión, el Navegador la muestra entre comillas.

See the Pen cita con comillas by Miguel Méndez (@codigo-web) on CodePen.0

Cita en itálicas (Cite)
<cite></cite>

elementoLinea Elemento en línea

También es empleada para hacer notar una cita corta. A diferencia de la cita con comillas, la cita en itálicas el Navegador la muestra en itálicas.

See the Pen cita en italica by Miguel Méndez (@codigo-web) on CodePen.0

Abreviatura (Abreviation)
<abbr></abbr>

elementoLinea Elemento en línea

Con el uso de esta instrucción es posible que el contenido completo de una abreviatura aparezca como tooltip al pasar el puntero del ratón por encima del término abreviado.

Requiere utilizar el atributo title, donde se pone entre comillas el contenido completo de la abreviatura.

See the Pen abreviatura by Miguel Méndez (@codigo-web) on CodePen.0

Definición (Definition)
<dfn></dfn>

elementoLinea Elemento en línea

Útil para distinguir un término al cual nos referimos por primera vez en un texto, o al cual daremos un significado. Por omisión, el Navegador la muestra en itálicas.

See the Pen definicion by Miguel Méndez (@codigo-web) on CodePen.0

Borrar e insertar (Delete and Insert)
<del></del> e <ins></ins>

elementoLinea Elementos en línea

En ocasiones se requiere dejar constancia que un texto ha cambiado. Para mostrar una línea horizontal tachando el o los elementos que se quiere mostrar como borrado, se utiliza la etiqueta <del></del>. Para mostrar el o los elementos ingresados, que regularmente sustituyen a el o los borrados, se utiliza <ins></ins>.

See the Pen borrar e insertar by Miguel Méndez (@codigo-web) on CodePen.0

Tachado (Strikethrough)
<s></s>

elementoLinea Elemento en línea

Se utiliza para representar elementos que ya no son relevantes, o ya no son válidos.

Por omisión, el texto aparece tachado por una línea horizontal.

See the Pen tachado by Miguel Méndez (@codigo-web) on CodePen.0

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.
¿Te fue útil el artículo? Por favor ayúdanos a difundirlo compartiéndolo a través de tus redes sociales.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Déjanos un comentario

Sé el primero en comentar

avatar
wpDiscuz