Comence hace unas semanas a practicar el desarrollo WEB, y curioseando al inspeccionar páginas serias (como páginas de google, entre otras), vi que no respetan la semántica que tanto te enseñan en vídeos de programación y las mencionan en documentaciones oficiales, utilizando las etiquetas <main>
, <header>
(dento en los encabezados principales como en textos), etiquetas para resaltar partes en específico de un texto como <em>
, <strong>
, etc. ¿Esto se debe a que es otra forma de desarollo? En su lugar vi que usan casi puros <div>
, indicando en su atributo ID o CLASS, lo que representa el mismo (un main por ejemplo, en vez de la misma etiqueta <main>
).
Código de ejemplo de un tutorial actualizado de como hacer la estrucura base (algunas etiquetas están mal aproposito para rellenar con texto):
<!-- Le indico la sección que será el cuerpo de mi documento con body -->
<body>
<!-- Etiqueta que indica un menú de navegación (encabezado del body) -->
<header>
<!-- Etiqueta que indica enlaces -->
<nav>
<!-- NO USAR SPAN, ES PARA EJEMPLO -->
<span>Menu 1</span>
<span>Menu 2</span>
<span>Menu 3</span>
<span>Menu 4</span>
<span>Menu 5</span>
</nav>
</header>
<main>
<!-- Los encabezados van de h1 (siendo este el más importante) a h6 (menos importante) -->
<header><h1>Noticias</h1></header>
<!-- Indico una sección entera con article -->
<article>
<header>
<h2>Noticia uno</h2>
<p>Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by Jane Smith</p>
</header>
<!-- Indico por ejemplo una noticia dentro de este artículo -->
<section>
<h3>Seccion uno de la noticia uno</h3>
<!-- Indico un párrafo -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima explicabo alias quis quasi dolores, veritatis sint cumque corrupti. Perferendis maiores tempora distinctio deleniti. Adipisci veritatis consequuntur laborum aliquid possimus esse.
</p>
</section>
<!-- Indico otra noticia dentro del mismo artículo -->
<section>
<!-- Indico otro párrafo -->
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam, cupiditate. Delectus laboriosam harum cumque illum, consequuntur incidunt odit sint temporibus quasi tempora est veritatis officia quisquam recusandae earum eveniet at.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam ut saepe, quaerat nobis rem aut facere laboriosam veniam eos vero incidunt consectetur temporibus dignissimos modi necessitatibus officiis aperiam quam nihil!
</p>
</section>
</article>
<!-- Indico una sección entera con article -->
<article>
<header>
<h2>Noticia dos</h2>
<p>Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by Jane Smith</p>
</header>
<section>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima explicabo alias quis quasi dolores, veritatis sint cumque corrupti. Perferendis maiores tempora distinctio deleniti. Adipisci veritatis consequuntur laborum aliquid possimus esse.
</p>
</section>
<section>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam, cupiditate. Delectus laboriosam harum cumque illum, consequuntur incidunt odit sint temporibus quasi tempora est veritatis officia quisquam recusandae earum eveniet at.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil cum odio voluptate vitae sint tempora quisquam voluptates eveniet, ad quidem, similique autem debitis ipsam distinctio necessitatibus officiis aliquam architecto quibusdam?
</p>
</section>
</article>
</main>
<!-- Menú de navegación con contenido relacionado -->
<aside>
<nav>
<!-- NO USAR P, ES PARA EJEMPLO -->
<p>Noticia 3</p>
<p>Noticia 4</p>
<p>Noticia 5</p>
<p>Noticia 6</p>
</nav>
</aside>
<!-- Información de la página -->
<footer>
<!-- NO USAR P, ES PARA EJEMPLO -->
<p>Direccion</p>
<p>Telefono</p>
<p>Horarios</p>
</footer>
</body>
Al inspeccionar la página de google (https://www.google.com/), vi que hasta tiene definidos estilos en el HTML (colocado en etiquetas <style>
) cuando se supone que esos deberían estar definidos en un archivo CSS ¿no?.