Scribd
Cargar
72 vistas

HTML 5

Este documento explica las características y elementos de HTML5. Describe las diferencias entre HTML5 y versiones anteriores de HTML, incluyendo nuevas etiquetas semánticas como <header>, <nav>, <article>, así como mejoras en formularios y compatibilidad multiplataforma.

Cargado por

Las Legiones
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
72 vistas

HTML 5

Este documento explica las características y elementos de HTML5. Describe las diferencias entre HTML5 y versiones anteriores de HTML, incluyendo nuevas etiquetas semánticas como <header>, <nav>, <article>, así como mejoras en formularios y compatibilidad multiplataforma.

Cargado por

Las Legiones
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

HTML 5

¿Que es html 5? – Simplemente Como su nombre indica, HTML 5 es el sucesor


de HTML4. Este trabajo o proyecto de HTML5 se inicio a finales de 2003 con un
grupo de trabajo que se propuso a hacer un lenguaje que llegara con un conjunto
de tecnologías que permiten construir la nueva Web. No fue sino hasta 2007 que
el HTML5 del W3C acepta la visión mediante la incorporación en ella del grupo
de trabajo. Los principios de diseño son claras: para simplificar el uso de HTML,
la formalización de las prácticas actuales, y garantizar la máxima compatibilidad
con versiones anteriores.
HTML5 es la nueva versión del lenguaje de marcado que se usa para estructurar
páginas web, que actualmente todavia sigue en su evolucion, gracias a él con
características nuevas y modificaciones que mejorará significativamente este
nuevo estándar.
¿Qué va a servir? En primer lugar, el HTML 4 se utiliza para estructurar un
documento. El html5 no cambia este objetivo, solo que tendremos más
oportunidad de hacer las cosas más simplificadas y de una manera más sencilla.
Eso es todo, ahora podemos crear aplicaciones web de una manera menos
complicada ya que esta tecnología mejora e incorpora muchos conceptos de
programación web, como decir un todo en uno.
¿Porqué es mejor HTML5? Esta es una pregunta muy importante que no requiere
una cátedra para dar una respuesta, Simplemente porque es una tecnología que
supera a la actual HTML, porque es lo nuevo que estandariza la W3C, porque
es nueva tecnología y como toda nueva tecnología siempre viene con cosas que
nos van a impresionar, porque llega de la mano de CSS3, una evolución notable
de las hojas de estilo que conocíamos y porque revaloriza el papel de JavaScript
en la Web, como el lenguaje que “sabe hablar” con las nuevas APIs que llegan
con HTML5.
¿Porqué debo de comenzar a trabajar con HTML5?, La respuesta es muy corta:
debes de comenzar a crear tus proyectos en HTML5 porque es una inversión en
el futuro, ¡¡ NO que digo futuro!! es para ¡¡YA..!!., la mayoria de los sitios web
poderosos del mundo ya implementan este estandar, y si no quieres quedarte
atras, debes de comenzar ya.
HTML5 lleva a un nivel más alto que el código HTML4 el lenguaje de marcado,
ya que será capaz de controlar los eventos y las iteraciones con el usuario. La
diferencia esencial no está en el lenguaje en sí mismo, se añaden las etiquetas
nuevas en comparación con HTML 4 y no requiere un tipo de documento
específico, el verdadero “cambio” es en el manejo de la tela, o las áreas de la
página que se puede utilizar como pizarras interactivas (se puede diseñar y
gestionar los eventos), todos a través de JavaScript.
En resumen, HTML5 conduce a una fusión entre JavaScript como lenguaje de
programacion, HTML como modelo semantico y css3 que es la evolucion del css
como el lenguaje de los estilos, que se dedica a dar un mejor aspecto a nuestros
proyectos.
¿Qué hay de nuevo entonces en html5?
Hay muchas mejoras y cosas nuevas que nos pueden sorprender por ejemplo el
tema de formularios, la forma de estructuración en fin…

A continuación alguna de las reglas establecidas para HTML5:


 Las nuevas características debe basarse en HTML, CSS, DOM y JavaScript.
 Reducir la necesidad de plugins externos (como Flash).
 Mejor manejo de errores.
 Más marcado para reemplazar secuencias de comandos.
 HTML5 debe ser independiente del dispositivo.
 El proceso de desarrollo debe ser visible para el público.

El nuevo DOCTYPE de html5

 Esto es lo primero que encontramos en un documento


web. Te reto a que me nombre la cabeza el tipo de
documento de XHTML 1.0 Strict o HTML 4.01. No
es fácil ¿eh?.
 El <! DOCTYPE> para la version HTML 4.01:

1 <!DOCTYPE HTML PUBLIC »


2 "-//W3C//DTD HTML 4.01//ES" »
3 "http://www.w3.org/TR/html4/strict.dtd">
 Aqui el <! DOCTYPE> para la version HTML 1.0:


Si lo recuerdas te felicito porque deberás de ser un duro del diseño y el
desarrollo web, de suerte este código del tipo de documento se ha simplificado.
En realidad todo lo que dice en los anteriores codigo es “este documento está
escrito en HTML 4.01,” o “Este documento está escrito en XHTML 1.0.”, eso es
todo.
 Ahora en HTML5 El encabezado o la primera línea
se ha simplificado considerablemente. Ahora
podemos mantener este Doctype en la memoria, sin
tener que copiar y pegar. Es solo esto:

1 <!DOCTYPE html>
 Es tan corto que todo el mundo lo puede memorizar.
El <! DOCTYPE> debe ser lo primero que debe ir en
un documento HTML 5, antes de la etiqueta <html>.
 ¡¡Ojo!! <DOCTYPE!>, no es una etiqueta, esto es
una instrucción para el navegador que declara la
versión de html que se está usando.
 En HTML 4.01, todo la declaración del <!
DOCTYPE> requieren una referencia a una DTD,
HTML 4.01, porque se basa en SGML.
 HTML5 no se basa en SGML, y por lo tanto no
requiere una referencia a una DTD.
 Importante: Siempre agregue la declaración
<DOCTYPE! html> a los documentos HTML, para
que el navegador sepa qué tipo de documento debe
de esperar.
El DOCTYPE se activa en HTML5 en todos los
navegadores que tienen un modo estándar,
incluyendo los navegadores que no saben nada acerca
de HTML5. Por esa razón, usted puede comenzar a
usar el DOCTYPE de HTML5 ahora.
 Recuerda:

1 <!DOCTYPE html>

Estructura básica de html5


Aunque gran parte de la atención que se tiene sobre HTML5 gira en torno a las
nuevas API, y sus 30 nuevos elementos con la nueva semántica que se puede
utilizar en tradicionales páginas estáticas, también en las franja de controles de
formularios. Vamos a tocar un poco el tema de lo básico como veníamos
tratando hasta ahora, Vamos a ver un poco la estructura básica y algunas
mejoras establecidas en la misma.
Así que vamos a ver una estructura html5, que es lo minimo que se requiere
para tener una correcta base para iniciar nuestro proyecto, luego vamos a tratar
de analizarla un poco:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="curso html5 desde 0" />
<title>Mi primera web en html5</title>
</head>
<body>
<!--aqui se despliega todo el contenido-->
</body>
</html>

Lo primero del DOCTYPE es la etiqueta que no pasa de moda la clásica , si te


fijas veras que tiene un atributo que es lang, osea lenguaje aquí definimos en
que lenguaje va a ir nuestro documento web, lo puedes en “en” si tu web va a
hacer en el idioma Ingles o “es” si esta en Español, ya dependerá de tu
proyecto, en este caso hace referencia a una web construida en español, y esto
ayudara también a muchas personas con algunas discapacidades, que utilizan
un lector de pantalla o algo parecido, que más que decirles en qué idioma esta
nuestra web..
Echa un vistazo a la etiqueta con mucho cuidado. Los que están acostumbrado
a escribir XHTML se darán cuenta que es el primer cambio. Ya que estábamos
acostumbrados a esto:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Esto es todavía lo puedes usar, ya que en html4 y 5 podemos intercambiar etiquetas


en la manera posible que lo necesitemos, pero en html5 el camino más corto es mejor
ya que es más fácil de escribir y que ya funciona en todas partes, solo tenemos que
escribir esto:

<meta charset="utf-8"/>

Ahora sé que en él la etiquetase encuentra muchas metas, pero la verdad es que


realmente no vale la pena meterlas en nuestros documentos ya que no tienen ya
validez para los buscadores que fueron para las que se crearon principalmente.
Ejemplo, la meta keywords, otras como la meta description, si es muy importante ya
que ayudara a los buscadores a expresar el contenido de tu página.

Y la etiqueta <title> que es la que provee el titulo a la pagina, esta es muy importante
incluirla a los documentos creados, ya que la asociamos a una identidad por medio de
su titulo.

<title>Aqui va el titulo del docuemento actual</title>

Nuevas etiquetas estructurales en HTML5


Bueno vamos a definir una estructura más completa de un documento web
utilizando las nuevas etiquetas estructurales. <header>,
<hgroup>, <footer>, <nav>, <aside>, <section>y <article>.
Vamos a definir el documento y luego vamos a examinar las etiquetas más a
fondo y conocer como las podemos utilizar en nuestros propios proyectos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<meta name="description" content="curso html5 desde 0" />
<title>Mi primera web en html5</title>
</head>
<body>
<header>
<hgroup>
<h1>Mi curso de html5</h1>
<h2>Aprende desde 0</h2>
</hgroup>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">quienes somos</a></li>
<li><a href="#">portafolio</a></li>
<li><a href="#">contacto</a></li>
</ul>
</nav>
</header>
<article>
<h2>Aquí va un post, con su titulo en h2</h2>
<p>Aqui puede ir los contenidos del post</p>
</article>
<article>
<h2>Aquí va un post, con su titulo en h2</h2>
<p>Aqui puede ir los contenidos del post</p>
</article>
<aside>
<h2>Titulo del sidebar</h2>
<p>alguna informacion que se muestra en la barra lateral </p>
<ul>
<li><a href="#">enlaces</a></li>
<li><a href="#">enlaces</a></li>
</ul>
</aside>
<footer>
<p>Aqui va el Pie de pagina, copyright, el menu otravez, etc.</p> </footer>
</body>
</html>

Hemos utilizado estos elementos <header>,


<hgroup>, <footer>, <nav>, <aside>,<section> y <article>. Para marcar y así
formar la estructura casi que completa de nuestra página, ahora es evidente
notar los nuevos nombres, es el momento para estudiar en detalle un poco más
de esas nuevas etiquetas que llamamos estructurales.
1º – <header>: Esta etiqueta hace el mismo trabajo que esta <div id=”header”>,
esta etiqueta <header> la utilizamos para contener información adicional como
logos y ayudas a la navegación, iconos de redes sociales etc. Esta etiqueta
tiene su cierre de esta manera </header>.
2º – <hgroup>: Muchos headers de las páginas web podrán contener múltiples
títulos representados con la etiqueta h1, y de pronto un subtitulo formando con
la etiqueta h2. Bueno esta nueva etiqueta <hgroup> permite colocar un h1, h2 y
h3 dentro del header sin afectar el SEO, permitiendo usar otro h1 en el sitio.
Esta etiqueta tiene su cierre de la siguiente forma, </hgroup>.
<hgroup>
<h1>Mi curso de html5</h1>
<h2>Aprende desde 0</h2>
</hgroup>

3º – <nav>: La etiqueta <nav> está diseñada para colocar la botonera o navegación


principal los normales (Home, quienes somos, portafolio, contáctenos, blog). Puedes
colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul> con sus
respectivos <li>, su cierre es </nav>.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">quienes somos</a></li>
<li><a href="#">portafolio</a></li>
<li><a href="#">contacto</a></li>
</ul>
</nav>

4º – <aside>: Esta etiqueta es creada para contener información no relevante


para el sitio web como da a sospechar su nombre que se traduciría algo así
como “a un lado”. En un blog, obviamente el <aside> es la barra lateral de
información donde se muestra las categorías, blogroll etc. Esta etiqueta puede
contener cualquier cosa desde un reproductor multimedia hasta una galería de
imágenes, el cierre de esta etiqueta es </aside>.
5º – <section>: Esta etiqueta Define un área de contenido única dentro del sitio.
Esta es una de las etiquetas más genéricas de los elementos estructurales ya
que podemos agrupar contenidos relacionados por el tema. Ejemplo: En un
blog, esta etiqueta sería la zona donde están todos los posts, el cierre de esta
etiqueta es </section>.
6º – <article>: Esta etiqueta especifica un contenido independiente y autónomo.
Define zonas únicas de contenido independiente. Ejemplo: En el home de un
blog, cada post sería un <article> y el post y cada uno de sus comentarios
serían varios <article>, el cierre respectivo de esta etiqueta es </article>.
7º – <footer>: Esta etiqueta lo que define es un pie de página con la
información del copyright, autor un menú o lo queramos colocar en el pie de la
web, el cierre de esta etiqueta es </footer>.

NOTA: Algo muy importante: el caso de ver nuevas etiquetas estructurales no


significa que desaparecieron los divs, los podemos seguir utilizando en
cuestiones de contenido interno, porque para el tema de la estructura y
semántica las nuevas etiquetas nos pueden venir my bien, y es bueno que
comencemos a basarnos en ellas.
Bueno en conclusión, utilizando estas nuevas etiquetas podemos estructurar
una web basada en HTML5, se vería la estructura algo así como lo vamos a
ver en el siguiente cuadro, y claro para una mejor apariencia que mas que
css3, pero vamos por partes.

También podría gustarte