Ejemplos de HTML5
HTML5 es la versión más actual del lenguaje de etiquetas HTML (HyperText Markup Language), ampliamente utilizado en el diseño y programación web.
Con el desarrollo de la versión 5 de HTML se han integrado nuevas etiquetas: <div>, <object>, <video>, <audio>, <canvas>, <cite>, <menú>, <article>, <section>, <header>, <footer>, <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress>, <wbr>, <bdi>, <rubi>, <track>, <source>, <embed>, <meter>, <a> y MathML para agregar fórmulas matemáticas, entre otros. También nuevos estándares respecto al uso del propio lenguaje y en cuanto al diseño de páginas web, haciendo de este código algo más complejo y con la capacidad de resolver más problemas.
Como características importantes de HMTL5 resalta la posibilidad de obtener un mayor dinamismo entre los sitios web y el contenido multimedia. Además, los diseñadores pueden crear un código más organizado y limpio.
Ejemplos de HTML5
- Ejemplo 1:
<!DOCTYPE html>
<html lang=»es»>
<head>
<title>Título de la WEB</title>
<meta charset=»UTF-8″>
<meta name=»title» content=»Título de la WEB»>
<meta name=»description» content=»Descripción de la WEB»>
<link href=»http://dominio.com/hoja-de-estilos.css» rel=»stylesheet» type=»text/css»/>
</head>
<body>
<header>
<h1>Título de la WEB</h1>
</header>
<nav>
<a href=»http://dominio.com/seccion2.html»>IR SECCIÓN 2</a>
<a href=»http://dominio.com/seccion2.html»>IR SECCIÓN 3</a>
</nav>
<section>
<article>
<h2>CONTENIDO PRINCIPAL</h2>
<p>Este es el contenido principal de mi web</p>
<div>
<p>Aquí tenéis una imagen.</p>
<img src=»http://dominio.com/imagen.jpg» alt=»paisaje»>
</div>
</article>
</section>
<aside>
<h3>Banner de publicidad</h3>
<a href=»http://dominio-externo.com»>
<img src=»http://dominio.com/banner-publicidad.png» alt=»banner de publicidad»>
</a>
<h3>Testimonios</h3>
<p>Aquí va el testimonio sobre el servicio o productos.</p>
</aside>
<footer>
<h4>Avisos legales</h4>
<a href=»http://dominio.com/aviso-legal»>Política de cookies</a>
<h4>Redes sociales</h4>
<a href=»http://facebook.com/pagina-de-facebook»>Mi Facebook</a>
</footer>
</body>
</html>
- Ejemplo 2:
<!DOCTYPE html>
<html lang=»es»>
<head>
<meta charset=»utf-8″ />
<title>Titulo</title>
</head>
<body>
<div id=»centrado»>
<header>
<hgroup>
<h1>(( TITULO ))</h1>
<h2>(( DESCRIPCION DE LA WEB ))</h2>
</hgroup>
<div id=»logotipo»>(( LOGOTIPO ))</div>
</header>
<id =»contenido»>
<nav>
(( MENU DE NAVEGACION ))
</nav>
<aside>
(( ANUNCIO DEL PDF ))
</aside>
<section id=»izquierda»>
<h2>Ultimas Novedades<h2>
<article>(( NOVEDAD UNO ))</article>
<article>(( NOVEDAD DOS ))</article>
<article>(( NOVEDAD TRES ))</article>
</section>
<section id=»centro»>
<h2>Temas Populares<h2>
<article>(( POPULAR A ))</article>
<article>(( POPULAR B ))</article>
<article>(( POPULAR C ))</article>
</section>
</div>
<footer>
<section id=»copyright»>(( Datos Copyright ))</section>
<section id=»contacto»>(( Datos de Contacto ))</section>
<section id=»enlaces»>(( MapaWeb, Política, etc. ))</section>
</footer>
</div>
</body>
</html>
- Ejemplo 3:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″/>
<title>EJEMPLO MAQUETACIÓN EN HTML5</title>
<link rel=»stylesheet» href=»css/estilo.css»>
</head>
<body>
<!– Cabecera –>
<header>
<img src=»Media/ejemplo-logotipo.gif» width=»189″ height=»57″ alt=»logo» />
<h1>EJEMPLO MAQUETACIÓN EN HTML5 – Maqueta #1</h1>
</header>
<!– Contenido –>
<section>
<figure>
<img src=»Media/Koala.jpg» width=»200″ height=»200″ alt=»foto» />
<figcaption>Figura: descipción foto</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet…</p>
<p>Donec ligula arcu, sagittis lacinia…</p>
</section>
<!– Contenido relacionado–>
<aside>
<p>Contenido Relacionado</p>
</aside>
<!– Pie de pagina –>
<footer>
<a href=»http://www.ejemplocodigo.com»>www.ejemplocodigo.com</a>
</footer>
</body>
</html>