GRAN TUTORIAL

Etiquetas HTML

<area> Posibles atributos:
Atributos estándar:title.
Eventos: onblur, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<article> </article> Esta etiqueta será usada para representar un contenido específico de nuestra web. Puede representar un artículo, ya sea un artículo de opinión, un entrada en un blog, un comentario en un foro, una noticia, una descarga, o simplemente un contenido estático de una web como el típico quienes somos o a qué nos dedicamos. Para que entendáis mejor esta etiqueta, la usaremos para representar el contenido típico que se publica en una RSS.
Por lo tanto, este tipo de contenido tiene un alto valor semántico ya que aporta información relevante dentro de nuestro documento. Este elemento debería tener principalmente un título (un header con un h1-h6) y podría tener un footer (con la fecha de publicación, el autor o cualquier otra información adicional) y un cuerpo con el detalle.
Por ejemplo, en el caso de mostrar un listado de noticias, lo que estaremos listando será un listado de elementos article.

<aside>

</aside>

Se usa en contenido que no es directamente contenido principal del que estamos hablando o del que estamos tratando en esa página en concreto. La norma dice que se use para todo aquel contenido tangencial al contenido principal de la página.
Lo usaremos por tanto para todos aquellos elementos secundarios, como podrian ser los bloques publicitarios, enlaces externos, citas, un calendario de eventos, etc.

<aside>
<h1>Publicidad<h1>
(( código de la publicidad ))
</aside>

<audio>

</audio>

Insertar contenido multimedia en tus documentos HTML.

Ejemplo: <audio src="musi/Bar_original.mp3" controls loop ></audio>

Resultado:

Ejemplo:

<audio controls>

<source src="musi/Bar_original.mp3" type="audio/mp3">

</audio>

Resultado:

<b>

</b>

Se usa para representar un texto con un estilo de fuente en negrita.
Ejemplo: Estilo de fuente normal - Estilo de fuente en negrita

Estilo de fuente normal - <b>Estilo de fuente en negrita</b>

Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<base>

Se utiliza para definir una dirección por defecto para todos los enlaces de la página.
Esta etiqueta debe ir ubicada en la sección head del documento.
Ejemplo:

<head>
<base href="http://www.tironemota.site90.com" />
<base target="_blank" />
</head>

<body>
<img src="img/TT50x50.png" />
<a href="http://www.tironemota.site90.com">Tutoriales Tironemota</a>
</body>

Resultado:

Tutoriales Tironemota

Posibles atributos: href, target.

Está desaprobada.
Esta etiqueta especifica el tamaño, color y tipo de fuente por defecto para la página Web.
Ejemplo:

<head>
<basefont color="red" size="5" face="Arial" />
</head>

<body>
<h2>El encabezado se ve afectado</h2>
<p>Los párrafos también</p>
</body>

Posibles atributos: color, face, size.
Atributos estándar: class, dir, id, lang, style, title.

<bdo>

</bdo>

Permite elegir la dirección del texto o desactivar el algoritmo bidireccional de ciertos fragmentos de texto.
Ejemplo:

<bdo dir="ltr">Este texto está representado de izquierda a derecha.</bdo>
<bdo dir="rtl">Este texto está representado de derecha a izquierda.</bdo>

Resultado:

Este texto está representado de izquierda a derecha.
Este texto está representado de derecha a izquierda.

Atributos estándar: class, dir, id, lang, style, title.

Poner el midi de fondo de página (música de fondo de nuestra página web). Es una extensi[on de Internet Exploret

<bgsound src="starwars.mid" loop="infinite" delay="10">

<big>

</big>

Se usa para representar un texto con un estilo de fuente grande.
Ejemplo:

Estilo de fuente normal - <big>Estilo de fuente grande</big>

Resultado:

Estilo de fuente normal - Estilo de fuente grande

Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

</blockquote>

Se utiliza para designar una cita de texto larga(en forma de bloque).
Generalmente los navegadores insertan espacios en blanco antes y después de cada cita.
Ejemplo:

Cita de "El Principito" de Antoine de Saint-Exupéry:
<blockquote>
Las personas mayores nunca son capaces de comprender las cosas por sí mismas, y es muy aburrido para los niños tener que darles una y otra vez explicaciones.
</blockquote>

Resultado:

Cita de "El Principito" de Antoine de Saint-Exupéry:

Las personas mayores nunca son capaces de comprender las cosas por sí mismas, y es muy aburrido para los niños tener que darles una y otra vez explicaciones.

Posibles atributos: cite.
Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<body>

</body>

Define el cuerpo de un documento.
Dentro del cuerpo del documento se incluye todo el contenido del mismo, por ej. textos, enlaces, imágenes, tablas, etc.
Ejemplo:

<html>
<head>
<title>Título del documento</title>
</head>

<body>
Todo el contenido del documento...
</body>

</html>

Posibles atributos: alink, background, bgcolor, link, text, vlink.
Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onunload.

<br>

Se utiliza para crear un salto de línea.
Ejemplo:

Este texto tiene <br>varios saltos de línea<br> para ver su funcion<br>namiento.

Resultado:

Este texto tiene
varios saltos de línea
para ver su funcion
namiento.

Atributos estándar: class, id, style, title.

</button>

Se utiliza para crear botones de un formulario.
Los botones creados con esta etiqueta funcionan de igual manera que los botones creados con la etiqueta <input>, pero permiten mejores posibilidades de presentación.
Ejemplo:

<button type="button">¡Presione aquí!</button>
<button type="submit">Enviar</button>
<button type="reset">Borrar</button>

Resultado:

Posibles atributos: disabled, name, type, value.
Atributos estándar: accesskey, class, dir, id, lang, style, tabindex, title.
Eventos: onblur, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup,onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

</canvas>

Contenedor para graficos. Es un lienzo rectangular para dibujo, cajas, círculos, texto y las imágenes gráficas.

<canvas id="micanvas" width="200" height="150">Lo siento, tu navegador no soporta <strong>canvas</strong></canvas>
<script>
var micanvas = document.getElementById('micanvas');
if (micanvas.getContext)
{
var context = micanvas.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(20,20,100,120);
}
else
{
//canvas no soportado
}
</script>

<canvas id="ContenedorCanvas" width="220" height="100">
Tu navegador no soporta canvas.
</canvas>

<script language="javascript">
function cargaContextoCanvas(idCanvas){
var elemento = document.getElementById(idCanvas);
if(elemento && elemento.getContext){
var contexto = elemento.getContext('2d');
if(contexto){
return contexto;
}
}
return FALSE;
}
window.onload = function(){
//Recibimos el elemento canvas
var ctx = cargaContextoCanvas('ContenedorCanvas');
if(ctx){
//Creo una imagen conun objeto Image de Javascript
var img = new Image();
//indico la URL de la imagen
img.src = 'img/ColoniaTovar_225x300.jpg';
//defino el evento onload del objeto imagen
img.onload = function(){
//incluyo la imagen en el canvas
ctx.drawImage(img, 0, -120);
}
}
}
</script>

Define el título de una tabla.
Esta etiqueta debe ser ubicada inmediatamente despué de la etiqueta de apertura <table>.
Ejemplo:

<table border="1">
<caption>Ingresos Diarios</caption>
<tr>
<th>Día</th>
<th>Ingresos</th>
</tr>
<tr>
<td>Lunes</td>
<td>$100</td>
</tr>
<tr>
<td>Martes</td>
<td>$120</td>
</tr>
<tr>
<td>Miércoles</td>
<td>$90</td>
</tr>
</table>

Resultado:

Ingresos Diarios
Día	Ingresos
Lunes	$100
Martes	$120
Miércoles	$90

Posibles atributos: align.
Atributos estándar: class, dir, id, lang,style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

</center>

Desaprobada. Esta etiqueta de utiliza para centrar un texto.
Ejemplo:

<center>Texto centrado.</center>

Resultado:

Texto centrado.

Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<cite>

</cite>

Contiene una cita o referecia a otro lugar.
Ejemplo:

Para mayor información sobre el tema recurra al <cite>Diccionario de la lengua española</cite>.

Resultado:

Para mayor información sobre el tema recurra al Diccionario de la lengua española.

Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<code>

</code>

Se utiliza generalmente para definir códigos de computadora.
Ejemplo:

<code><html>
<head>
</head>
<body>
...
</body>
</html></code>

Resultado:


                <html>

                <head>

                </head>

                <body>

                ...

                </body>

                </html>

Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<col>

Se utiliza para especificar diferentes atributos a las columnas de una tabla.
Esta etiqueta es muy útil para aplicar atributos a la columna entera en lugar de usar estilos en cada una de las celdas o en cada una de las filas.
Ejemplo:

<table width="300px" border="1">
<col width="150px" />
<col width="100px" />
<col width="50px" />
<tr>
<th>Nombre</th>
<th>Sexo</th>
<th>Edad</th>
</tr>
<tr>
<td>Carolina</td>
<td>Mujer</td>
<td>27</td>
</tr>
</table>

Resultado:

Nombre	Sexo	Edad
Carolina	Mujer	27

Posibles atributos: align, char, charoff, span, valign, width.
Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

</colgroup>

Se utiliza para agrupar columnas de una tabla.
Esta etiqueta es muy útil para aplicar estilos a todas las columnas de una sola vez en lugar de hacerlo en cada una de las celdas por separado.
Ejemplo:

<table border="1" width="250px">
<colgroup width="180px"></colgroup>
   <tr>
      <th>Nombres</th>
      <th>Edad</th>
   </tr>
   <tr>
      <td>María</td>
      <td>15</td>
   </tr>
   <tr>
      <td>Juan</td>
      <td>13</td>
   </tr>
</table>

Resultado:

Nombres	Edad
María	15
Juan	13

<dd>

</dd>

La etiqueta <dd> se utiliza para describir un Ítem de las listas de definiciones.
Esta etiqueta se usa en conjunto con las etiquetas <dl> (define una lista de definiciones) y <dt> (define el Ítem de la lista).
Ejemplo:

<dl>
   <dt>Chocolate</dt>
      <dd>Elaborado a base de cacao</dd>
   <dt>Caramelo</dt>
      <dd>Elaborado a base de azucar</dd>
</dl>

Resultado:

Chocolate: Elaborado a base de cacao
Caramelo: Elaborado a base de azucar

Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<del>

</del>

Se utiliza para marcar secciones de un texto que han sido borradas.
Ejemplo:

"...de acuerdo a la ley <del>17481</del> 17487 del Código Penal"

Resultado:

"...de acuerdo a la ley ~~17481~~ 17487 del Código Penal"

Posibles atributos: cite, datetime.
Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<dfn>

</dfn>

Se usa para definir un término o palabra determinada.
Ejemplo:

<dfn>HTML</dfn> Lenguaje de Formato de Documentos para Hipertexto

Resultado:

HTML Lenguaje de Formato de Documentos para Hipertexto

Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<dir>

</dir>

Desaprobada.
Esta etiqueta crea listas multicolumnas de directorios y tiene la misma estructura que la etiqueta <ul>.

Ejemplo:	Resultado:
<dir> <li>Rojo</li> <li>Azul</li> <li>Amarillo</li> </dir>	Rojo Azul Amarillo

Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<div>

Contenedor genérico. Se usa para definir bloques sin ningún tipo de significado, normalmente bloques que usaremos para maquetar correctamente la página o para agrupar elementos en principio sin querer dar un significado específico.

Ejemplo	Resultado
<div style="color:red"> <h3>Grupo 1</h3> <p>Este bloque tiene definido el texto de color rojo.</p> </div> <div style="color:green"> <h3>Grupo 2</h3> <p>Este bloque tiene definido el texto de color verde.</p> </div>	Grupo 1 Este bloque tiene definido el texto de color rojo. Grupo 2 Este bloque tiene definido el texto de color verde.

Posibles atributos: align.
Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<dl>

</dl>

Se utiliza para definir una lista de definiciones.
Esta etiqueta se usa en conjunto con las etiquetas <dt> (define el Ítem de la lista) y <dd> (describe el Ítem de la lista).

Ejemplo	Resultado
<dl> <dt>Chocolate</dt> <dd>Elaborado a base de cacao</dd> <dt>Caramelo</dt> <dd>Elaborado a base de azucar</dd> </dl>	Chocolate Elaborado a base de cacao Caramelo Elaborado a base de azucar

Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<dt>

</dt>

Se utiliza para definir un Ítem en las listas de definiciones.
Esta etiqueta se usa en conjunto con las etiquetas <dl> (define una lista de definiciones) y <dd> (describe el Ítem de la lista).

Ejemplo	Resultado
<dl> <dt>Chocolate</dt> <dd>Elaborado a base de cacao</dd> <dt>Caramelo</dt> <dd>Elaborado a base de azucar</dd> </dl>	Chocolate Elaborado a base de cacao Caramelo Elaborado a base de azucar

Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<em>

</em>

Se usa para indicar énfasis.
Los navegadores presentan el texto enfatizado generalmente en itálica.

Ejemplo	Resultado
Utilice <em>HTML</em> para diseñar sus páginas Web.	Utilice HTML para diseñar sus páginas Web.

Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

</fieldset>

Se utiliza para agrupar los controles de un formulario por medio de un recuadro. De esta forma, el formulario es más fácil de entender para los usuarios.
Ejemplo

<form>
   <fieldset>
      <legend>Datos personales</legend>
      Nombre: <input type="text" size="30" /><br />
      Apellido: <input type="text" size="30" /><br />
      Email: <input type="text" size="30" />
   </fieldset>
</form>

Resultado
Atributos estándar: accesskey, class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<font>

</font>

Desaprobada.
Esta etiqueta especifica el tamaño, color y tipo de fuente para un texto.

Ejemplo:

<font size="3" color="red">Tamaño: 3 - color: rojo</font><br>

              <font face="serif" color="blue">Nombre de fuente: serif - color: azul</font><br>

              <font face="verdana" color="green" size="5">Nombre de fuente: verdana - color: verde</font>

Resultado: Tamaño: 3 - color: rojo
Nombre de fuente: serif - color: azul
Nombre de fuente: verdana - color: verde

Posibles atributos: color, face, size.
Atributos estándar: class, dir, id, lang, style, title.

<form>

</form>

Se utiliza para crear un formulario que le permita al usuario ingresar datos.
Los datos del formulario serán enviados a un archivo procesador de datos que se encuentra en el servidor.
Esta etiqueta actúa como contenedor decontroles, por ej.:

botones
casillas de verificación (checkboxes)
radiobotones (radio buttons)
menúes
entrada de texto (input)
selección de ficheros (file select)
etc.

Ejemplo:

<form action="procesador_datos.php" method="get">

                Nombre: <input type="text" name="nombre" />

                Apellido: <input type="text" name="apellido" />

                <input type="reset" value="Borrar" />

                </form>

Resultado:

Posibles atributos: accept, accept-charset, action, enctype, method, name, target.
Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onreset, onsubmit, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<frame>

Define un marco o ventana dentro del elemento frameset.
Cada marco puede ser definido con diferentes atributos, dandole así una apariencia distinta, como por ej. colores, bordes, etc.

Ejemplo:

<html>

                

                <frameset cols="25%,50%,25%">

                   <frame src="/frame_a.htm" />

                   <frame src="/frame_b.htm" />

                   <frame src="/frame_c.htm" />

                </frameset>

                

                </html>

Posibles atributos: frameborder, longdesc, marginheight, marginwidth, name, noresize, scrolling, src.
Atributos estándar: class, id, style, title.

</frameset>

Organiza la ventana principal del usuario por medio del uso de los elementos frame.
El elemento frameset contiene dos o más frames.
El elemento frameset solo establece la cantidad de columnas o filas que se mostrarán.

Ejemplo:

<html>

                

                <frameset cols="25%,50%,25%">

                <frame src="/frame_a.htm" />

                <frame src="/frame_b.htm" />

                <frame src="/frame_c.htm" />

                </frameset>

                

                </html>

Posibles atributos: cols, rows.
Atributos estándar: class, id, style, title.
Eventos: onload, onunload.

</h1>
</h2>
</h3>
</h4>
</h5>
</h6>

Se utilizan como encabezado de una sección.
HTML cuenta con seis diferentes niveles de encabezados, h1 el más importante y h6 el menos importante.

Ejemplo:

<h1>Encabezado h1</h1>

                <h2>Encabezado h2</h2>

                <h3>Encabezado h3</h3>

                <h4>Encabezado h4</h4>

                <h5>Encabezado h5</h5>

                <h6>Encabezado h6</h6>

Resultado:

Encabezado h1

Encabezado h2

Encabezado h3

Encabezado h4

Encabezado h5

Encabezado h6

Posibles atributos: align.
Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<head>

</head>

Define la cabecera del documento y contiene información del mismo (metadatos, scripts, estilos, ubicación de documentos de estilos, título de la página, etc.).
La cabecera de un documento puede contener las siguientes etiquetas:

<title> (obligatoria)
<meta>
<link>
<base>
<script>
<style>

Ejemplo:

<html>

                <head>

                <title>Título del documento</title>

                </head>

                

                <body>

                Todo el contenido del documento...

                </body>

                

                </html>

Resultado: Todo el contenido del documento...

Posibles atributos: profile.
Atrutos estándar: dir, lang.

<hr>

Representa una línea horizontal para separar diferentes secciones de un documento.

Ejemplo:

Sección 1

                <hr>

                Sección 2

                <hr>

                Sección 3

Resultado: Sección 1

Sección 2

Sección 3

Posibles atributos: align, noshade, size, width.
Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<html>

</html>

Contiene todo el documento HTML a excepción de la declaración del tipo de documento que se encuenta al principio del mismo.

Ejemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

                "http://www.w3.org/TR/html4/strict.dtd">

                

                <html>

                

                <head>

                <title>Título del documento</title>

                </head>

                

                <body>

                Todo el contenido del documento...

                </body>

                

                </html>

Resultado: Todo el contenido del documento...

Atributos estándar: dir, lang.

<i>

</i>

Se usa para representar un texto con un estilo de fuente en itálica.

Ejemplo: Estilo de fuente normal - <i>Estilo de fuente en itálica</i>

Resultado: Estilo de fuente normal - Estilo de fuente en itálica

Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

</iframe>

Permite insertar un marco dentro de otro documento.

Ejemplo:

<iframe src ="virtualnauta.com" width="100%" height="200px">

                   <p>Su navegador no soporta iframes.</p>

                </iframe>

Resultado:

Posibles atributos: align, frameborder, height, longdesc, marginheight, marginwidth, name, scrolling, src, width.
Atributos estándar: class, id, style, title.

<img>

Incluye una imagen en el documento.
Esta imagen no es insertada tecnicamente en el documento, sino que se enlaza hacia el mismo.

Ejemplo: <img src="img/TT50x50.png" alt="Logo de tironemota"/>

Resultado: Logo de tironemota

Posibles atributos: align, alt, border, height, hspace, ismap, longdesc, src, usemap, vspace, width.
Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<input>

Se utiliza para el ingreso de datos por parte del usuario.
El campo del input dependerá del tipo de control que le asignemos al atributo type.

text - entrada de texto de una línea
password - entrada de texto de una línea con carateres ocultos
checkbox - casilla de verificació
radio - radiobotón
submit - botón de envio
image - botón de envio gráfico o mapa de imágenes
reset - botón de reinicialización
button - botón pulsador
hidden - control oculto
file - selección de archivo

Ejemplo:

<form action="ejemplo.php" method="get">

                   Nombre: <input type="text" name="nombre" /><br />

                   Contraseña: <input type="password" name="contra" /><br />

                   <input type="reset" value="Borrar" />

                </form>

Resultado:

Posible atributos: accept, align, alt, checked, disabled, ismap, maxlength, name, readonly, size, src, type, usemap, value.
Atributos estándar: accesskey, class, dir, id, lang, style, tabindex, title.
Eventos: onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselect.

<ins>

</ins>

Se utiliza para marcar secciones de un texto que han sido insertadas.

Ejemplo: Codigo"...de acuerdo a la ley <del>17481</del> <ins>17487</ins> del Código Penal"

Resultado: Codigo"...de acuerdo a la ley ~~17481~~ 17487 del Código Penal"

<isindex> Desaprobada.
Esta etiqueta crea un control de entrada de texto de una línea que permite cualquier número de caracteres.

<kbd>

</kbd>

Se utiliza para indicarle al usuario el texto que este debe introducir.

Ejemplo: <kbd>Introduzca su nombre de usuario y su password</kbd>

Resultado: Introduzca su nombre de usuario y su password

Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<label>

</label>

Se utiliza para adjuntar información a los controles.
El valor del atributo for debe ser igual al valor id del elemento input para que los reconozca como asociados.

Ejemplo:

<form>

                 <input type="radio" name="internet" id="html" />

                 <label for="html">HTML</label>

                 <br />

                 <input type="radio" name="internet" id="css" />

                 <label for="css">CSS</label>

                 <br />

                 <input type="radio" name="internet" id="js" />

                 <label for="js">JavaScript</label>

              </form>

Resultado:

Posibles atributos: for.
Atributos estándar: accesskey, class, dir, id, lang, style, title.
Eventos: onblur, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

</legend>

Leyenda de un grupo de campos.
Se utiliza para asignar un título a un fieldset.

Ejemplo:

<form>

                 <fieldset>

                    <legend>Datos personales</legend>

                    Nombre: <input type="text" size="30" /><br />

                    Apellido: <input type="text" size="30" /><br />

                    Email: <input type="text" size="30" />

                 </fieldset>

              </form>

Resultado:

Posibles atributos: align.
Atributos estándar: accesskey, class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<li>

</li>

Define los objetos de la lista.
Esta etiqueta se utiliza tanto para las listas ordenadas <ol>, como para las listas desordenadas <ul>.

Ejemplo:

Lista ordenada

              <ol>

                  <li>HTML</li>

                  <li>CSS</li>

                  <li>JavaScript</li>

              </ol>

              

              

              Lista desordenada <ul>

                  <li>HTML</li>

                  <li>CSS</li>

                  <li>JavaScript</li>

              </ul>

Resultado: Lista ordenada

HTML
CSS
JavaScript

Lista desordenada

HTML
CSS
JavaScript

Posibles atributos: type, value.
Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<link>

Define un enlace entre el documento y algún recurso externo.
El elemento link debe ser ubicado en la sección head del documento.

Ejemplo:

<head>

              <link rel="stylesheet" type="text/css" href="/estilos.css" />

              </head>

              

              <body>

              <p>Texto formateado gracias al enlace a las hojas de estilo</p>

              </body>

Resultado:

Texto formateado gracias al enlace a las hojas de estilo

Posibles atributos: charset, href, hreflang, media, rel, rev, target, type.
Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<map>

</map>

Especifica un mapa de imagenes.
Un mapa de imagenes es una imagen que permite clickear diferentes areas de la misma.
Esta etiqueta requiere del atributo name, con el mismo nombre usado en el atributo usemap de la etiqueta <img>. De esta forma se establece la relación imagen-mapa.

Ejemplo:

<img src="img/example_map.gif" border="0" width="225" height="251" usemap="#map1">

              

              <map name="map1">

              <area href="/cuadrado.html" shape=rect coords="0,75,100,175">

              <area href="/circulo.html" shape=circle coords="175,50,50">

              <area href="/triangulo.html" shape=poly coords="125,250, 225,250, 175,165">

              </map>

Resultado:

Posibles atributos: name.
Atributos estándar: accesskey, class, dir, id, lang, style, tabindex, title.
Eventos: onblur, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

<menu>

</menu>

Desaprobada.
Esta etiqueta crea menús de una sola columna y tiene la misma estructura que la etiqueta <ul>.

Ejemplo:

<menu>

              <li>Negro</li>

              <li>Gris</li>

              <li>Blanco</li>

              </menu>

Resultado:

Negro

Gris

Blanco

<meta>

Se utiliza para asignar valores a propiedades de un documento(por ej., descripción del documento, autor, palabras claves, idioma del documento, etc.).
Esta información o metadatos no se visualiza en la página, pero es de suma importacia para los buscadores y para los navegadores.
La etiqueta <meta> debe ubicarse siempre en la sección head del documento.

Ejemplo:

<head>

              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

              <meta name="keywords" content="tutorial, tutorial html, html" />

              <meta name="description" content="Completo tutorial de HTML" />

              <meta name="language" content="Spanish" />

              </head>

Posibles atributos: content, http-equiv, name, scheme.
Atributos estándar: dir, lang.

</noframes>

Especifica un contenido que será mostrado en caso que el navegador no soporte frames.
El elemento noframes puede contener todo elemento que se usa en el cuerpo del documento y debe ser ubicado dentro del elemento frameset.

Ejemplo:

<html>

                

                <frameset cols="25%,50%,25%">

                   <frame src="/frame_a.htm" />

                   <frame src="/frame_b.htm" />

                   <frame src="/frame_c.htm" />

                   <noframes>

                      Su navegador no soporta frames. Para acceder a una <a href="/version-sin-marcos">versión sin marcos</a>.

                   </noframes>

                </frameset>

                

                </html>

Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

</noscript>

Proporciona contenido alternativo cuando un navegador no soporta scripts o los tiene desactivados.
El elemento noscript puede contener todo elemento que se usa en el cuerpo del documento.

Ejemplo:

<script type="text/javascript">

                document.write("Bienvenido a Tironemota.site90.com")

                </script>

                <noscript>Su navegador no soporta JavaScript</noscript>

Resultado:

Atributos estándar: class, dir, id, lang, style, title.
Eventos: onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

</object>

Se utiliza para insertar objetos tales como imágenes, videos, audio, PDF, Flash, ActiveX y Java applets.
La etiqueta <param> define parámetros o variables del objeto.

Ejemplo:

<object data="musi/Bar_original.mp3" type="audio/mpeg" >

<param name="autoplay" value="false"> "No funciona"

<param name="autostart" value="false"> "No funciona"

</object>

Resultado:

Posibles atributos: align, archive, border, classid, codebase, codetype, data, declare, height, hspace, name, standby.

<ol> </ol> Lista ordenada

<optgroup> </optgroup> Grupo de opciones

<option> </option> Opción seleccionable

<p> </p> Párrafo

<param> Valor de propiedad con nombre

<pre> </pre> Texto preformateado

<q> </q> Cita corta en línea

<s> </s> obsoletas

<samp> </samp> Ejemplo de salida de programas, scripts, etc.

</section>

Se usa para representar un bloque de nuestra página que tiene valor semántico, es decir, que aporta un significado a la página. Realmente si tenemos que clasificar por la importancia del significado, el ranking sería: article sería la etiqueta que contiene la información más relevante, section la que contiene información menos relevante, y div que contiene información que no aporta significado ninguno.
Un aspecto importante de la etiqueta section es que debe tener un título, por lo tanto debemos siempre asignarle un encabezado (h1-h6).

Ejemplo: Listado de noticias:

<section>
<header><h1>Listado de noticias</h1></header>
<article><header><h2>Noticia 1</h2></header></article>
<article><header><h2>Noticia 2</h2></header></article>
<article><header><h2>Noticia 3</h2></header></article>
</section>

Ejemplo: Separarar elementos de un articulo.

<article>
<header><h1>Artículo</h1></header>
<section><header><h2>Introducción</h2></header> …TEXTO … </section>
<section><header><h2>Desarrollo</h2></header> …TEXTO … </section>
<section><header><h2>Conclusiones</h2></header> …TEXTO … </section>
<section><header><h2>Galería de imágenes</h2></header> …TEXTO … </section>
</article>

<select> </select> Selector de opciones

<small> </small> Estilo de texto pequeño

<span> </span> Contenedor genérico de idioma/estilo

<strike> </strike> obsoletas

<strong> </strong> Énfasis fuerte

<sub> </sub> Subíndice

<sup> </sup> Superíndice

<tbody> </tbody> Cuerpo de tabla

<td> </td> Celda de datos de una tabla

<textarea> </textarea> Campo de texto multilínea

<tfoot> </tfoot> Pie de tabla

<th> </th> Celda de encabezado de tabla

<thead> </thead> Cabecera de tabla

<title> </title> Título del documento

<tr> </tr> Fila de una tabla

<tt> </tt> Estilo de texto de teletipo o monoespacio

<u> </u> obsoletas

<ul> </ul> Lista no ordenada

<var> </var> Variable o argumento de un programa

<video> </video> Insertar contenido multimedia en tus documentos HTML.

<wbr>

Ejemplo	Resultado
María	15

Ejemplo: xxxxxxx

Resultado: xxxxxxx

Etiquetas HTML

Grupo 1

Grupo 2

Encabezado h1

Encabezado h2

Encabezado h3

Encabezado h4

Encabezado h5

Encabezado h6