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>