Introducción a HTML5


HTML5, algunas de cuyas características inicialmente comenzaron a llegar a Gecko 1.8.1, es la versión más reciente de HTML estándar. Ofrece nuevas características que proporcionan no solo una amplia compatibilidad de medios, sino también una compatibilidad mejorada para la creación de aplicaciones web que pueden interactuar de una manera más sencilla y efectiva con el usuario, sus datos locales y los servidores.

Al estar HTML5 aún en la fase de diseño, son inevitables los cambios en las especificaciones. Debido a esto, algunos navegadores no admiten aún determinadas características. Sin embargo, Gecko (y por extensión, Firefox) tiene una compatibilidad inicial muy buena para HTML5 y se continúa trabajando para que sea compatible con cada vez más características. Puedes encontrar una lista de las características de HTML5 que admite Gecko en la página principal de HTML5.

El tipo de documento para HTML5 es muy sencillo. Para indicar que el contenido de tu HTML usa HTML5, simplemente utiliza: 


			                 <!DOCTYPE  html>

Este tipo de documento tan sencillo hará que incluso aquellos navegadores que no admiten actualmente HTML5 entren en modo estándar, lo que significa que interpretarán conforme a HTML5 las partes establecidas hace tiempo, al ignorar las nuevas características de HTML5 que no admiten.

Contiene un conjunto más amplio de tecnologías que permite a los sitios Web y a las aplicaciones ser más diversas y de gran alcance. A este conjunto se le llama HTML5 y amigos, a menudo reducido a HTML5 .

Diseñado para ser utilizable por todos los desarrolladores de Open Web, esta página referencía numerosos recursos sobre las tecnologías de HTML5, clasificados en varios grupos según su función.

  • Semántica: Permite describir con mayor precisión cual es su contenido.
  • Conectividad: Permite comunicarse con el servidor de formas nuevas e innovadoras.
    • Sin conexión y almacenamiento: Permite a las páginas web almacenar datos localmente en el lado del cliente y operar sin conexión de manera más eficiente.
  • Multimedia: Nos otorga un excelente soporte para utilizar contenido multimedia como lo son audio y video nativamente.
  • Gráficos y efectos 2D/3D: Proporciona una amplia gama de nuevas características que se ocupan de los gráficos en la web como lo son canvas 2D, WebGL, SVG, etc.
  • Rendimiento e Integración: Proporciona una mayor optimización de la velocidad y un mejor uso del hardware.
  • Acceso al dispositivo: Proporciona APIs para el uso de varios compomentes internos de entrada y salida de nuestro dispositivo.
  • CSS3: Nos ofrece una nueva gran variedad de opciones para hacer diseños más sofisticados.

Estructura basica de un documento de HTML5


Todos tenemos una estructura basica al realizar un sitio web y en HTML5 no hay excepción, lo que es muy facil de hacer ya que HTML5 tiende a ser una estructura muy semantica y es lo mejor de todo, sus etiquetas son muy básicas por eso vamos a ver como es una Estructura basica de un documento de HTML5. Este lenguaje tiende a hacerse mas simple y humano al escribir el código.

Empecemos con el DOCTYPE, es muy sencillo de escribir y ha sido recortado, después la etiqueta HTML la cual tiene el atributo LANG para el idioma del sitio. 


			                 <!DOCTYPE  html>

Muy sencillo para empezar ¿no?, ahora toca el turno del titulo, este sigue siendo el mismo, con diferencia de la etiqueta META, donde le decimos al navegador que tipo de codificado es el documento html, de preferencia usemos el UTF-8 que acepta nuestros acentos y ñ con mas compatibilidad.

En realidad es algo demasiado corto y que no quita mucho tiempo, todo esto sigue estando en la etiqueta HEAD que no ha cambiado para nada, es algo muy parecido a XHTML, la cuestión es resumir el código. 


			                <title>Titulo de la web</title>
 							<meta> charset="utf-8" />

Pasemos a las etiquetas link, son las que enlazan nuestros estilos CSS, los Favicones y los Feeds. Estas son muy cortas con excepción de el feed que sigue casi igual, solo que ahora usaremos algo que ya existia, el atributo REL que usamos en los links para cuestiones de SEO.

REL es para decir, que estamos enlazando, ya que el atributo TYPE no se utiliza a menos que usemos para enlazar el FEED. 



			                <link rel="stylesheet" href="estilos.css" />
 
							<link rel="shortcut icon" href="/favicon.ico" />
							 
							<link rel="alternate" title="Pozolería RSS" type="application/rss+xml" href="/feed.rss" />

Ya terminamos con la parte no visible de la pagina web, es el turno del cuerpo o BODY, esta etiqueta sigue siendo útil para lo mismo, pero a continuación empieza algo interesante que son las etiquetas de la estructura de el sitio visual. La etiqueta HEADER es la cabecera donde va el nombre del sitio, el logotipo y descripción de la pagina web, ejemplo.

Recomiendo que solo se use un H1 en una cabecera por cuestiones de SEO, pero es posible poner mas de un H1 y HEADER. 



			                	<body>
								<header>
								     <h1>Mi sitio web</h1>
								     <p>Mi sitio web creado en html5</p>
								</header>

Como pueden ver, la etiqueta HEADER es muy equivalente a crear un DIV con ID=”header”, pero ahora tenemos una etiqueta especial para ello.

Pasamos con el contenido o SECTION usando H2 de titulo y el contenido en etiquetas P dentro de una etiqueta llamada ARTICLE para articulos o post, esto por cuestiones de SEO que es muy recomendable tambien, ejemplo. 



			                	<section>
							    <article>
							        <h2>Titilo de contenido<h2>
							        <p> Contenido (ademas de imagenes, citas, videos etc.) </p>
							    </article>
							    </section>

SECTION es el equivalente a un DIV con ID=”contenido” y ARTICLE a un DIV con ID=”post” o “articulo”

Otra etiqueta interesante es la etiqueta ASIDE, lo que viene siendo nuestro SIDEBAR o barra lateral y es muy facil de implementar con H3 de titulo y P de contenido dentro de ella. 



			                	<aside>
								         <h3>Titulo de contenido</h3>
								         <p>contenido</p>
								</aside>

ASIDE es nuestro equivalente a un DIV con ID=”sidebar” o “barra”

Y finalizando con el pie de la pagina con la etiqueta muy obvia FOOTER , un ejemplo. 



			                	<footer> </span>
									<p style="padding-left: 30px;">
										<span style="color: #333399;"> Creado por mi el 2011</span>
									</p>
									<span style="color: #333399;">
								</footer>

FOOTER es nuestro equivalente a un DIV con ID=”footer” o “pie”

Contenidos en HTML5


En este video aprenderá a utilizar las etiquetas SECTION, FOOTER, ASIDE, ARTICLE Y TIPOGRAFIA WEB.

  • Cuestionario
  • 1. La etiqueta ha de estar entre las etiquetas :
  • 2. La declaración permite que el navegador sepa que se trata de un documento Html 5 y por lo tanto aplicara la sintaxis y la gramática correspondiente al documento.
  • 3. ¿Es obligatorio especificar el juego de caracteres "charset" en HTML5?
  • 4. Esta etiqueta mantiene el aspecto visual, es decir muestra el texto tal y como se ha escrito, respetando todos los espacios en blanco y todas las nuevas lineas.
  • 5. ¿Qué tecnologias agrupa HTML5?

© Copyright 2017