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>