Scribd
Cargar
17 vistas10 páginas

HTML5

HTML5 introduce nuevos elementos semánticos como <header>, <footer>, <nav>, <section> y <article> que mejoran la estructura y accesibilidad del contenido web, facilitando su identificación por motores de búsqueda. Estos elementos permiten una mejor organización del contenido, donde <article> define contenido autónomo y <section> agrupa contenido relacionado. La migración de HTML4 a HTML5 es posible sin perder la estructura original del contenido.

Cargado por

Ziiyi 027
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 DOCX, PDF, TXT o lee en línea desde Scribd
17 vistas10 páginas

HTML5

HTML5 introduce nuevos elementos semánticos como <header>, <footer>, <nav>, <section> y <article> que mejoran la estructura y accesibilidad del contenido web, facilitando su identificación por motores de búsqueda. Estos elementos permiten una mejor organización del contenido, donde <article> define contenido autónomo y <section> agrupa contenido relacionado. La migración de HTML4 a HTML5 es posible sin perder la estructura original del contenido.

Cargado por

Ziiyi 027
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 DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 10

HTML5

Nueva Semántica Elementos / Estructura


Con HTML 4, los desarrolladores utilizan sus propios nombres para el
contenido de los selectores de las etiquetas contenedoras <div>
Esto hizo imposible que los motores de búsqueda identificaran todo el
contenido de la página web correctamente. Con los nuevos elementos de
HTML5 como: <header> <footer> <nav> <section> <article>, esta búsqueda
será más fácil.
Según el W3C, una Web Semántica:
"Permite que los datos sean compartidos y reutilizados a través de
aplicaciones, empresas y comunidades."

Tag Description
<article> Defines an article in the document
<aside> Defines content aside from the page content
Defines a part of text that might be formatted in a different
<bdi>
direction from other text
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
Defines self-contained content, like illustrations, diagrams,
<figure>
photos, code listings, etc.
<footer> Defines a footer for the document or a section
<header> Defines a header for the document or a section
<main> Defines the main content of a document
<mark> Defines marked or highlighted text
Defines a command/menu item that the user can invoke from a
<menuitem>
popup menu
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links in the document
<progress> Defines the progress of a task
Defines what to show in browsers that do not support ruby
<rp>
annotations
Defines an explanation/pronunciation of characters (for East
<rt>
Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<section> Defines a section in the document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break

EJEMPLO

1
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Esqueleto</title>
<meta charset="iso8859-1">

<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>

<body>

<header>
<h1>HTML5 ESQUELETO</h1>
</header>

<nav>
<ul>
<li><a href="html5_semantic_elements.asp">HTML5
Semantic</a></li>
<li><a href="html5_form_elements.asp">HTML5 Forms</a></li>
<li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
</ul>
</nav>

<section>

<h1>Famous Cities</h1>

<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in
the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>

<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>

<article>
<h2>Tokyo</h2>

2
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo
Area,
and the most populous metropolitan area in the world.</p>
</article>

</section>

<footer>
<p>&copy; 2014 W3Schools. All rights reserved.</p>
</footer>

</body>
</html>

Nuevos elementos semánticos en HTML5

Muchos sitios web contienen código HTML como:


<div id = "nav"> <div class = "header"> <div id = "footer"> para
indicar la navegación, cabecera y pie de página.

HTML5 ofrece nuevos elementos semánticos para definir las diferentes


partes de una página web:

 <article>
 <aside>
 <details>
 <figcaption>
 <figure>
 <footer>
 <header>
 <main>
 <mark>
 <nav>
 <section>
 <summary>
 <time>

3
HTML5 <section>

El elemento <section> define una sección de un documento.


De acuerdo con la documentación del W3C HTML5: "Una sección es
una agrupación temática de los contenidos, por lo general con un título."
La página principal de un sitio web podría ser dividida en secciones para
la introducción, el contenido y la información de contacto.

HTML5 <article>

El elemento <article> especifica el contenido independiente, autónomo.


Un artículo debe tener sentido por sí mismo, y debería ser posible leerlo
de forma independiente del resto del sitio web.
Los ejemplos de donde se puede usar un elemento <article>:
 Mensaje Foro
 Post de blog
 Artículo de periódico

Elementos semánticos de la jerarquización

En el estándar HTML5, el elemento <article> define un bloque


completo, autónomo de los elementos relacionados.
El elemento <section> se define como un bloque de elementos
relacionados.
¿Podemos usar las definiciones para decidir cómo anidar
elementos? No, no puede!
En Internet, usted encontrará las páginas HTML con elementos
<sección> que contienen elementos <artículo> y elementos
<artículo> que contienen elementos <Secciones> .

Ejemplo Periódico: Los artículos deportivos en la sección de


deportes, tiene una sección técnica en cada artículo.

HTML5 <header>

El elemento <header> especifica una cabecera de un documento o


sección.
<header> debe utilizarse como un contenedor para el contenido de
la cabecera.
Se pueden tener varios elementos <header> en un solo documento.

HTML5 <footer>

El elemento <footer> especifica un pie de página de un documento o


sección.
<footer> debe contener información acerca de su elemento
contenedor.

4
Un pie de página contiene normalmente el autor de la información del
documento, los derechos de autor, vincula a las condiciones de uso,
información de contacto, etc.
Se pueden tener varios <footer> en un solo documento.

HTML5 <nav>

El <nav> define un conjunto de enlaces de navegación.


El elemento <nav> está destinado a grandes bloques de enlaces de
navegación. Sin embargo, no todos los enlaces en un documento
deben estar dentro de un elemento <nav>.

HTML5 <aside>

El elemento <aside> define un cierto contenido aparte del contenido


que se coloca a un lado (como una barra lateral).
El contenido debe estar relacionado con el contenido de los
alrededores.

EJEMPLO:

<!DOCTYPE html>
<html lang="es">
<head>
<title>HTML5 Esqueleto SIN</title>
<meta charset="iso8859-1">

</head>

<body>

<div style="font:0.8em/1.2em Arial, Helvetica, Sans-Serif;">


<aside style="font-size:larger;font-
style:italic;color:green;float:right;width:35%;padding-left:5px;">

5
70% de los arrecifes del mundo será destruido en los próximos 40
años.
</aside>
<p>El calentamiento global está afectando a los arrecifes de coral en
todo el mundo. Al ritmo actual,
el 70% de los arrecifes del mundo será destruido en los próximos 40
años.</p>
<p>Como desesperada como esto puede sonar, hay cosas que
podemos hacer para ayudar.
Mediante el desarrollo de hábitos más ecológicos, que todos
podemos
hacer nuestra parte para reducir el calentamiento global.
Por ejemplo, aquí están 5 maneras de reducir los gases de efecto
invernadero .
Y aquí hay algunos pasos simples que usted puede tomar para vivir
de manera sostenible .</p>
</div>

</body>
</html>

HTML5 Elementos <figure> y < figcaption >

En los libros y periódicos, es común tener subtítulos con imágenes.


El propósito de un título es añadir una explicación visual de una
imagen.
Con HTML5, imágenes y subtítulos se pueden agrupar en el
elemento <figure> .

<!DOCTYPE html>
<html lang="en">
<head>
<title>Probando figure</title>
<meta charset="utf-8">
<body>
<figure>
<img src="pulpito.jpg" alt="El Pulpito Rock" width="304"
height="228">
<figcaption>Fig1. - El Pulpito Pock, Noruega.</figcaption>
</figure>

</body>
</html>

La migración desde HTML4 a HTML5

6
Se puede convertir una página HTML 4 existente en una página
HTML5, sin destruir nada del contenido o estructura original.

HTML4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01


Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
body {font-family:Verdana,sans-serif;font-size:0.8em;}
div#header,div#footer,div#content,div#post
{border:1px solid grey;margin:5px;margin-
bottom:15px;padding:8px;background-color:white;}
div#header,div#footer {color:white;background-color:#444;margin-
bottom:5px;}
div#content {background-color:#ddd;}
div#menu ul {margin:0;padding:0;}
div#menu ul li {display:inline; margin:5px;}
</style>
</head>
<body>

<div id="header">
<h1>Monday Times</h1>
</div>

<div id="menu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>

7
<div id="content">
<h2>News Section</h2>

<div id="post">
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum ipsum
lurum hurum turum.</p>
</div>

<div id="post">
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum ipsum
lurum hurum turum.</p>
</div>

</div>

<div id="footer">
<p>&amp;copy; 2014 Monday Times. All rights reserved.</p>
</div>

</body>
</html>

HTML5

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso8859-1">
<title>HTML4 al HTML5</title>
<style>
header,footer,section,article {
border:1px solid grey;margin:5px;margin-
bottom:15px;padding:8px;background-color:white;
}
header,footer {
color:white;background-color:#444;margin-bottom:5px;
}

8
section {
background-color:#ddd;
}
nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline; margin:5px;
}
</style>
</head>
<body>

<header>
<h1>Monday Times</h1>
</header>

<nav>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</nav>

<section>
<h2>News Section</h2>

<article>
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum ipsum
lurum hurum turum.</p>
</article>

<article>
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum ipsum
lurum hurum turum.</p>
</article>

</section>

9
<footer>
<p>&amp;copy; 2014 Monday Times. All rights reserved.</p>
</footer>

</body>
</html>

La diferencia entre <article> <section> y <div>

Hay mucha controversia en el estándar HTML5, entre <article>


<section> y <div>.
En el estándar HTML5, el elemento <section> se define como un
bloque de elementos relacionados.
El elemento <article> se define como un bloque completo, autónomo
de los elementos relacionados.
El elemento <div> se define como un bloque de elementos
agrupados.
También podemos definirlos de La siguiente forma:
 Usaremos article para representar cualquier información que
tenga sentido propio por si misma y sea propensa a la
reutilización, por ejemplo, mediante sindicación. Un ejemplo: un
post de un blog, el resumen de ese post en una portada, un hilo
en un foro, un comentario…
 Usaremos section para agrupar contenido relacionado. Puede
servirnos para enmarcar un conjunto de artículos, o incluso
nuevas y diferentes secciones, o artículos que se dividan en
secciones… la variedad es infinita.
 div no tiene ninguna intención semántica, es un simple
“agrupador” de contenido que nos ayudará a pintarlo con CSS.

10

También podría gustarte