Diseño Web

Semántica | HTML5
Actividad 2:Elementos de HTML5

SEMÁNTICA
Una de las novedades que hemos mencionado anteriormente son las etiquetas que se
han introducido en HTML5. Existen más de 30 nuevas etiquetas semánticas que pueden
ser utilizadas en nuestras páginas estáticas. Estas nuevas etiquetas se podrían clasificar
en dos grupos:
Etiquetas que extienden a las actuales, como <video> , <audio> o <canvas> , y que
además añaden nuevas funcionalidades a los documentos HTML, que podemos
controlar desde JavaScript y
etiquetas que componen la web semántica, es decir, que no proponen nuevas

funcionalidades pero sirven para estructurar sitios web, y añadir un significado
concreto, más allá de las etiquetas generales como <div> .
En este capítulo, veremos como transformar nuestra estructura actual de marcado

basada en <div> , a una estructura que utiliza las nuevas etiquetas estructurales como
<nav> , <header> , <footer> , <aside> , o <article> .
2.1 CABECERA DEL DOCUMENTO

Además de las nuevas etiquetas introducidas por HTML5 (que veremos más adelante), el
nuevo estándar propone pequeñas mejoras que podemos aplicar en la definición de
nuestros documentos, en concreto en la cabecera de los mismos.
2.1.1 DOCTYPE
El estándar XHTML deriva de XML, por lo que comparte con él muchas de sus normas y
sintaxis. Uno de los conceptos fundamentales de XML es la utilización del DTD o
Document Type Definition ("Definición del Tipo de Documento"). El estándar XHTML
define el DTD que deben seguir las páginas y documentos XHTML. En este documento se
definen las etiquetas que se pueden utilizar, los atributos de cada etiqueta y el tipo de
valores que puede tener cada atributo.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ésta es una de las 15 declaraciones posibles declaradas en los estándares HTML4 y

XHTML. En HTML5 se reduce la definición del tipo de documento a una única posibilidad,
por lo que no tenemos que preocuparnos de elegir el tipo de documento correcto:
Semántica | HTML5
<!DOCTYPE html>
2.1.2 ELEMENTO RAÍZ HTML

En todo documento HTML, su elemento raíz o nodo superior siempre es la etiqueta
<html> . Hasta ahora, este elemento raíz se definía de la siguiente manera:
<html xmlns=http://www.w3.org/1999/xhtml
lang="en"
xml:lang="en">
No hay ningún problema en mantener esta sintaxis. Si se desea, se puede conservar, ya

que es válido en HTML5. Sin embargo, algunas de sus partes ya no son necesarias, por
lo que podemos eliminarlas.
El primer elemento del que podemos prescindir es el atributo xmlns . Se trata de una
herencia de XHTML 1.0, que dice que los elementos de esta página están en el espacio
de nombres XHTML, http://www.w3.org/1999/xhtml . Sin embargo, los elementos de
HTML5 están siempre en este espacio de nombres, por lo que ya no es necesario
declararlo explícitamente. Eliminar el atributo xmlns nos deja con este elemento de la
siguiente manera:
<html lang="es" xml:lang="en">
En este caso ocurre lo mismo con el atributo xml:lang , es una herencia de XHTML que
podemos eliminar, quedando finalmente la etiqueta de la siguiente manera:
<html lang="en">
2.1.3 ELEMENTO HEAD

El primer hijo del elemento raíz es generalmente el elemento head . El elemento head
contiene los metadatos que aportan información extra sobre la página, como su título,
descripción, autor, etc. Además, puede incluir referencias externas a contenidos
necesarios para que el documento se muestre y comporte de manera correcta (como
hojas de estilos o scripts). Este elemento ha sufrido pequeñas variaciones, pero que
debemos tener en cuenta:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Weblog</title>
<link rel="stylesheet" type="text/css" href="style-original.css" />
<link rel="alternate" type="application/atom+xml"
title="My Weblog feed"
href="/feed/" />
<link rel="search" type="application/opensearchdescription+xml"
Semántica | HTML5
title="My Weblog search"

href="opensearch.xml" />
<link rel="shortcut icon" href="/favicon.ico" />
</head>
2.1.3.1 CODIFICACIÓN DEL CONTENIDO

Cuando se piensa en "texto", probablemente nos venga a la cabeza una definición de
"caracteres y símbolos que veo en la pantalla de mi ordenador". Pero realmente se
tratan de bits y bytes. Cada cadena de caracteres que se muestra en la pantalla, se
almacena con una codificación de caracteres en particular. Hay cientos de codificaciones
de caracteres diferentes, algunos optimizado para ciertos idiomas como el ruso, el chino
o inglés, y otros que se pueden utilizar para múltiples idiomas. En términos generales, la
codificación de caracteres proporciona una correspondencia entre lo que se muestra en
la pantalla y lo que un equipo realmente almacena en la memoria y en el disco.
Se puede pensar en la codificación de caracteres como una especie de clave de

descifrado del texto. Cuando accedemos a una secuencia de bytes, y decidimos que es
"texto", lo que necesitamos saber es qué codificación de caracteres se utiliza para que
pueda decodificar los bytes en caracteres y mostrarlos (o transformarlos) de manera
correcta.
Lo ideal es establecer esta codificación en el servidor, indicando el tipo en las cabeceras

de respuesta:
Content-Type: text/html; charset="utf-8"
Por desgracia, no siempre podemos tener el control sobre la configuración de un servidor

HTTP. Por ejemplo, en la plataforma Blogger, el contenido es proporcionado por
personas, pero los servidores son administrados por Google, por lo que estamos
supeditados a su configuración. Aún así, HTML 4 proporciona una manera de especificar
la codificación de caracteres en el documento HTML:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
El encabezado HTTP es el método principal, y anula la etiqueta <meta> si está presente.

Pero no todo el mundo puede establecer encabezados HTTP, por lo que la etiqueta
<meta> todavía tiene sentido. En el caso de HTML5, es aún más sencillo definir esta
etiqueta meta:
<meta charset="utf-8">
Debemos acostumbrarnos a especificar la codificación de nuestros documentos, aunque

no vayamos a utilizar caracteres especiales o nuestro documentos no se presente en
otros idiomas. Si no lo hacemos, podemos exponernos a problemas de seguridad.
Semántica | HTML5
2.1.3.2 LINKS
Dentro del elemento head , las etiquetas <link> son una manera de acceder o declarar
contenido externo al documento actual, que puede cumplir distintos objetivos:
Es una hoja de estilo contiene las reglas CSS que su navegador debe aplicar al
presente documento.
Es un feed que contiene el mismo contenido que esta página, pero en un formato
estándar (RSS).
Es una traducción de esta página en otro idioma.
Es el mismo contenido que esta página, pero en formato PDF.
Es el próximo capítulo de un libro en línea de la cual esta página es también una

parte.
En HTML5, se separan estas relaciones de enlace en dos categorías:
Enlaces a recursos externos que se van a utilizar para mejorar el documento actual,
y enlaces de hipervínculos que son enlaces a otros documentos.
El tipo de relación más utilizado (literalmente) es el siguiente:
<link rel="stylesheet" href="style-original.css" type="text/css" />
Esta relación es utilizada para indicar el archivo donde se almacenan las reglas CSS que
se desean aplicar al documento. Una pequeña optimización que se puede hacer en
HTML5 es eliminar el atributo type . Sólo hay un lenguaje de estilo para la web, CSS, así
que ese es el valor predeterminado para el atributo type :
<link rel="stylesheet" href="style-original.css" />
2.2 NUEVAS ETIQUETAS SEMÁNTICAS

En 2004, Ian Hickson, el autor de la especificación de HTML5, analizó 1.000.000.000 de
páginas web utilizando el motor de Google, intentando identificar la manera en la que la
web real estaba construida. Uno de los resultados de este análisis, fue la publicación de
una lista con los nombres de clases más utilizados. Este estudio revela que los
desarrolladores utilizan clases o IDs comunes para estructurar los documentos. Esto
llevó a considerar que quizás fuese una buena idea crear etiquetas concretas para
reflejar estas estructuras.
Este tipo de etiquetas que componen la web semántica nos sirven para que cualquier
mecanismo automático (un navegador, un motor de búsqueda, un lector de feeds...) que
lea un sitio web sepa con exactitud qué partes de su contenido corresponden a cada una
de las partes típicas de un sitio. Observando esas etiquetas semánticas estructurales,
Semántica | HTML5
cualquier sistema podrá procesar la página y saber cómo está estructurada. Veamos
algunas de estas etiquetas que introduce HTML5 en este sentido.
<section></section> : se utiliza para representar 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 creando jerarquías del contenido, algo muy favorable para el buen
posicionamiento web.
<article></article> : representa un componente de una página que consiste en

una composición autónoma en un documento, página, aplicación, o sitio web con la
intención de que pueda ser reutilizado y repetido. Podría utilizarse en los artículos
de los foros, una revista o el artículo de periódico, una entrada de un blog, un
comentario escrito por un usuario, un widget interactivo o cualquier otro artículo
independiente de contenido. Cuando los elementos de <article> son anidados, los
elementos interiores representan los artículos que en principio son relacionados con
el contenido del artículo externo. Por ejemplo, un artículo de un blog que permite
comentarios de usuario, dichos comentarios se podrían representar con <article> .
<aside></aside> : representa una sección de la página que abarca un contenido

relacionado con el contenido que lo rodea, por lo que se le puede considerar un
contenido independiente. Este elemento puede utilizarse para efectos tipográficos,
barras laterales, elementos publicitarios, para grupos de elementos de la
navegación, u otro contenido que se considere separado del contenido principal de
la página.
<header></header> : representa un grupo de artículos introductorios o de

navegación. Está destinado a contener por lo general la cabecera de la sección (un
elemento h1-h6 o un elemento hgroup ), pero no es necesario.
<nav></nav> : representa una sección de una página que enlaza a otras páginas o a
otras partes dentro de la página. No todos los grupos de enlaces en una página
necesita estar en un elemento nav , sólo las secciones que constan de bloques de
navegación principales son apropiados para el elemento de navegación.
<footer></footer> : representa el pie 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.
<hgroup></hgroup> : representa el encabezado de una sección. El elemento se utiliza

para agrupar un conjunto de elementos h1-h6 cuando el título tiene varios niveles,
tales como subtítulos o títulos alternativos.
<time> : representa o bien una hora (en formato de 24 horas), o una fecha precisa
en el calendario gregoriano (en formato ISO), opcionalmente con un tiempo y un
desplazamiento de zona horaria.
Semántica | HTML5
2.3 ESTRUCTURA DE UN DOCUMENTO HTML5

Como hemos visto con las nuevas etiquetas semánticas introducidas en HTML5, éstas
aportan un significado concreto al documento que estamos definiendo, y por lo tanto,
afectan de manera directa a la forma en la estructuramos el contenido. Vamos a ver
como podemos convertir nuestra actual página con las nuevas etiquetas introducidas en
HTML5.
2.3.1 ESTRUCTURA TRADICIONAL DE UN DOCUMENTO EN HTML 4

El siguiente código muestra una estructura "clásica" de documento HTML, donde los
diferentes contenidos de la web se encuentran agrupados por etiquetas <div> . Por sí
mismas, estas etiquetas no aportan ningún tipo de significado, y el atributo id tampoco
se lo proporciona. Si cambiamos <div id="header"> por <div id="whatever"> , el
significado sigue siendo el mismo, ninguno.
<DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div id="header">
<a href="/"><img src=logo.png alt="home"></a>
<h1>My Weblog</h1>
<p class="tagline">
A lot of effort went into making this effortless.
</p>
</div>
<div id="nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about</a></li>
</ul>
Semántica | HTML5
</div>
<div class="articles">
<div class="article">
<p class="post-date">October 22, 2009</p>
<h2>
<a href="#" title="link to this post">Travel day</a>
</h2>
<div class="content">
Content goes here...
</div>
<div class="comments">
<p><a href="#">3 comments</a></p>
</div>
</div>
</div>
<div class="aside">
<div class="related"></div>
</div>
<div id="footer">
<p>§</p>
<p>© 2013–9 <a href="#">Arkaitz Garro</a></p>
</div>
</body>
</html>
2.3.2 ESTRUCTURA TRADICIONAL DE UN DOCUMENTO EN HTML5

Veamos como podemos añadir un significado a este documento, únicamente aplicando
las nuevas etiquetas semánticas incluidas en HTML5.
<!DOCTYPE html>
<html>
Semántica | HTML5
<body>
<header>
<hgroup>
<h1>Title</h1>
<h2 class="tagline">
</h2>
</hgroup>
</header>
<nav>
<ul>
</ul>
</nav>
<section class="articles">
<article>
<time datetime="2009-10-22">October 22, 2009</time>
<h2>
<a href="#" title="link to this post">Travel day</a>
</h2>
<div class="content">
Content goes here...
</div>
<section class="comments">
<p><a href="#">3 comments</a></p>
</section>
</article>
</section>
<aside>
</aside>
<footer>
<p>§</p>
<p>© 2013–9 <a href="#">Arkaitz Garro</a></p>
</footer>
</body>
</html>
Partiendo de la anterior estructura, parece evidente las nuevas etiquetas que debemos
utilizar. Esto no siempre es así, y cuando estructuramos contenidos de mucho mayor
alcance, lo normal es que nos surjan dudas. Un sencillo algoritmo que nos puede ayudar
Semántica | HTML5
en la correcta selección de etiquetas, es el que proponen en HTML5 Doctor.
2.4 USO DE LAS NUEVAS ETIQUETAS SEMÁNTICAS

2.4.1 <HEADER>
Según la especificación, un elemento <header> representa lo siguiente:
Un grupo de navegación o contenido introductorio. Un elemento header

normalmente contiene una sección de encabezado (un elemento h1-h6 o un
elemento hgroup), pero puede contener otro tipo de elementos, como una tabla de
contenidos, un formulario de búsqueda o cualquier logo importante.
En nuestro ejemplo, y en la mayoría de los sitios web, la cabecera contiene los primeros
elementos de la página. Tradicionalmente el título de la web, su logo, enlaces para
volver al inicio... De la manera más simple, nuestra cabecera quedaría de esta forma:
<header>
<h1>Title</h1>
</header>
También es muy común que los sitios web muestren un lema o subtítulo bajo el título
Semántica | HTML5
principal. Para dar mayor importancia a este subtítulo, y relacionarlo de alguna manera
con el título principal de la web, es posible agrupar los dos titulares bajo un elemento
<hgroup> .
<header>
<hgroup>
<h1>Title</h1>
<h2 class="tagline">
</h2>
</hgroup>
</header>
2.4.2 <NAV>
Según la especificación, un elemento <nav> representa lo siguiente:
El elemento <nav> representa una sección de una página que enlaza con otras
páginas o partes de la misma página: una sección con enlaces de navegación.
El elemento <nav> ha sido diseñado para identificar la navegación de un sitio web. La

navegación se define como un conjunto de enlaces que hacen referencia a las secciones
de una página o un sitio, pero no todos los enlaces son candidatos de pertenecer a un
elemento <nav> : una lista de enlaces a patrocinadores o los resultados de una
búsqueda, no forman parte de la navegación principal, sino que corresponden con el
contenido de la página.
Como ocurre con los elementos <header> , <footer> y el resto de nuevas etiquetas, no
estamos obligados a utilizar un único elemento <nav> en toda la página. Es posible que
tengamos una navegación principal en la cabecera de la página, una tabla de contenidos
o enlaces en el pie de la página, que apuntan a contenidos secundarios. Todos ellos son
candidatos a pertenecer a un elemento <nav> .
<nav>
<ul>
</ul>
</nav>
2.4.3 <FOOTER>
Según la especificación, un elemento <footer> representa lo siguiente:
Semántica | HTML5
Representa el pie de una sección. Un pie tradicionalmente contiene información

acerca de su sección, como quién escribió el contenido, enlaces relacionados,
copyright y similares.
Al igual que ocurre con el elemento <nav> , podemos tener tantos elementos <footer>
como sea necesario. Lo normal es que nuestro sitio web disponga de al menos un pie
principal, que contiene los avisos legales (privacidad, condiciones del servicio,
copyright...), mapa del sitio web, accesibilidad, contacto y otros muchos enlaces que
pueden ir incluidos en un elemento <nav> .
2.4.4 <ARTICLE>
Según la especificación, un elemento <article> representa lo siguiente:
Este elemento representa un contenido completo, auto-contenido en un documento,

página, aplicación o sitio web, que es, en principio, independiente de ser distribuido
y reutilizado, por ejemplo en un RSS. Puede ser un post de un foro, un artículo de
un periódico o revista, una entrada de un blog, un comentario de un usuario, un
widget o cualquier otro elemento independiente.
Cuando los artículos están anidados, los artículos interiores representan contenido
que en principio está relacionado con el artículo que los contiene. Por ejemplo, una
entrada de un blog puede aceptar comentarios de usuarios, que están incluidos
dentro del contenido principal y relacionados con el mismo.
Por lo tanto, la etiqueta <article> se utiliza para encapsular contenido, que tiene
significado en sí mismo, y que puede ser distribuido y reutilizado en otros formatos de
datos. No nos referimos únicamente a contenidos clásicos de texto, sino que incluso un
contenido multimedia con su transcripción, un mapa o email pueden ser totalmente
válidos para ser incluidos en una etiqueta <article> .
<section>
<h1>Comments</h1>
<article id="c1">
<footer>
<p>Posted by: <span>George Washington</span></p>
<p><time datetime="2009-10-10">15 minutes ago</time></p>
</footer>
<p>Yeah! Especially when talking about your lobbyist friends!</p>
</article>
<article id="c2">
<footer>
<p>Posted by: <span itemprop="name">George Hammond</span></p>
<p><time datetime="2009-10-10">5 minutes ago</time></p>
</footer>
<p>Hey, you have the same first name as me.</p>
Semántica | HTML5
</article>
</section>
2.4.5 <SECTION>
A diferencia del elemento <article> , este elemento es utilizado para dividir el
documento (o artículos) en diferentes áreas, o como su propio nombre indica, en
secciones. Según la especificación, un elemento <section> representa lo siguiente:
Representa una sección genérica de un documento o aplicación. Una sección, en

este contexto, es un grupo temático de contenido, que generalmente incluye una
cabecera.
Consideremos el siguiente marcado válido en HTML 4:
<h1>Rules for Munchkins</h1>

<h2>Yellow Brick Road</h2>
<p>It is vital that Dorothy follows it—so no selling
bricks as "souvenirs"</p>
<h2>Fan Club uniforms</h2>
<p>All Munchkins are obliged to wear their "I’m a friend
of Dorothy!" t-shirt when representing the club</p>
<p><strong>Vital caveat about the information above:
does not apply on the first Thursday of the month.</strong></p>
En este caso, y desde un punto de vista semántico, es complicado deducir si el texto Vital
caveat about the information above: does not apply on the first Thursday of the month.
pertenece al contenido completo o está relacionado con la sección Fan Club uniforms.
Gracias a la etiqueta <section> , es muy sencillo separar e identificar a qué sección
pertenece cada contenido:
<article>
<section>
</section>
<section>
</section>
</article>
Semántica | HTML5
<article>
<section>
</section>
<section>
</section>
</article>
Como podemos observar en los dos ejemplos anteriores, es muy sencillo agrupar
contenido que pertenece a una misma sección, permitiendo incluirlo dentro de un
contexto semántico.
Otra de las posibilidades que nos ofrece esta etiqueta, es la de dividir nuestro documento
en secciones, que incluyen contenido de temáticas diferentes entre sí. Si además
queremos separar estos contenidos visualmente en dos columnas, lo lógico sería utilizar
las tradicionales etiquetas <div> para agrupar los artículos según su temática, y
posteriormente aplicar estilos CSS o JavaScript para presentarlos en forma de pestañas.
En este caso, la etiqueta <div> no nos aporta ningún significado semántico, tan sólo
estructural. La etiqueta <section> es la encargada de añadir semántica en estos casos:
<section>
<h1>Articles about llamas</h1>
<article>
<h2>The daily llama: Buddhism and South American camelids</h2>
<p>blah blah</p>
</article>
<article>
<h2>Shh! Do not alarm a llama</h2>
<p>blah blah</p>
</article>
</section>
<section>
<h1>Articles about root vegetables</h1>
<article>
<h2>Carrots: the orange miracle</h2>
<p>blah blah</p>
</article>
Semántica | HTML5
<article>
<h2>Eat more Swedes (the vegetables, not the people)</h2>
<p>blah blah</p>
</article>
</section>
2.4.6 <ASIDE>
Según la especificación, un elemento <aside> representa lo siguiente:
Una sección de una página que consiste en contenido tangencialmente relacionado

con el contenido alrededor del elemento, y puede considerarse separado de este
contenido. Estas secciones son normalmente representadas como elementos
laterales en medios impresos. Este elemento puede utilizarse contener citas,
anuncios, grupos de elementos de navegación y cualquier otro contenido separado
del contenido principal de la pagina.
Dentro de un artículo, por ejemplo, puede ser utilizado para mostrar contenido
relacionado como citas u otros artículos relacionados.
2.4.7 <FIGURE>
Según la especificación, un elemento <figure> representa lo siguiente:
The figure element represents some flow content, optionally with a caption, that is
self-contained and is typically referenced as a single unit from the main flow of the
document.
The element can be used to annotate illustrations, diagrams, photos, code listings,
etc. This includes, but is not restricted to, content referred to from the main part of
the document, but that could, without affecting the flow of the document, be
moved away from that primary content, e.g. to the side of the page, to dedicated
pages, or to an appendix.
Hasta ahora, no había una manera correcta de poder añadir un subtítulo o una leyenda a
un contenido concreto, como explicar una figura o atribuir una imagen a un fotógrafo.
Gracias a la etiqueta <figure> podemos contener una imagen (o un vídeo, ilustración o
bloque de código) en un elemento y relacionarlo con un contenido concreto:
<figure>
<img src="welcome.jpg" alt="Alternative text">
<figcaption>
Bruce and Remy welcome questions
<small>Photo © Bruce’s mum</small>
</figcaption>
</figure>
Semántica | HTML5
En conveniente recordar que el atributo alt indica el texto a mostrar cuando la imagen
no está disponible, y no está pensada para contener una descripción de la imagen, y
mucho menos para duplicar lo ya indicado en la etiqueta <figcaption> .
Ejercicio 1
Ver enunciado
2.5 ATRIBUTOS GLOBALES

HTML5 también incluye nuevos atributos globales que pueden ser asignados a cualquier
elemento. Son los siguientes:
2.5.1 ACCESSKEY
El atributo accesskey permite a los desarrolladores especificar un atajo de teclado que
permite activar un elemento a asignarle el foco. Este atributo ya existía en HTML 4,
aunque ha sido utilizado en muy pocas ocasiones. Como HTML5 está pensado para
aplicaciones, y algunos usuarios siguen prefiriendo los atajos de teclado, este atributo no
ha sido eliminado, y ahora está disponible para cualquier elemento.
Para evitar conflictos con otros atajos de teclado, o con los propios del navegador, ahora
esta etiqueta permite asignar alternativas en este atributo. Un ejemplo incluido en la
especificación:
<input type="search" name="q" accesskey="s 0">
Esto quiere decir que este elemento es accesible a través de dos atajos de teclado, a
través de la tecla s o a través de la tecla 0 (en ese orden).
2.5.2 CONTENTEDITABLE
Inventado por Microsoft, e implementado por el resto de los navegadores, la etiqueta
contenteditable es ahora parte de la especificación oficial.
La introducción de esta etiqueta significa principalmente dos cosas:
Primero, los usuarios pueden editar los contenidos de un elemento que incluya esta
etiqueta. Este elemento debe ser seleccionable y el navegador debe proporcionar
una marca que indique la posición actual del cursor.
Y segundo, es posible cambiar el formato del texto del contenido, añadiendo

negritas, cambiar la fuente, añadir listas, etc.
Este atributo es de tipo booleano, por lo que su valor puede ser true o false. Al acceder
desde JavaScript a este atributo, hay que tener en cuenta su notación lowerCamelCase,
siendo el nombre de la propiedad del DOM contentEditable . Además, existe otra
propiedad llamada isContentEditable , que indica si el elemento es editable o no.
Semántica | HTML5
Finalmente, el contenido que ha sido seleccionado por el usuario, puede

ser objeto de modificaciones, como hemos comentado antes. A través
del comando element.execCommand() es posible indicar el tipo de
modificación (poner en negrita, copiar, cambiar la fuente...), siempre
que el documento se haya indicado como editable.
document.designMode = 'on';
Si se desea almacenar los cambios realizados en el contenido, es

necesario enviarlo al servidor. No existe ningún API o método en
JavaScript que nos posibilite esta acción, por lo que debemos utilizar
algún tipo de tecnología tipo AJAX.
2.5.3 DATA-* (CUSTOM DATA ATTRIBUTES)

HTML5 permite crear atributos personalizados para los elementos.
Estos atributos son utilizados para pasar información a JavaScript.
Como veremos en el capítulo correspondiente, hasta ahora se
utilizaba el atributo class para de alguna manera almacenar
información asociada con elementos, pero esto cambia radicalmente
con estos atributos.
<ul id="vegetable-seeds">
<li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>
<li data-spacing="30cm" data-sowing-time="February to March">Celery</li>
<li data-spacing="3cm" data-sowing-time="March to September">Radishes</li>
</ul>
2.5.4 DRAGGABLE
Este atributo indica que el elemento indicado puede ser arrastable.
Lo veremos en el capítulo correspondiente.
Practica 02
Semántica | HTML5
Index.Html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Semántica | HTML5
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex" />
<title>My Weblog</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="alternate" type="application/atom+xml" title="My Weblog feed"
href="/feed/" />
<link rel="search" type="application/opensearchdescription+xml" title="My
Weblog search" href="opensearch.xml" />
</head>
<body>
<div id="header">
<h1>My Weblog</h1>
<p class="tagline">A lot of effort went into making this effortless.</p>
<div id="nav">
<ul>
<li><a href="../semantics.html">home</a></li>
<li><a href="../semantics.html">blog</a></li>
<li><a href="../semantics.html">gallery</a></li>
<li><a href="../semantics.html">about</a></li>
</ul>
</div>
</div>
<div class="entry">
<h2>
<a href="../semantics.html" rel="bookmark" title="link to this post">Travel
day</a>
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit
felis accumsan turpis pretium tempor. Duis eu turpis nunc, ut euismod nisl.
Aliquam erat volutpat. Proin eu eros mollis dui fringilla sodales. Curabitur
venenatis tincidunt felis ac congue. Maecenas at odio dui, sit amet congue
sapien. Proin placerat feugiat eros, non mollis quam pharetra at. Duis gravida
eleifend ligula nec auctor. Fusce nulla diam, fringilla non ultrices in, iaculis eu
tellus. Sed mollis consequat turpis sit amet facilisis. Donec pretium luctus
aliquet. Curabitur placerat varius purus vel congue. Aliquam erat volutpat.
Curabitur vitae eros sed turpis sollicitudin mattis. Morbi venenatis pulvinar nunc,
at vulputate massa placerat a. Nam et tortor id nisi consequat tempor eget sit
amet risus. Praesent bibendum, velit eu hendrerit porttitor, elit mauris posuere
nisl, non pellentesque est leo a quam.</p>
</div>
Semántica | HTML5
<div class="entry">
<h2>
<a href="../semantics.html" rel="bookmark" title="link to this post">I'm
going to Prague!</a>
</h2>
<p>Sed ante mi, sagittis sed euismod sit amet, convallis et nibh. Etiam sit
amet odio dui, id semper turpis. Mauris risus mauris, imperdiet pulvinar vehicula
et, hendrerit vitae dui. Phasellus ultrices lacus rhoncus purus posuere rutrum.
Maecenas mattis eleifend scelerisque. Nulla quam sem, facilisis ac ultrices et,
tincidunt eu dolor. Mauris arcu est, porttitor eu blandit nec, pulvinar sed enim.
Praesent diam felis, cursus at facilisis eu, mollis ut elit. Praesent rutrum porta
euismod. Nulla facilisi. Suspendisse potenti. In auctor ultricies eleifend. Proin erat
dolor, malesuada non tempus nec, tincidunt in mi.</p>
</div>
<p class="c sectionSign"></p>
<table id="arc">
<tr><th>October</th><td></td></tr>
<tr><th>5</th><td><a href="../semantics.html">Vos vestros servate, meos
mihi linquite mores</a></td></tr>
<tr><th>September</th><td></td></tr>
<tr><th>30</th><td><a href="../semantics.html">Ut sementem feceris ita
metes</a></td></tr>
<tr><th>August</th><td></td></tr>
<tr><th>4</th><td><a href="../semantics.html">Risu inepto res ineptior nulla
est</a></td></tr>
<tr><th>July</th><td></td></tr>
<tr><th>6</th><td><a href="../semantics.html">Vitanda est improba siren
desidia</a></td></tr>
<tr><th>April</th><td></td></tr>
<tr><th>21</th><td><a href="../semantics.html">Mendacem oportet esse
memorem</a></td></tr>
<tr><th>7</th><td><a href="../semantics.html">Libenter homines id quod
volunt credunt</a></td></tr>
<tr><th>March</th><td></td></tr>
<tr><th>27</th><td><a href="../semantics.html">Gutta cavat
lapidem</a></td></tr>
<tr><th>21</th><td><a href="../semantics.html">Amoto quaeramus seria
ludo</a></td></tr>
<tr><th>18</th><td><a href="../semantics.html">Non est ars quae ad
effectum casu venit</a></td></tr>
<tr><th>January</th><td></td></tr>
<tr><th>11</th><td><a href="../semantics.html">Quid rides?...De te fabula
narratur</a></td></tr>
</table>
<div id="footer">
Semántica | HTML5
<p class=sectionSign>
<p>© 2009 <a href="../semantics.html">Mark Pilgrim</a></p>
</div>
</body>
</html>
Style.css
html{background:white;color:black}
body{font:normal medium 'Gill Sans','Gill Sans MT','Goudy Bookletter
1911','Linux Libertine O','Liberation Serif',Candara,serif;padding:0;margin:0
auto;width:40em;line-height:1.75;word-spacing:0.1em}
a{background:transparent;text-decoration:none;border-bottom:1px dotted}
a:hover{border-bottom:1px solid}
a:link{color:#1b67c9}
a:visited{color:darkorchid}
h1 a,h2 a,h3 a{color:inherit !important}
h2,h3,p{margin:1.75em 0}
h1,h2,h3{font-size:medium}
h1{letter-spacing:1em;text-align:center;margin:0}
#header{background:black;color:white;margin:0;padding:1.75em 0}
#header p{text-align:center;font-size:medium;line-height:2.154}
#header a{color:white}
#arc th,#arc td{list-style:none;margin:0;padding:0}
#arc th{text-align:right}
#footer,.c{text-align:center;clear:both}
#arc th{padding:0 1.75em 0 0;vertical-align:baseline}
#arc{border-collapse:collapse}
.post-date{float:right;font-size:small;margin:2px 0 0 0}
#nav ul{margin:0;padding:0 1em 0 0;text-align:center}
#nav li{display:inline;padding-left:1em}
.sectionSign:before{content:'\00A7'}

Diseño Web

Cargado por

Copyright:

Formatos disponibles

Diseño Web

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diseño Web

Cargado por

Copyright:

Formatos disponibles

Semántica | HTML5

Actividad 2:Elementos de HTML5

etiquetas que componen la web semántica, es decir, que no proponen nuevas

En este capítulo, veremos como transformar nuestra estructura actual de marcado

2.1 CABECERA DEL DOCUMENTO

Ésta es una de las 15 declaraciones posibles declaradas en los estándares HTML4 y

2.1.2 ELEMENTO RAÍZ HTML

No hay ningún problema en mantener esta sintaxis. Si se desea, se puede conservar, ya

<html lang="es" xml:lang="en">

2.1.3 ELEMENTO HEAD

title="My Weblog search"

2.1.3.1 CODIFICACIÓN DEL CONTENIDO

Se puede pensar en la codificación de caracteres como una especie de clave de

Lo ideal es establecer esta codificación en el servidor, indicando el tipo en las cabeceras

Content-Type: text/html; charset="utf-8"

Por desgracia, no siempre podemos tener el control sobre la configuración de un servidor

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

El encabezado HTTP es el método principal, y anula la etiqueta <meta> si está presente.

Debemos acostumbrarnos a especificar la codificación de nuestros documentos, aunque

Es una traducción de esta página en otro idioma.

Es el mismo contenido que esta página, pero en formato PDF.

Es el próximo capítulo de un libro en línea de la cual esta página es también una

En HTML5, se separan estas relaciones de enlace en dos categorías:

El tipo de relación más utilizado (literalmente) es el siguiente:

<link rel="stylesheet" href="style-original.css" type="text/css" />

<link rel="stylesheet" href="style-original.css" />

2.2 NUEVAS ETIQUETAS SEMÁNTICAS

<section></section> : se utiliza para representar una sección "general" dentro de

<article></article> : representa un componente de una página que consiste en

<aside></aside> : representa una sección de la página que abarca un contenido

<header></header> : representa un grupo de artículos introductorios o de

<footer></footer> : representa el pie de una sección, con información acerca de la

<hgroup></hgroup> : representa el encabezado de una sección. El elemento se utiliza

2.3 ESTRUCTURA DE UN DOCUMENTO HTML5

2.3.1 ESTRUCTURA TRADICIONAL DE UN DOCUMENTO EN HTML 4

<DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

2.3.2 ESTRUCTURA TRADICIONAL DE UN DOCUMENTO EN HTML5

en la correcta selección de etiquetas, es el que proponen en HTML5 Doctor.

2.4 USO DE LAS NUEVAS ETIQUETAS SEMÁNTICAS

Un grupo de navegación o contenido introductorio. Un elemento header

El elemento <nav> ha sido diseñado para identificar la navegación de un sitio web. La

Representa el pie de una sección. Un pie tradicionalmente contiene información

Este elemento representa un contenido completo, auto-contenido en un documento,

Representa una sección genérica de un documento o aplicación. Una sección, en

Consideremos el siguiente marcado válido en HTML 4:

<h1>Rules for Munchkins</h1>

Una sección de una página que consiste en contenido tangencialmente relacionado

2.5 ATRIBUTOS GLOBALES

<input type="search" name="q" accesskey="s 0">

La introducción de esta etiqueta significa principalmente dos cosas:

Y segundo, es posible cambiar el formato del texto del contenido, añadiendo

Finalmente, el contenido que ha sido seleccionado por el usuario, puede

Si se desea almacenar los cambios realizados en el contenido, es

2.5.3 DATA-* (CUSTOM DATA ATTRIBUTES)

<p class="c sectionSign"></p>

<p>&copy; 2009 <a href="../semantics.html">Mark Pilgrim</a></p>

También podría gustarte

<p>© 2009 <a href="../semantics.html">Mark Pilgrim</a></p>