Etiquetas HTML

ETIQUETAS HTML
 Etiqueta para escribir comentarios en HTML.
<!DOCTYPE> Declaración del tipo de documento.
Etiqueta para incluir enlaces (links) hacia otras páginas o

<a>
documentos.
<abbr> Indicar una abreviación o acrónimo.
<acronym> Indicar un acrónimo.
<address> Etiqueta para incluir información de contacto.
<applet> Insertar un applet en la página html.
<area> Define un area de una imágen en donde se puede hacer clic.
<article> Etiqueta semántica de HTML5 que indica la hubicación de un artículo.
<aside> Etiqueta semántica de HTML5 para indicar una barra lateral
<audio> Insertar audio.
<b> Convierte el texto a negritas.
<base> Definir una URL raíz para los enlaces relativos de nuestra página.
<basefont> Especifica tamaño, color y fuente por defecto de la página.
<bdi> Aisla parte de un texto que podría estar en otro idioma o formato.
<bdo> Cambia la dirección del texto.
<big> Aumenta el tamaño del texto.
<blockquote> Citar contenido de otro sitio web dentro de un bloque.
<body> Etiqueta que define el cuerpo de un documento HTML.
<br> Indica una salto de línea.
<button> Crear un botón en donde se puede hacer clic.
<canvas> Etiqueta para definir un contenedor o lienzo para crear gráficos.
<caption> Define el título de una tabla.
<center> Centra el contenido.

Cita o referencia de algún libro, película, artículo o algún trabajo de
<cite>
otro autor.
<code> Indica que el texto es código fuente de algún lenguaje informático.
<col> Especifíca propiedades de atributos de las columnas de una tabla.
<colgroup> Define un grupo de columnas de una tabla para darles formato.
<datalist> Crea una lista de opciónes para una caja de texto input.
<dd> Define un término en una lista de definiciones.
Indica invalidez a un fragmento de texto tachandolo con una línea

<del>
horizontal.
<details> Especifica detalles que el usuario puede desplegar u ocultar.
<dfn> Marca un término o definición.
<dialog> Mostrar una caja de diálogo.
<dir> Define una lista de directorios.
<div> Crea un bloque.
<dl> Define una lista de definiciones.
<dt> Define un término en una lista de definiciones.
<em> Enfatizar parte del texto.
<embed> Crea un contenedor para una aplicación externa.
<fieldset> Agrupa campos de un formulario relacionados entre si.
<figcaption> Escribir una leyenda o texto asociado a una figura o imagen.
Define un contenedor de figuras como imágenes, fotos, diagramas,

<figure>
etc.
<font> Da formato al texto (fuente, tamaño, color, etc.).
<footer> Define el pie de página.
<form> Para definir un formulario.
Define una ventana o frame de una página externa dentro de un

<frame>
frameset.
<frameset> Define un frameset dentro del cual puede haber varios frames.
<h1> ... <h6> Encabezados de HTML
<head> Etiqueta que define la cabecera de un documento HTML.
<header> Para indicar el encabezado de una página.
Indica un cambio en la temática de la página y queda señalado con

<hr>
una línea horizontal.
<html> Etiqueta que indica el inicio y final de un documento HTML.
<i> Muestra el texto en itálica.
<iframe> Define una ventana o frame interno.
<img> Etiqueta para insertar imágenes.
<input> Añade un cuadro de entrada de texto a un formulario.
<ins> Indica que el texto a sido insertado en lugar de otro.
<kbd> Indica texto introducido por medio del teclado.
<keygen> Encriptar datos de un formulario.
Define una etiqueta relacionada a un elemento <input> de un

<label>
formulario.
Escribe un nombre o leyenda en un cuadro generado por la etiqueta

<legend>
<fieldset>.
<li> Define un elemento de una lista.
<link> Realiza un enlace entre la página y un elemento o recurso externo.
<main> Indica el contenido principal de una página.
Permite dividir una imagen para hacer clic en distintas áreas de la

<map>
misma.
<mark> Remarca un texto de un color.
Permite crear un menú personalizado al hacer clic derecho con el

<menu>
mouse.
<menuitem> Define un elemento de un menu creado con la etiqueta <menu>.

<meta> Define los metadatos que van dentro de la etiqueta <heaad>
Indica una medida dentro de un rango representada por una barra

<meter>
progresiva.
<nav> Define una grupo de enlaces de navegación.
Muestra un contenido alterno en caso de que los frames no sean

<noframes>
soportados.
Muestra un contenido altero en caso de que un script no sea

<noscript>
soportado.
<object> Insertar objetos embebidos como audio, video o aplets.
<ol> Define una lista ordenada numericamente o alfabeticamente.
<optgroup> Agrupa opciones relacionadas en una lista desplegable.
<option> Define una opcion en una lista desplegable.
<output> Indica el resultado de salida de una operación.
<p> Para escribir un párrafo.
<param> Define paramentros de un objeto de la etiqueta <object>.
<pre> Etiqueta para escribir texto pre-formateado.
<progress> Etiqueta para insertar una barra prograsiva.
<q> Encierra un segmento de texto entre comillas.
<s> Tacha texto con una linea horizontal.
Indica que el texto es un ejemplo de salida de un programa de

<samp>
computadora.
<script> Etiqueta para insertar un script.
<section> Define una seccion de la página.
<select> Define una lista desplegable en un formulario.
<small> Etiqueta que cambia el texto a un tamaño mas pequeño.
<source> Indica la dirección de un recurso de audio o video.
<span> Define una sección de un texto.

Indica invalidez a un fragmento de texto tachandolo con una línea
<strike>
horizontal.
<strong> Marca texto importante del documento en negrita.
<style> Etiqueta para agregar un estilo CSS dentro del documento HTML.
<sub> Indicar una subíndice.
<summary> Define un encabezado visible dentro de una etiqueta <details>
<sup> Indicar una superíndice.
<table> Inserta una tabla en la página.
<tbody> Define el cuerpo de una tabla.
<td> Agregar una columna en una tabla
<textarea> Define un área de texto para ingresar texto desde un formulario.
<tfoot> Indica el contenido que forma el pie de una tabla.
<th> Agrega una "columa encabezado" a una tabla.
<thead> Define el encabezado de una tabla.
<time> Indica una hora o fecha.
<title> Indica el título de la página.
ESTRUCTURA:
En HTML existe un esqueleto básico, que todos debemos de conocer porque se viene
usando desde los inicios del lenguaje. Nos referimos a la conocida estructura del HEAD
/ BODY. Toda jerarquía de etiquetas comienza por <HTML> y dentro tenemos dos
grandes bloques <HEAD> y <BODY>. Bien, en este artículo nos vamos a adentrar en la
parte del <BODY>.
Hasta hace poco dentro del <BODY> se colocaban etiquetas
como <DIV>, <SPAN>, <B>, etc. pero todas las etiquetas que usábamos decían poco a
aquel sistema que las leyera. ¿Qué significa <DIV>? pues simplemente que estamos
colocando una «división» pero no especifica para qué se usa esa división.
Quizás <P> tiene algo más de significado, pero no deja de ser un párrafo a secas, sin
decirte qué tipo de información va a contener ese párrafo.
Hoy, la recomendación es usar otro conjunto de etiquetas que sí nos aportan un
significado al contenido que engloban. Pero esto no quiere decir que las etiquetas
antiguas se dejen de usar, sino que ahora tenemos otra serie de etiquetas con valor
semántico, que vienen a aportar nuevas facilidades que te resumiremos en el siguiente
punto. De momento, analicemos estas etiquetas nuevas con valor semántico con la
estructura de una web en mente.
Insistimos. Todo esto iría dentro del <BODY>.
<header>
Esta es la cabecera de una página o un bloque de contenido
<nav>
Esta es la barra de navegación principal del sitio
</nav>
</header>
<main>
<section>
Esta es una sección de contenido del bloque principal (MAIN)
<article>
Esto es un artículo del sitio
</article>
<article>
Esto sería un segundo artículo
</article>
</section>
</main>
<aside>
El <aside> contiene información accesoria, que no suele añadir un valor significativo a
la temática del sitio. Por ejemplo, es habitual usar para la barra lateral con una serie de
banners o widgets sociales.
</aside>
<footer>
Esto es un pie de página
</footer>
Las propias etiquetas expuestas son autoexplicativas, dado su nombre o en vista al

texto que hemos colocado a su contenido. Pero ten en cuenta que su uso queda un
poco en función de las necesidades del desarrollador. Por ejemplo, <FOOTER> podría
ser el pie principal de un sitio, o quizás el pie de una parte del sitio, si es que lo
colocamos dentro de un <SECTION>. Por poner otro ejemplo, <NAV> dentro de
un <HEADER> hace entender que esa sería la barra de navegación principal, pero si la
colocamos dentro de un <FOOTER> se supone que serán enlaces de menos valor,
como el típico «quienes somos», «contacto», etc.
Motivos por los que aplicar semántica al contenido del HTML
Usar estas etiquetas semánticas es una recomendación por varios factores. Queremos
destacar dos de ellos que consideramos fundamentales.
o Accesibilidad. Cualquier persona que no tiene capacidad de visualizar el
contenido maquetado de un sitio es capaz, en función de las etiquetas, de entender
qué tipo de información contienen y por tanto comprender su importancia y el
contexto en el que su contenido toma valor.
o Posicionamiento. Los motores de búsqueda son capaces de asimilar mejor de
lo que estamos hablando y saber qué partes del contenido de una web son las que
realmente tienen más valor. Por tanto, son capaces de saber con mayor exactitud de
lo que se está hablando y qué textos son más interesantes para extraer palabras
clave sobre las cuales se está tratando.
Por estos motivos, es por lo que aparecen las etiquetas semánticas y se recomienda
usarlas para crear la estructura básica de contenido de una web. Se dice que Google
valora positivamente los sitios que le ayudan a entender mejor la temática que
tienen, tanto el web a nivel global como el particular en cada página individual .
Solo ese motivo es suficiente para convencernos a todos de usarlas.
LA 15 MÁS USADAS
1. classList
Ya que classList es una funcionalidad relativamente nueva de HTML5, no funciona en
los navegadores más viejos, pero esto no debería preocuparnos ya que existe una
polyfill llamada classlist.js. Aunque si estamos usando alguna librería javascript como
jQuery, no necesitaremos esta API de forma nativa.
2. dataset
elem.dataset no es soportado por Internet Explorer ni por los navegadores móviles más
antiguos. Para todos los navegadores no hay problema en utilizar atributos data-*. Pero
lo que no conviene que usemos es elem.dataset.foo para obtener su valor en javascript,
en vez de esto utilicemos elem.getAttribute(‘data-foo’). La polyfill que existe para esta
API es HTML5 dataset support
3. DOM
Actualmente, un gran conjunto de las nuevas funcionalidades sobre el DOM puede ser
“corregido”. Sin embargo, los “shims” o “correctores” actuales no están probados en un
100% y se pierden algunas funciones. Los polyfills existentes (ES5-DOM-
shim y DOM-shim) se deben usar con precaución. Igual hay que recordar, que
podemos utilizar cualquier librería que manipule el DOM como jQuery que posee
selectores y funciones muy potentes como las nativas de HTML5. He escrito un artículo
en este sitio sobre esta API y su relación con los selectores de jQuery.
4. Drag and Drop
La funcionalidad de Drag and Drop se ha estandarizado en HTML5 basandose en la
implementación original de Internet Explorer (¡si, de IE!). Es por esto que ya tiene un
soporte bastante amplio, pero muchos se sienten frustrados cuando usan este API. Por
eso, se recomienda usar jQuery UI Draggable (u otra librería Javascript).
Las polyfills recomendadas: dropfile, fileSaver, jDataView.
5. EventSource
Eventos enviados por el servidor (Server-Sent Events) son eventos en tiempo real
emitidos por el servidor y recibidos por el navegador. EventSource.js provee de una
alternativa y no depende de jQuery. Los polyfills que se recomiendan
son EventSource.js, jQuery.eventsource
6. Geolocalización
El polyfill geolocation shim usa el servicio de IP-Geocoding de Google como alternativa
para los navegadores que no soportan esta API. El otro polyfill se llama geo-location-
javascript no usa el servicio del buscador, pero utiliza las APIs específicas de
BlackBerry, WebOS y Google Gears. En la mayoría de los casos, no se debería
exponer características de geolocalización en tu aplicación si esta característica no está
presente nativamente.
7. Historial (History)
La API de historia provee a Javascript una forma de cambiar la URL mostrada en
el navegador sin recargar la página. El plugin History.js suaviza algunas diferencias
de implementación entre los navegadores y provee un hashchange alternativo para
navegadores con HTML4. GitHub usa pjax (pushState + ajax).
8. IndexedDB
IndexedDB fue una especificación volátil por un año, pero se calmó. Además de
Chrome y Firefox, IE10 también la va a soportar; Opera no lo ha implementado y Safari
todavía no se ha comprometido con la misma.
El polyfill IDBWrapper ayuda a suavizar las diferencias entre los navegadores. Se
puede considerar el uso de WebSQL cuando IndexedDB no es soportada, pero hay que
recordar que la especificación de WebSQL fue abandonada.
9. localStorage
localStorage y sessionStorage son una muy buena forma de guardar datos sin
tener que utilizar cookies. Incluso IE8 soporta a ambas así que es poco probable que
necesites un polyfill. Si lo necesitas, el de Remy Sharp es muy bueno y fácil de
implementar
En localStorage, los datos que se guardan son de tipo/valor (key/value), así que si se
desea guardar datos más complejos, podemos hacerlo guardando JSON en forma de
string(JSON.stringify(obj)) que luego parsearemos con JSON.parse(str), luego de
obtener el registro guardado. Tampoco hay forma de saber (en los distintos
navegadores) si se ha excedido la capacidad, así que conviene envolver nuestro código
entre try/catch. Es seguro usar hasta 2.5 MB.
10. matchMedia
matchMedia es una API Javascript para ver si una “media query” va a tener exito.
El polyfillMatchMedia.js nos permite utilizar esta API en todos los navegadores. Si
necesitas una alternativa que es sensible al cambio de tamaño de la ventana, puedes
usar este fork, aunque es limitado para navegadores que soportan transiciones CSS.
matchMedia es muy útil para trabajar en sitios que tiene diseño sensible a
diferentes tamaños de pantalla (responsive design).
11. Microdata DOM API

Microdata es una nueva y liviana sintáxis semántica. Mediante el uso de atributos,
nos permite definir grupos anidados de pares de datos del tipo nombre-valor,
llamados microdata, que generalmente se basan en el contenido de la página. Nos
brinda una nueva forma de agregar información semántica extra y de extender HTML5.
Microdata está siendo usada actualmente por Google para extraer datos meta
semánticos de nuestros sitios web (para más sobre esto, pueden ver schema.org).
La API DOM de Microdata es de ayuda porque puedes manipular items y propiedades

en una página de forma programatica, tal vez para presentar la información de una
manera “buscable/filtrable”, o enviarlo a otra aplicación en otro lado.
Esta API es soportada por Opera y está siendo implementada por Mozilla.
Para soporte en IE, se puede usar ES5/DOM shim.
12. requestAnimationFrame
requestAnimationFrame (rAF) es recomendada para animaciones, ya que se lleva
muy bien con el uso de la batería y permite al navegador optimizar la performance de
tus animaciones.
La especificación ha tenido algunos arreglos y se ha calmado. Además de Chrome y

Firefox, lo tendrá también IE10. El polyfill recomendado es requestAnimationFrame
polyfill
13. Web Workers
Los Web Workers pueden correr operaciones pesadas de forma paralela en muy buena
forma, liberando así el “thread” o hilo de la UI para responder al input del usuario.
Dependiendo de que caso de uso necesitemos web workers, deberías elegir no ofrecer
esta funcionalidad si los workers no están presentes, o hacer que todo entre en el hilo
de la UI.
14. WebGL
Hay polyfills y plugins para poder usar WebGL en IE, pero no deberías usarlos. Es
aconsejable usar WebGL si está presente, sino se debería enviar al usuario
a get.webgl.org
También podemos ofrecer al usuario descargar Google Chrome Frame si solo quieren
un plugin. Casi todas las demos de WebGL usan este plugin si está disponible.
15. WebSockets
Hacer una app real-time (en tiempo real) es una gran mejora y los WebSockets brindan
esta habilidad para agregar comunicación bi-direccional en una conexión persistente
para tu aplicación, permitiendo incrementar la interactividad y el compromiso con el
usuario.
web-socket-js es un polyfill para la API de Websockets de Javascript, transfiriendo datos

a través de Sockets de Flash… siempre y cuando los WebSockets no estén disponibles.

Etiquetas HTML

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Etiquetas HTML

Încărcat de

Drepturi de autor:

Formate disponibile

ETIQUETAS HTML

Etiqueta para escribir comentarios en HTML.

<!DOCTYPE> Declaración del tipo de documento.

Etiqueta para incluir enlaces (links) hacia otras páginas o

<abbr> Indicar una abreviación o acrónimo.

<acronym> Indicar un acrónimo.

<address> Etiqueta para incluir información de contacto.

<applet> Insertar un applet en la página html.

<area> Define un area de una imágen en donde se puede hacer clic.

<article> Etiqueta semántica de HTML5 que indica la hubicación de un artículo.

<aside> Etiqueta semántica de HTML5 para indicar una barra lateral

<audio> Insertar audio.

<b> Convierte el texto a negritas.

<basefont> Especifica tamaño, color y fuente por defecto de la página.

<bdo> Cambia la dirección del texto.

<big> Aumenta el tamaño del texto.

<blockquote> Citar contenido de otro sitio web dentro de un bloque.

<body> Etiqueta que define el cuerpo de un documento HTML.

<br> Indica una salto de línea.

<button> Crear un botón en donde se puede hacer clic.

<canvas> Etiqueta para definir un contenedor o lienzo para crear gráficos.

<caption> Define el título de una tabla.

<center> Centra el contenido.

<code> Indica que el texto es código fuente de algún lenguaje informático.

<col> Especifíca propiedades de atributos de las columnas de una tabla.

<colgroup> Define un grupo de columnas de una tabla para darles formato.

<dd> Define un término en una lista de definiciones.

Indica invalidez a un fragmento de texto tachandolo con una línea

<details> Especifica detalles que el usuario puede desplegar u ocultar.

<dfn> Marca un término o definición.

<dialog> Mostrar una caja de diálogo.

<dir> Define una lista de directorios.

<div> Crea un bloque.

<dl> Define una lista de definiciones.

<dt> Define un término en una lista de definiciones.

<em> Enfatizar parte del texto.

<embed> Crea un contenedor para una aplicación externa.

<fieldset> Agrupa campos de un formulario relacionados entre si.

<figcaption> Escribir una leyenda o texto asociado a una figura o imagen.

Define un contenedor de figuras como imágenes, fotos, diagramas,

<font> Da formato al texto (fuente, tamaño, color, etc.).

<footer> Define el pie de página.

<form> Para definir un formulario.

Define una ventana o frame de una página externa dentro de un

<h1> ... <h6> Encabezados de HTML

<head> Etiqueta que define la cabecera de un documento HTML.

<header> Para indicar el encabezado de una página.

Indica un cambio en la temática de la página y queda señalado con

<html> Etiqueta que indica el inicio y final de un documento HTML.

<i> Muestra el texto en itálica.

<iframe> Define una ventana o frame interno.

<img> Etiqueta para insertar imágenes.

<input> Añade un cuadro de entrada de texto a un formulario.

<ins> Indica que el texto a sido insertado en lugar de otro.

<kbd> Indica texto introducido por medio del teclado.

<keygen> Encriptar datos de un formulario.

Define una etiqueta relacionada a un elemento <input> de un

Escribe un nombre o leyenda en un cuadro generado por la etiqueta

<li> Define un elemento de una lista.

<link> Realiza un enlace entre la página y un elemento o recurso externo.

<main> Indica el contenido principal de una página.

Permite dividir una imagen para hacer clic en distintas áreas de la

<mark> Remarca un texto de un color.