{"id":221,"date":"2024-05-21T09:54:24","date_gmt":"2024-05-21T07:54:24","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=221"},"modified":"2024-05-21T09:54:24","modified_gmt":"2024-05-21T07:54:24","slug":"45-elementos-semanticos-html","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/45-elementos-semanticos-html\/","title":{"rendered":"45. Elementos sem\u00e1nticos HTML"},"content":{"rendered":"\n

Que son elementos sem\u00e1nticos<\/h2>\n\n\n\n

Un elemento sem\u00e1ntico describe claramente su significado tanto para el navegador como para el desarrollador. Ejemplos de elementos no sem\u00e1nticos: <div><\/em><\/strong> y <span><\/em><\/strong>: no dice nada sobre su contenido. Ejemplos de elementos sem\u00e1nticos: <form><\/em><\/strong>, <table><\/em><\/strong> y <article><\/em><\/strong> – Define claramente su contenido.<\/p>\n\n\n\n\n\n\n\n

Elementos sem\u00e1nticos en HTML<\/h2>\n\n\n\n

Muchos sitios web contienen c\u00f3digo HTML como: <div id=\u00bbnav\u00bb><\/em> <div class=\u00bbheader\u00bb><\/em> <div id=\u00bbfooter\u00bb><\/em><\/strong> para indicar navegaci\u00f3n, encabezado<\/strong> y pie<\/strong> de p\u00e1gina.<\/p>\n\n\n\n

En HTML hay algunos elementos sem\u00e1nticos que se pueden usar para definir diferentes partes de una p\u00e1gina web:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

El elemento <section><\/h2>\n\n\n\n

El elemento <section><\/em><\/strong> define una secci\u00f3n en un documento. De acuerdo con la documentaci\u00f3n HTML de W3C: \u00abUna secci\u00f3n es una agrupaci\u00f3n tem\u00e1tica de contenido, generalmente con un encabezado\u00bb. Ejemplos de d\u00f3nde se puede usar un elemento <section><\/em><\/strong>:<\/p>\n\n\n\n

    \n
  • Cap\u00edtulos<\/li>\n\n\n\n
  • Introducci\u00f3n<\/li>\n\n\n\n
  • Noticias<\/li>\n\n\n\n
  • Informaci\u00f3n de contacto<\/li>\n<\/ul>\n\n\n\n

    Normalmente, una p\u00e1gina web se puede dividir en secciones para la introducci\u00f3n, el contenido y la informaci\u00f3n de contacto.<\/p>\n\n\n\n

    El elemento <article><\/h2>\n\n\n\n

    El elemento <article><\/em><\/strong> especifica contenido independiente. Un art\u00edculo debe tener sentido por s\u00ed mismo y debe ser posible distribuirlo independientemente del resto del sitio web. Ejemplos de d\u00f3nde se puede usar el elemento <article><\/em><\/strong>:<\/p>\n\n\n\n

      \n
    • Mensajes del foro<\/li>\n\n\n\n
    • Publicaciones de blog<\/li>\n\n\n\n
    • Comentarios del usuario<\/li>\n\n\n\n
    • Tarjetas de productos<\/li>\n\n\n\n
    • Art\u00edculos del peri\u00f3dico<\/li>\n<\/ul>\n\n\n\n

      Anidar <article> en <section> o viceversa<\/h2>\n\n\n\n

      El elemento <article><\/em><\/strong> especifica contenido independiente e independiente. El elemento <section><\/em><\/strong> define la secci\u00f3n en un documento. \u00bfPodemos usar las definiciones para decidir c\u00f3mo anidar esos elementos? \u00a1No podemos!. Por lo tanto, encontrar\u00e1s p\u00e1ginas HTML con elementos <section><\/em><\/strong> que contienen elementos <article><\/em><\/strong> y elementos <article><\/em><\/strong> que contienen elementos <section><\/em><\/strong>.<\/p>\n\n\n\n

      El elemento <header><\/h2>\n\n\n\n

      El elemento <header><\/em><\/strong> representa un contenedor de contenido introductorio o un conjunto de enlaces de navegaci\u00f3n. Un elemento <header><\/em><\/strong> normalmente contiene:<\/p>\n\n\n\n

        \n
      • uno o m\u00e1s elementos de encabezado (<h1> – <h6>)<\/li>\n\n\n\n
      • logotipo o icono<\/li>\n\n\n\n
      • informaci\u00f3n de autor\u00eda<\/li>\n<\/ul>\n\n\n\n
        \n

        Nota<\/strong>: Puedes tener varios elementos <header><\/em><\/strong> en un documento HTML. Sin embargo, <header><\/em><\/strong> no se puede colocar dentro de un <footer><\/em><\/strong>, <address><\/em><\/strong> u otro elemento <header>.<\/em><\/strong><\/p>\n<\/blockquote>\n\n\n\n

        Ejm<\/strong><\/p>\n\n\n\n

        <!DOCTYPE html>\n<html>\n<body>\n\n<article>\n<header>\n<h1>What Does WWF Do?<\/h1>\n<p>WWF's mission:<\/p>\n<\/header>\n<p>WWF's mission is to stop the degradation of our planet's \nnatural environment, and build a future in which humans live \nin harmony with nature.<\/p>\n<\/article>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
        El elemento <footer><\/h2>\n\n\n\n
        El elemento <footer><\/em><\/strong> define un pie de p\u00e1gina para un documento o secci\u00f3n. Un elemento <footer><\/em><\/strong> normalmente contiene:<\/p>\n\n\n\n
          \n
        • Informaci\u00f3n de autor\u00eda<\/li>\n\n\n\n
        • Informaci\u00f3n registrada<\/li>\n\n\n\n
        • Informaci\u00f3n del contacto<\/li>\n\n\n\n
        • Mapa del sitio<\/li>\n\n\n\n
        • Volver a los enlaces superiores<\/li>\n\n\n\n
        • Documentos relacionados<\/li>\n<\/ul>\n\n\n\n
          Puedes encontrar diferentes <footer><\/em><\/strong> en un documento HTML.<\/p>\n\n\n\n
          El elemento <nav><\/h2>\n\n\n\n
          El elemento <nav><\/em><\/strong> define un set de enlaces de navegaci\u00f3n.<\/p>\n\n\n\n
          Ten en cuenta que NO todos los enlaces de un documento deben estar dentro de un elemento <nav><\/em><\/strong>. El elemento <nav><\/em><\/strong> est\u00e1 dise\u00f1ado solo para el bloque principal de enlaces de navegaci\u00f3n. Los navegadores, como los lectores de pantalla para usuarios discapacitados, pueden usar este elemento para determinar si omitir la representaci\u00f3n inicial de este contenido.<\/p>\n\n\n\n
          El elemento <aside><\/h2>\n\n\n\n
          El elemento <aside><\/em><\/strong> define alg\u00fan contenido adem\u00e1s del contenido en el que se coloca (como una barra lateral). El contenido <aside><\/em><\/strong> debe estar indirectamente relacionado con el contenido circundante.<\/p>\n\n\n\n
          Los elementos <figure> y <figcaption><\/h2>\n\n\n\n
          La etiqueta <figure><\/em><\/strong> especifica contenido independiente, como ilustraciones, diagramas, fotos, listas de c\u00f3digos, etc. La etiqueta <figcaption><\/em><\/strong> define un t\u00edtulo para un elemento <figure><\/em><\/strong>. El elemento <figcaption><\/em><\/strong> se puede colocar como el primero o como el \u00faltimo hijo de un elemento <figure><\/em><\/strong>. El elemento <img><\/em><\/strong> define la imagen\/ilustraci\u00f3n real.<\/p>\n\n\n\n
          Ejm<\/strong><\/p>\n\n\n\n
          <!DOCTYPE html>\n<html>\n<body>\n\n<h2>Places to Visit<\/h2>\n\n<p>Puglia's most famous sight is the unique conical houses\n (Trulli) found in the area around Alberobello, a declared UNESCO\n World Heritage Site.<\/p>\n\n<figure>\n<img src=\"pic_trulli.jpg\" alt=\"Trulli\" style=\"width:100%\">\n<figcaption>Fig.1 - Trulli, Puglia, Italy.<\/figcaption>\n<\/figure>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
          Por qu\u00e9 elementos sem\u00e1nticos<\/h2>\n\n\n\n
          Seg\u00fan el W3C: \u00abUna Web sem\u00e1ntica permite que los datos se compartan y reutilicen entre aplicaciones, empresas y comunidades\u00bb.<\/p>\n","protected":false},"excerpt":{"rendered":"
          Que son elementos sem\u00e1nticos Un elemento sem\u00e1ntico describe claramente su significado tanto para el navegador como para el desarrollador. Ejemplos de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":44,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-221","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Que son elementos sem\u00e1nticos Un elemento sem\u00e1ntico describe claramente su significado tanto para el navegador como para el desarrollador. Ejemplos de […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=221"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/221\/revisions"}],"predecessor-version":[{"id":224,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/221\/revisions\/224"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}