Foros del Web - Ver Mensaje Individual - HTML5 y la correcta estructuración de tags de web semántica.

karlos2101 · #13 (**permalink**) 03/03/2012, 17:24

Cita:

Iniciado por pkjns

Hola a todos,

Como no se hacerlo de otro modo pego la estructura con la que estoy trabajando:

<!DOCTYPE HTML>
<head>
<title>Titulo pagina</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>
<div id="cajaheader">

</div>

<div id="principal">
<header>
<nav>
<ul>
<li><a href="#">enlace 1</a></li>
<li><a href="#">enlace 2</a></li>
<li><a href="#">enlace 3</a></li>
<li><a href="#">enlace 4</a></li>
</ul>
</nav>
</header>

<section id="info">

</section>

<aside>
<h5>Enlaces anteriores</h5>
<ul>
<li><a href="#"><time>2011-10-20</time> enlace 1</a></li>
<li><a href="#"><time>2011-11-20</time> enlace 2</a></li>
<li><a href="#"><time>2011-12-25</time> enlace 3</a></li>
<li><a href="#"><time>2012-01-10</time> enlace 4</a></li>
</ul>
</aside>

<section>

<article>
<time>2012-01-16</time>
<h3>Titulo del articulo</h3>
<h4>Subtitulo</h4>
<p>Contenido del articulo </p>
</article>

<article>
<time>2012-01-16</time>
<h3>Titulo del articulo</h3>
<h4>Subtitulo</h4>
<p>Contenido del articulo </p>

</article>
<article>
<time>2012-01-16</time>
<h3>titulo del articulo</h3>
<h4>Subtitulo</h4>
<p>Contenido del articulo </p>
</article>

</section>
</div>
<footer>
<h6>Pie de página</6>
</footer>

</body>
</html>

Con este formato tengo una cabecera y un menu en su interior (header), tres apartados diferenciados por los articulos para el contenido incluidos en la sección, el contenido tangencial o aside, y el pie de pagina.

He intentado seguir con pulcritud el estandar HTML5 siguiendo los consejos de un buen profesional (los errores en caso de haberlos no son del maestro, son del alumno, jeje) y he incluido todo lo nuevo prácticamente siguiendo un orden bastante sensato. ¿Que os parece?

Dentro de los artículos he incluido aunque aquí no lo muestro, las etiquetas <video> y <audio> para tener el pack completo. Bueno, completo no, me queda <canvas> que lo estoy usando en el menú del header para incorporar unos iconos en su interior pero eso no lo he conseguido, de hecho he puesto un post pidiendo ayuda, aprovecho para el que se anime.

La estructura la estoy maquetando con CSS3 aprovechando las nuevas opciones que dan un amplio juego con transiciones, sombras, etc., sin tener que usar ningún programa externo.

Por el momento esto es todo, se aceptan sugerencias, pero no se admite maltratar al autor por los posibles fallos cometidos. Soy novato. ;)

Salu2

primero que todo ya no se llama así el charset.

Código HTML:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

ahora se llama en html5 así.

Código HTML:

<meta charset='utf-8' />

facil.

el header es la cabecera en vez de usar .

Código HTML:

<div id="cajaheader"></div>

se utiliza.

Código HTML:

<header></header>

Código HTML:

<nav></nav>

<nav></nav> va fuera de <header></header>

la estructura y la semántica de html5 seria asi .

Código HTML:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
         <link href="Vista/Css/Estilo_Paginas.css" rel="stylesheet" />
    </head>
    <body>

        <header>
            <h1>Titulo tu sitio</h1>
        </header>     

        <nav>
            <ul>
                <li>Enlace 1</li>
                <li>Enlace 2</li>
                <li>Enlace 3</li>
                <li>Enlace 4</li>
                <li>Enlace 5</li>
            </ul>
        </nav>
   
        <section>
            Aquí va todo el contenido de la Web<br />
            <article>
                <h2>Titulo del articulo</h2>    
                <p>Contenido</p>
            </article>
            <aside>
                <h3>Contenido Irrelevante</h3>
                <p>Texto</p>
            </aside>
        </section>

            <aside>
                <h3>Contenido Irrelevante</h3>
                <p>Texto</p>
            </aside>

        <footer>
            Pie de pagina, copyright, etc.
        </footer>

        </body>
</html>

bueno espero que les haiga sido de ayuda