Resumen Etiquetas HTML5

Breve introduccin a HTML
Visitanos: www.facebook.com/roboticaenjaen
Etiqueta:
Elemento:
Atributos:
<head>
<body></body>
class ---> permite trabajar con clases
id
---> asigna un identificador nico a un elemento
style ---> asigna estilos CSS a cada elemento individualmente (intentar evitar)
name ---> declara el nombre del elemento (usado en formularios)
lang ---> declara el idioma (ppalmente para el elemento <html>)
href ---> ruta del archivo accedido para elementos <link> y <a>
src
---> como el anterior para medios como <img>, <video>, <audio>, etc.
Estructura global
<!DOCTYPE>
Declara el tipo de archivo (en este caso HTML5), al comienzo del archivo, sin espacios previos.
<html></html>
Construye la estructura HTML, es la raz del rbol y encierra todo el cdigo HTML.
El nico atributo que necesita es lang y define el lenguaje humano del contenido del documento
P.e.: <html lang=es>
<head></head>
Delimita la primera seccin: la cabecera. Dentro definiremos ttulo de la pgina, codificacin de
caracteres, informacin general acerca del documento e incorporaremos archivos externos.
<body></body>
El cuerpo es la parte visible del documento.
<meta>
Para definir la codificacin de caracteres del documento. P.e.: <meta charset=utf-8>
Para agregar descripciones. P.e.:
<meta name=description content=Lo que quieras>
Para agregar palabra clave. P.e.:
<meta name=keywords content=HTML5, CSS3>
<title></title>
Especifica el ttulo del documento. Generalmente es mostrado en la ventana del navegador.
<link></link>
Usado para incorporar estilos, cdigos, imgenes o iconos desde archivos externos.
P.e.: <link rel=stylesheet href=misestilos.css>
El atributo rel significa relacin y especifica la relacin entre el documento y el archivo que
incorporamos.
Estructura del cuerpo

<header></header>
Provee informacin introductoria (ttulos, subttulos, logos) destinada a ser usada en el cuerpo o
secciones del mismo para ofrecer info sobre esas reas en particular.
<nav></nav>
Se encuentra entre las etiquetas <body> pero luego de la etiqueta </header>. No es una parte de la
cabecera sino una nueva seccin.
Est destinado a contener ayuda para la navegacin, como el men principal o bloques de
navegacin. P.e.:
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section></section>
La siguiente parte del diseo estndar son dos reas conocidas como Informacin Principal y Barra
Lateral.
Informacin Principal contiene la info ms relevante del documento. El elemento que especifica
esta seccin es simplemente <section>
<aside></aside>
En la organizacin tpica la Barra Lateral se encuentra a un lado de la seccin Informacin
Principal. Esta es la columna o seccin que generalmente contiene datos relacionados con la info
principal pero que no son importanes.
Puede estar ubicada a dcha o izq de la pgina. Este elemento sobre describe la info que contiene, no
su lugar en la estructura.
<footer></footer>
Sirve para delimitar la seccin llamada Institucional. Normalmente se utiliza para compartir info
general acerca del autor o compaa, derechos de autor, trminos y condiciones, etc.
La etiqueta puede ser utilizada varias veces dentro del documento para representar el final de
diferentes secciones.
P.e.: <footer>Derechos reservados © 2013-2014</footer>
Dentro del cuerpo del documento

<article></article>
Tiene el propsito de contener una unidad de contenido independiente. Agrupa porciones de info
que estn relacionadas entre s de acuerdo a la naturaleza de los datos que contienen.
El contenido de cada elemento <article> tendr su propia estructura, pudiendo utilizar los <header>
y <footer> en su interior.
<hgroup></hgroup>
Para construir una cabecera podemos aprovechar las distintas etiquetas h: <h1> hasta <h6>. Por
propsitos de procesamiento interno estas etiquetas deben insertarse de forma agrupada.
El elemento <hgroup> es necesario cuando tenemos un ttulo y un subttulo o ms etiquetas h juntas
en el mismo elemento <header>.
<hgroup> solo puede contener etiquetas h.
<figure></figure>
Para identificar contenido que era parte de la info principal pero autocontenido, como ilustraciones,
fotos o vdeos. Normalmente, estos elementos son parte del contenido relevante de la pgina pero
pueden ser removidos sin afectar o interrumpir el flujo del documento.
<figcaption></figcaption>
Generalmente , unidades de info como imgenes o videos son descritas por un texto breve. De
modo que estas etiquetas se usan para encerrar el texto relacionado con el contenido de <figure> y
establecer una conexin entre ambos elementos y sus contenidos.
P.e.:
<figure>
<img src=http://www.ruta.com/miimagen.jpg>
<figcaption>
Esta es mi imagen.
</figcaption>
</figure>
<details></details> y <summary></summary>
Una caracterstica importante es poder mostrar info adicional cuando es requerida por el usuario. El
elemento <details> declara la herramienta. Dentro de este elemento especificamos el ttulo de la
herramienta usando <summary>, y agregamos debajo la info a ser revelada.
P.e.:
<details>
<summary>Click para Expandir</summary>
<p> Hola! Ahora me ves :) </p>
</details>
Elementos nuevos y viejos

<mark></mark>
Etiqueta agregada para resaltar parte del texto que originalmente no era considerado importante
pero que ahora es relevante debido a la actividad del usuario. Por ejemplo, tras una bsqueda.
En algunos navegadores se muestra como un resaltado en fondo amarillo.
Antes se lograba un resultado similar con la etiqueta <b>.
<em></em>
Indica nfasis y reemplaza a la etiqueta <i> usada anteriormente.
<strong></strong>
Elemento usado para indicar importancia.
<b></b>
Usado para resaltar texto slo cuando no existe otro elemento ms apropiado para la situacin.
<i></i>
Representa ahora, de acuerdo con la especificacin, una voz o estado de humor alternativo, como un
pensamiento, un trmino tcnico, etc.
<small></small>
En HTML5 su propsito es representar letra pequea, como avisos legales, descargos, etc.
P.e.: <small>Derechos reservados © 2015 MinkBooks</small>
<cite></cite>
Encierran el ttulo de un trabajo, como un libro, una pelcula, una cancin, etc.
<adress></adress>
Viejo elemento de contenido que se ha convetido en un elemento estructural. Encaja perfectamente
en situaciones donde necesitamos presentar info de contacto para el contenido de un elemento
<article> o para el contenido completo de <body>.
Este elemento debera ser incluido dentro de etiquetas <footer>.
<wbr>
El elemento tradicional <br>, un elemento simple sin etiqueta de cierre, era la nica posibilidad de
insertar un salto de lnea en un prrafo. Esto es slo til cuando sabemos exactamente dnde debe
estar el salto de lnea.
HTML5 introduce <wbr> que sugiere la posibilidad de realizar un salto de lnea solo si es
necesario.
<time></time>
Permite declarar dos textos que representan la fecha y la hora, uno legible por los ordenadores y
otro entendible por los humanos. P.e.:
<time datetime=2014-04-12 pubdate>publicado 12-04-2014</time>
Donde el atributo datetime representa el formato legible por el ordenador. Generalmente sigue el
patrn XXXX-YY-DDTHH:MM:SS.
Tambin se incluye el atributo pubdate, agregado para indicar que el valor de datetime representa
una fecha de publicacin.
<data></data>
Para datos no relacionados con fechas/horas. El elemento usa el atributo value para representar un
valor legible por el ordenador. P.e.:
<data value=32>Treinta y Dos</data>
Atributos nuevos y viejos

data-*
Para declarar datos adicionales para cualquier elemento de HTML. Asigna info adicional a un
elemento sin exponerla al usuario. Ser destinada solo para uso del sitio web y ser accesible desde
Javascript. P.e.:
<p data-inicial=J data-apellido=Leon>J Len</p>
reversed
Utilizamos este atributo booleano para crear una lista descendente. P.e.:
<ol reversed>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
</ol>
Los items se muestran siempre en el orden declarado pero los nmeros que referencian cada tem
reflejan el orden ascendente o descendente de la lista.
ping y download
Para elementos <a>, ping declara la ruta de la direccin URL a ser informada cuando el usuario
hace clic en el enlace. El valor puede estar compuesto por una o ms URLs separadas por un
espacio.
download es un atributo booleano que cuando est presente indica que en lugar de leer el archivo el
navegador debe descargarlo. P.e.:
<a href=http://www.jaen.es/miarchivo.pdf ping=http://www.jose.com/control.php

download>Clic aqu para descargar</a>
translate
La mayora de los nuevos navegadores traducen automticamente un documento cuando detectan
que est escrito en un idioma diferente al del usuario. En ocasiones esta funcionalidad es indeseable
(nombres, titulos originales de obras extranjeras, etc.).
El atributo puede tomar 2 valores: yes o no. Por defecto, el valor es yes (traduccin activada). P.e.:
<p>Mi obra favorita es <span translate=no>The Lord of Rings</span></p>
contenteditable
Ahora podemos convetir cualquier elemento HTML en un rea editable.
<p>Mi peli favorita es <span contenteditable=true>Casablanca</span></p>
Por defecto ningn elemento es editable.
spellcheck
Por defecto se encuentra activa la correcin automtica de ortografa. Para desactivarla se puede
utilizar este booleano.

Resumen Etiquetas HTML5

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Resumen Etiquetas HTML5

Uploaded by

Copyright:

Available Formats

Breve introduccin a HTML

Estructura del cuerpo

Dentro del cuerpo del documento

Elementos nuevos y viejos

Atributos nuevos y viejos

<a href=http://www.jaen.es/miarchivo.pdf ping=http://www.jose.com/control.php

You might also like