¿Que es HTML?

HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.

¿Que es HTML 5?

HTML5 es un lenguaje markup (de hecho, las siglas de HTML significan Hyper Text Markup Language) usado para estructurar y presentar el contenido para la web. Es uno de los aspectos fundamentales para el funcionamiento de los sitios, pero no es el primero. Es de hecho la quinta revisión del estándar que fue creado en 1990. A fines del año pasado, la W3C la recomendó para transformarse en el estándar a ser usado en el desarrollo de proyectos venideros. Por así decirlo, qué es HTML5 está relacionado también con la entrada en decadencia del viejo estándar HTML 4, que se combinaba con otros lenguajes para producir los sitios que podemos ver hoy en día. Con HTML5, tenemos otras posibilidades para explotar usando menos recursos. Con HTML5, también entra en desuso el formato XHTML, dado que ya no sería necesaria su implementación.

Novedades de HTML 5

Hoy en día se abusa bastante del elemento div, que nos permite estructurar una web en bloques. En HTML5 hay varios elementos que sirven para estructurar mejor una página web, estableciendo qué es cada sección, y reemplazando en muchas ocasiones a div. Con este extra de semántica, será mucho más coherente y fácil de entender por otras personas. Y lo que es más importante, será trivial de entender para una máquina, dándole más importancia a unas secciones y pudiendo jugar con esos datos automáticamente. Concretamente, la tarea de un buscador será mucho más fácil, pero cualquier aplicación que “lea” páginas web se beneficiará. Estos son los elementos:

• section representa una sección “general” dentro de un documento o aplicación, como un capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página.
• article representa un contenido independiente en un documento, el caso más claro son las entradas de un blog o las noticias de un periódico online. Así, dentro de la portada podremos tener varios artículos demarcados semánticamente, por lo que una herramienta puede extraerlos fácilmente.
• aside representa un contenido que está muy poco relacionado con el resto de la página, como una barra lateral. Esencial para delimitar el contenido “importante” del contenido “de apoyo”, haciendo más caso al primero que al segundo.
• header representa la cabecera de una sección, y es de suponer que se le dé más importancia que al resto, sobre todo si la sección es un artículo.
• footer representa el pié de una sección, con información acerca de la página/sección que poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.
• nav representa una sección dedicada a la navegación entre el sitio, como la típica barra superior de los periódicos.

 HTML5. Mejores formularios

El elemento input ha sido ampliado y ahora permite todos estos tipos de datos:

• datetime, datetime-local, date, month, week, time, para que indicar una fecha/hora.
• number para que el usuario indique un número.
• range para indicar un rango entre dos números.
• email para indicar un correo electrónico.
• url para indicar una dirección web.
• search para indicar una búsqueda.
• color para indicar un color.

HTML5. Más elementos

• dialog se plantea para escribir conversaciones, por ejemplo para transcripciones de chat.
• figure se plantea para asociar un contenido multimedia (una foto, un vídeo, etc) a un título o leyenda.
• mark representa un texto resaltado, por ejemplo para resaltar una búsqueda.
• meter representa una medida, como el número de KB. Tiene más sentido si lo unimos con…
• progress representa el estado de una tarea, y se puede usar por ejemplo al subir un documento o al realizar varias tareas pesadas. Esto permitirá barras de tareas personalizadas y potentes.
• time representa una fecha o una hora.
• command representa un comando que el usuario puede ejecutar en su navegador.
• output representa una salida de un programa, probablemente ejecutado directamente en el navegador, como una calculadora.
• datagrid representa datos de manera interactiva y permite trabajar dinámicamente con información y cambiar la página respecto a esa información. Será útil sobre todo si se quiere trabajar con aplicaciones que necesiten de bastantes datos a la vez en el lado del cliente.

Comparativa de HTML 4 y HTML 5

Ventajas de HTML 5

Entre las principales ventajas que presenta HTML5, tenemos las siguientes:

• Nueva estructura de etiquetas mejorada, esta nueva estructura permite definir por separado el encabezado, la barra de navegación, las secciones de la página web, los textos del sitio, los diálogos y el pié de página de los sitios web. Esta nueva estructura, incluso permite desarrollar blogs con gran facilidad.

• Inclusión de las etiquetas video y audio, dicha etiqueta soporta de manera eficiente y estable cualquier opción de ejecución de video y audio, sin generar errores o incluir código flash en nuestro sitio web.

• Capacidad de realizar ejecuciones offline de las páginas web creadas con código HTML5, lo que permite realizar aplicaciones de escritorio con este código tan versátil.

• Incluye una nueva etiqueta de dibujo sobre la página web, llamada canvas, que vuelve el proceso de crear dibujos en el sitio web tan fácil como dibujar con aplicaciones como Paint.

• Eliminación total de las etiquetas obsoletas, que tienen los estándares anteriores de HTML.

• Ofrece la posibilidad de obtener un código más limpio y fácil de depurar, que los códigos de los estándares anteriores.

 

BENEFICOS 

1. Incorporación de video. ...
2. Experiencia de usuario. ...
3. Un código más limpio. ...
4. Compatibilidad múltiple entre navegadores. ...
5. Optimización para móviles. ...
6. Una mejor posibilidad de ranking.

 

 

Estructura Semántica de HTML

Estructura de HTML5 y para qué se utiliza la semántica del código. HTML5 nos ha traído varias mejoras en lo que respecta al lenguaje HTML. ... Aunque recordemos que HTML5 es mucho más que el propio lenguaje HTML, puesto que también incluye mejoras en el CSS y en las API de Javascript.2

• Header

 El elemento de HTML Header (<header>) representa un grupo de ayudas introductorias o de navegación.

• Footer

 El Elemento HTML Footer (<footer>) representa un pie de página para el contenido de sección más cercano o el elemento  raíz de sección.

• Nav

      Crea un menú de navegación.

• Section

      El elemento de HTML section epresenta una sección genérica de un documento.

• Article

      El Elemento article de HTMLepresenta una composición auto-contenida en un documento,       página, una aplicación o en el sitio, que se destina a distribuir de forma independiente o reutilizable,    por ejemplo, en la sindicación.

• Aside   

      El Elemento HTML Aside representa una sección de una página que consiste en contenido que está tangencialmente relacionado con el contenido que le rodea, que podría ser considerado independiente de ese contenido.

Elementos de HTML 5

Los elementos, en HTML (lenguaje de marcas de hipertexto - Hypertext Markup Language) usualmente son elementos "en bloque" o elementos "en línea". Un elemento en bloque ocupa todo el espacio de su elemento padre (contenedor), creando así un "bloque". Este artículo ayuda a explicar lo que esto significa.

La siguiente es una lista completa de todos los elementos en bloque de HTML (aunque "en bloque" no se define técnicamente para los elementos que son nuevos en HTML5).

<address>

Información de contacto.

<article> HTML5

Contenido de Articulo.

<aside> HTML5

Contenido adicional.

<audio> HTML5

Reproductor de audio

<blockquote>

Bloque de "cita".

<canvas> HTML5

Dibujo canvas.

<dd>

Descripción de definición.

<div>

División de documento.

<dl>

Lista de definición.

<fieldset>

Etiqueta de conjunto de campos.

<figcaption> HTML5

Leyenda de figura.

<figure> HTML5

Grupos contenido multimedia con una leyenda (ver <figcaption>).

<footer> HTML5

Sección o pie de página.

<form>

Formulario de entrada.

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

Niveles de cabecera 1-6.

<header> HTML5

Sección o cabecera de página.

<hgroup> HTML5

Grupos información de encabezado.

<hr>

Regla Horizontal (línea divisoria).

<li>

Elemento de lista.

<main>

Engloba el único contenido central del documento.

<nav>

Contiene enlaces de navegación.

<noscript>

Contenido para ser usado si los scripts no son soportados o permitidos.

<ol>

Lista ordenada.

<output> HTML5

Formulario de salida.

<p>

Párrafo.

<pre>

Texto preformateado.

<section> HTML5

Sección de una página web.

<table>

Tabla.

<tfoot>

Pie de tabla.

<ul>

Lista no ordenada.

<video> HTML5

Reproductor de vídeo.