Mediante las etiqueta HTML estratégicamente colocados en el texto tu puedes determinar el aspecto final y presentación del documento.
Las etiquetas HTML se ponen alrededor de las líneas de texto encapsulandolas con la finalidad de darles cierto aspecto. Indican al navegador como debe lucir cierta parte del texto.
<etiqueta> texto afectado </etiqueta>
Es importante tener en cuenta, que al presentar el documento el navegador cliente hará caso omiso de los espacios, tabulaciones y retornos de carro que se encuentren en el texto fuente.
Ejemplo de uso:
normal <B>negrita <I>negrita itálica</B> itálica</I> normal.
normal negrita negrita itálica itálica normal.
En HTML5 se recomienda abandonas la etiqueta <B> y en su lugar usar <STRONG>, <MARK>, <EM> o Style="Font-Weight: bold;" de CSS.
En este manual todas las etiquetas y atributos fueron escritos en MAYUSCULAS para efectos didácticos de que el lector las reconozca como tales mas fácilmente.
Si un navegador cliente no puede interpretar un etiqueta y/o argumento, simplemente lo ignora, es decir no produce ningún tipo de error.
También quiero hacerte notar que no todos los navegadores presentan de la misma forma las páginas y la única manera de ver realmente el resultado es probando. Por ejemplo algunos solapes de etiquetas no funciona en todos los navegadores y en otros sí, por lo que te recomiendo evitar hacerlo en lo posible, unos ejemplos:
<h1><a href="...">...</a></h1> -->funciona
<a href="..."><h1>...</h1></a> --> no funciona<li><b>... -->&/lt;li> --> funciona
<li><h1>...</h1>&/lt;li> --> no funciona
<h1><li>...&/lt;li></h1> --> no funciona
Lo primero que tenemos es el texto normal, entendiendo como tal el que no tiene ninguna característica especial y está libre para que el usuario lo fomatee a su gusto desde su navegador en el momento de visualizar. Al igual que en cualquier procesador de texto se producirán los saltos de línea necesarios para mantener el texto dentro de la ventana del navegador, dependiendo del ancho de la ventana, tamaño de letra etc.
Las líneas en blanco y los espacios son ignoradas por el navegadores, por lo tanto, para dejar una línea en blanco debes usar la etiqueta <P> ...</P> o <BR>. Ver mas abajo.
Para definir un párrafo como normal no es necesario poner ningún etiqueta aunque es recomendable encerrar cada parrado entre las etiquetas <P>..</P>.
<P>Parrafo normal.</P>
Si queremos obtener múltiples líneas en blanco no basta con repetir la etiqueta <BR>, sino que hay que combinarlo con otro etiqueta, por ejemplo con o <p>. Así por ejemplo, si queremos obtener cuatro líneas en blanco, pondríamos poner:
<BR><P><BR><P><BR><P><BR><P>
Esta etiqueta acepta atributos globales y se le puede aplicar formato desde CSS usando el atributo STYLE="".
Con esta etiqueta fuerzas un salto de línea simple, es decir la siguiente línea empieza en la línea inmediatamente inferior, respetando la misma sangría.
Una recomendación en HTML5, es usar en su lugar <BR />, como un estándar para indicar que esta etiqueta no requiere de cierre.
Si esta etiqueta es añadida al lado de una objeto flotante, como una caja, tabla, imagen, etc puedes añadir el CSS CLEAR:both; para indicar que la línea deberá saltar hasta encontrar la condición adecuada. Los valores posibles son: left, rigth o both.
| Valor | Descripción |
|---|---|
| left | busca una línea que tenga libre el margen izquierdo |
| right | busca una línea que tenga libre el margen derecho |
| both | busca una línea que tenga ambos márgenes libres. |
Las recomendaciones de HTML5 indican evitar usar el atributo CLEAR y reemplazarlo por CSS. Para eso es necesario identificar la etiqueta con el atributo para hacer referencia a ella de manera única con ID=nombre o múltiple con CLASS=nombre.
Esta etiqueta acepta atributos globales y se le puede aplicar formato desde CSS.
<NOBR>parrafo que no se cortara.</NOBR>
Al escribir el texto, si ponemos más de un espacio en blanco entre dos palabras observamos que el navegador sólo reconoce uno de ellos. Si queremos forzarle a que lo haga, debemos usar la etiqueta (non-breaking space).
La etiqueta TAB es usado cuando se quiere un control fino posible la posición horizontal. Para definir el tabulador solo hay que poner la etiqueta <:TAB ID=nombre> en el sitio correcto como si fuera un TABulador y luego con la etiqueta <TAB TO=nombre> puedes llegar a ese sitio.
<TAB ID=t1><TAB ID=t1> <TAB TO=t1><TAB TO=t1> sería la forma de llegar a ese mismo punto.<br> <TAB TO=t1>Es fácil y todo queda alineado donde tú quieres. <TAB TO=t1>No se te desarregla nada...
Cada marca de TAB debe ser única en el documento, su nombre debe comenzar con una letra y puede estar seguido de letras y números. Una vez definido el TAB será válido para el resto del documento.
Otra manera de usarlo es <TAB INDENT=n> donde n es medio punto tipográfico.
También se puede hacer alineamientos:
Si el alineamiento especificado causa un traslape de texto, para evitarlo el navegador tratará el TAB como un simple carácter de espacio.
No recomendado en HTML5
Usado para centrar cualquier cosa entre los márgenes izquierdo y derecho. Este etiqueta es muy poco usado ya que muchos etiquetas como P, Hx, HR, etc tiene un atributo de alineado. Sin embargo es la única forma de centrar con otros etiquetas como: IMG y TABLE.
<CENTER>Este texto está centrado</CENTER>
No recomendado en HTML5.
<P STYLE="TEXT-ALIGN: center;">Hola mundo</P>
Hola mundo
Para mas información consulta CSS.
Es un conjunto de formatos que incluyen: atributo de letras (negrita, itálica), tamaño (muy grande, grande, normal) y además añade un fin de párrafo, es decir obliga un salto dejando una línea en blanco. Ademas deja algunas lineas en blanco antes y después.
| Etiqueta | Características predeterminadas |
|---|---|
| H1 | Negrita, letra muy grande, centrada. Una o dos líneas en blanco sobre y bajo el título. |
| H2 | Negrita, letra grande, flush-left. Una o dos líneas en blanco sobre y bajo el título. |
| H3 | Itálica, letra grande, ligeramente indentado desde el margen izquierdo. Una o dos líneas en blanco sobre y bajo el título. |
| H4 | Negrita, letra normal, mayor indentación que H3. Una línea en blanco sobre y otra bajo el título. |
| H5 | Itálica, letra normal, indentado como H4. Una línea en blanco sobre el título. |
| H6 | Negrita, indentado igual que el texto normal, más que H5. Una línea en blanco sobre el título. |
Esta etiqueta acepta atributos globales y se le puede aplicar formato desde CSS.
<H1 STYLE="text-color: red;"> <H1 CLASS=nombre> <H1 ID=id>
Para mas información consulta CSS.
Define una línea horizontal del ancho de la página. De forma predeterminada es de un grosor de 1px, todo el ancho de pantalla, color gris con sombra.
<HR [WIDTH=grosor] [SIZE=largo] [ALIGN=alineamiento] [COLOR=color] [NOSHADE]>
Este etiqueta causa un fin de párrafo, es decir obliga un salto a la próxima línea.
| Parámetro | Descripción |
|---|---|
| WIDTH | valor px|%. Define largo de la linea respecto a ventana. |
| SIZE | valor. Define el grosor de la linea. |
| ALIGN | left|right|center (pedeterminado). Posición de la línea respecto a los márgenes. |
| COLOR | =color|#rrggbb. Color de la línea |
| NOSHADE | Quitar sombra. |
<HR>
Ejemplo 1:
<HR WIDTH=80%>
Ejemplo 2:
<HR WIDTH=80% SIZE=12 ALIGN=right COLOR=red>
Ejemplo 3:
<HR WIDTH=50% SIZE=20 ALIGN=left COLOR=navy NOSHADE>
Esta etiqueta acepta atributos globales y se le puede aplicar formato desde CSS.
Crea un subindice.
H<sub>2</sub>O
H2O
Esta etiqueta acepta atributos globales y se le puede aplicar formato desde CSS.
Esta etiqueta aun es muy usada.
Crea un superindice.
Km<sup>2</sup>
Km2
Esta etiqueta acepta atributos globales y se le puede aplicar formato desde CSS.
Esta etiqueta aun es muy usada.
Usado para poner un comentario en un documento HTML que no será visible desde el usuario normal con su navegador, solo en el código fuente. Tipo REM en un BATCH o * en FoxPRO.
<!-- Modificado por Tiburón el miércoles 16 de abril -->
Lógicamente no sera visible en el navegador del cliente.