tag - Bootstrap y HTML5 etiquetas semánticas

w3schools html5

Question

Estoy empezando con Twitter Bootstrap y encontré una pregunta.

Recientemente, revisé algunos tutoriales sobre HTML5 y descubrí elementos semánticos como encabezado, navegación, pie de página, etc. que se deben usar en lugar de Div.

Ahora, mientras aprenden Bootstrap, la mayoría de ellos están usando la etiqueta Div.

Entonces, ¿cuál es el buen enfoque de las etiquetas Bootstrap Div o HTML5 Semantic Tags y por qué?

Gracias.

Answer 1

Bootstrap usa Divs para mostrar cómo se debe usar el marco. Esto se debe a que los divs son elementos de bloque generales que se pueden usar en casi todos los casos para contenedores. Pero el elemento que está utilizando con bootstrap no importa, porque usa clases para representar los elementos.

Por ejemplo, tendrá el mismo resultado en la pantalla cuando use:

<section class="col-md-4">Hello</section>

que al usar

<div class="col-md-4">Hello</div>

La verdadera diferencia será para los robots y lectores de accesibilidad porque, como usted dijo, los elementos HTML5 son semánticos.

Cada desarrollador elegirá el elemento con el que se sienta más cómodo. Pero mi punto de vista es: si confía en el enfoque semántico de los elementos html5 (y debería :)) la mejor manera sería utilizar elementos html5 para etiquetas que tengan un significado especial (como encabezado, pie de página, navegación, ... ) y use div para todos los casos en los que no exista ningún elemento html5.

Aquí hay una lista de todos los elementos con sus significados: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list

Answer 2

Debe usar etiquetas semánticas HTML5, ya que pueden ayudar tanto a los motores de búsqueda como a los lectores de pantalla .

La documentación y / o la plantilla de Bootstrap que usaste (en el momento de escribir) simplemente pareció quedarse atrás. No puedo encontrar ninguna motivación para no rodear los elementos div bootstrap (que se aplican correctamente al estilo) con etiquetas semánticas HTML5.

Por ejemplo, en el caso de nav se recomienda lo siguiente :

<nav role="navigation">
    <ul class="nav navbar-nav">
        <li><a href="#foo">foo</a></li>
        <li><a href="#bar">bar</a></li>
    </ul>
</nav>

La navegación de arranque actual para la barra de navegación señala lo mismo:

Asegúrese de usar un elemento o, si usa un elemento más genérico, como a, agregue una función = "navegación" a cada barra de navegación para identificarlo explícitamente como una región histórica para los usuarios de tecnologías de asistencia.