tags html

Lista de Tags de edici贸n de textos

H TM L

La siguiente lista esta realizada con el fin de entender el funcionamiento de los Tags (etiquetas) mas comunes, a través de ejemplos prácticos y representan en su mayoría, parte del conocimiento básico del formateo de texto en la edición de contenidos HTML, con el fin de familiarizar al lector con dichos Tags y en definitiva facilitar el proceso de aprendizaje que nos acerca al ambiente Web

H1

(head / encabezado) Encabezado de primer nivel; se utiliza principalmente para titular contenidos existiendo las variantes h2, h3, h4, etc. Dependiendo del nivel o grado de importancia de los rotulados de informaci贸n.

Ejemplo practico:

<h1>Titulo Principal</h1> <h2>Titulo Secundario</h2> <h3>Subtitulo</h3>

3

P

(paragraph / párrafo) se utiliza para determinar que partes del contenido son un párrafo y es uno de los tags mas importantes dentro de un documento HTML. Ejemplo practico:

<h1>Titulo Principal</h1> <p>esto es un párrafo, esto es un párrafo, esto es un párrafo, esto es un párrafo, esto es un párrafo, esto es un párrafo, esto es un párrafo, esto es un párrafo, esto es un párrafo, esto es un párrafo, esto es un párrafo, esto es un párrafo, esto es un párrafo.</p>

4

Strong

(fuerte) indica un รฉnfasis fuerte y se utiliza para demarcar parte importante del contenido y enriquecer el texto.

Ejemplo practico:

<h1>Titulo Principal</h1> <p>esto es un pรกrrafo, esto es un pรกrrafo, esto es un pรกrrafo, esto es un pรกrrafo, esto es un pรกrrafo, esto es un pรกrrafo, <strong>esto es importante</strong>, esto es un pรกrrafo, esto es un pรกrrafo, esto es un pรกrrafo, esto es un pรกrrafo, esto es un pรกrrafo, esto es un pรกrrafo.</p>

5

Em

(emphasis / énfasis) se utiliza para enfatizar palabras o pequeñas frases dentro de un párrafo y enriquecer el texto.

Ejemplo practico:

<h1>Titulo Principal</h1> <p>esto es un párrafo, <em>énfasis</em>, esto es un párrafo, esto es un párrafo, esto es un párrafo, esto es un párrafo, <strong>esto es importante</strong>, esto es un párrafo, esto es un párrafo, esto es un párrafo, esto es un párrafo, esto es un párrafo, esto es un párrafo.</p>

6

Sup – sub

(superíndice - subíndice) comúnmente llamados números volados, se utilizan principalmente para ubicar notas al pie dentro de un párrafo o encabezado, aunque también, para exponentes matemáticos y arreglos visuales.

Ejemplo practico:

<h1>Titulo Principal</h1> <p>esto es un párrafo, esto es <em>énfasis</ em>, esto es un párrafo, esto es un párrafo, esto es un párrafo, esto es un párrafo, <strong>esto es importante</strong, esto es un párrafo, esto es un párrafo^¹, esto es un párrafo, esto es un párrafo, esto es un párrafo, esto es un párrafo.</p> <p>^¹aquí va la nota al pie</p>

7

!-- --

(comment / comentario) se utiliza para comentar el código del documento, lo que facilita su lectura y ayuda a ubicar cierres de tags que comúnmente suelen confundirse dentro del código, como por ejemplo divs.

Ejemplo practico:

<div id=”división”> <h1>Titulo Principal</h1> <p>esto es un párrafo, esto es <em>énfasis</em>, esto es un párrafo, esto es un párrafo, esto es un párrafo, esto es un párrafo, <strong>esto es importante</strong, esto es un párrafo, esto es un párrafo¹, esto es un párrafo, esto es un párrafo, esto es un párrafo, esto es un párrafo.</p> </div> <!-- este es un comentario--> <p>¹aquí va la nota al pie</p>

8

A

(anchor / vinculo) se utiliza para crear enlaces dentro del documento, como por ejemplo un link externo (otra sitio).

Ejemplo practico:

<div id=”división”> <h1>Titulo Principal</h1> <p>esto es un párrafo, esto es <em>énfasis</em>, esto es un párrafo, esto es un, <a href=”dirección del vinculo”>vinculo</a> esto es un párrafo, esto es un párrafo, <strong>esto es importante</strong, esto es un párrafo, esto es un párrafo¹, esto es un párrafo, esto es un párrafo, esto es un párrafo, esto es un párrafo.</p> </div> <!-- este es un comentario--> <p>¹aquí va la nota al pie</p>

9

B

(bold / negrita) se utiliza para colocar en “negrita” parte del texto, aunque hoy se utiliza mas frecuentemente la etiqueta Strong.

Ejemplo practico:

<div id=”división”> <h1>Titulo Principal</h1> <p>esto es un párrafo, esto es <em>énfasis</em>, esto es un párrafo, esto es un párrafo, <a href=”dirección del vinculo”>esto</a> es un párrafo, esto es un párrafo, <strong>esto es importante</strong>, esto es un párrafo, esto es un párrafo¹, esto es un párrafo, esto es una <b>bold</b>, esto es un párrafo, esto es un párrafo.</p> </div> <!-- este es un comentario--> <p>¹aquí va la nota al pie</p>

10

Big

(grande) se utiliza para colocar texto en un cuerpo mayor que, por ejemplo, el del párrafo, aunque genera problemas de interlineado en algunos exploradores y tiende a usarse como un recurso visual más que como enriquecedor de texto.

Ejemplo practico:

<div id=”división”> <h1>Titulo Principal</h1> <p>esto es un párrafo, esto es <em>énfasis</em>,

esto es <big>grande</big>, esto es un párrafo, <a href=”dirección del vinculo”>esto</a> es un párrafo, esto es un párrafo, <strong>esto es importante</strong, esto es un párrafo, esto es un párrafo¹, esto es un párrafo, esto es un <b>párrafo</b>, esto es un párrafo, esto es un párrafo.</p> </div> <!-- este es un comentario-->

11

Blockquote

(bloque de cita) se utiliza para citar de manera extendida, siendo un recurso muy útil dentro del formateo de texto web.

Ejemplo practico:

<div id=”división”> <h1>Titulo Principal</h1> <p>esto es un párrafo, esto es <em>énfasis</em>, esto es un <big>párrafo</big>, esto es un párrafo, <a href=”dirección del vinculo”>esto</a> es un párrafo, esto es un <blockquote>esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita,</blockquote> párrafo, <strong>esto es importante</strong, esto es un párrafo, esto es un párrafo¹, esto es un párrafo, esto es un <b>párrafo</b>, esto es un párrafo, esto es un párrafo.</p> </div> <!-- este es un comentario--> <p>¹aquí va la nota al pie</p>

12

Br

(break / salto de línea) se utiliza como salto de línea y es una etiqueta muy común dentro del formateo de texto web.

Ejemplo practico:

<div id=”división”> <h1>Titulo Principal</h1> <p>esto es un párrafo, esto es <em>énfasis</em>, esto es un <big>párrafo</big>, esto es un párrafo, <a href=”dirección del vinculo”>esto</a> es un párrafo, esto es un <blockquote>esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita,</blockquote> párrafo, <strong>esto es importante</strong, esto es un párrafo, esto es un párrafo¹, esto es un párrafo, esto es un <b>párrafo</b>, esto es un párrafo, esto es un párrafo.</p> </div> <!-- este es un comentario--> <br/> <p>¹aquí va la nota al pie</p>

13

Div

(division) es una etiqueta muy utilizada para remplazar las tablas y su uso es hoy generalizado, sirve para dividir el documento en áreas independientes.

Ejemplo practico:

<div id=”división”> <h1>Titulo Principal</h1> <p>esto es un párrafo, esto es <em>énfasis</em>, esto es un <big>párrafo</big>, esto es un párrafo, <a href=”dirección del vinculo”>esto</a> es un párrafo, esto es un <blockquote>esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita,</blockquote> párrafo, <strong>esto es importante</strong, esto es un párrafo, esto es un párrafo¹, esto es un párrafo, esto es un <b>párrafo</b>, esto es un párrafo, esto es un párrafo.</p> </div> <!-- este es un comentario--> <br/> <p>¹aquí va la nota al pie</p>

14

Img

(image / imagen) se utiliza para colocar imágenes dentro del documento, siendo acompañada generalmente por la etiqueta “src”.

Ejemplo practico:

<div id=”division”> <h1>Titulo Principal</h1> <p>esto es un párrafo, esto es <em>énfasis</em>, esto es un <big>párrafo</big>, esto es un párrafo, <a href=”direccion del vinculo”>esto</a> es un párrafo, esto es un <img src=”origen de la imagen”/> <blockquote>esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita,</blockquote> párrafo, <strong>esto es importante</strong, esto es un párrafo, esto es un párrafo¹, esto es un párrafo, esto es un <b>párrafo</b>, esto es un párrafo, esto es un párrafo.</p> </div> <!-- este es un comentario--> <br/> <p>¹aquí va la nota al pie</p>

15

Li

(list / lista) se utiliza para disponer contenido en forma de lista dentro del documento.

Ejemplo practico:

<div id=”division”> <h1>Titulo Principal</h1> <ol> <li>list</li> <li>list</li> <li>list</li> </ol> <p>esto es un párrafo, esto es <em>énfasis</em>, esto es un <big>párrafo</big>, esto es un párrafo, <a href=”direccion del vinculo”>esto</a> es un párrafo, esto es un <img src=”origen de la imagen”/> <blockquote>esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita,</blockquote> párrafo, <strong>esto es importante</strong, esto es un párrafo, esto es un párrafo¹, esto es un párrafo, esto es un <b>párrafo</b>, esto es un párrafo, esto es un párrafo.</p> </div> <!-- este es un comentario--> <br/> <p>¹aquí va la nota al pie</p> 16

Ol

(order list / lista ordenada) se utiliza para disponer una(s) lista(s) de manera ordenada dentro del documento.

Ejemplo practico:

<div id=”division”> <h1>Titulo Principal</h1> <ol> <li>uno</li> <li>dos</li> <li>tres</li> </ol> <p>esto es un párrafo, esto es <em>énfasis</em>, esto es un <big>párrafo</big>, esto es un párrafo, <a href=”direccion del vinculo”>esto</a> es un párrafo, esto es un <img src=”origen de la imagen”/> <blockquote>esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita,</blockquote> párrafo, <strong>esto es importante</strong, esto es un párrafo, esto es un párrafo¹, esto es un párrafo, esto es un <b>párrafo</b>, esto es un párrafo, esto es un párrafo.</p> </div> <!-- este es un comentario--> <br/> <p>¹aquí va la nota al pie</p> 17

Ul

(unorder list / lista desordenada) se utiliza para disponer una(s) lista(s) de manera desordenada dentro del documento o mejor dicho sin un orden correlativo.

Ejemplo practico:

<div id=”division”> <h1>Titulo Principal</h1> <ul> <li>list</li> <li>list</li> <li>list</li> </ul> <p>esto es un párrafo, esto es <em>énfasis</em>, esto es un <big>párrafo</big>, esto es un párrafo, <a href=”direccion del vinculo”>esto</a> es un párrafo, esto es un <img src=”origen de la imagen”/> <blockquote>esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita,</blockquote> párrafo, <strong>esto es importante</strong, esto es un párrafo, esto es un párrafo¹, esto es un párrafo, esto es un <b>párrafo</b>, esto es un párrafo, esto es un párrafo.</p> </div> <!-- este es un comentario--> <br/> <p>¹aquí va la nota al pie</p> 18

Small

(pequeña) sirve para colocar texto en un menor cuerpo que, por ejemplo, el párrafo, usado principalmente para notas al pie o descripciones.

Ejemplo practico:

<div id=”division”> <h1>Titulo Principal</h1> <ul> <li>list</li> <li>list</li> <li>list</li> </ul> <p>esto es un párrafo, esto es <em>énfasis</em>, esto es un <big>párrafo</big>, esto es un párrafo, <a href=”direccion del vinculo”>esto</a> es un párrafo, esto es un <img src=”origen de la imagen”/> <blockquote>esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita, esto es una cita,</blockquote> párrafo, <strong>esto es importante</strong, esto es un párrafo, esto es un párrafo¹, esto es un párrafo, esto es un <b>párrafo</b>, esto es un párrafo, esto es un párrafo.</p> </div> <!-- este es un comentario--> <br/> <p>¹<small>aquí va la nota al pie</small></p> 19

Es importante saber que todas estas etiquetas son modificables desde una pagina de estilo, ya que etiquetas como <a> tienen una visualización predeterminada, que en la mayoría de los casos difiere al diseño propuesto, también se debe saber que todas las etiquetas, a excepción de <br/> e <img> deben cerrarse (</?>) ya que, de lo contrario, NO serán interpretadas en los navegadores.

20

Francisco Leal Montti, 2008