Etiquetas de Html

La estructura básica de las etiquetas HTML se caracteriza por ir encerradas entre los símbolos <> para las de apertura y </> para las de cierre, como podemos ver en el siguiente ejemplo:

<p>Esto es un párrafo.</p>

Si queremos hacer comentarios dentro del código html para ayudarnos a identificarlo y comprenderlo rápidamente utilizaremos la siguiente sintaxis:

<!-- Aquí va el comentario -->

Sin embargo, algunas etiquetas especiales llamadas “etiquetas vacías” no necesitan encerrar ningún texto. La etiqueta <br> por ejemplo, se utiliza para indicar el comienzo de una nueva línea. Por sus características, la etiqueta <br> nunca encierra ningún contenido de texto. En lugar de abrir y cerrar de forma consecutiva la etiqueta (<br></br>) se puede utilizar la sintaxis <br/> para indicar que es una etiqueta vacía que se abre y se cierra en ese mismo punto.

La estructura básica de una página HTML con sus etiquetas principales es la siguiente:

<!-- Aquí comienza la página html -->
<html>
<head>
<title>Aquí se pone el título de la página HTML</title>
</head>
<body>
Aquí va el contenido de la página.
</body>
<!-- Aquí termina la página html -->
</html>

Dentro de la etiqueta <html> se incluye la cabecera, el cuerpo y todo el contenido de la página.

Dentro de la etiqueta <head> se incluye la cabecera, donde además del título de la página se pueden incluir más cosas, como el idioma de la misma, por ejemplo. Más adelante explicaré todo lo que puede contener esta etiqueta.

Dentro de la etiqueta <body> va el contenido de la página, ya sea texto, imágenes, listas, etc.

Si quieres ver como queda la página con el ejemplo anterior solo tienes que copiar el código en un archivo de texto de bloc de notas y guardarlo con la extensión .html

Después abre el archivo con tu navegador y observa el resultado.
HTML define 91 etiquetas diferentes.
Lista completa de las etiquetas con su función correspondiente:

<a> Inserta vínculos o marcadores.
<abbr> Explica/expande abreviaciones.
<acronym> Explica/expande acrónimos.
<address> Muestra información de contacto del autor.
<applet> Inserta un applet (script)
<area> Define sectores para un mapa de imagen
<b> Convierte texto en negrita
<base> Establece la URI base, usada para resolver URIs relativas
<basefont> Establece el tamaño de fuente por defecto para todo el documento
<bdo> Anula el algoritmo bidireccional para su contenido
<big> Muestra el texto en estilo de fuente “grande”
<blockquote> Inserta una cita en forma de párrafo
<body> Actúa como contenedor para toda la parte representable del documento (cuerpo)
<br> Forza un quiebre de línea
<button> Crea un botón que permite contenido HTML (elementos)
<caption> Establece un título para una tabla
<center> Muestra su contenido centrado
<cite> Inserta una cita o referencia
<code> Declara a su contenido como código de computadora
<col> Establece atributos generales para las columnas de una tabla
<colgroup> Agrupa un número de columnas en una tabla
<dd> Muestra una definición en una lista de términos y definiciones
<del> Incluye texto que debería ser borrado o reemplazado (ya no válido)
<dfn> Asigna una definición a un término
<dir> Inserta una lista de directorio (árbol)
<div> Define un bloque de contenido
<dl> Inserta una lista de términos y definiciones
<dt> Inserta un término en una lista de términos y definiciones
<em> Indica énfasis para su contenido
<fieldset> Agrupa controles en un formlario
<font> Establece el estilo de fuente para su contenido
<form> Inserta un formulario
<frame> Inserta un marco simple
<frameset> Inserta un conjunto de marcos
<h1> Define un encabezado de nivel 1
<h2> Define un encabezado de nivel 2
<h3> Define un encabezado de nivel 3
<h4> Define un encabezado de nivel 4
<h5> Define un encabezado de nivel 5
<h6> Define un encabezado de nivel 6
<head> Encierra el bloque de encabezado del documento (para las declaraciones globales)
<hr> Dibuja una línea horizontal
<html> Actúa como contenedor para el documento entero (encabezado y cuerpo)
<i> Muestra su contenido con estilo de fuente itálica
<iframe> Inserta un marco dentro del contenido del documento
<img> Inserta una imagen
<input> Muestra un control de entrada (texto, contraseña, casillas de verificación, etc.)
<ins> Indica que su contenido ha sido insertado a un texto anterior en una actualización
<isindex> Provee una entrada de una sola línea
<kbd> Representa texto que es ingresado por el usuario
<label> Establece una etiqueta para un control en un formulario
<legend> Asigna un título para un “fieldset” (grupo de controles en un formulario)
<li> Inserta un ítem en una lista (para listas ordenadas y desordenadas)
<link> Da infromación relacional acerca del documento al vincularlo con otros recursos
<map> Define un mapa de imagen del lado cliente
<menu> Inserta una lista menu
<meta> Provee información acerca del documento en la forma de variables (nombre y valor)
<noframes> Provee contenido alternativo para marcos, mostrado cuando los mismos no son soportados
<noscript> Provee texto alternativo para scripts, mostrado cuando los mismo no son soportados
<object> Inserta aplicaciones externas (por ejemplo, animaciones /prlículas Flash)
<ol> Inserta una lista ordenada
<optgroup> Agrupa las opciones en un contro “select”
<option> Define una opción en un control “select”
<p> Inserta un párrafo
<param> Establece un parámetro para un objeto insertado
<pre> Muestra texto preformateado, usualmente con fuente de ancho fijo y respetando espacios
<q> Inserta una cita a nivel de línea
<s> Muestra texto tachado
<samp> Representa la salida de un programa
<script> Actúa como contenedor para scripts del lado cliente
<select> Crea un control select (lista desplegable de opciones)
<small> Muestra trexto en duente “pequeña”
<span> Encierra un trozo de texto (en línea), útil para asignar atributos a su contenido
<strike> Muestra texto tachado
<strong> Indica énfasis fuerte para su contenido
<style> Contiene código de hojas de estilo que definen atributos visuales para el documento
<sub> Inserta texto como subíndice
<sup> Inserta texto como superíndice
<table> Actúa como contenedor para la información de una tabla
<tbody> Define un cuerpo en una tabla
<td> Inserta una celda regular en un tabla
<textarea> Crea una entrada de líneas múltiples
<tfoot> Define un pie para una tabla
<th> Inserta una celda de encabezado en una tabla
<thead> Define un encabezado en una tabla
<title> Define un título para el documento completo
<tr> Inserta una fola de celdas en una tabla
<tt> Muestra texto de máquina de escribir
<u> Muestra texto subrayado
<ul> Inserta una lista desordenada
<var> Indica una instancia de una variable