HTML5estructura

HTML 5
Estructura de un documento
para la Web

El lenguaje HTML
 HyperText Markup Language (HTML)
 El desarrollo del lenguaje es
supervisado por W3C (World Wide
Web Consortium)
 La última versión HTML 5
 Las anteriores:
• HTML 4.01 (año 1999)
• XHTML (año 2000)

Lenguaje de marcas
 Permite identificar la estructura de
un documento.
 Utiliza «etiquetas» o «marcas» para
delimitar los elementos de la
estructura.
 Los navegadores interpretan la
estructura del documento.

Documentos HTML
 Un documento HTML no es más que
un archivo de texto.
 La extensión de su nombre suele ser
.html o .htm.
 Un editor de texto es suficiente para
poder elaborar un documento HTML.

Estructura y apariencia
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mi primer documento
</title>
</head>
<body>
<h1>Éste es un
encabezado</h1>
<p>El primer
párrafo estará
separado del siguiente.</p>
<p>El segundo
párrafo es este texto</p>
</body>
</html>

Elementos y etiquetas
 Una etiqueta se encuentra encerrada
entre los símbolos ‘<‘ y ‘>’.
 Un elemento del documento se
compone de las etiquetas que lo
delimitan y su contenido.
<h1>Es un encabezado </h1>
Etiqueta de apertura Etiqueta de cierre

Estructura jerárquica
 Los elementos de un documento
HTML pueden contener a su vez
otros.
 Dos elementos son hermanos si se
encuentran contenidos en el mismo
elemento.
 Un elemento es hijo de otro, si se
encuentra contenido en aquel.

Formato de las etiquetas
 Es indiferente utilizar mayúsculas o
minúsculas, incluso una combinación
de ambas en las etiquetas de HTML5.
 No es necesario que las etiquetas se
encuentren en minúsculas como en
XHTML.
 Lo más habitual es encontrar las
etiquetas en minúsculas.

 Todo documento HTML se encuentra delimitado
por las etiquetas <html> y </html>
 Dentro, aparecen siempre dos elementos:
• El elemento <head>, que contiene información
sobre el documento HTML
• El elemento <body> información que aparece en
el contenido del navegador.

Cabecera y cuerpo
Todo documento HTML se
encuentra delimitado por las
etiquetas <html> y
</html>Dentro, aparecen
siempre dos elementos:
El elemento <head>, que
contiene información sobre
el documento HTML
El elemento <body>
contenido que aparece en el
navegador.

Atributos
 Dentro de la etiqueta inicial de un
elemento puede haber uno o varios
atributos.
 Lo más habitual es que un atributo
esté compuesto de un nombre y un
valor, separados por el símbolo «=».
 El nombre identifica el atributo y el
valor especifica el comportamiento o
modificación del elemento.

Ejemplo de atributo
<p>
<a href="google.com">Pulse para ir a
Google</a>
</p>
Elemento padre (un párrafo)
Elemento hijo (un
enlace), con un atributo
Atributo (par nombre/valor)

Clasificación de atributos
 Atributos básicos (class, id, style y
title).
 Atributos de internacionalización
(dir, lang).
 Atributos de accesibilidad (accesskey
y tabindex).

Atributos básicos I
 id se utiliza para identificar un único
elemento dentro de un documento.
 Sintaxis: id="nombre_elemento"
 class se utiliza para especificar que un
elemento pertenece a una clase (útil con
CSS)
 Sintaxis: class="lista clases" un elemento
puede pertenecer a varias clases

Atributos básicos II
 title sugiere un título asociado a un
elemento.
 Sintaxis: title="título_elemento"
 style permite especificar reglas CSS
dentro de un elemento. Se
recomienda no utilizarla e incluir las
reglas en un archivo de estilos
externo.

Atributos de
internacionalización
 dir este atributo permite indicar al
navegador la dirección en la que
debe fluir el texto.
 Únicamente puede tener los valores
ltr o rtl (left to right o right to left).
 lang permite especificar el idioma
utilizado en un documento. El valor
de este atributo son dos caracteres
incluidos en el estándar ISO-639-1.

Elementos básicos
 Todo documento HTML contiene los
siguientes elementos y forman parte de la
estructura básica. Son: html, head, title y
body.
 Un elemento previo cualifica a todo el
documento HTML 5 e indica al navegador
como mostrar el documento y es:
<!doctype html>

Estructura mínima
<!doctype html>
<html>
<head>
<title>Estructura mínima de un documento html</title>
</head>
<body>
</body>
</html>
Podemos encontrar estructuras de archivos para empezar a
crear documentos HTML 5 en:
http://www.html5boilerplate.com/
http://html5reset.org/

El elemento head
 Todo elemento head debería contener un elemento title
que asigne un título al documento (visible en el browser en
la barra de título).
 Además, puede contener los siguientes elementos, en
cualquier orden e incluso algunos duplicados:
• <base> que afecta al comportamiento de los enlaces
• <link> permite hacer referencia a un archivo externo
• <script> para incluir un script en el documento
• <meta> permite incluir información sobre el documento.
 Importante es la etiqueta <meta charset=utf-8> para
indicar que el documento utiliza el conjunto de caracteres.

Compatibilidad con anteriores
versiones
 Para permitir la compatibilidad con Internet
Explorer 8 y anteriores versiones, cuando se crea
un documento HTML5 se suele incluir la siguiente
librería en el elemento <head>, de la siguiente
forma:
<script src=
"http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3
.6/html5shiv.min.js">
</script>
Para una explicación mas detallada:
http://paulirish.com/2011/the-history-of-the-html5-shiv/

Detección de capacidades de
un navegador
 Podemos incluir también una librería opensource
JavaScript para poder identificar si el navegador
que muestra el documento HTML dispone de las
funcionalidades básicas de HTML5 y CSS3.
 Podemos hacerlo incluyendo este código en el
elemento <head> de nuestro documento:
<script
src="http://cdnjs.cloudflare.com/ajax/libs/
modernizr/2.6.1/modernizr.min.js">
</script>

Elementos de contenido
 Encabezados
 Párrafos y secciones
 Elementos de agrupación
 Elementos de presentación
 Elementos asociados a frases
 Elementos de edición

Tratamiento de los espacios en
blanco y nuevas líneas
 Los navegadores se comportan de
igual manera cuando:
• Encuentran una secuencia de caracteres
en blanco, mostrando uno.
• Encuentran una secuencia de líneas
vacías, mostrando únicamente una
carácter de nueva línea.

Creación de cabeceras
 Es posible crear un encabezado de distinto
tamaño utilizando los elementos
<h1>, <h2>..<h6>.
 Utilizados para crear una estructura de títulos y
subtítulos similar a la de un libro.
 Sin atributo, el navegador mostrará cada
encabezado con un tamaño menor cuanto mayor
es el número.
 El tamaño del texto del elemento <h4> tiene el
mismo tamaño del tamaño del texto por defecto.

Cabeceras
<body>
<h1>Cabecera de nivel 1</h1>
</body>

Párrafo y nueva línea
 Para incluir un elemento párrafo se
utilizan las etiquetas <p> </p>.
 Cuando se muestra un párrafo se inserta
una línea nueva antes del siguiente
elemento y se añade un espacio vertical
extra.
 Para que los elementos aparezcan en una
nueva línea, se puede insertar un
elemento <br>

Ejemplo: párrafos y nueva línea
<p>Este elemento es el primer párrafo de este documento.<br>
Dentro de este párrafo se ha incluido un salto de
línea.</p>
Algunos dise&nacute;adores no utilizan un párrafo y lo
sustituyen por dos saltos de línea como estos<br><br>

Texto preformateado
 Con la etiqueta <pre></pre> se evita
que el navegador interprete el texto del
elemento, apareciendo de forma literal a
como aparece en el elemento.

Tipos de elementos
 Elementos de bloque
• Aquellos que se encuentran separados por una
nueva línea, antes y después de ser mostrados
• Ejemplos: párrafos, cabeceras
 Elementos «inline»
• Aquellos que pueden aparecer en oraciones sin
necesidad de estar separados
• Ejemplos: <strong>, <b>, <small>…

Agrupación de contenido
 HTML5 permite agrupar contenido de
forma más precisa que sus versiones
anteriores.
 Las nuevas etiquetas tales como
<header>, <section>, <article> o <nav>
permiten agrupar el contenido de una
forma mas adecuada.

El elemento <div>
 Está pensado para utilizarlo como
bloque que puede ser identificado y
al que se puede aplicar un estilo o
utilizarlo para aplicar algún script.
 No tiene asignado ningún
significado, independientemente de
que le sea asignado un identificador
o una clase.

El elemento <header>
 Definido como «un grupo auxiliar
para la navegación».
 No hay restricción a la hora de incluir
mas de un elemento de este tipo.
 Puede estar asociado a una sección o
a la página entera.

El elemento <section>
 Ha sido implementado para ser parte
de la estructura del documento.
 Por ejemplo, los artículos de un
periódico podrían estar agrupados en
una sección por «tema» (actualidad,
deportes…)

El elemento <article>
 Similar a la sección, pero representa
una composición independiente y/o
reusable o distribuible.
 Por ejemplo, el artículo de un
periódico o revista, la entrada de un
blog, los post de un foro…

El elemento <nav>
 Representa un grupo de enlaces para
la navegación.
 Es posible utilizar mas de un
elemento nav en una página.

El elemento <aside>
 Se debería utilizar para marcar los
contenidos relacionados, con el
contenido principal, pero que no
forma parte de aquel.
 Por ejemplo, podrían contener
anuncios, una barra de navegación
secundaria, una barra lateral…

El elemento <footer>
 Representa un pie de página,
sección, artículo o contenedor
anterior.
 Normalmente contendrá información
de copyright, lista de enlaces
relacionados …

ELEMENTOS PARA EL
TRABAJO CON LISTAS

Tipos de listas
 En HTML se pueden crear 3 tipos de
listas:
• Desordenadas
• Ordenadas
• Listas de definición

Listas desordenadas
 El elemento <ul> se utiliza para
crear listas desordenadas
 Cada elemento que compone la lista
debe tener su correspondiente
elemento <li>

Ejemplo lista desordenada
<ul>
<li>
<a href="http://www.google.com">Google</a>
</li>
<li>
<a href="http://www.yahoo.com">Yahoo</a>
</li>
<li>
<a href="http://www.bing.com">Bing</a>
</li>
</ul>

Lista ordenada
 El contenedor de una lista ordenada
debe ser <ol>
 Cada uno de los elementos que la
componen debe ir delimitado por el
elemento <li>
 Es posible modificar alguno de sus
comportamientos utilizando
atributos.

Atributos para listas ordenadas
 start, permite modificar el número de inicio de la lista
 reversed, permite invertir el orden de la lista (de mayor a
menor)
 type, permite seleccionar el tipo de marcador usado (ver
tabla).
Valor del
atributo
Estado
1 Decimal
a Alfabético minúsculas
A Alfabético mayúsculas
i Romano minúsculas
I Romano mayúsculas

Ejemplo lista ordenada
<ol type="I" start="50">
<li>
<a href="http://www.google.com">Google</a>
</li>
<li>
<a href="http://www.yahoo.com">Yahoo</a>
</li>
<li>
<a href="http://www.bing.com">Bing</a>
</li>
</ol>

Listas de descripción
 Una lista de definición está
compuesta de pares de elementos, el
primero formado por un término a
definir y el segundo, por su definición
 Los elementos a utilizar son
<dl>, <dt> y <dd>.

Ejemplo de lista de descripción
<dl>
<dt>HTML</dt>
<dd> HyperText Markup Language </dd>
<dt>SQL</dt>
<dd>Structured Query Language</dd>
<dt>UML</dt>
<dd>Unified Modeling Language</dd>
</dl>

HTML5estructura

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a HTML5estructura

Semelhante a HTML5estructura (20)

Mais de jcremiro

Mais de jcremiro (20)

Último

Último (20)

HTML5estructura