2

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?.

3
  • 1
    El canal lo incluí para hacer mas completa la pregunta y por si se queria ver el origen del video donde aprendí a estructurar mi codigo HTML. La duda en si era que al inspeccionar el codigo HTML de otras paginas WEBS, no veo la estructura que esperaria con multiples etiquetas para cada tipo de contenido, sino que veo el uso de <div> dandole un nombre de clase y usando ese <div> como un <main> en vez de usar justamente la etiqueta <main>.
    – Orion
    el 31 ene. 2020 a las 2:20
  • 2
    Es probable que esas paginas hayan sido realizadas antes de que existieran etiquetas como header o main dentro del estandar de HTML y los atributos class con main eran para estructurar mejor el marcado y que fuese intuitivo sobre que clase de división se quería dar a un sitio, igual eso depende de cada quien usar una etiqueta u otra para clasificar la información que pongas en tu HTML. Se pueden dar cosas ilógicas como alguien metiendo una etiqueta <video> dentro de un elemento <p>. para eso están las categorías de contenido que controlan que conjunto de etiquetas podrían estar en otras. el 31 ene. 2020 a las 6:02
  • 2
    Te dejo un enlace por si te sirve: developer.mozilla.org/en-US/docs/Web/Guide/HTML/… el 31 ene. 2020 a las 6:04

2 respuestas 2

3

Para lograr una correcta Semantica en tu web debes tener en cuenta además de las etiquetas del estándar HTML los Metadatos y Ontologías de tu web, que en resumen es la estructura de la información de tu web.

El objetivo de web semántica.

Este es un termino acuñado para lograr hacer que las web puedan ser procesadas , analizadas e interpretadas por maquinas, por lo tanto se crean recomendaciones y se agregan etiquetas en el estándar html para lograrlo como <video> , <canva> y las comunes <h1>, <section>.. etc

Por esta razón algunas paginas están orientadas a Motores de busqueda y otras solo Experiencia de Usuario, las que están orientadas a los Motores se concentra en Semantica+Ontologia y los de usuario Metadatos+Poca Semántica.

Semantica y Ontología.

La semántica hace referencia a que significado o interpretación se le pueda dar a un palabra, para el caso de html tenemos que <h1> representa un titulo principal, <video> representa un recurso de tipo vídeo en la web ( antes se usaba <object> o <embed>. para lograr ese fin ) pero <object> si es por semántica significa objeto que puede ser cualquier tipo de objeto , pero <video> es mas fácil de interpretar.

TIP 1: Cada vez que desees agregar la semantica correcta, piensa en cual etiqueta se adapta mejor a la interpretación y contenido quieras agregar.

Ahora la Ontología de tu web hace referencia a la estructura y relación de la etiquetas entre si , y es lo que realmente simplificará la interpretación que un Motor de Búsqueda o cualquier otro sistema pueda hacer de tu web.

Entonces debes tener definido claramente como estará estructurada y jerarquía tu web. siguiendo las recomendaciones seria.

<body> <!--1-->
 <section> <!--2-->
    <article> <!--3-->
       <h1>  <!--4-->
         <video> <!--5-->
         <img>  <!--5-->
         <ul><ol><li> <!--5-->
         <p> <!--5-->
          <em> <!--6-->
          <a>  <!--7-->
           <span> <!--8-->

Pero cuando están en desarrollo te encuentras que deseas que el usuario ingrese con click en el titulo o la imagen.

 <article>
    <a> <h1>
    <a> <image>

o incluso que sea una especia de tarjeta y se ingrese con click en cualquier sección del <article>.

<a>
 <article>
    <h1>
    <image>

y como solucionar ese dilema, pues primero tener en cuenta que este es un problema de Experiencia de Usuario no de semántica ni de ontologismo, la mejor solución para Motores de Busqueda es agregar significado a tu etiqueta <a> y de Experiencia de Usuario hace que este sepa que un link.

<article>
   <h1>La web semantica</h1>
   <img>
   <a rel="bookmark">Leer más sobre La Web Semántica</a>

Otra caso es que las web son mas complejas debido al web responsive y el elastic web, la recomendación es usar tantos div como quieras pero mantener el contenido junto.

<section>
  <div>
    <div>
      <div>
         <article>
             <div>
              <div>
                 <p>
                 <img>
                 <a>
</section>

2

Primero.

Hay que partir del hecho de que div como etiqueta existe al día de hoy con un soporte total por parte de los navegadores.

Segundo.

Si bien es cierto que al día de hoy existen etiquetas tales como:

  • video
  • audio
  • section
  • article
  • etc.

las cuales nos permiten semánticamente definir zonas de nuesta web por medio del significado que van a tener de acuerdo con el contenido que les demos, no debemos olvidar que las mismas forman parte de una recomendación con lo cual se entera implementación se vuelve opcional.

Sin embargo....

No por tomarse como opcional quiere decir que las mismas no tiene impacto o relevancia; de hecho si vamos al enlace provisto mas arriba podemos encontrar que y cito:

3.2.1. Semantics Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics). For example, the ol element represents an ordered list, and the lang attribute represents the language of the content.

These definitions allow HTML processors, like web browsers and search engines, to present documents and applications consistently in different contexts.

Que podemos traducir como:

Los elementos semánticos, atributos, así como los valores de los atributos en HTML son definidos (por su especificación) para tener ciertos significados(semántica). Por ejemplo, el elemento ol representa una lista ordenada y el atributo lang representa el lenguaje del contenido.

Estas definiciones permiten a los procesadores de HTML como los navegadores web y motores de búsqueda presentar documentos y aplicaciones de forma consistente en diferentes contextos.

Resumen:

  • Muchas web se siguen construyendo con solo una lista interminable de divs por que al ser una etiqueta válida el navegador la interpreta y genera la salida en pantalla correspondiente
  • La misma especificación de la W3C (para evitar caer en opiniones o suposiciones) indica los beneficios que para el usuario final supone una web que semánticamente sea expresiva a través de un correcto marcado HTML
  • En términos generales el marcado HTML no es estricto y menos en cuanto al uso de etiquetas, dado eso seguirás viendo webs con divtitis aguda
1
  • Correcto, y seguramente si en mi equipo de trabajo tienen divtitis, me tocara programar WEBS con puros divs. Yo le doy mucho valor e importancia al correcto uso de cada cosa por mas que a simple vista parezca igual y hasta mas facil usar divs, en lugar de la etiqueta que corresponeria (aunque se dice que para el posicionamiento en el buscador no lo es por lo que estuve leyendo).
    – Orion
    el 31 ene. 2020 a las 15:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.