Bienvenido a la Comunidad de Treehouse

¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.

¿Buscas aprender algo nuevo?

Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de

Inicia tu prueba gratuita

HTML Conceptos Básicos de HTML Estructurar tu contenido Desafío de Estructuración de Contenido

Publicado por Angelica Islas
Angelica Islas
4,082 Puntos

¿Podría alguien ayudarme con la colocación de <section></section> en este caso? Gracias.

index.html 
<!DOCTYPE html>
<html>
  <head>
    <link href=styles.css rel=stylesheet>
    <title>Mi Portafolio</title>
  </head>
  <body>

    <header>
      <section>
      <ul>
      <li><a href=#>Acerca de</a></li>
      <li><a href=#>Trabajo</a></li>
      <li><a href=#>Contacto</a></li>            
    </ul>
    <h1>Mi Diseño Web &amp; ¡Portafolio de Desarrollo!</h1> 
    <p>Un sitio que presenta mi trabajo más reciente.</p>
    <section>
    <h2>Bienvenida</h2> 
    <p>Fusce semper id ipsum sed scelerisque. Etiam nec elementum massa. Pellentesque tristique ex ac ipsum hendrerit, eget feugiat ante faucibus.</p>
    <ul>
      <li><a href=#>Proyecto reciente #1</a></li>
      <li><a href=#>Proyecto reciente #2</a></li>
      <li><a href=#>Proyecto reciente #3</a></li>     
    </ul>
    </section>  
      <pie de página>
    <p>&copy; 2017 Mi Portafolio</p>
    <p>Sígueme en <a href=#>Twitter</a>, <a href=#>Instagram</a> y <a href=#>Dribbble</a></p>

        </pie de página> 
     </header>

</body>
</html>

1 Respuesta

Kristjan Vingel
Kristjan Vingel
7,992 Puntos
Kristjan Vingel
Kristjan Vingel
7,992 Puntos

Así es como lo estructuraría. Creo que no soy experto en HTML semántico. La etiqueta <section> se utiliza para 'secciones' genéricas donde un 'header' o 'footer' o 'article' u otra cosa no es aplicable. Supongo que también puedes reemplazarlo con un <div>. Entonces, si ya estás usando <header>, no hay necesidad de complicar demasiado el marcado y agregar una <section> anidada. ¡Mantenlo lo más plano posible!

Agregué una etiqueta <nav> ya que es mucho más importante desde un punto de vista de accesibilidad que una <section>. ¡<header>, <footer>, <nav> y <main> son algunas de las etiquetas semánticas más importantes! Así es como las personas con visión deficiente pueden encontrar, por ejemplo, el menú con la ayuda de lectores de pantalla.

<header>

    <nav>
        <ul>
            <li><a href=#>Acerca de</a></li>
            <li><a href=#>Trabajo</a></li>
            <li><a href=#>Contacto</a></li>            
        </ul>
    </nav>

    <h1>Mi Diseño Web &amp; ¡Portafolio de Desarrollo!</h1> 
    <p>Un sitio que presenta mi trabajo más reciente.</p>

</header>

<section>

    <h2>Bienvenida</h2> 
    <p>Fusce semper id ipsum ....</p>
    <ul>
        <li><a href=#>Proyecto reciente #1</a></li>
        <li><a href=#>Proyecto reciente #2</a></li>
        <li><a href=#>Proyecto reciente #3</a></li>     
    </ul>

</section>  

<pie de página>
    <p>&copy; 2017 Mi Portafolio</p>
    <p>Sígueme en <a href=#>Twitter</a>, <a href=#>Instagram</a> y <a href=#>Dribbble</a></p>
</pie de página>