1. SITIOS
WEB
HTML
5
CSS 3
JSFRON
T END
PHP 5
MYSQ
L
JS
BACK
END

2. HTML 5.
Introducción.
¿Os interesa hacer sitios web? ¡No busques más! Con HTML5 y CSS3, dos de los lenguajes en los que
están basados los sitios web tendrás las bases adecuadas. Los veremos en este curso.
El diseño web puede ser fascinante. Crear sitios web atractivos y profesionales es el sueño de millones
de diseñadores de todo el mundo que utilizan las tecnologías de Internet. Un sitio web debe ser sobre
todo accesible, intuitivo y agradable.
La organización inicial es muy importante para poder utilizar eficazmente las herramientas y tomar
decisiones oportunas. Debe iniciarse con la concepción del diseño web, explicar las estrategias de
diseño y cómo organizar las ideas.
El comprender el proyecto desde ésta etapa, permite un ahorro significativo de recursos en el momento
de la implementación.
HTML es divertido, y será el pan de cada día si ingresas al mundo del desarrollo web profesional.
Sin embargo HTML es sólo un ingrediente del pastel (un sitio web profesional e interactivo en
Internet), así que te recomiendo que primero te familiarices con el Diseño Gráfico, eso mejorará tu
creatividad, diseña tus propios bocetos en Gimp e Inkscape para tus futuros sitios web, e impleméntalos
poco a poco junto con CSS.
Después que ya estás un poco más avanzado con lo antes mencionado, échale javascript y php.
Es posible que pensés que no estás hechos para aprender el lenguaje informático, pero no os
preocupéis: El HTML y el CSS son lenguajes simples. Las últimas versiones de estos lenguajes,
HTML5 y CSS3, ofrecen posibilidades increíbles. Con ellos pedrés añadir texto a un sitio web,
construir un menú de navegación, añadir imágenes, efectos gráficos y mucho más.
¿Estás preparados para hacer un sitio web desde cero? ¡Sigamos adelante!
Lo mejor para practicar es pensar un proyecto. Imagina una página que quieras crear, bosquéjala como
te gustaría, aunque algunas cosas no sepas como hacerlas. Después intenta llevarla a cabo y cuando te
encuentras con desafíos vas aprendiendo las cosas que te hacen falta, te vas a encontrar con CSS, quiza
con librerías tipo bootstrap, cuando quieras ponerle un comportamiento o animaciones con JavaScript
... y asi. No esperes a saber todo para comenzar tu proyecto... por que nunca vas a saber todo. Lo único
que falta saber para poder estar en la web es aprender el lenguaje de la web; HTML.
Para practicar, lo ideal es que montes un servidor web casero. Es mucho mas simple de lo que parece,
hay paquetes por Internet que integran un servidor web Apache, un interprete php y una motor de base
de datos MySql

3. ¿Para que todo eso? Pues porque en html aprenderás lo básico de "como hacer las páginas", pero solo
la parte "visible". Luego necesitarás php y mysql (hay otras soluciones, pero esta es la más popular)
para unir html con javascript, php y gestores de bases de datos. Las páginas modernas salvo pocas
excepciones no son "estáticas", sino dinámicas. La diferencia está precisamente en esos otros lenguajes
y la base de datos.
Por ejemplo, el paquete WAMP valdría perfectamente para muchas cosas.
Las páginas web.
El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi infinita.
Pero esta información debe estar ordenada de alguna forma de manera que sea posible encontrar lo que
se busca. La unidad básica donde está almacenada esta información son las páginas web.
Posiblemente el término página web sea el más utilizado en Internet, precisamente porque cuando se
navega por la red se hace a través de páginas web. Las páginas web son el soporte de la información en
la web.
Una de las características más importantes de las páginas web es que son hipertextuales. Esto quiere
decir que las páginas no son elementos aislados, sino que están unidas a otras mediante enlaces
hipertexto. Gracias a estos enlaces el navegante de Internet puede pulsar sobre un texto de una página
para navegar hasta otra página. Será cuestión del desarrollador de la página inicial decidir que palabras
o frases serán activas y a donde conducirá pulsar sobre estas.
Por otro lado, los componentes que caracterizan una página web son: imágenes, textos y otros
contenidos multimedia (sonido, video, etc.) Las secciones internas se encuentran enlazadas de manera
que el usuario puede navegar de una página a otra utilizando hipervínculos, un concepto de
interactividad surgido con el fenómeno Internet.
Actualmente se discute que el World Wide Web ya no es un sistema hipertexto sino hipermedia. Los
que defienden el cambio se apoyan en que aunque en sus orígenes el WWW constaba únicamente de
texto en la actualidad es un sistema principalmente gráfico y se puede hacer que las zonas activas sean,
no sólo texto, sino imágenes, videos, botones, etc; es decir cualquier elemento de una página. Aún así,
el término original no se ha extinguido todavía.
Los sitios web
Un sitio web es una localización en la web que contiene varias páginas web organizadas
jerárquicamente.
Cada sitio tiene una página de inicio que corresponde a la página principal, conocida en Inglés como
Home Page y cuyo nombre de fichero sería index.
Es la primera página que se visualiza cuando se accede a un sitio tecleando el nombre del dominio en la
barra del navegador.

4. Un sitio tiene generalmente más de una página web y su objetivo principal es ofrecer la información
que necesitan los usuarios y proporcionársela de manera que puedan asignarla fácilmente.
Elementos que componen una página web.
Una página web está compuesta por:
1. Texto.
2. Imágenes.
3. Hipervínculos.
4. Videos.
5. Animaciones.
6. Sonidos.
7. Formularios.
El texto es el elemento más significativo de cualquier sitio web porque los usuarios navegan por la web
fundamentalmente en busca de información expresada en hipertexto.
Imágenes: Aunque no debe abusar de las imágenes por el riesgo de aumentar el peso de la página y por
lo tanto, los tiempos de descarga. Las imágenes constituyen un elemento esencial para ofrecer
información visual del contenido y mostrar un diseño atractivo y personal.
Hipervínculos: Por sí misma, una página web no puede hacer mucho. La magia de verdad comienza
cuando relaciona varias página mediante enlaces.
Video: Mientras Internet es cada vez más asequible, confiable y veloz, los programas de edición de
video se hacen más cercanos a los usuarios. Ahora es más fácil realizar un video desde una cámara
digital o un teléfono móvil con cámara incorporada y que termine en la web para ponerlo al alcance de
todos.
Sonidos: Un elemento cada vez más importante. La comercialización de nuevos dispositivos digitales
móviles como el iPhone ha potencializado este elemento. Además de incorporar sonido en la página
web puede descargar de ellas archivos de audio para sus dispositivos móviles. El formato MP3 es el
más conocido y más usado por su calidad y nivel de compresión.
Formulario: Zona para introducir datos o comentarios en espacios vacíos para llenarse con alguna
finalidad. También se utiliza para referirse al conjunto de campos solicitados por un determinado
programa, los cuales se almacenan o reciben para su manipulación o uso posterior.
El éxito de un sitio depende de la forma en que se combinan contenidos, arquitectura del sitio, diseño e
interactividad; los cuales determinan en gran medida la rapidez con que se genera y ofrece la
información, y por supuesto el éxito de un sitio.
Estos deben garantizar que el sitio sea fácil de mantener, flexible para cambiar de tamaño y realizar
actualizaciones y atractivo visualmente para los usuarios, interesante para su audiencia, práctico para
realizar descargas rápidas y búsquedas efectivas; también sólidos técnicamente, sin vínculos rotos, ni
comportamientos inadecuados.

5. ¿Cómo se hace una página Web?
Cuando los diseñadores del WWW se hicieron esta pregunta decidieron que se debían cumplir, entre
otras, las siguientes características:
 La web tenía que ser distribuida: La información repartida en páginas no muy grandes
enlazadas entre sí.
 La web tenía que ser hipertextual y debía ser fácil para navegar por ella.
 Tenía que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de
trabajo...) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS, etc.)
 Debía ser dinámica: El proceso de cambiar y actualizar la información debía ser ágil y rápido.
Estas características son las que marcaron el diseño de todos los elementos del WWW incluido la
creación de páginas web. Como respuesta a todos estos requisitos se creo el lenguaje HTML.
Este lenguaje será el encargado de convertir un inocente archivo de texto inicial en una página web con
diferentes tipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes, formularios
interactivos, etc.

6. HTML.
HTML son las siglas 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 para 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, etc.
HTML 5 es la quinta revisión más importante que se hace al lenguaje HTML. En esta versión, se
introducen nuevas características para ayudar a los autores de aplicaciones Web, y se ha prestado
especial atención a la definición de claros criterios de conformidad para los agentes de usuario
(navegadores) en un esfuerzo por mejorar la interoperabilidad.
HTML5 se desarrolló para simplificar, especificar y organizar el código. Para lograr estos propósitos,
se añadieron algunos atributos y etiquetas y se integró HTML con CSS Javascript. Estas
incorporaciones y mejoras de versiones anteriores afectan no sólo a nuevos elementos, si no también a
como usamos los viejos.
La especificación actual de HTML 5 la podemos consultar en
(http://dev.w3.org/html5/spec/Overview.html). Podemos seguir los cambios que se hacen a la
especificación del HTML 5 en Twitter (http://twitter.com/HTML5). Los integrantes del grupo de
trabajo para definir las especificaciones del HTML 5 pertenecen a muchas empresas y los podemos ver
en (http://www.w3.org/2000/09/dbwg/details?group=40318&public=1).
Se pueden escribir páginas en HTML5 utilizando el mismo software que se utiliza para escribir páginas
HTML. No es necesario ningún programa especial para crear una página web. Gracias a ello se ha
conseguido que se puedan crear páginas con cualquier ordenador y sistema operativo. El código
HTML, como hemos adelantado, no es más que texto y por tanto lo único necesario para escribirlo es
un editor de texto como el que acompañan a todos los sistemas operativos: editTM en MS-DOS, block
de notas en Windows, viTM en UNIX, etc. Hay que tener en cuenta que deberemos guardar el archivo
en modo texto con la extensión .html.
ATENCIÓN: El World Wide Web es un sistema que diferencia las mayúsculas de las minúsculas. Es
un error común llamar a un archivo index.html y luego referirse a él como Index.html . Aunque en
nuestro ordenador puede funcionar al publicarlo seguramente no lo hará. Por esta razón es una norma
general usar siempre minúsculas para los nombres de los archivos html.
En realidad, la estructura básica de una página HTML5 es tan sencilla que se puede utilizar cualquier
editor web, para crearla, incluso si el editor web no está diseñado para HTML5.
A continuación algunos de los navegadores que soportan gran parte de HTML5:
 Internet Explorer 9 y versiones superiores
 Firefox 3.5 y versiones superiores
 Google Chrome 8 y versiones superiores
 Safari 4 y versiones superiores
 Opera 10.5 y versiones superiores

7. Existen alternativas que facilitan la creacion de páginas web. Son los editores HTML. Podemos dividir
estos editores en los grupos:
 Asistentes: Ayudan a crear el código HTML e incluyen plantillas de código prefabricadas, por
ejemplo HotDogTM (Window), HomeSiteTM (Windows), HTML EditorTM (Mac OS), QuantaTM
(Linux, KDE) o BluefishTM, (Linux, GNOME.)
 Conversores: Programas que permiten convertir a HTML, tales como Microsoft WordTM
, Quark
XPressTM
y PageMakerTM
.
 Editores WYSIWYG (What You See Is What You Get, lo que ves es lo que obtienes): Editores
que permiten crear páginas web sin escribir código HTML como si se tratase de un programa de
dibujo por ordenador. Algunos ejemplos de este tipo de editores son Adobe DreamweaverTM,
HotMetalTM o Microsoft FrontpageTM.
Tags, elementos y estructura de documentos HTML.
HTML significa "Hyper Text Markup Language", es decir "Lenguaje de marcado de hipertexto". Este
lenguaje describe una página web usando marcas o tags. A continuación vemos un ejemplo de código
fuente de una página Web o documento HTML:
<html>
<head>
<title>Hola Mundo</title>
</head>
<body>
<h1>Hola clase 2018</h1>
<p>Bienvenidas a nuestra primera <br/> web.</p>
</body>
</html>
El código HTML está compuesto por caracteres englobados dentro de paréntesis angulados "< >" - que
se llaman elementos o etiquetas.
Html5 contiene un número de etiquetas considerable. Es importante como recomendación: escribirlas
en minúsculas (excepto DOCTYPE), cerrar siempre las etiquetas, poner comillas en los atributos de las
etiquetas, no omitir las etiquetas básicas (html, head, body.)
Los archivos que contienen etiquetas html deben tener la extensión .html (aunque .htm se acepta
también). Hay que tener especial cuidado con los nombres de los ficheros, ya que los servidores web
son sensibles a minúsculas y mayúsculas.
Tag HTML.
Cada palabra rodeada por los símbolos "<" y ">" en el código fuente anterior es llamada tag. Existen 3
tipos de Tags:

8.  Tag de inicio o apertura. Ejemplo: <h1>
 Tag de fin o cierre. Ejemplo: </h1>
 Tag de inicio y cierre. Ejemplo: <br/>
Los elementos están compuestos, generalmente, por una etiqueta de inicio y una de cierre. La etiqueta
de cierre tiene una barra diagonal extra; "/>" Cada elemento informa al navegador sobre la información
contenida dentro de esas etiquetas.
Es decir las etiquetas están formadas por la siguiente estructura:
<NOMBRE_ETIQUETA>
O bien esta otra:
<NOMBRE_ETIQUETA>TEXTO</NOMBRE ETIQUETA>
Como vemos, la primera estructura está formada por una única instrucción y la segunda por dos: una
que marca el inicio de la etiqueta y otra que marca el final, con texto entre ambas.
Por ejemplo, para indicarle al navegador que queremos que pinte una línea horizontal debemos escribir:
<hr>
Así de sencillo.
Pero las etiquetas no se limitan a indicar ordenes, en ocasiones tienen parámetros. Por ejemplo la
etiqueta <hr> daría lugar a que el navegador dibuje una línea horizontal en la pantalla. Esta línea tiene
un grosor predeterminado y un ancho variable en función del tamaño de la ventana del navegador.
Sin embargo hay muchas formas de pintar una línea y sería deseable poder elegir detalles tales como la
anchura y el grosor que va a tener dicha línea. Para especificar este tipo de detalles se crearon los
atributos de las etiquetas. Este nuevo elemento se introduce en una etiqueta de la siguiente manera:
<etiqueta atributo="valor">
Es decir, en primer lugar ponemos el nombre de la etiqueta, después el nombre del atributo seguido por
un signo igual y posteriormente el valor que queramos darle a ese atributo encerrado entre comillas una
etiqueta puede tener tantos atributos como se deseen y en ocasiones son necesarios para que la etiqueta
tenga algún significado.
En nuestro ejemplo de la línea horizontal existe un atributo llamado SIZE, que permite controlar el
grosor de la línea que será dibujada en pantalla. El valor que toma el atributo size determina el número
de puntos de pantalla o pixeles que debe ocupar, en grosor, la línea. Por ejemplo:
<hr size=5>
En HTML no es necesario entrecomillar los valores de los atributos cuando están formados únicamente
por números [0-9], letras [a-z, A-Z], guiones y puntos. En todo caso es muy recomendable incluir las
comillas siempre.

9. Elemento HTML
El html es un conjunto de etiquetas que se usan para formatear el contenido de una página web. Hay
una etiqueta que se pone al principio del texto a formatear y otra al final (con una barra /) y estas tienen
ciertos atributos: <etiqueta atributo="valor">Texto</etiqueta>. Los navegadores interpretan esas
etiquetas y visualizan el contenido transformado de la página web.
Un tag de inicio y su correspondiente tag de fin componen un elemento HTML. Ejemplo: <title>Hola
mundo</title>
Lo que esta entre un tag de inicio y su correspondiente tag de fin es el contenido del tag. Un tag de
inicio y cierre por si solo compone un elemento HTML. Ejemplo: <br/>
Pronto nos daremos cuenta de la sencillez de este lenguaje lo que le convierte en un lenguaje muy fácil
de aprender y que nos permitirá crear páginas con mayor facilidad aún.
Primeros pasos con HTML
Conocidas ya las principales características de HTML estamos listos para aprender sus principales
etiquetas y para crear nuestra primera página.
Estructura básica de un documento HTML
El primer tag HTML de una web debería ser <html> y el último </html>. En otras palabras toda la
pagina web debe estar contenida en un elemento HTML. Dentro del elemento HTML existen el
elemento header que contendrá información de configuración y el elemento body que contendrá todo
lo que es visible en nuestra página.
El elemento title define el titulo de la página que podemos ver en la pestaña superior del navegador
usado. Dentro de body no solo está la información a ser representada en la página web sino que existen
marcadores o tags que indican como representar la información.
Lista de elementos HTML en orden alfabético:
Etiqueta Descripción
<!--...-->
Define un comentario. Cualquier información que se ponga dentro de las etiquetas <!--
y --> dentro del cuerpo de la página, será ignorados por el navegador.
<!DOCTYPE>Define el tipo de documento
<a> Principalmente utilizado como hipervínculo.
<abbr> Define una abreviación
<acronym>
Permite a los autores indicar claramente una sequencia de caracteres que componen un
acrónimo o abreviación de una palabra. No soportado en HTML5.

10. <address> Define información de contacto del propietario del documento
<applet>
Esta etiqueta define un applet embebido dentro del documento. No soportado en
HTML5. Declarado en desuso en HTML 4.01.
<area> Esta etiqueta define un área dentro de un mapa de imagen
<article>*
Define una composición independiente dentro de un documento, página, aplicación o
web, que puede ser distribuida independientemente o reutilizada.
<aside>* Define contenido secundario al contenido de la página.
<audio>*
Se utiliza para representar contenido de audio en los documentos. Añadido en HTML5,
puede contener diferentes fuentes de audio, representadas utilizando el atributo "src" o
el elemento <source>.
<b> Este elemento indica que el texto englobado tiene que ser mostrado en negrita.
<base>
Define cuál es la URL absoluta para todos aquellos enlaces que sean relativos en la
página
<basefont>
Especifica un color, tamaño y fuente por defecto, para todo el texto del documento. No
soportado en HTML5. Declarado en desuso en HTML 4.01
<bdi>* Aisla una parte del texto que puede tener un formato diferente del texto principal.
<bdo> Este elemento es utilizado para sobreescribir la dirección del texto.
<big> Este elemento define texto grande. No soportado en HTML5.
<blockquote>
Este elemento se utiliza para designar una cita de texto larga. Normalmente, se puede
reconocer porque está identado.
<body> Este elemento es utilizado para definir el cuerpo del documento.
<br> Define un salto de línea.
<canvas>* Utilizada para dibujar gráficos, mediante scripts. (normalmente JavaScript)
<caption> Defines el título de una tabla
<center>
Este elemento hace que el texto englobado esté centrado dentro de los márgenes. No
soportado en HTML5. Declarado en desuso en HTML 4.01.
<cite> Especifica una cita o referecia a otro lugar
<code> Indica que el texto englobado es código de programación.
<col> Define una columna dentro de una tabla y se utiliza para agrupar y alinear.
<colgroup> Especifica un grupo de una o más columnas de una tabla para darles formato.
<command>* Define un botón comando al que el usuario puede llamar.
<datalist>* Especifica una lista de opciones predefinidas para una caja de texto input
<dd> Define una descripción de un item en una lista de definición
<del> Define texto que ha sido eliminado de un documento.
<details>* Define detalles adicionales que el usuario puede ver o esconder.
<dfn> Define un término de una definición.
<dialog>* Define una caja de diálogo o ventana.
<dir>
Define una lista directorio. No soportado en HTML5. Declarado en desuso en HTML
4.01.
<div> Define una sección en un documento.

11. <dl> Define una lista de definición.
<dt> Define un término (un item) dentro de una lista de definición.
<em> Define énfasis en un texto.
<embed>* Se utiliza para declarar un contenedor para una aplicación externa (no- HTML)
<fieldset> Agrupa elementos relacionados en un formulario.
<figcaption>* Define un título para un elemento <figure>
<figure>* Especifica contenido independiente.
<font> Define fuente, color y tamaño para un texto. No soportado en HTML5.
<footer>* Define un footer para un documento o sección.
<form> Define un formulario HTML para datos del usuario.
<frame> Define una ventana dentro de un frameset. No soportado en HTML5.
<frameset> Define un conjunto de "frames". No soportado en HTML5.
<h1> -<h6> Define encabezados en HTML
<head> Define información sobre el documento
<header>* Define un encabezado para un documento o sección
<hgroup> Agrupa elementos del encabezado (<h1> -<h6>)
<hr> Define un cambio temático en el contenido
<html> Define la raiz de un documento HTML
<i> Este elemento se usa para representar un texto con un estilo de fuente en itálica
<iframe> Define un documento HTML dentro de otro documento HTML
<img> Define una imagen
<input> Este elemento se utiliza para ingresar datos por parte del usuario
<ins> Define el texto que ha sido insertado dentro del documento
<kbd> Este elemento se utiliza para avisar al usuario que tiene que introducir datos por teclado
<keygen>* Define un campo generador de claves en formularios
<label> Define una etiqueta para un elemento <input>
<legend> Este elemento define un título para un elemento <fieldset>, <figure> o <details>
<li> Define un item de una lista
<link>
Este elemento define la relación entre el documento y un recurso externo (normalmente
utilizado con hojas de estilo)
<main>* Especifica el contenido principal del documento
<map> Define un mapa de imagen en el lado del cliente
<mark>* Define un texto resaltado en el documento
<menu> Define un menu
<meta> Define metadata de un documento HTML
<meter>* Define una medida escalar dentro de un rango determinado
<nav>* Define links de navegación
<noframes>
Especifica el contenido alternativo para los navegadores que no soportan frames. No
soportado por HTML5.

12. <noscript> Especifica un contenido alternativo para navegadores que no soportan scripts.
<object> Define un objeto embebido
<ol> Este elemento especifica una lista ordenada
<optgroup> Especifica un grupo de opciones en una lista desplegable.
<option> Este elemento define una opción en una lista desplegable.
<output>* Especifica el resultado de un cálculo
<p> Especifica un párrafo
<param> Este elemento especifica un parámetro para un objeto
<pre> Define un texto con formato previo
<progress>* Representa el progreso de una tarea
<q> Define una cita de texto corta(en una línea)
<rp>* Define que mostrar en los navegadores que no soportan anotaciones ruby
<rt>* Este elemento define la pronunciación de caracteres (para tipografía del este asiático)
<ruby>* Define una anotación ruby (para tipografía del este asiático)
<s> Esta etiqueta define texto con un estilo de fuente tachado
<samp> Muestra un mensaje de un programa o script
<script> Define un script dentro del documento
<section>* Define una sección en un documento
<select>
Muestra varias opciones al usuario y permite que elija entre ellas una o más en una lista
desplegable
<small> Se utiliza para presentar un texto con un estilo de fuente pequeña
<source>* Define las fuentes para los elementos multimedia como video y audio.
<span>
Agrupa varios elementos en línea seguidos dentro de un mismo bloque, para después
darles formato con la hoja de estilo.
<strike>
Este elemento se utiliza para representar un texto con un estilo de fuente tachado. No
soportado en HTML5. Declarado en desuso en HTML 4.01.
<strong> Se utiliza para representar texto importante
<style> Este elemento define el estilo del documento
<sub> Representa un subíndice
<summary>* Define un encabezado para el elemento <details>
<sup> Representa un superíndice
<table> Define una tabla
<tbody> Agrupa el contenido del body de una tabla
<td> Define una célda de una tabla
<textarea> Este elemento especifica una área para escribir texto
<tfoot> Agrupa el contenido del footer de una tabla
<th> Representa la celda del encabezado de una tabla
<thead> Agrupa el contenido del encabezado de una tabla
<time>* Define la fecha y hora

13. <title> Define el título de un documento
<tr> Define una fila dentro de una tabla
<track>*
Define determinadas características para las pistas de texto de elementos multimedia
como; vídeos o audios.
<tt> Define texto con un estilo de fuente en teletipo. No soportado en HTML5.
<u> Define texto con un estilo de fuente subrayado.
<ul> Define una lista no ordenada
<var> Define una variable
<video>* Define un video o película
<wbr>* Define donde un texto se puede romper para cambios de línea
Elementos HTML ordenados por función:
Esto nos ayudará a saber que elemento utilizar en cada caso para poder facilitar el desarrollo de páginas
web compatibles con distintos navegadores y plataformas.
Básicos:
Etiqueta Descripción
<!--...-->
Define un comentario. Cualquier información que se ponga dentro de las etiquetas <!--
y --> dentro del cuerpo de la página, será ignorados por el navegador.
<!DOCTYPE>Define el tipo de documento
<html> Define la raiz de un documento HTML
<title> Define el título de un documento
<body> Este elemento es utilizado para definir el cuerpo del documento.
<h1> -<h6> Define encabezados en HTML
<p> Especifica un párrafo
<br> Define un salto de línea.
<hr> Define un cambio temático en el contenido
Secciones o estilo:
Etiqueta Descripción
<style> Este elemento define el estilo del documento
<div> Define una sección en un documento.
<span>
Agrupa varios elementos en línea seguidos dentro de un mismo bloque, para después
darles formato con la hoja de estilo.
<header>* Define un encabezado para un documento o sección

14. <footer>* Define un footer para un documento o sección.
<section>* Define una sección en un documento
<article>*
Define una composición independiente dentro de un documento, página, aplicación o
web, que puede ser distribuida independientemente o reutilizada.
<aside>* Define contenido secundario al contenido de la página.
<details>* Define detalles adicionales que el usuario puede ver o esconder.
<dialog>* Define una caja de diálogo o ventana.
<summary>* Define un encabezado para el elemento <details>
Información meta:
Etiqueta Descripción
<head> Define información sobre el documento
<meta> Define metadata de un documento HTML
<base>
Define cuál es la URL absoluta para todos aquellos enlaces que sean relativos en la
página
<basefont>
Especifica un color, tamaño y fuente por defecto, para todo el texto del documento. No
soportado en HTML5. Declarado en desuso en HTML 4.01
Formato:
Etiqueta Descripción
<acronym>
Permite a los autores indicar claramente una sequencia de caracteres que componen un
acrónimo o abreviación de una palabra. No soportado en HTML5.
<abbr> Define una abreviación
<address> Define información de contacto del propietario del documento
<b> Este elemento indica que el texto englobado tiene que ser mostrado en negrita.
<bdi>* Aisla una parte del texto que puede tener un formato diferente del texto principal.
<bdo> Este elemento es utilizado para sobreescribir la dirección del texto.
<big> Este elemento define texto grande. No soportado en HTML5.
<blockquote>
Este elemento se utiliza para designar una cita de texto larga. Normalmente, se puede
reconocer porque está identado.
<center>
Este elemento hace que el texto englobado esté centrado dentro de los márgenes. No
soportado en HTML5. Declarado en desuso en HTML 4.01.
<cite> Especifica una cita o referecia a otro lugar
<code> Indica que el texto englobado es código de programación.
<del> Define texto que ha sido eliminado de un documento.

15. <dfn> Define un término de una definición.
<em> Define énfasis en un texto.
<font> Define fuente, color y tamaño para un texto. No soportado en HTML5.
<i> Este elemento se usa para representar un texto con un estilo de fuente en itálica
<ins> Define el texto que ha sido insertado dentro del documento
<kbd> Este elemento se utiliza para avisar al usuario que tiene que introducir datos por teclado
<mark>* Define un texto resaltado en el documento
<meter>* Define una medida escalar dentro de un rango determinado
<pre> Define un texto con formato previo
<progress>* Representa el progreso de una tarea
<q> Define una cita de texto corta(en una línea)
<rp>* Define que mostrar en los navegadores que no soportan anotaciones ruby
<rt>* Este elemento define la pronunciación de caracteres (para tipografía del este asiático)
<ruby>* Define una anotación ruby (para tipografía del este asiático)
<s> Esta etiqueta define texto con un estilo de fuente tachado
<samp> Muestra un mensaje de un programa o script
<small> Se utiliza para presentar un texto con un estilo de fuente pequeña
<strike>
Este elemento se utiliza para representar un texto con un estilo de fuente tachado. No
soportado en HTML5. Declarado en desuso en HTML 4.01.
<strong> Se utiliza para representar texto importante
<sub> Representa un subíndice
<time>* Define la fecha y hora
<tt> Define texto con un estilo de fuente en teletipo. No soportado en HTML5.
<u> Define texto con un estilo de fuente subrayado.
<ul> Define una lista no ordenada
<var> Define una variable
<wbr>* Define donde un texto se puede romper para cambios de línea
Formularios:
Etiqueta Descripción
<form> Define un formulario HTML para datos del usuario.
<input> Este elemento se utiliza para ingresar datos por parte del usuario
<textarea> Este elemento especifica una área para escribir texto
<button> Se utiliza para crear botones de un formulario
<select>
Muestra varias opciones al usuario y permite que elija entre ellas una o más en una lista
desplegable

16. <optgroup> Especifica un grupo de opciones en una lista desplegable.
<option> Este elemento define una opción en una lista desplegable.
<label> Define una etiqueta para un elemento <input>
<fieldset> Agrupa elementos relacionados en un formulario.
<legend> Este elemento define un título para un elemento <fieldset>, <figure> o <details>
<datalist>* Especifica una lista de opciones predefinidas para una caja de texto input
<keygen>* Define un campo generador de claves en formularios
<output>* Especifica el resultado de un cálculo
Tablas:
Etiqueta Descripción
<table> Define una tabla
<caption> Defines el título de una tabla
<th> Representa la celda del encabezado de una tabla
<tr> Define una fila dentro de una tabla
<td> Define una celda de una tabla
<thead> Agrupa el contenido del encabezado de una tabla
<tbody> Agrupa el contenido del body de una tabla
<tfoot> Agrupa el contenido del footer de una tabla
<col> Define una columna dentro de una tabla y se utiliza para agrupar y alinear.
<colgroup> Especifica un grupo de una o más columnas de una tabla para darles formato.
Listas:
Etiqueta Descripción
<u> Define texto con un estilo de fuente subrayado.
<ol> Este elemento especifica una lista ordenada
<li> Define un item de una lista
<dir>
Define una lista directorio. No soportado en HTML5. Declarado en desuso en HTML
4.01.
<dl> Define una lista de definición.
<dt> Define un término (un item) dentro de una lista de definición.
<dd> Define una descripción de un término en una lista descriptiva
<menu> Define un menu
<command>* Define un botón comando al que el usuario puede llamar.

17. Enlaces
Etiqueta Descripción
<a> Principalmente utilizado como hipervínculo.
<link>
Este elemento define la relación entre el documento y un recurso externo (normalmente
utilizado con hojas de estilo)
<nav>* Define links de navegación
Imágenes:
Etiqueta Descripción
<img> Define una imagen
<map> Define un mapa de imagen en el lado del cliente
<area> Esta etiqueta define un área dentro de un mapa de imagen
<canvas>* Utilizada para dibujar gráficos, mediante scripts. (normalmente JavaScript)
<figcaption>* Define un título para un elemento <figure>
<figure>* Especifica contenido independiente.
Audios y videos:
Etiqueta Descripción
<audio>*
Se utiliza para representar contenido de audio en los documentos. Añadido en HTML5,
puede contener diferentes fuentes de audio, representadas utilizando el atributo "src" o el
elemento <source>.
<source>* Define las fuentes para los elementos multimedia como video y audio.
<track>*
Define determinadas características para las pistas de texto de elementos multimedia
como; vídeos o audios.
<video>* Define un video o película
Marcos o frames:
Etiqueta Descripción
<frame> Define una ventana dentro de un frameset. No soportado en HTML5.
<frameset> Define un conjunto de "frames". No soportado en HTML5.
<noframes>
Especifica el contenido alternativo para los navegadores que no soportan frames. No
soportado por HTML5.
<iframe> Define un documento HTML dentro de otro documento HTML

18. Programación:
Etiqueta Descripción
<script> Define un script dentro del documento
<noscript> Especifica un contenido alternativo para navegadores que no soportan scripts.
<applet>
Esta etiqueta define un applet embebido dentro del documento. No soportado en
HTML5. Declarado en desuso en HTML 4.01.
<embed>* Se utiliza para declarar un contenedor para una aplicación externa (no- HTML)
<object> Define un objeto embebido
<param> Este elemento especifica un parámetro para un objeto
* Etiqueta añadida en HTML5.
DOCTYPE.
Es la declaración del tipo de documento (DTD Document Type Declaration), esta sección se ubica en
la primera línea del archivo HTML, es decir antes de la marca html. Ahora con el HTML 5 se
simplifica esta sección con la siguiente sintaxis:
<!DOCTYPE HTML>
Es importante agregar el DOCTYPE, de esta forma el navegador puede saber que estamos utilizando la
especificación del HTML 5. Esta línea deberá ser la primera línea del documento, sin espacios ni líneas
previas. Esto es una manera de activar el modo estándar y forzar a los navegadores a interpretar el
HTML5 siempre que sea posible, o a ignorarlo cuando no lo sea.
Ejemplo de uso de DOCTYPE con HTML 5.
<!DOCTYPE HTML>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
</head>
<body>
<p>Si vemos el código fuente de esta página veremos la forma de declarar el DOCTYPE en
HTML5.</p>
</body>
</html>

19. <html>
Después de declarar el tipo de documento, se construye la estructura del árbol con HTML. El elemento
raiz del árbol es el elemento <html>. Deberemos especificar que el archivo de texto que estamos
escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin de la etiqueta
<html> al principio y al final de la página respectivamente. Este elemento engloba todo el código
HTML.
<!DOCTYPE html>
<html lang="es">
</html>
El atributo lang en la etiqueta de inicio <html> es el único atributo que debemos especificar en
HTML5. Este atributo define el lenguaje del contenido del documento que estamos creando - en este
caso, es para Español.
HTML5 es muy flexible con respecto a la estructura y los elementos utilizados en su desarrollo. El
elemento <html> puede ser incluido sin atributos o no ser incluido.
Sin embargo, por compatiblidad y otras razones, se recomienda seguir unas reglas básicas, siguiendo
un manual de buenas prácticas.
El código de la página esta formado a su vez por dos grandes bloques, la cabecera y el cuerpo. La
cabecera de la página está delimitada por las instrucciones de inicio y fin de la etiqueta head. Estas
instrucciones deben estar dentro de la etiqueta HTML.
<head>
Sigamos con la construcción de nuestras páginas. El código HTML incluido en las etiquetas <html>
tiene que estar dividido en dos secciones principales. Como ya ocurría en versiones anteriores de
HTML, la primera sección es el "head" y la segunda el "body". El siguiente paso, por tanto, es crear
dos secciones en el código, utilizando esos dos elementos; <head> y <body>.
En la cabecera de la página se introduce toda aquella información que afectará a toda la página. El
elemento <head> va en primer lugar, y como el resto de los elementos estructurales, tiene un tag de
apertura y otro de cierre.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
</html>

20. El "tag" no ha cambiado con respecto a otras versiones y su función es la misma. Dentro de los "tags"
<head>, definiremos el título de nuestra página, declararemos la codificación de caracteres,
incluiremos cualquier información general que queramos sobre el documento e incorporaremos
archivos externos con los estilos, scripts o incluso imágenes necesarias para mostrar la página.
Es importante resaltar que nada de lo que se ponga en la cabecera de la página será mostrado en la zona
del navegador dedicada a mostrar el contenido. A excepción del título y algunos iconos, el resto de la
información incluida en el documento dentro de las etiquetas <head> no será visible.
<body>
La siguiente sección que forma parte de la organización principal del documento HTML es el "body".
Este "cuerpo" es la parte visible del documento y viene especificado con la etiqueta <body>; el cuerpo
es el siguiente gran bloque de nuestro documento HTML. En su interior introduciremos todos aquellos
elementos de los que queremos que conste nuestra página como pueden ser texto, imágenes, tablas, etc.
Esta etiqueta no ha cambiado con respecto a las versiones anteriores de HTML:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
NOTA: Es posible que aunque no incluyamos las etiquetas html o body nuestras páginas sean
visualizadas con algunos navegadores. Sin embargo no debemos confiarnos ya que lo más seguro es
que con el resto de navegadores no se vean bien. Por esta razón es muy recomendable usar ambas
etiquetas tal y como se ha descrito.
<meta>
A continuación vamos a desarrollar la cabecera del documento. Existen algunas modificaciones e
innovaciones dentro de esta sección, y una de ellas es la etiqueta que define la codificación de los
caracteres del documento. Es la etiqueta meta y especifica como se debe presentar el texto dentro de la
pantalla.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>

21. La modificación para este elemento de HTML5, es como en muchos casos, una simplificación. La
etiqueta meta nueva para la codificación de caracteres es más corta y más simple. Igualmente, se puede
cambiar utf-8 por la codificación que se prefiera, y se pueden añadir otras etiquetas meta como
"description" o "keywords", tal y como se ve a continuación:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Esto es un ejemplo de HTML5">
<meta name="keywords" content="HTML5">
</head>
<body>
</body>
</html>
Nota: La etiqueta <meta> especifica el tipo y el atributo content declara su valor, pero ninguno de
estos valores serán mostrados en la pantalla. En HTML5, no es necesario poner una barra de cierre,
pero se recomienda por razones de compatibilidad.
<title>
La etiqueta <title>, especifica el título del documento y no hay nada nuevo en HTML5.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Esto es un ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>Título del documento</title>
</head>
<body>
</body>
</html>
Cuando un usuario vea nuestra página y decida incluirla en su lista de webs preferidos con la opción
agregar a favoritos, añadirá el nombre que le hemos dado a nuestra página con <title>. Aunque el
nombre con el que se almacena un Favorito puede ser cambiado por el usuario, si hemos puesto un
buen título, lo suficientemente descriptivo a cada una de nuestras páginas le evitaremos esa molestia.
Nota: Normalmente, este texto es mostrado por los navegadores en la parte superior de la ventana.
<link>

22. Otro elemento importante que se incluye dentro de la cabecera es <link>. Este elemento se utiliza para
incorporar estilos, scripts, imágenes o iconos de archivos externos. Uno de los usos más comunes de
<link>, es insertar un archivo CSS externo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Esto es un ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>Título del documento</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
En HTML5, ya no hay que especificar el tipo de hoja de estilo que estamos insertando, por lo que el
atributo type ha sido eliminado.
Solamente necesitamos dos atributos para incluir nuestro archivo de estilos: rel y href. El atributo rel
se refiere a la relación entre el documento y el archivo que estamos incluyendo. En este caso tiene el
valor= "stylesheet", lo que le indica al navegador que el archivo styles.css es un archivo CSS con
estilos necesarios para mostrar la página.
Nota: Una hoja de estilos es un conjunto de reglas de formato que nos ayuda a cambiar la presentación
de nuestro documento - por ejemplo, el tamaño o el color del texto. Sin estas reglas, el texto y otros
elemento se mostrarán en la pantalla utilizando los estilos estándares suministrados por los navegadores
(tamaño y colores por defecto.)
Estructura del cuerpo- HTML5
La estructura del cuerpo (el código entre los tags <body>) generará la parte visible de nuestro
documento. Será el código que genere nuestra página web. HTML ofrece diferentes formas para
construir y organizar la información en el cuerpo del documento.
Uno de los primeros elementos que ofrece HTML para este propósito es <table>. Las tablas, aunque no
fueran ideadas para eso, permiten organizar data, texto, imágenes dentro de filas y columnas.

23. Con el tiempo y gradualmente, otros elementos han reemplazado la función de las tablas, aportando
diferentes maneras de hacer lo mismo con menos código y de una manera más rápida, facilitando la
creación, portabilidad y mantenimiento.
El elemento <div> empezó extenderse y dominar este campo. Sin embargo, el elemento <div> o
<table>, no suministran mucha información sobre las partes del cuerpo que están representando.
Cualquier cosa puede ir dentro de las etiquetas de apertura y cierre <div>, desde imágenes, menúes,
textos, enlaces, scripts, formularios, etc.
Para los usuarios, saber que hay dentro de las etiquetas no es importante, pero para los navegadores es
crucial saberlo para hacer la correcta interpretación de los documentos.
Teniendo esto en cuenta, HTML5 ha incorporado nuevos elementos que ayudan a identificar cada parte
del documento y a organizar el cuerpo.
Como utilizar estos nuevos elementos, es cosa nuestra, pero las palabras clave seleccionadas para cada
uno, ayudará a saber cuál es su función.
Normalmente una página web o aplicación web está dividida en diferentes áreas visuales para poder
mejorar la experiencia del usuario y su interactividad. Las palabras clave que representan cada
elemento nuevo de HTML5, están relacionadas a estas áreas visuales.
Organización
Cada diseñador crea sus propios diseños, pero en general podremos identificar dentro de cada página
web las siguientes secciones:
Cabecera
Barra de navegación

24. Información principal Barra lateral
Institucional
 Arriba del todo, tenemos la cabecera, que es el lugar donde solemos tener el logo, nombre, y
pequeñas descripciones de nuestra página web.
 Debajo de la cabecera, podemos ver la barra de navegación, en la que casi cualquier
desarrollador ofrece un menú o lista de enlaces para navegar por el sitio web. Los usuarios son
llevados desde esta barra a diferentes páginas o documento, normalmente en el mismo sitio
web.
El contenido más importante de la página se localiza normalmente en el medio de la
distribución. Esta sección muestra la información importante y links. Casi siempre está dividida
en varias filas y columnas.
 La sección de información principal, podría tener una lista de artículos, descripciones de
productos, entradas de blog y cualquier otra información importante.
 La barra lateral podría tener por ejemplo, una lista de enlaces apuntando a cada uno de estos
elementos.
 Abajo del todo, tenemos una barra llamada barra institucional. Se llama así porque es el área
de la página donde tenemos información general del sitio web, el autor o la compañía, además
de enlaces con referencia a términos y condiciones, mapas e información adicional que el
desarrollador cree importante compartir.
La barra institucional es el complemento de la cabecera, y es considerada como una parte
esencial de la estructura de la página.

25. Elementos HTML semánticos.
El HTML 5 introduce una serie de elementos estructurales que facilitarán tanto el desarrollo de las
páginas como también el análisis de las mismas por buscadores.
Los elementos de HTML 5 que ayudan a estructurar la parte semántica de la página son:
header: El elemento header debe utilizarse para marcar la cabecera de una página (contiene el
logotipo del sitio, una imagen, un cuadro de búsqueda etc)
El elemento header puede estar anidado en otras secciones de la página (es decir que no solo se
utiliza para la cabecera de la página)
Otra opción hubiera sido crear un único párrafo e insertar un salto de línea tras la primera frase:
<p>
Estaba internándose en lo desconocido.
<br>
Durante todo el trayecto hasta
Woodfield no dejó de pensar en los aspectos económicos, con el
temor de estar cometiendo...
</p>
nav: El elemento nav representa una parte de una página que enlaza a otras páginas o partes
dentro de la página. Es una sección con enlaces de navegación.
No todos los grupos de enlaces en una página deben ser agrupados en un elemento nav.
únicamente las secciones que consisten en bloques de navegación más importantes son
adecuados para el elemento de navegación.
section: El elemento section representa un documento genérico o de la sección de aplicación.
Una sección, en este contexto, es una agrupación temática de los contenidos. Puede ser un
capítulo, una sección de un capítulo o básicamente cualquier cosa que incluya su propio
encabezado.
Una página de inicio de un sitio Web puede ser dividida en secciones para una introducción,
noticias, información de contacto etc.
footer: El elemento footer se utiliza para indicar el pié de la página o de una sección. Un pie de
página contiene información general acerca de su sección el autor, enlaces a documentos
relacionados, datos de derechos de autor etc.
aside: El elemento aside representa una nota, un consejo, una explicación. Esta área son
representados a menudo como barras laterales en la revistas impresa.
El elemento puede ser utilizado para efectos de atracción, como las comillas tipográficas o
barras laterales, para la publicidad, por grupos de elementos de navegación, y por otro
contenido que se considera por separado del contenido principal de la página.

26. article: El elemento article representa una entrada independiente en un blog, revista, periódico
etc.
Cuando se anidan los elementos article, los artículos internos están relacionados con el
contenido del artículo exterior. Por ejemplo, una entrada de blog en un sitio que acepta
comentarios, el elemento article principal agrupa el artículo propiamente dicho y otro bloque
article anidado con los comentarios de los usuario.
Ejemplo de página añadiendo estos elementos semánticos:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Elementos semánticos del HTML5</title>
</head>
<body>
<header>
<h1>Encabezado de la página</h1>
</header>
<nav>
<p>enlaces de navegación</p>
</nav>
<section>
<p>Sección 1</p>
</section>
<section>
<p>Sección 2</p>
</section>
<aside>
<p>Publicidad</p>
</aside>
<footer>
<p>Pié de página</p>
</footer>
</body>
</html>
Estructura del cuerpo en HTML5. Etiqueta <header>
HTML5 tiene una estructura y un diseño básicos y aporta nuevos elementos para diferenciarlos y
declararlos. Con ello podemos informar al navegador, la función de cada sección.
A continuación tenemos una representación visual de la organización de las secciones utilizando las
etiquetas HTML5. La primera de estas etiquetas es <header>:

27. <header></header>
<nav></nav>
<section></section> <aside></aside>
<footer></footer>
<header>
Uno de los nuevos elementos incorporados en HTML5 es <header>. No debe ser confundido con la
etiqueta <head>, que hemos utilizado anteriormente.
De la misma manera que la etiqueta <head>, la etiqueta <header> aporta información introductoria
(como títulos, subtítulos, logos....), pero en otro ámbito.
Mientras que la etiqueta <head> tiene la función de suministrar información sobre todo el documento,
la etiqueta <header> aporta información del cuerpo del documento o de alguna sección dentro del
cuerpo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">

28. <meta name="keywords" content="HTML5">
<title>Bienvenidos</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Hola mundo</h1>
</header>
</body>
</html>
En el código, vemos que definimos el título de la página web, utilizando la etiqueta <header>.
Recuerde que este título no es el mismo que el título general del documento definido previamente en el
<head>.
La inserción del elemento <header> representa el principio del cuerpo y de la parte visible del
documento.
Nota: El elemento <h1> es un elemento de HTML utilizado para definir un títular. El número indica
la importancia del titular y su contenido. El elemento <h1> es el de mayor importancia y <h6> es el de
menor, por lo que el <h1> será utilizado para mostrar el título principal y el resto para títulos
secundarios.
Estructura del cuerpo en HTML5. Etiqueta <nav>
HTML5 tiene una estructura y un diseño básicos y aporta nuevos elementos para diferenciarlos y
declararlos. Con ello podemos informar al navegador, la función de cada sección.
A continuación tenemos una representación visual de la organización de las secciones utilizando las
etiquetas HTML5. Vamos aprender sobre la primera de estas etiquetas, <nav>;
<header></header>
<nav></nav>

29. <section></section> <aside></aside>
<footer></footer>
<nav>
La siguiente sección a explicar es la barra de navegación. Esta es generada en HTML5 con la etiqueta
<nav>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>Bienvenidos</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Lenguajes para la web</h1>
</header>
<nav>
<ul>
<li>Lenguaje HTML</li>
<li>Lenguaje CSS</li>
<li>Lenguaje JavaScript</li>
<li>Lenguaje XML</li>
<li>Lenguaje PHP</li>
</ul>

30. </nav>
</body>
</html>
Como vemos en el código anterior, el elemento <nav> se encuentra dentro de las etiquetas <body>,
pero después de las etiquetas de cierre de header (</header), no entre las etiquetas <header>. Esto es
porque el <nav> no forma parte del header, si no que es una nueva sección.
HTML5 es muy versátil y nos suministra los parámetros y elementos básicos con los que podemos
trabajar. Como utilizar esos elementos para crear nuestra estructura y el orden que escojamos es una
decisión nuestra.
Un ejemplo de esta versatilidad es la etiqueta <nav>, que podemos insertar o bien dentro del elemento
<header> o bien dentro de cualquier otra sección del cuerpo. Igualmente, hay que tener en cuenta, que
estas etiquetas nuevas se han creado para proveer a los navegadores con más información y así ayudar
a cualquier programa nuevo o dispositivo del mercado a identificar las partes más relevantes del
documento.
Para mantener nuestro código portable y legible, recomendamos seguir los estándares y mantenerlo lo
más ordenado posible. El elemento <nav> está hecho para incluir ayudas a la navegación como el
menú principal o los bloques principales de navegación y se debería utilizar para este propósito.
Nota: En este ejemplo, haremos una lista con las opciones de menú de nuestra página web. Entre las
etiquetas <nav>, existen dos elementos que se utilizan para crear una lista. Utilizamos el elemento
<ul> para definir la lista. Dentro de estas etiquetas <ul> vemos varias etiquetas <li> con diferente
texto, que representan las opciones de menú. Estas etiquetas <li>, se utilizan para definir cada elemento
de la lista.
Estructura del cuerpo en HTML5. Etiqueta <section>
HTML5 tiene una estructura y un diseño básicos y aporta nuevos elementos para diferenciarlos y
declararlos. Con ello podemos informar al navegador, la función de cada sección.
A continuación tenemos una representación visual de la organización de las secciones utilizando las
etiquetas HTML5. Vamos aprender sobre la etiqueta <section>:
<header></header>
<nav></nav>

31. <section></section> <aside></aside>
<footer></footer>
<section>
Siguiendo nuestro diseño estandar tenemos la barra de contenido principal que contiene la
información más relevante del documento que puede disponerse, por ejemplo, en varios bloques o
columnas.
Dado que el propósito de estas columnas o bloques es más general, el elemento HTML5 que lo
especifica se llama simplemente <section>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>Bienvenidos</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Lenguajes para la web</h1>
</header>
<nav>
<ul>
<li>Lenguaje HTML</li>
<li>Lenguaje CSS</li>

32. <li>Lenguaje JavaScript</li>
<li>Lenguaje XML</li>
<li>Lenguaje PHP</li>
</ul>
</nav>
<section>
Tutoriales para la web
</section>
</body>
</html>
Igual que la barra de navegación, la barra de contenido principal es una sección separada del resto.
Por lo tanto esta sección se localiza debajo de la etiqueta de cierre </nav>.
IMPORTANTE: Las etiquetas que representan cada sección del documento aparecen listadas dentro
del código, una encima de la otra, pero en las páginas web algunas de estas secciones aparecerán una al
lado de la otra. (Por ejemplo las columnas de Contenido principal y la Barra lateral.)
En HTML5, la presentación en pantalla se delega a CSS. El diseño se llevará a cabo asignando un
estilo CSS a cada elemento.
Estructura del cuerpo en HTML5. Etiqueta <aside>
HTML5 tiene una estructura y un diseño básicos y aporta nuevos elementos para diferenciarlos y
declararlos. Con ello podemos informar al navegador, la función de cada sección.
A continuación tenemos una representación visual de la organización de las secciones utilizando las
etiquetas HTML5.
<header></header>
<nav></nav>

33. <section></section> <aside></aside>
<footer></footer>
<aside>
En una distribución estándar de una página web, la barra lateral está situada al lado de la barra de
contenido principal. Es una columna o sección que normalmente contiene datos relacionados con el
contenido principal pero con una relevancia o importancia menor.
En el diseño estándar de un blog, la barra lateral contiene una lista de enlaces. La información dentro
de esta barra está relacionada con el contenido principal de la página pero no es relevante por si sola.
Siguiendo con el ejemplo del blog, podemos decir que las entradas del blog son importantes, pero los
enlaces y resúmenes de esas entradas son sólo una ayuda navegacional y no en lo que el lector o
usuario está más interesado.
En HTML5, podemos diferenciar este tipo de información secundaria con el elemento <aside>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>Bienvenidos</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>

34. <h1>Lenguajes para la web</h1>
</header>
<nav>
<ul>
<li>Lenguaje HTML</li>
<li>Lenguaje CSS</li>
<li>Lenguaje JavaScript</li>
<li>Lenguaje XML</li>
<li>Lenguaje PHP</li>
</ul>
</nav>
<section>
Tutoriales para la web
</section>
<aside >
English Version
</aside>
</body>
</html>
El elemento <aside> puede estar localizado en cualquier parte del diseño; la etiqueta no define la
posición, como vemos en el ejemplo. El elemento <aside> sólo describe la información que engloba,
no un lugar en la estructura y se puede utilizar siempre que el contenido no quiera ser considerado
como el contenido principal del documento.
Podemos utilizar el elemento <aside>, por ejemplo, dentro de un elemento <section>, o incluso dentro
de una sección con información relevante - en un cita dentro de un texto.
Hay que recordar que en HTML5, la presentación en pantalla de estos elementos ha sido delegado a
CSS. El diseño se consigue asignando estilos CSS a cada elemento.
Estructura del cuerpo en HTML5. Etiqueta <footer>
HTML5 tiene una estructura y un diseño básicos y aporta nuevos elementos para diferenciarlos y
declararlos. Con ello podemos informar al navegador, la función de cada sección.
A continuación una representación visual de la organización de las secciones utilizando las etiquetas
HTML5. Vamos aprender sobre la etiqueta <footer>:
<header></header>

35. <nav></nav>
<section></section> <aside></aside>
<footer></footer>
<footer>
Para dar por concluido nuestra plantilla o estructura básica de nuestro documento HTML5, sólo falta un
elemento más. Para cerrar el diseño debemos darle terminación al cuerpo del documento. HTML5 tiene
un elemento específico para este fin llamado <footer>:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>Bienvenidos</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Lenguajes para la web</h1>
</header>
<nav>
<ul>

36. <li>Lenguaje HTML</li>
<li>Lenguaje CSS</li>
<li>Lenguaje JavaScript</li>
<li>Lenguaje XML</li>
<li>Lenguaje PHP</li>
</ul>
</nav>
<section>
Tutoriales para la web
</section>
<aside >
English Version
</aside>
<footer>
Copyright &copy; 2005 - 2018
</footer>
</body>
</html>
En el diseño estándar de una página web (ver Estructura del cuerpo - HTML5), la sección llamada
barra institucional será definida con etiquetas <footer>. Se llama así porque la barra representa el fin (o
pie) de nuestro documento y esta parte de la página web es utilizada normalmente para compartir
información general sobre el autor o la compañía que ha creado el proyecto; como copyright, términos
y condiciones, etc.
Normalmente, el elemento <footer> representa el fin del cuerpo de nuestro documento y tiene el
propósito antes descrito. Sin embargo, la etiqueta <footer> puede ser usada varias veces dentro del
cuerpo para representar el fin de las diferentes secciones. (La etiqueta <header> también puede ser
utilizada varias veces dentro del cuerpo.)
Contenido del cuerpo. Etiqueta article.
El cuerpo de nuestro documento ya está completo. La estructura básica de la página web está terminada
y ahora tenemos que trabajar en el contenido. Los elementos HTML5 que hemos visto nos ayudan a
identificar cada sección del diseño y asignar una función intrínseca para cada uno de ellos, pero lo que
es realmente importante es lo que hay dentro de cada una de esas secciones.
La mayoría de los elementos ya estudiados fueron creados para dar una estructura a la página web que
los navegadores y nuevos dispositivos puedan identificar.
Las etiquetas <body> son para declarar el cuerpo o las partes visibles del documento, las etiquetas
<header> son para englobar información importante para el cuerpo, las etiquetas <nav> para aportar
ayuda a la navegación, las etiquetas <section> contienen el contenido más importante y las etiquetas
<aside> y <footer> suministran información adicional.

37. Pero ninguno de estos elementos declaran algo sobre el contenid. Todos tienen una función estructural
muy específica.
Cuanto más profundizamos en el documento, más nos acercamos a la definición del contenido. Esta
información estará compuesta por elementos visuales diferentes como títulos, textos, imágenes, videos
y aplicaciones interactivas entre otras. Necesitamos poder diferenciar estos elementos y establecer
relaciones entre ellos.
<article>
De las misma manera en que los blogs están divididos en entradas, las páginas webs están divididas en
partes que tienen características similares. El elemento <article> permite identificar cada una de estas
partes.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>Bienvenidos</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Lenguajes para la web</h1>
</header>
<nav>
<ul>
<li>Lenguaje HTML</li>
<li>Lenguaje CSS</li>
<li>Lenguaje JavaScript</li>
<li>Lenguaje XML</li>
<li>Lenguaje PHP</li>
</ul>
</nav>
<section>
<article>
VIDEO TUTORIALES HTML
Tutoriales de HTML para principiantes o iniciación. Aquí
aprenderemos desde cero . Algunos de los conceptos que
veremos son básico, pero los veremos siempre en el entorno
web.
</article>
<article>
VIDEO TUTORIALES CSS
Tutoriales de CSS para principiantes. Aquí aprenderemos como
utilizar el lenguaje de estilos en cascada CSS.

38. </article>
</section>
<aside >
English Version
</aside>
<footer>
Copyright &copy; 2005-2018
</footer>
</body>
</html>
Como podemos ver en el código, las etiquetas <article> están dentro de las etiquetas <section>. Las
etiquetas <article> pertenecen a esa sección. Son sus hijos, de la misma manera que las etiquetas que
están dentro de las etiquetas <body> son hijos del cuerpo. Pero como con todo hijo del nodo cuerpo, las
etiquetas <article> son colocadas una después de la otra, ya que cada una de ellas es una parte
independiente de <section>.
Como hemos dicho, la estructura HTML puede ser descrita como un árbol, con el elemento <html> de
raíz. Otra forma de describir las relaciones entre los elementos es denominarlos, padres, hijos o
hermanos según la posición en la estructura del árbol. Por ejemplo, en un documento HTML típico, el
elemento <body> es el hijo del elemento <html> y hermano del elemento <head>. Tanto, <body>
como <head>, tiene el elemento <html> como padre.
El elemento <article> no sólo habla de artículos. <article> está creado para contener una unidad
independiente de contenido, por lo que puede llevar un post de un foro, un artículo de una revista, una
entrada de un blog, un comentario de un usuario, etc. Este elemento agrupará unidades de información
relacionadas entre sí, sin tener en cuenta la naturaleza de la información.
Como parte independiente del documento, el contenido de cada elemento <article> tendrá su estructura
independiente. Para definir esta estructura podemos sacar ventaja a la versatilidad de las etiquetas
<header> y <footer> ya estudiadas anteriormente. Estas etiquetas son portables y pueden ser utilizadas
fuera del cuerpo, en todas las secciones del documento.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>Bienvenidos</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Lenguajes para la web</h1>
</header>
<nav>
<ul>

39. <li>Lenguaje HTML</li>
<li>Lenguaje CSS</li>
<li>Lenguaje JavaScript</li>
<li>Lenguaje XML</li>
<li>Lenguaje PHP</li>
</ul>
</nav>
<section>
<article>
<header>
<h1>VIDEO TUTORIALES HTML</h1>
</header>
Tutoriales de HTML para principiantes o iniciación. Aquí
aprenderemos desde cero . Algunos de los conceptos que
veremos son básico, pero los veremos siempre en el entorno
web.
<footer>
<p>comments (0)</p>
</footer>
</article>
<article>
<header>
<h1>VIDEO TUTORIALES CSS</h1>
</header>
Tutoriales de CSS para principiantes. Aquí aprenderemos como
utilizar el lenguaje de estilos en cascada CSS.
<footer>
<p>comments (0)</p>
</footer>
</article>
</section>
<aside >
English Version
</aside>
<footer>
Copyright &copy; 2005-2018
</footer>
</body>
</html>
Esto sería un ejemplo de una unidad de información creada con <article>, con una estructura propia.
Primero con la etiqueta <header> que contiene el título definido con <h1>. A continuación, el
contenido propiamente dicho, un texto describiendo el tutorial. Y finalmente, después del texto, la
etiqueta <footer> especificando el número de comentarios.
Contenido del cuerpo. Etiqueta hgroup.

40. Ya hemos incorporado etiquetas <h1> para especificar el título, dentro de un elemento <header>, al
principio del cuerpo o al principio de cada <article>.
Usualmente un documento tiene, además de texto llano, una serie de encabezados o titulares. Para ello
el lenguaje HTML posee una serie de etiquetas que permiten disponer de titulares de hasta 6 niveles de
importancia.
<h1> son necesarios para crear el encabezado de cada parte del documento. A veces necesitamos
también añadir subtítulos o más información para describir el contenido de la página web o de alguna
sección. <header> está hecho para incluir otros elementos - como por ejemplo, una tabla de
contenidos, formularios de búsqueda, logos o textos cortos.
Para construir encabezados, podemos utilizar las ventajas que nos dan el resto de las etiquetas H: <h1>,
<h2>, <h3>, <h4>, <h5> y <h6>.
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>
NOTA: Los encabezados empiezan siempre en una línea nueva y el texto que les sigue comenzará en la
línea siguiente.
Hay que destacar que los encabezados de h1 a h4 pueden ser usados como títulos ya que los
navegadores suelen usar un tamaño de letra mayor que el habitual para mostrarlos. Sin embargo los
encabezados h5 y h6 suelen ser mostrados con letra más pequeña aún que el texto y por esta razón se
usan como notas a pie de página o comentarios de poca importancia.
Pero para propósitos de procesamiento interno, y para evitar generar múltiples secciones o
subsecciones durante la interpretación del documento, estas etiquetas se deben agrupar. Para esto el
HTML5, proporciona <hgroup>.
<hgroup>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>Bienvenidos</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

41. <header>
<h1>Lenguajes para la web</h1>
</header>
<nav>
<ul>
<li>Lenguaje HTML</li>
<li>Lenguaje CSS</li>
<li>Lenguaje JavaScript</li>
<li>Lenguaje XML</li>
<li>Lenguaje PHP</li>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h1>VIDEO TUTORIALES HTML </h1>
<h2>Primer programa, con Visual Studio Code en
Español. Como maquetar con HTML </h2>
</hgroup>
</header>
Este tutorial es el primero de una serie de tutoriales en los que
aprenderemos los conceptos básicos del lenguaje HTML.
<footer>
<p>comments (0)</p>
</footer>
</article>
</section>
<aside >
English Version
</aside>
<footer>
Copyright &copy; 2005-2018
</footer>
</body>
</html>
Las etiquetas H deben guardar su jerarquía, lo que significa que primero se declara el título con la
etiqueta <h1>, y después se utiliza el <h2> para el subtítulo, etc. Sin embargo, al contrario de versiones
más antiguas de HTML, HTML5 nos permite reutilizar las etiquetas H y construir esta jerarquía las
veces que se quiera en cada sección del documento.
El elemento <hgroup> es necesario cuando tenemos un título y subtítulo o más de una etiqueta H junta
en el mismo <header>. Este elemento sólo puede contener etiquetas H. Si solamente tenemos una
etiqueta <h1>, no hace falta agruparlo. Por ejemplo en el <header> del cuerpo no hemos utilizado este
elemento ya que sólo tenemos un elemento H en el interior. Hay que recordar que el elemento
<hgroup> está hecho para agrupar etiquetas H, tal y como indica su nombre.

42. Los navegadores y programas que ejecutan y renderizan páginas web, leen el código HTML y crean su
propia estructura interna para interpretar y procesar cada elemento. Esta estructura interna se divide en
secciones que no tienen relación con las divisiones en el diseño o en el elemento <section>. Estas son
secciones conceptuales generadas durante la interpretación del código.
El elemento <header> no crea solamente una de estas secciones conceptuales; esto significa que los
elementos dentro del <header> representarán diferentes niveles y pueden generar internamente
diferentes secciones. El elemento <hgroup> se creó con el propósito de agrupar las etiquetas H y así
evitar que el navegador hiciera malas interpretaciones.
Contenido del cuerpo.
Párrafos en HTML.
Ha llegado el momento de aprender a introducir un texto en una página web, pero antes es necesario
comprender cómo será interpretado este texto. Cuando un navegador lee el código HTML de una
página y lo interpreta para mostrar la página, todos los espaciados múltiples, tabulados o saltos de línea
que se haya incluido en los textos serán interpretados como un único espacio.
Esta característica suele sorprender (e incluso molestar) al principio, pero es innegable que esta forma
de actuar es necesaria y concuerda con el carácter descriptivo de HTML. La mejor manera de
habituarse es probar, para ello proponemos los siguientes ejemplos de código que serán mostrados de la
misma forma por el navegador aunque algunos contengan saltos de línea, otros tabulados entre las
palabras, etc.
<h1>El conductor del coche le pregunto si se encontraba mal</h1>
<h1>
El conductor del coche le preguntó si se encontraba mal
</h1>
<h1>
El conductor del coche
le pregunto si se encontraba mal </h1>
En estos ejemplos podemos observar diversos saltos de línea y separaciones en el texto, sin embargo el
navegador mostrará un solo espacio entre las palabras y producirá saltos de línea donde sea necesario
en función del tamaño de la ventana.
Conocida esta característica es momento de adentrarse en las distintas etiquetas que permiten tener un
mayor control sobre el texto de nuestras páginas.
Saltos de línea.
En ocasiones puede ser conveniente introducir un punto y aparte cuando estamos escribiendo un texto.
En HTML para hacer esto puede usarse la etiqueta <br /> . Cuando el navegador se encuentra con esta
etiqueta provoca un salto de línea y sigue mostrando el contenido de la página. Veamos un ejemplo:

43. Estaba internándose en lo desconocido. <br />
Durante todo el trayecto hasta Woodfield no dejó de pensar en los
aspectos económicos, con el temor de estar cometiendo…
En este texto podemos observar cómo tras el primer punto era necesario un cambio de línea, por lo que
hemos usado <br /> .
Cómo se insertan párrafos.
Un párrafo es un conjunto de frases sobre un mismo asunto. En HTML para demarcar un párrafo se usa
la etiqueta p , situándose la instrucción de inicio <p> al comienzo del párrafo y la instrucción de fin
</p> tras la última frase.
Entre ellas pueden insertarse tantos saltos de línea como se deseen así como muchos otros elementos
HTML. A continuación se muestra un ejemplo:
<p>Estaba internándose en lo desconocido.</p>
<p>Durante todo el trayecto hasta
Woodfield no dejó de pensar en los aspectos económicos, con temor de estar
cometiendo...</p>
Otra opción hubiera sido crear un único párrafo e insertar un salto de línea tras la primera frase:
<p>
Estaba internándose en lo desconocido.
<br />
Durante todo el trayecto hasta
Woodfield no dejó de pensar en los aspectos económicos, con el
temor de estar cometiendo...
</p>
Uso incorrecto de la etiqueta p.
La etiqueta p es usada en muchas páginas de forma incorrecta. El error consiste en emplearla simple-
mente para introducir un espacio (vertical) entre líneas. La forma adecuada es introducir las
instrucciones de inicio y fin para marcar el comienzo y el fin de un párrafo.
Espacio entre líneas.
Para introducir un espacio vertical entre líneas debe usarse la etiqueta <br> . Si se ponen varias
seguidas no se mostrará más espacio, pero esto puede solucionarse insertando entre las etiquetas la
cadena " ". Por ejemplo para insertar tres líneas en blanco puede usarse:
<br> &nbsp;

44. <br> &nbsp;
<br> &nbsp;
Líneas horizontales para separar párrafos.
Si lo que se necesita es separar dos secciones diferentes de una página, ya sea texto o no, puede
emplearse una nueva etiqueta: <hr>. Su nombre proviene del Inglés Horizontal Rule (línea horizontal.)
Esta etiqueta está formada por una única instrucción y provoca que el navegador inserte una línea
horizontal.
NOTA: No abusar de las líneas horizontales. Es conveniente no usar mucho las líneas horizontales,
limitándolas al comienzo y fin de la página. La razón de esto es que las líneas en medio de la página
dificultan la lectura de esta. Si se desea separar secciones un espacio vertical del tamaño adecuado es
más efectivo.
La etiqueta <blockquote> ... </blockquote>
Otra etiqueta relacionada con el formato de párrafos en HTML es <blockquote> , que consta de una
instrucción de inicio y una de fin y que indica que el párrafo que encierra es un texto parafraseado.
Al usar esta etiqueta el navegador mostrará el texto en un nuevo párrafo con márgenes a la izquierda y
a la derecha.
Mi poema favorito es aquel de Federico García Lorca que dice:
<blockquote>
Mi corazón, como una sierpe <br />
se ha desprendido de su piel, <br />
y aquí la miro entre mis dedos <br />
llena de heridas y de miel <br />
</blockquote>
Enlaces.
Los enlaces pueden clasificarse en dos tipos, los internos o locales y los externos:
1. Los enlaces internos son aquellos que enlazan las páginas que componen un mismo sitio web
(web site.) Todas estas páginas estarán (generalmente) en el mismo servidor WWW, y por tanto
estarán también en el mismo ordenador. Por esta razón sólo será necesario indicar en nuestro
código el nombre del archivo donde está la página que queremos enlazar y el directorio en el
que se encuentra.

45. Un ejemplo de un enlace interno es: /hobbies/index.html
2. Los enlaces externos permiten saltar desde una página hasta otra puede estar en cualquier otro
lugar del mundo en otro servidor web. Al crear estos enlaces es necesario especificar la
dirección completa de Internet (la URL) de la página que queremos enlazar.
Por ejemplo: http://www.otroservidor.com/hobbies/index.html
Por último, cabe resaltar que aunque la mayoría de las veces los links se usan para enlazar una
páginas con otras también pueden usarse con imágenes, sonido, vídeo y prácticamente cualquier
tipo de fichero.
La etiqueta <a> ... </a>
Esta etiqueta, de nombre sencillo, es la que va a permitir incluir en las páginas enlaces hipertexto. Su
atributo ’href’ permite indicar cual es la página a la que debe saltar el usuario al pulsar sobre el texto
adecuado.
El texto el enlace será aquel que se introduzca entre la instrucción de inicio y la instrucción de final de
la etiqueta y debe ser resaltado por el navegador para que el usuario sepa que puede pulsar en él.
La estructura de un link es:
<a href="dirección_URL">
Texto que será sensible (hipertexto)
</a>
Los navegadores gráficos resaltan este texto mostrándolo de un color diferente y subrayándolo, además
el cursor cambiará al situarlo sobre el texto. Los navegadores que funcionan en modo texto como
LynxTM resaltan los enlaces hipertexto cambiando el color del texto y de su fondo.
El enlace podría ser algo así:
También puedes conocer mis <a href="hobbies.html"> hobbies </a>
NOTA: Si no funciona un link conviene comprobar la sintaxis del código HTML. Un error común es
no cerrar las comillas que tras poner la dirección de la página enlazada. Si se comete este error, además
de no funcionar el enlace, es posible que desaparezcan otros elementos de la página al visualizarla.
Páginas en otros directorios
Si la página a la que queremos crear el enlace no se encuentra en el mismo directorio que la actual es
necesario indicar el directorio (o ruta de directorios, path) donde está. Si en el ejemplo anterior la
página hobbies.html estuviese en el directorio varios, el ejemplo anterior debería sustituirse por:

46. También puedes conocer mis <a href="varios/hobbies.html">hobbies</a>
Como vemos, para separar el nombre del directorio del nombre del archivo se usa el símbolo "/".
También se usaría, si fuese necesario, para separar varios directorios.
Enlaces externos.
La verdadera fuerza de Internet estriba en la posibilidad de navegar con una sola pulsación por
información que se encuentre en cualquier lugar del mundo. Para convertir esto en realidad existen los
enlaces externos.
NOTA: Algunos diseñadores web recomiendan que no se creen enlaces externos desde la página
principal o home page de nuestro sitio web para no incitar al visitante a que se vaya de la página.
La creación de uno de estos enlaces es muy similar a la creación de los enlaces locales. El único
cambio radica en que el valor dado al atributo ’href’ es la dirección completa de Internet, sea otra
página web, una imagen o cualquier otro archivo.
Por ejemplo, para incluir un enlace desde cualquier página a la de DMOZ (Open Directory
Project) puede emplearse:
Enlace a <a href="http://www.dmoz.org"> Directorio DMOZ </a>
Así de fácil. Para referirse a un archivo específico del servidor de DMOZTM hay que especificar la ruta
de directorios y el nombre del archivo. Un ejemplo de uso podría consistir en construir un enlace a la
sección sobre Internet de este buscador. Para ello hay que incluir el siguiente link:
<a href="http://www.dmoz.org/Computers/Internet/">Sección de Internet de DMOZ </a>
Un aspecto destacable de este ejemplo es que se ha especificado la ruta de directorios, pero no el
nombre del archivo. Con ello se consigue acceder al archivo por defecto de ese directorio. Todos los
servidores web tienen un archivo por defecto de manera que si no se introduce el nombre ninguno ese
archivo será el mostrado.
En la mayoría de servidores el nombre elegido es index.html por lo que la dirección usada antes sería
equivalente a: http://www.yahoo.com/computers/internet/index.html
NOTA: Si un sitio web consta de varias páginas es usual incluir todos los enlaces externos en una
página especial dedicada a ellos.
Anclas.
Después de realizar nuestra primera práctica continuamos los enlaces hipertexto con unos elementos
muy relacionados con ellos: las anclas, que nos permitirán crear enlaces especificando a que lugar
concreto de una página queremos saltar.

47. Un ancla es una marca que se sitúa en un punto determinado de una página. Posteriormente se podrá
crear un enlace a esa ancla de manera que al pulsar sobre el texto apropiado en vez de saltar a otra
página se salta al lugar donde esté el ancla, es decir, ya no se va al comienzo de la página como con los
enlaces vistos hasta ahora. Dicho de otra forma, usando anclas es posible que un enlace apunte al lugar
concreto de una página que se desee.
Para crear anclas usamos, al igual que para crear enlaces, la etiqueta <a>, sin embargo, no debe
confundirse el lector porque, aunque ambos elementos estén relacionados y se use la misma etiqueta
para crearlos, las funciones de cada uno son radicalmente diferentes. Las anclas sólo son marcas y son
invisibles cuando visualizamos la página con el navegador. Por esta razón las anclas no definen ningún
texto activo.
A pesar de ello es habitual encontrar texto entre las instrucciones de inicio y de fin como en el siguiente
ejemplo:
<a name="nombreAncla">Comienzo</a>
Este texto no tiene ningún significado especial y será interpretado por los navegadores de igual forma
que el texto de alrededor.
Como se ha adelantado en el ejemplo anterior, al crear anclas no se emplea el atributo ’href’. En su
lugar se usa otro llamado ’name’. Con este atributo se da un nombre al ancla que luego nos servirá para
referirse a ella.
Un ejemplo donde la utilidad de las anclas se hace evidente es en aquellas páginas en las que nos
encontramos una lista ordenada alfabéticamente. Si la lista es muy larga moverse hasta la letra S, por
ejemplo puede hacerse molesto. Pero usando anclas el autor de la página puede incluir todas las letras
al principio de manera que si se pulsa sobre una letra se salta al lugar de la lista donde empiecen las
entradas de la letra S.
En este caso se detallan todas las secciones del web ordenadas alfabéticamente. Al principio de la
página hay un listado con todas las letras del abecedario de manera que al pulsar sobre una letra vas al
lugar de la página donde están las secciones que empiezan con esa letra. ¿Cómo se hace esto? Es muy
sencillo, el proceso consta de dos pasos:
1. Primero hay que insertar el ancla en el lugar de la página donde se quiere poder saltar. Tomando
como ejemplo una una página web que contiene un diccionario se emplearía el siguiente
código:
<a name="S"></a>
Salud
Santa Claus
Seguridad
2. En segundo lugar se crea un enlace al principio de la página un que apunte al ancla. En este
ejemplo el código usado es:
<a href="#S"> S</a>

48. En este ejemplo al pulsar sobre la letra S se salta directamente al lugar de la página donde se encuentra
la palabra
salud, que es la primera de las que comienzan con “S”, que es el efecto deseado. Para especificar que el
enlace apunta a un ancla se ha incluido un signo # seguido del nombre del ancla.
Elemento Figure.
La etiqueta <figure> ha sido creada para ayudarnos a ser más específicos en la declaración del
contenido del documento. Antes que se introdujera este elemento, no podíamos identificar el contenido
que era parte de la información pero independiente a la vez como por ejemplo las imágenes,
ilustraciones, videos, etc.
Normalmente estos elementos son parte del contenido principal pero se pueden mover sin perjudicar al
flujo del documento. Cuando existe este tipo de información, hay que utilizar las etiquetas <figure>
para identificarlas.
<figure>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>Bienvenidos</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Lenguajes para la web</h1>
</header>
<nav>
<ul>
<li>Lenguaje HTML</li>
<li>Lenguaje CSS</li>
<li>Lenguaje JavaScript</li>
<li>Lenguaje XML</li>
<li>Lenguaje PHP</li>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h1>VIDEO TUTORIALES HTML </h1>
<h2>Primer programa, con Visual Studio Code en
Español. Como maquetar con HTML </h2>

49. </hgroup>
</header>
<figure>
<iframe
src="http://www.youtube.com/embed/RUTadelVideo"></
iframe>
<figcaption>
Este es el video del primer tutorial de HTML para
principiantes.
</figcaption>
</figure>
<footer>
<p>comments (0)</p>
</footer>
</article>
</section>
<aside >
English Version
</aside>
<footer>
Copyright &copy; 2005-2018
</footer>
</body>
</html>
En el ejemplo, se insertó un video (<iframe
src="http://www.youtube.com/embed/RUTadelVideo"></iframe>), después del texto. Esto se hace
frecuentemente; comúnmente el texto se enriquece con imágenes o videos.
Las etiquetas <figure> permite encapsular estos complementos visuales y diferenciarlos así del resto
del contenido.
En el código que vemos en el ejemplo, podemos ver un elemento extra dentro de <figure>.
Comúnmente las unidades de información como imágenes o videos se describen con un texto corto
debajo. HTML5 nos provee con un elemento para colocar e identificar esta leyenda.
Las etiquetas <figcaption> encapsulan la leyenda relacionada a la <figure> y establece una relación
entre los dos elementos y el contenido.
Audio
Otro elemento que se agrega al HTML5 es el AUDIO. El objetivo de esta etiqueta es permitir la carga y
ejecución de archivos de audio sin requerir un plug-in de Flash, Silverlight o Java.

50. El comité de estandarización W3C deja abierto a cada empresa que desarrolla navegadores los formatos
que quieran soportar (así tenemos que algunos soportan mp3, wav, ogg, au)
Un ejemplo de disponer el elemento audio dentro de una página sería:
<audio src="sonido.ogg" autoplay controls loop></audio>
Las propiedades que podemos utilizar con la marca audio son:
 src: La URL donde se almacena el archivo de audio. Si no definimos la URL la busca
en el mismo directorio donde se almacena la página.
 autoplay: En caso de estar presente el archivo se ejecuta automáticamente luego de
cargarse la página sin requerir la intervención del visitante.
 loop: El archivo de audio se ejecuta una y otra vez.
 controls: Indica que se deben mostrar la interface visual del control en la página (este
control permite al visitante arrancar el audio, detenerlo, desplazarse etc.)
 autobuffer: En caso de estar presente indica que primero debe descargarse el archivo en
el cliente antes de comenzar a ejecutarse.
Como no hay un formato de audio universalmente adoptado por todos los navegadores el elemento
audio nos permite agregarle distintas fuentes:
<audio controls autoplay loop>
<source src="sonido.ogg">
<source src="sonido.mp3">
<source src="sonido.wav">
<source src="sonido.au">
</audio>
El elemento source indica a través de la propiedad src la ubicación del archivo de audio respectivo. El
orden que disponemos estas fuentes es importante. Primero el navegador busca la primera fuente y
verifica que puede reproducir dicho archivo, en caso negativo pasa a la siguiente fuente.
Una página que muestra el control de audio:
<!DOCTYPE HTML>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
</head>
<body>
<audio controls>
<source src="http://www.misitioweb.com/mis-audios/gallo.ogg">
<source src="http://www.misitioweb.com/mis-audios/gallo.mp3">
<source src="http://www.misitioweb.com/mis-audios/gallo.wav">
</audio>
</body>

51. </html>
Según el navegador el control de reproducción de audio puede variar.
En el caso que solo necesitemos reproducir un único formato de archivo podemos evitar los elementos
HTML "source" y disponer la propiedad src directamente en la etiqueta "audio":
<audio controls src="http://www.misitioweb.com/mis-audios/gallo.mp3">
</audio>
Video.
El elemento VIDEO permite mostrar un video sin la necesidad de plugin (Flash). En este momento los
navegadores permiten mostrar formatos como mp4, webm y ogv.
FireFox permite mostrar videos en formato ogv (formato de vídeo de código abierto Ogg/Theora.)
Luego para visualizar un video con este formato en FireFox tenemos:
<video width="640" height="360"
src="http://videos.mozilla.org/firefox/3.5/overview/overview.ogv"
controls>
Este navegador no permite tag video
</video>
Las propiedades más importantes de la marca video son:
 src: Dirección donde se almacena el video.
 controls: Se visualiza el panel de control del video: botón de inicio, barra de avance del
video etc.
 autoplay: El video se inicia inmediatamente luego que la página se carga en el
navegador.
 width: Ancho en píxeles del video.
 height: Alto en píxeles del video.
Como no hay un formato de video universalmente adoptado por todos los navegadores el elemento
video nos permite agregarle distintas fuentes:
<video width="640" height="360" controls>
<source src="http://videos.mozilla.org/firefox/3.5/overview/overview.ogv">
<source src="http://videos.mozilla.org/firefox/3.5/overview/overview.mp4">
</video>
Esto es similar al elemento AUDIO visto anteriormente.
La siguiente página muestra un video llamado "video1.mp4":
<!DOCTYPE HTML>

52. <html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
</head>
<body>
<video width="640" height="360"
controls src="http://www.misitioweb.com/mis-videos/video1.mp4">
</video>
</body>
</html>
Nuevamente según el navegador nos muestra una interfaz visual distinta, pero nos permite reproducir el
video.
Las etiquetas más utilizadas
Hay un conjunto de etiquetas que se utilizan a menudo:
 Enlaces a páginas web locales o externas.<a href="https://www.google.com" >Enlace</a>
 Imágenes web. <img src="/images/tutoriales/raspberry/truco2.png" />
 Líneas horizontales. <hr>
 Salto de línea. <br>
 Citar un texto. <blockquote>
 División o bloque.<div>Bloque de contenido</div>
 Listas no numerada de items. <ul><li>Item 1</li><li>Item 2</li></ul>
 Listas numerada de items. <ol><li>Item 1</li><li>Item 2</li></ol>
 Texto en negrita. <strong>texto</strong>
Elementos eliminados
Los siguientes elementos de HTML 4.01 han sido eliminados de HTML5:
 <acronym>
 <applet>
 <basefont>
 <big>
 <center>
 <dir>
 <font>
 <frame>
 <frameset>
 <noframes>
 <strike>
 <tt>

53. Etiqueta <table>
Esta etiqueta permite definir tablas; es decir una cuadricula de casillas o celdas, divididas en filas y
columnas. Para crear las tablas se usan las siguientes etiquetas internas:
Etiqueta Descripción
<table> Definición de una tabla.
<th> Definición de cabecera de tabla.
<tr> Define una fila en la tabla.
<td> Define una celda en la tabla.
<caption> Define el nombre o título de la tabla.
<colgroup> Especifica un grupo de una o más columnas para aplicar formato.
<col>
Especifica las propiedades de una columna de las columnas definidas en un elemento
colgroup.
<thead> Define la cabecera de la tabla.
<tbody> Define el cuerpo de la tabla.
<tfoot> Define el pie de la tabla