Scribd
Cargar
35 vistas

Introducción A HTML 5

Este documento introduce las diferentes versiones de HTML, incluyendo las diferencias entre HTML 4.01 y HTML 5. También describe nuevas etiquetas semánticas agregadas en HTML 5 como header, nav, article y section.

Cargado por

Alfredo MV
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
35 vistas

Introducción A HTML 5

Este documento introduce las diferentes versiones de HTML, incluyendo las diferencias entre HTML 4.01 y HTML 5. También describe nuevas etiquetas semánticas agregadas en HTML 5 como header, nav, article y section.

Cargado por

Alfredo MV
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/ 16

Introducción a HTML 5

1
Introducción y uso de HTML 5
Versiones de HTML
• HTML 1.0 y 2.0. Surgió con la masificación de Internet. Un contenido
estático, bastante básico pero con hipertextos. Tenía una orientación a
mostrar contenidos simples.

• HTML 3.0 y 3.2. Propuesto por el recién formado W3C. Incluyó facilidades
para crear tablas, flujo del texto alrededor de figuras y muestra de fórmulas
complejas. Se abandonó por la falta de apoyo de los fabricantes de
navegadores web. La versión 3.2 abandonó muchas características de la 3.0
y adoptó otras de los navegadores Netscape y Mosaic. Se incluye MathML
para representar las fórmulas matemáticas. Durante este tiempo se vivió la
"guerra de los navegadores", entre Netscape e Internet Explorer, lo que
produjo muchas diferencias entre ambos.

2
Introducción y uso de HTML 5
Versiones de HTML
• HTML 4.0. Fin de la "guerra de los navegadores", con el plan de la W3C de
crear "un solo HTML". Planteó la separación entre contenido y estilos
gráficos, a través de las hojas CSS. Incluyó muchos elementos específicos
de navegadores concretos a la vez que comenzó a limpiar el lenguaje,
declarando algunas etiquetas como “desaconsejadas”. Estandarizó los
marcos (frame), que luego quedaron en desuso.

• HTML 4.01. Incorporó algunos cambios de detalle a la versión 4.0. Fue una
versión suficientemente aceptada como para no ser modificada
significativamente en mucho tiempo.

3
Introducción y uso de HTML 5
Versiones de HTML
• XHTML 1.0. Unió el conceptos de XML, que estaba en pleno proceso de
asimilación y HTML, con el objetivo de hacerlo más riguroso. La recepción
de XHTML fue variada, pues la rigurosidad fue percibida también como falta
de flexibilidad.

• HTML 5. Extiende a HTML 4.01, agregando nuevas características con una


orientación interactiva (capacidades gráficas, video, transformando la visión
HTML de "páginas" por la de "aplicación". Descarta aquellos que están en
desuso. Está disponible paulatinamente desde 2012, pues los navegadores
la van incorporando poco a poco.

4
Introducción y uso de HTML 5
notas sobre XHTML
XHTML (eXtensible Hyper Text Markup Language) es, en términos simples,
HTML cumpliendo las especificaciones de XML, que son más estrictas. Por
ejemplo:
• Se deben cerrar todas las etiquetas:
<br/> <br>
<img src="logo.gif" /> <img src="logo.gif">
• Los atributos de las etiquetas deben tener comillas, simples o dobles:
<input type="text" /> <input type=text>
• Se debe utilizar minúsculas en etiquetas y atributos:
<ol type="A"></ol> <OL TYPE="A"></OL>
• Todos los atributos deben tener un valor, no usando forma minimizada:
<input disabled="disabled" /> <input disabled>
Introducción y uso de HTML 5
notas sobre XHTML
Además de ser más estricto por la aplicación de XML, XHTML tiene otras
características:
• Su objetivo es lograr páginas web donde la información y la forma de
presentarla estén claramente separadas.
• XHTML es por tanto, un lenguaje semántico en el que no se define el
aspecto de las cosas sino lo que significan.
• Se utiliza únicamente para transmitir los contenidos de un documento,
dejando el aspecto y diseño para las hojas de estilo CSS y la interactividad y
funcionalidad a JavaScript.
Estructura de la página
diferencias entre HTML 4.01 y 5
En HTML 4.01, se utiliza una nomenclatura en la página, que es modificada en
HTML 5:
• Declaración del doctype
• Declaración del juego de caracteres
• Hoja de estilos
• JavaScript

A continuación, se presentan las diferencias con ejemplos.


Estructura de la página
doctype
En HTML 4.01, el doctype que es especifica en el encabezado es uno de los
siguientes, dependiendo si es "strict" o "transitional":
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

En HTML5 se simplifica:

No especifica un "5". Se
<!DOCTYPE html> simplifica bastante.

Según la W3C, todas las futuras versiones de HTML (6, 7, ...) utilizarán este
doctype, no siendo necesario actualizarlo.
Estructura de la página
juego de caracteres
El juego de caracteres de la página, en HTML 4.01 "strict" o "transitional", se
especifica así, por ejemplo con utf-8 (recomendable):

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

En HTML5 se simplifica, utilizando un atributo específico más compacto:

<meta charset="utf-8">

Esto facilita la declaración.


Estructura de la página
declaración de hoja de estilos
En HTML 4.01, la hoja de estilos se declara así:

<link type="text/css" rel="stylesheet" href="styles.css">

En HTML5 no es necesario utilizar el type, ya que CSS se considera el


estándar y default:

<link rel="stylesheet" href="styles.css">


Estructura de la página
declaración de JavaScript
En HTML 4.01, la utilización de JavaScript se declara así:
<script type="text/javascript" src="lib.js"></script>

<script type="text/javascript">
var name = "basic";
</script>

En HTML5 no es necesario utilizar el type, ya que JavaScript se considera el


estándar y default:

<script src="lib.js"></script>

<script>
var name = "basic";
</script>
Etiquetas y marcas
nuevas etiquetas
HTML5 agregan nuevas etiquetas que se agrupan en los siguientes tipos:
• canvas: para dibujar gráficos con JavaScript.
• media: audio, video, contenido interactivo.
• formulario: nuevos tipos de campos de entrada, autocompletado.
• estructurales: definición de elementos como header, section, footer, article.

12
Elementos estructurales

En HTML 4, se utilizan etiquetas <div> para organizar las secciones de la


página. En HTML5, se agregan nuevas etiquetas para la organización
estructural. Ejemplo:
HTML 4 HTML 5

<div id="header"> <header>


<div id="main"> <sec9on id="main">
<div id="seccion1"> <ar9cle id="seccion1">
<div <sec9on
id="menu"> id="menu">
<div id="seccion2"> <ar9cle id="seccion2">

<div id="footer"> <footer>


Elementos semánticos

• La etiqueta <header> se usa para marcar un grupo de elementos de


introducción o de navegación dentro de una sección o documento.

• La etiqueta <nav> se usa para marcar una sección del documento cuya
función es la navegación por la página web.

• La etiqueta <article> se usa para marcar contenido independiente que


tendría sentido fuera del contexto de la página actual y que podría
sindicarse, por ejemplo: una noticia, un artículo en un blog o un comentario.

• La etiqueta <section> se usa para marcar una sección genérica de un


documento o aplicación. Una sección, en este contexto, es una agrupación
temática del contenido, típicamente con un encabezado.

14
Elementos semánticos
Continuación
• La etiqueta <aside> se usa para marcar un trozo de contenido que está
relacionado con el contenido de la página web, pero que no es parte del
mismo. Ejemplos de uso serían: glosario de términos, grupos de enlaces a
páginas relacionadas, barras laterales, ...

• La etiqueta <footer> se usa para marcar el pie de una sección o documento


y que contiene información sobre el mismo como el autor, licencia, términos
de uso, ...

15
Elementos desaprobados
Etiquetas eliminadas
Dado que las hojas de estilo están asimiladas y son un estándar, se eliminan
las etiquetas de formato de las versiones de HTML antiguas: <basefont>,
<center>, <font>, <strike> y <tt> .

También se eliminan las etiquetas de uso de frames y applets.

Ejemplo de reemplazo:

<center> <div style="text-align: center">


<h3>Título</h3> <h3>Título</h3>
<p>Contenido</p> <p>Contenido</p>
</center> </div>

También podría gustarte