{"id":1037,"date":"2014-11-02T12:33:45","date_gmt":"2014-11-02T17:33:45","guid":{"rendered":"https:\/\/e-lexia.com\/blog\/?p=1037"},"modified":"2024-11-01T11:47:00","modified_gmt":"2024-11-01T16:47:00","slug":"estructura-de-un-hiperdocumento","status":"publish","type":"post","link":"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/","title":{"rendered":"Estructura de un hiperdocumento"},"content":{"rendered":"<p>El primer paso para la producci\u00f3n web es comprender c\u00f3mo se estructura una p\u00e1gina: cu\u00e1les son los elementos claves y c\u00f3mo estos se definen a partir de est\u00e1ndares web que permitan su correcta <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/indexacion-web\/\" rel=\"noopener\" target=\"_blank\">indexaci\u00f3n<\/a> en motores de b\u00fasqueda y visualizaci\u00f3n en navegadores.<\/p>\n<p>En este art\u00edculo intentar\u00e9 dar una gu\u00eda al respecto. \u00a1Vamos!<\/p>\n<p>Por cierto, he actualizado esta entrada (09-2019) como material de apoyo al curso en \u00abDise\u00f1o de proyectos educativos digitales\u00bb que oriento en la Universidad de Antioquia.<\/p>\n<p><!-- Google Adsense --><\/p>\n<div class=\"adsense\">\n  <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7923590131153633\" crossorigin=\"anonymous\"><\/script><br \/>\n  <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-7923590131153633\" data-ad-slot=\"5345374831\"><\/ins><br \/>\n  <script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>\n<\/div>\n<h2>Estructura b\u00e1sica<\/h2>\n<p>Conocer el interior de una p\u00e1gina web precisa dividirla en dos grandes partes: la <strong>cabeza<\/strong> y el <strong>cuerpo<\/strong>.<\/p>\n<p>En la primera se especifica informaci\u00f3n sobre el documento que es de inter\u00e9s para los motores de b\u00fasqueda y para los navegadores web. Algunos de estos datos son:<\/p>\n<ul>\n<li>T\u00edtulo<\/li>\n<li>Juego de caracteres<\/li>\n<li>Descripci\u00f3n<\/li>\n<li>Palabras claves<\/li>\n<li>Instrucciones de programaci\u00f3n<\/li>\n<li>Instrucciones de apariencia<\/li>\n<\/ul>\n<p>Excepto el t\u00edtulo, esta informaci\u00f3n no es visualizada por el navegador, pero s\u00ed tiene relaci\u00f3n e impacto directo con el contenido de la p\u00e1gina. Por ejemplo, el juego de caracteres define \u2013entre otras- si el navegador puede interpretar correctamente las tildes y la letra \u201c\u00f1\u201d.<\/p>\n<p>La segunda parte, el <strong>cuerpo<\/strong>, agrupa las etiquetas de contenido multimedia, como:<\/p>\n<ul>\n<li>P\u00e1rrafo<\/li>\n<li>Negrita<\/li>\n<li>Cursiva<\/li>\n<li>Listas<\/li>\n<li>Im\u00e1genes<\/li>\n<li>Tablas<\/li>\n<li>Video y audio<\/li>\n<\/ul>\n<p>Esta informaci\u00f3n s\u00ed es visualizada por el navegador.<\/p>\n<p>As\u00ed, en resumen, podemos afirmar que una p\u00e1gina web tiene dos partes: la cabeza (<code>&lt;HEAD&gt;<\/code>) y el cuerpo (<code>&lt;BODY&gt;<\/code>). En la primera hay informaci\u00f3n que le interesa a Google, y en la segunda est\u00e1 el contenido que puede leer nuestro lector.<\/p>\n<h2>Cuidado con las etiquetas HTML<\/h2>\n<p>En el p\u00e1rrafo anterior aparecen dos elementos marcados en letra roja: <code>&lt;HEAD&gt;<\/code> y <code>&lt;BODY&gt;<\/code>. Estos son etiquetas HTML y permiten al navegador interpretar correctamente lo que queremos mostrar.<\/p>\n<p>\u00a1Ojo! Cualquier imprecisi\u00f3n con el marcado sem\u00e1ntico, es decir, con la escritura de estas etiquetas, puede afectar la correcta visualizaci\u00f3n del contenido y, por ende, la experiencia del usuario.<\/p>\n<p>Lo anterior sin contar que si las etiquetas del <code>&lt;HEAD&gt;<\/code> est\u00e1n incorrectas es posible que nuestra p\u00e1gina no funcione ni sea indexada por los motores de b\u00fasqueda.<\/p>\n<p>Y es que el HTML tiene una sintaxis propia, la cual debe conservarse. Por ejemplo, para frases sencillas en espa\u00f1ol utilizamos la estructura: <em>sujeto + verbo + complemento<\/em>. Es la mejor forma de escribir. En HTML funciona igual.<\/p>\n<h2>Iniciando un documento web<\/h2>\n<p>Vamos a crear nuestra primera p\u00e1gina web.<\/p>\n<p>Imaginemos que el documento tiene dos cajas: el <code>&lt;HEAD&gt;<\/code> y el <code>&lt;BODY&gt;<\/code>. En cada caja se almacena informaci\u00f3n, recursos y contenidos. Esto lo revisamos anteriormente \u00bfcierto? Pero estas dos cajas est\u00e1n dentro de una caja mayor: el <code>&lt;HTML&gt;<\/code>.<\/p>\n<p>As\u00ed, una p\u00e1gina web es una gran caja, llamada <code>&lt;HTML&gt;<\/code>, que agrupa dos cajas: <code>&lt;HEAD&gt;<\/code> y <code>&lt;BODY&gt;<\/code>.<\/p>\n<p>Por recomendaci\u00f3n del est\u00e1ndar, cada caja tiene una etiqueta de apertura, por ejemplo:<\/p>\n<p>La etiqueta de apertura de la caja mayor es <code>&lt;HTML&gt;<\/code> y su etiqueta de cierre es <code>&lt;\/HTML&gt;<\/code>. Si miramos en detalle, la diferencia entre una y otra es la barra diagonal en la etiqueta de cierre.<\/p>\n<p>Y para las dos cajas siguientes, las etiquetas de inicio y final, respectivamente, son: <code>&lt;HEAD&gt;<\/code>, <code>&lt;\/HEAD&gt;<\/code>, y <code>&lt;BODY&gt;<\/code>, <code>&lt;\/BODY&gt;<\/code>.<\/p>\n<p>Estas instrucciones permiten indicarle al navegador d\u00f3nde empieza y termina una caja.<\/p>\n<p>El c\u00f3digo b\u00e1sico de un documento web es:<\/p>\n<pre>\r\n&lt;html&gt;\r\n\r\n  &lt;head&gt;\r\n  &lt;\/head&gt;\r\n\r\n  &lt;body&gt;\r\n  &lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Este es el c\u00f3digo b\u00e1sico de un documento web. Se presenta la etiqueta <code>&lt;HTML&gt;<\/code> como gran contenedor. Dentro de ella aparecen <code>&lt;HEAD&gt;<\/code> y <code>&lt;BODY&gt;<\/code>, respectivamente.<\/p>\n<p>Este c\u00f3digo indica que:<\/p>\n<ul>\n<li>La primera etiqueta del documento es <code>&lt;HTML&gt;<\/code><\/li>\n<li>La etiqueta <code>HTML<\/code> agrupa las dos partes de la p\u00e1gina: <code>&lt;HEAD&gt;<\/code> y <code>&lt;BODY&gt;<\/code><\/li>\n<li>El <code>&lt;HEAD&gt;<\/code> se define antes que el <code>&lt;BODY&gt;<\/code><\/li>\n<li>Al final el documento se define el cierre <\/code>&lt;\/HTML&gt;<\/code><\/li>\n<\/ul>\n<p>\u00a1Felicidades! Acabas de aprender a crear una p\u00e1gina web.<\/p>\n<h2>Optimizando el HEAD<\/h2>\n<p>El <code>&lt;HEAD&gt;<\/code>, como se mencion\u00f3 anteriormente, es la primera parte de un documento web basado en HTML.<\/p>\n<p>All\u00ed se definen algunas etiquetas que agregan datos sobre contenido, contexto, cobertura, periodicidad, entre otros.<\/p>\n<p>Esta informaci\u00f3n permite a motores de b\u00fasqueda, como Google o Bing, realizar procedimientos de indexaci\u00f3n de contenidos m\u00e1s precisos.<\/p>\n<p>Las etiquetas b\u00e1sicas para construir un buen <code>HEAD<\/code> son:<\/p>\n<p><code>&lt;META CHARSET=\"UTF-8\"&gt;<\/code>: Permite utilizar un juego de caracteres que contiene letras, signos ortogr\u00e1ficos y s\u00edmbolos del ingl\u00e9s y espa\u00f1ol. En otras palabras, UTF-8 permite que el contenido web presente tildes y la consonante \u201c\u00f1\u201d.<\/p>\n<p><code>&lt;TITLE&gt;<\/code>: Como su nombre lo indica, permite asignar un t\u00edtulo al documento. Este dato aparece en la barra superior y\/o pesta\u00f1a del navegador.<\/p>\n<p><code>&lt;META NAME=\"DESCRIPTION\" CONTENT=\" \"&gt;<\/code>: Permite anexar una descripci\u00f3n a cada p\u00e1gina. Esta aparece en los resultados de b\u00fasqueda. La extensi\u00f3n recomendada es entre 70 y 160 caracteres.<\/p>\n<p><code>&lt;META NAME=\"KEYWORDS\" CONTENT=\"#\"&gt;<\/code>: Permite anexar palabras claves sobre el contenido de cada p\u00e1gina. Aunque algunos autores exponen que ya no es necesario, es recomendable anexarlas para el uso en sistemas de b\u00fasqueda propios o meta-buscadores. Se recomiendan 10 palabras claves por documento.<\/p>\n<p><code>&lt;META NAME=\"VIEWPORT\" CONTENT=\"#\"&gt;<\/code>: Permite que los navegadores Web de dispositivos m\u00f3viles identifiquen el documento HTML y lo visualicen correctamente, de acuerdo a las instrucciones de <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/css\/\" rel=\"noopener\" target=\"_blank\">CSS<\/a>.<\/p>\n<p><code>&lt;LINK REL =\"ICON\" TYPE=\"IMAGE\/PNG \" HREF=\"#\"&gt;<\/code>: Permite asignar una imagen como icono del documento. Aparece en la barra superior y\/o pesta\u00f1a de navegaci\u00f3n.<\/p>\n<p>Miremos una aplicaci\u00f3n de estas etiquetas en el <code>HEAD<\/code>:<\/p>\n<pre>\r\n&lt;html&gt;\r\n\r\n  &lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot;&gt;\r\n    &lt;title&gt;T\u00edtulo de la p\u00e1gina&lt;\/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;Esta es la descripci\u00f3n del documento. No debe exceder los 160 caracteres&quot;&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;palabras, claves, m\u00e1ximo, diez, por, documento&quot;&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;\r\n    &lt;link rel=&quot;icon&quot; type=&quot;image\/png&quot; href=&quot;img\/design\/fav-icon.png&quot;&gt;\r\n  &lt;\/head&gt;\r\n\r\n  &lt;body&gt;\r\n  &lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><!-- ASESOR COMUNICATIVO --><\/p>\n<div class=\"destacado-asesor\">\n<div class=\"destacado-asesor__imagen\">\n    <a href=\"https:\/\/e-lexia.com\/contacto.html\"><br \/>\n      <img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2023\/01\/asesor-comunicativo-juancadotcom.png\" alt=\"Juan Carlos Morales S., asesor en comunicaci\u00f3n digital\"><br \/>\n    <\/a>\n   <\/div>\n<div class=\"destacado-asesor__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/contacto.html\">\u00bfNecesitas asesor\u00eda en comunicaci\u00f3n digital?<\/a><\/h2>\n<p>Dise\u00f1a y optimiza tus proyectos en comunicaci\u00f3n digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.<br \/>\n      <a class=\"cta-asesor\" href=\"https:\/\/e-lexia.com\/contacto.html\">Conversemos<\/a>\n     <\/p>\n<\/p><\/div>\n<\/div>\n<h2>Otras etiquetas en el HEAD<\/h2>\n<p>Para ser m\u00e1s precisos y ampliar las posibilidades de un documento HTML, el <code>HEAD<\/code> permite a\u00f1adir otras etiquetas sem\u00e1nticas.<\/p>\n<p>Esto no indica necesariamente que toda p\u00e1gina debe tener un <code>HEAD<\/code> similar; el \u00e9xito en el dise\u00f1o de recursos HTML est\u00e1 en la precisi\u00f3n, oportunidad y pertinencia en el uso de las etiquetas.<\/p>\n<p>Tomando como referente el sitio Web <a href=\"http:\/\/www.e-lexia.com\">http:\/\/www.e-lexia.com<\/a>, algunas etiquetas que pueden robustecer y optimizar el documento son:<\/p>\n<p><code>&lt;!DOCTYPE html&gt;<\/code>: Aunque est\u00e1 etiqueta no est\u00e1 inmersa en el <code>HEAD<\/code> (ni en el <code>HTML<\/code>) se convierte en una instrucci\u00f3n necesaria al dise\u00f1ar en HTML5. Su funci\u00f3n b\u00e1sicamente es indicar al navegador la versi\u00f3n del lenguaje de marcado que utiliza el documento.<\/p>\n<p><code>&lt;LINK REL=\"STYLESHEET\" HREF=\" \"&gt;<\/code>: A trav\u00e9s de esta etiqueta se vinculan archivos de estilo en cascada (CSS).<\/p>\n<p><code>&lt;META NAME=\"AUTHOR\" CONTENT=\"e-Lexia\"&gt;<\/code>: Esta meta indica a los sistemas de indexaci\u00f3n y recuperaci\u00f3n de contenido el autor del mismo. Puede ser persona natural o jur\u00eddica.<\/p>\n<p><code>&lt;META NAME=\"REVISIT-AFTER\" CONTENT=\"90 days\"&gt;<\/code>: El uso de esta etiqueta permite a los robots (peque\u00f1os <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/algoritmo\/\" rel=\"noopener\" target=\"_blank\">algoritmos<\/a> que visitan los sitios web en busca de contenidos) programar su regreso al sitio en busca de actualizaciones.<\/p>\n<p><code>&lt;META NAME=\"RATING\" CONTENT=\"general\"&gt;<\/code>: Permite clasificar el contenido de acuerdo a las audiencias. Sus valores pueden ser: <em lang=\"en\">general, mature, restricted, 14 years, safe for kids<\/em>.<\/p>\n<p><code>&lt;META NAME=\"ROBOTS\" CONTENT=\"index, follow\"&gt;<\/code>: Por \u00faltimo, esta etiqueta permite o deshabilita la indexaci\u00f3n del contenido por parte de los <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/buscador\/\" rel=\"noopener\" target=\"_blank\">buscadores<\/a>. Si su sitio es p\u00fablico, de inter\u00e9s general, la idea es permitir la indexaci\u00f3n y seguimiento.<\/p>\n<p>El resultado final del proceso de marcado sem\u00e1ntico para la primera parte del documento (&lt;HEAD&gt;) es:<\/p>\n<pre>\r\n&lt;html&gt;\r\n\r\n  &lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot;&gt;\r\n    &lt;title&gt;T\u00edtulo de la p\u00e1gina&lt;\/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;Esta es la descripci\u00f3n del documento. No debe exceder los 160 caracteres&quot;&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;palabras, claves, m\u00e1ximo, diez, por, documento&quot;&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;\r\n    &lt;link rel=&quot;icon&quot; type=&quot;image\/png&quot; href=&quot;img\/design\/fav-icon.png&quot;&gt;\r\n\r\n    &lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;css\/estilos.css&quot;&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;Mi empresa&quot;&gt;\r\n    &lt;meta name=&quot;revisit-after&quot; content=&quot;90 days&quot;&gt;\r\n    &lt;meta name=&quot;rating&quot; content=&quot;general&quot;&gt;\r\n    &lt;meta name=&quot;robots&quot; content=&quot;noindex, nofollow&quot;&gt;\r\n  &lt;\/head&gt;\r\n\r\n  &lt;body&gt;\r\n  &lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>En \u201c<a href=\"https:\/\/www.youtube.com\/watch?v=K4DTneQ6N_c\" target=\"_blank\" rel=\"noopener noreferrer\">Producci\u00f3n Web con HTML y CSS (cap06)<\/a>\u201d puede encontrar m\u00e1s informaci\u00f3n sobre la optimizaci\u00f3n del HEAD, teniendo presente la t\u00e9cnica SEO<\/p>\n<div class=\"marco-yt\">\n<div class=\"video-yt\">\n<iframe loading=\"lazy\" width=\"560\" height=\"400\" src=\"https:\/\/www.youtube.com\/embed\/K4DTneQ6N_c\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<\/div>\n<p class=\"youtube-video\"><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/logo-youtube.png\">En el <a href=\"https:\/\/www.youtube.com\/@e-lexia?sub_confirmation=1\" target=\"_blank\" rel=\"noopener\">canal YouTube \u00abe-Lexia.com\u00bb<\/a> puedes encontrar m\u00e1s videos sobre el tema.<\/p>\n<h2>Etiquetas del BODY<\/h2>\n<p>El cuerpo del documento (<code>&lt;BODY&gt;<\/code>) es la zona que permite la <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/interactividad\/\" rel=\"noopener\" target=\"_blank\">interactividad<\/a> entre usuario y recurso web; pues all\u00ed se insertan textos, im\u00e1genes, formularios, audiovisuales, enlaces y cualquier otro recurso.<\/p>\n<p>Sin duda es la regi\u00f3n de mayor trabajo para creadores de contenido (dise\u00f1adores gr\u00e1ficos, bibliotec\u00f3logos, comunicadores y otras disciplinas).<\/p>\n<p>Aunque la informaci\u00f3n que se presenta en <code>HEAD<\/code> es importante para el \u00e9xito del sitio, el <code>BODY<\/code> presenta la informaci\u00f3n hito de la estrategia digital.<\/p>\n<p>Los algoritmos de indexaci\u00f3n de informaci\u00f3n de Google se concentran en dar mayor importancia al trabajo que se realice aqu\u00ed. Incluso, muchas de las nuevas etiquetas sem\u00e1nticas de HTML5 apuntan a la optimizaci\u00f3n del <code>BODY<\/code>.<\/p>\n<p>Para iniciar el marcado es necesario tener presente qu\u00e9 y c\u00f3mo se quiere lograr. Es decir, identificar cada elemento y conocer cu\u00e1l es la etiqueta HTML que mejor lo define.<\/p>\n<p>Algunas de las etiquetas HTML de contenido son:<\/p>\n<ul>\n<li>P\u00e1rrafo: <code>&lt;P&gt;<\/code><\/li>\n<li>Encabezados:<\/li>\n<ul>\n<li>Primer nivel: <code>&lt;H1&gt;<\/code><\/li>\n<li>Segundo nivel: <code>&lt;H2&gt;<\/code><\/li>\n<li>Tercer nivel: <code>&lt;H3&gt;<\/code><\/li>\n<li>Cuarto nivel: <code>&lt;H4&gt;<\/code><\/li>\n<li>Quinto nivel: <code>&lt;H5&gt;<\/code><\/li>\n<li>Sexto nivel: <code>&lt;H6&gt;<\/code><\/li>\n<\/ul>\n<li>Tabla:<\/li>\n<ul>\n<li>Definici\u00f3n: <code>&lt;TABLE&gt;<\/code><\/li>\n<li>Fila: <code>&lt;TR&gt;<\/code><\/li>\n<li>Columna: <code>&lt;TD&gt;<\/code><\/li>\n<li>Encabezado: <code>&lt;TH&gt;<\/code><\/li>\n<\/ul>\n<li><a href=\"https:\/\/e-lexia.com\/diccionario-tic\/enlace-web\/\" rel=\"noopener\" target=\"_blank\">Enlace<\/a>: <code>&lt;A&gt;<\/code><\/li>\n<li>Cita de otro recurso: <code>&lt;BLOCKQUOTE&gt;<\/code><\/li>\n<li>Lista sin ordenar: <code>&lt;UL&gt;<\/code><\/li>\n<li>Lista ordenada: <code>&lt;OL&gt;<\/code><\/li>\n<li>Elemento de lista: <code>&lt;LI&gt;<\/code><\/li>\n<li>Imagen: <code>&lt;IMG&gt;<\/code><\/li>\n<\/ul>\n<div class=\"destacado-libro\">\n<div class=\"destacado-libro__imagen\">\n  <a href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\"><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2021\/04\/libro-prodccion-contenidos-web.jpg\" alt=\"Producci\u00f3n de contenidos web. Libro gratuito. Autor: Juan Carlos Morales S.\"><\/a>\n <\/div>\n<div class=\"destacado-libro__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\">Producci\u00f3n de contenidos web<\/a><\/h2>\n<p>  Descarga este libro electr\u00f3nico de acceso libre, donde se presentan recomendaciones de producci\u00f3n multimedia.<br \/>\n  <a class=\"cta-libro\" href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\">Obtener una copia<\/a>\n <\/div>\n<\/div>\n<h2>Creando el BODY<\/h2>\n<p>Continuando con el c\u00f3digo, un ejemplo de p\u00e1gina web con contenido ser\u00eda:<\/p>\n<pre>\r\n&lt;html&gt;\r\n\r\n  &lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot;&gt;\r\n    &lt;title&gt;T\u00edtulo de la p\u00e1gina&lt;\/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;Esta es la descripci\u00f3n del documento. No debe exceder los 160 caracteres&quot;&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;palabras, claves, m\u00e1ximo, diez, por, documento&quot;&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;\r\n    &lt;link rel=&quot;icon&quot; type=&quot;image\/png&quot; href=&quot;img\/design\/fav-icon.png&quot;&gt;\r\n\r\n    &lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;css\/estilos.css&quot;&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;Mi empresa&quot;&gt;\r\n    &lt;meta name=&quot;revisit-after&quot; content=&quot;90 days&quot;&gt;\r\n    &lt;meta name=&quot;rating&quot; content=&quot;general&quot;&gt;\r\n    &lt;meta name=&quot;robots&quot; content=&quot;noindex, nofollow&quot;&gt;\r\n  &lt;\/head&gt;\r\n\r\n  &lt;body&gt;\r\n    &lt;h1&gt;Tema principal de la p\u00e1gina&lt;\/h1&gt;\r\n    &lt;p&gt;Este es un primer p\u00e1rrafo. La recomendaci\u00f3n es abordar una idea por p\u00e1rrafo, pues la lectura en pantalla es diferente a la de los libros.&lt;\/p&gt;\r\n    &lt;h2&gt;Aq\u00fa\u00ed hay un subt\u00edtulo de segundo nivel&lt;\/h2&gt;\r\n    &lt;p&gt;Las listas permiten presentar diferentes elementos y evitar las comas enumerativas. Esto, adem\u00e1s, facilita la lectura.&lt;\/p&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;Elemento 1&lt;\/li&gt;\r\n      &lt;li&gt;Elemento 2&lt;\/li&gt;\r\n      &lt;li&gt;Elemento 3&lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;h3&gt;Un nuevo encabezado, pero de nivel 3&lt;\/h3&gt;\r\n    &lt;table&gt;\r\n      &lt;tr&gt;\r\n        &lt;td&gt;Aqu\u00ed va contenido&lt;\/td&gt;\r\n        &lt;td&gt;Aqu\u00ed tambi\u00e9n&lt;\/td&gt;\r\n      &lt;\/tr&gt;\r\n    &lt;\/table&gt;\r\n  &lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>\u00a1Bien! Ahora ya sabes crear una p\u00e1gina web. Lo que contin\u00faa es producir contenidos.<\/p>\n<p>Si quieres ampliar m\u00e1s sobre el tema, te invito a leer estas dos entradas:<\/p>\n<ul>\n<li><a title=\"\u00bfQu\u00e9 es HTML?\" href=\"https:\/\/e-lexia.com\/blog\/que-es-html\/\">\u00bfQu\u00e9 es HTML?<\/a><\/li>\n<li><a title=\"Origen del HTML\" href=\"https:\/\/e-lexia.com\/blog\/origen-del-html\/\">Origen del HTML<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>El primer paso para la producci\u00f3n web es comprender c\u00f3mo se estructura una p\u00e1gina: cu\u00e1les son los elementos claves y c\u00f3mo estos se definen a partir de est\u00e1ndares web que permitan su correcta indexaci\u00f3n en motores de b\u00fasqueda y visualizaci\u00f3n en navegadores. En este art\u00edculo intentar\u00e9 dar una gu\u00eda al&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1645,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[65,66],"class_list":["post-1037","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-produccion-web","tag-codigo","tag-hipermedia","has-post-thumbnail-archive"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.8 - aioseo.com -->\n\t<meta name=\"description\" content=\"Aprende a estructurar sem\u00e1ntica un documento web. Conoce las etiquetas y cu\u00e1l es su valor sem\u00e1ntico, por que no es un asunto de look&amp;feel.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"juancadotcom\"\/>\n\t<meta name=\"google-site-verification\" content=\"FTr3psdS63RenyhSIowbaMRJxtaRFHXfmlKgDARf-x4\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.8\" \/>\n\t\t<meta property=\"og:locale\" content=\"es_ES\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Escuela Digital - Aprende con e-Lexia.com\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Estructura de un hiperdocumento - Escuela Digital\" \/>\n\t\t<meta property=\"og:description\" content=\"Aprende a estructurar sem\u00e1ntica un documento web. Conoce las etiquetas y cu\u00e1l es su valor sem\u00e1ntico, por que no es un asunto de look&amp;feel.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/\" \/>\n\t\t<meta property=\"fb:admins\" content=\"42896562054\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"975\" \/>\n\t\t<meta property=\"og:image:height\" content=\"550\" \/>\n\t\t<meta property=\"article:tag\" content=\"escuela de producci\u00f3n\" \/>\n\t\t<meta property=\"article:tag\" content=\"c\u00f3digo\" \/>\n\t\t<meta property=\"article:tag\" content=\"hipermedia\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2014-11-02T17:33:45+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2024-11-01T16:47:00+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@juancadotcom\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Estructura de un hiperdocumento - Escuela Digital\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Aprende a estructurar sem\u00e1ntica un documento web. Conoce las etiquetas y cu\u00e1l es su valor sem\u00e1ntico, por que no es un asunto de look&amp;feel.\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@juancadotcom\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg\" \/>\n\t\t<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t\t<meta name=\"twitter:data1\" content=\"juancadotcom\" \/>\n\t\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura estimado\" \/>\n\t\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/estructura-de-un-hiperdocumento\\\/#blogposting\",\"name\":\"Estructura de un hiperdocumento - Escuela Digital\",\"headline\":\"Estructura de un hiperdocumento\",\"author\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/author\\\/wpadmin_elexia\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/fondo-codigo.jpg\",\"width\":975,\"height\":550,\"caption\":\"Fondo c\\u00f3digo\"},\"datePublished\":\"2014-11-02T12:33:45-05:00\",\"dateModified\":\"2024-11-01T11:47:00-05:00\",\"inLanguage\":\"es-ES\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/estructura-de-un-hiperdocumento\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/estructura-de-un-hiperdocumento\\\/#webpage\"},\"articleSection\":\"Escuela de Producci\\u00f3n, c\\u00f3digo, hipermedia\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/estructura-de-un-hiperdocumento\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog#listItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\\\/\\\/e-lexia.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/category\\\/produccion-web\\\/#listItem\",\"name\":\"Escuela de Producci\\u00f3n\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/category\\\/produccion-web\\\/#listItem\",\"position\":2,\"name\":\"Escuela de Producci\\u00f3n\",\"item\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/category\\\/produccion-web\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/estructura-de-un-hiperdocumento\\\/#listItem\",\"name\":\"Estructura de un hiperdocumento\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog#listItem\",\"name\":\"Inicio\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/estructura-de-un-hiperdocumento\\\/#listItem\",\"position\":3,\"name\":\"Estructura de un hiperdocumento\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/category\\\/produccion-web\\\/#listItem\",\"name\":\"Escuela de Producci\\u00f3n\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/#organization\",\"name\":\"e-Lexia.com\",\"description\":\"Aprende con e-Lexia.com\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/\",\"telephone\":\"+573053933953\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/e-Lexia-Logo-v5-circle.png\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/estructura-de-un-hiperdocumento\\\/#organizationLogo\",\"width\":600,\"height\":600,\"caption\":\"Logo de e-Lexia.com\"},\"image\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/estructura-de-un-hiperdocumento\\\/#organizationLogo\"},\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/juancadotcom\",\"https:\\\/\\\/instagram.com\\\/juancadotcom\",\"https:\\\/\\\/youtube.com\\\/@escuela-digital\",\"https:\\\/\\\/linkedin.com\\\/in\\\/juancadotcom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/author\\\/wpadmin_elexia\\\/#author\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/author\\\/wpadmin_elexia\\\/\",\"name\":\"juancadotcom\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/estructura-de-un-hiperdocumento\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fa6c4798309ab8af2d1f695f7947f6e47f9f6740fb071b71ac02b331ec094975?s=96&r=g\",\"width\":96,\"height\":96,\"caption\":\"juancadotcom\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/juancadotcom\",\"https:\\\/\\\/instagram.com\\\/juancadotcom\",\"https:\\\/\\\/youtube.com\\\/juancadotcom\",\"https:\\\/\\\/linkedin.com\\\/in\\\/juancadotcom\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/estructura-de-un-hiperdocumento\\\/#webpage\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/estructura-de-un-hiperdocumento\\\/\",\"name\":\"Estructura de un hiperdocumento - Escuela Digital\",\"description\":\"Aprende a estructurar sem\\u00e1ntica un documento web. Conoce las etiquetas y cu\\u00e1l es su valor sem\\u00e1ntico, por que no es un asunto de look&feel.\",\"inLanguage\":\"es-ES\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/estructura-de-un-hiperdocumento\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/author\\\/wpadmin_elexia\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/author\\\/wpadmin_elexia\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/fondo-codigo.jpg\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/estructura-de-un-hiperdocumento\\\/#mainImage\",\"width\":975,\"height\":550,\"caption\":\"Fondo c\\u00f3digo\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/estructura-de-un-hiperdocumento\\\/#mainImage\"},\"datePublished\":\"2014-11-02T12:33:45-05:00\",\"dateModified\":\"2024-11-01T11:47:00-05:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/\",\"name\":\"Escuela Digital\",\"description\":\"Aprende con e-Lexia.com\",\"inLanguage\":\"es-ES\",\"publisher\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Estructura de un hiperdocumento - Escuela Digital","description":"Aprende a estructurar sem\u00e1ntica un documento web. Conoce las etiquetas y cu\u00e1l es su valor sem\u00e1ntico, por que no es un asunto de look&feel.","canonical_url":"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"google-site-verification":"FTr3psdS63RenyhSIowbaMRJxtaRFHXfmlKgDARf-x4","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/#blogposting","name":"Estructura de un hiperdocumento - Escuela Digital","headline":"Estructura de un hiperdocumento","author":{"@id":"https:\/\/e-lexia.com\/blog\/author\/wpadmin_elexia\/#author"},"publisher":{"@id":"https:\/\/e-lexia.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg","width":975,"height":550,"caption":"Fondo c\u00f3digo"},"datePublished":"2014-11-02T12:33:45-05:00","dateModified":"2024-11-01T11:47:00-05:00","inLanguage":"es-ES","mainEntityOfPage":{"@id":"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/#webpage"},"isPartOf":{"@id":"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/#webpage"},"articleSection":"Escuela de Producci\u00f3n, c\u00f3digo, hipermedia"},{"@type":"BreadcrumbList","@id":"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog#listItem","position":1,"name":"Inicio","item":"https:\/\/e-lexia.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/#listItem","name":"Escuela de Producci\u00f3n"}},{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/#listItem","position":2,"name":"Escuela de Producci\u00f3n","item":"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/","nextItem":{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/#listItem","name":"Estructura de un hiperdocumento"},"previousItem":{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog#listItem","name":"Inicio"}},{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/#listItem","position":3,"name":"Estructura de un hiperdocumento","previousItem":{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/#listItem","name":"Escuela de Producci\u00f3n"}}]},{"@type":"Organization","@id":"https:\/\/e-lexia.com\/blog\/#organization","name":"e-Lexia.com","description":"Aprende con e-Lexia.com","url":"https:\/\/e-lexia.com\/blog\/","telephone":"+573053933953","logo":{"@type":"ImageObject","url":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2021\/01\/e-Lexia-Logo-v5-circle.png","@id":"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/#organizationLogo","width":600,"height":600,"caption":"Logo de e-Lexia.com"},"image":{"@id":"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/#organizationLogo"},"sameAs":["https:\/\/twitter.com\/juancadotcom","https:\/\/instagram.com\/juancadotcom","https:\/\/youtube.com\/@escuela-digital","https:\/\/linkedin.com\/in\/juancadotcom"]},{"@type":"Person","@id":"https:\/\/e-lexia.com\/blog\/author\/wpadmin_elexia\/#author","url":"https:\/\/e-lexia.com\/blog\/author\/wpadmin_elexia\/","name":"juancadotcom","image":{"@type":"ImageObject","@id":"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/fa6c4798309ab8af2d1f695f7947f6e47f9f6740fb071b71ac02b331ec094975?s=96&r=g","width":96,"height":96,"caption":"juancadotcom"},"sameAs":["https:\/\/x.com\/juancadotcom","https:\/\/instagram.com\/juancadotcom","https:\/\/youtube.com\/juancadotcom","https:\/\/linkedin.com\/in\/juancadotcom"]},{"@type":"WebPage","@id":"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/#webpage","url":"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/","name":"Estructura de un hiperdocumento - Escuela Digital","description":"Aprende a estructurar sem\u00e1ntica un documento web. Conoce las etiquetas y cu\u00e1l es su valor sem\u00e1ntico, por que no es un asunto de look&feel.","inLanguage":"es-ES","isPartOf":{"@id":"https:\/\/e-lexia.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/#breadcrumblist"},"author":{"@id":"https:\/\/e-lexia.com\/blog\/author\/wpadmin_elexia\/#author"},"creator":{"@id":"https:\/\/e-lexia.com\/blog\/author\/wpadmin_elexia\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg","@id":"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/#mainImage","width":975,"height":550,"caption":"Fondo c\u00f3digo"},"primaryImageOfPage":{"@id":"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/#mainImage"},"datePublished":"2014-11-02T12:33:45-05:00","dateModified":"2024-11-01T11:47:00-05:00"},{"@type":"WebSite","@id":"https:\/\/e-lexia.com\/blog\/#website","url":"https:\/\/e-lexia.com\/blog\/","name":"Escuela Digital","description":"Aprende con e-Lexia.com","inLanguage":"es-ES","publisher":{"@id":"https:\/\/e-lexia.com\/blog\/#organization"}}]},"og:locale":"es_ES","og:site_name":"Escuela Digital - Aprende con e-Lexia.com","og:type":"article","og:title":"Estructura de un hiperdocumento - Escuela Digital","og:description":"Aprende a estructurar sem\u00e1ntica un documento web. Conoce las etiquetas y cu\u00e1l es su valor sem\u00e1ntico, por que no es un asunto de look&amp;feel.","og:url":"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/","fb:admins":"42896562054","og:image":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg","og:image:secure_url":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg","og:image:width":975,"og:image:height":550,"article:tag":["escuela de producci\u00f3n","c\u00f3digo","hipermedia"],"article:published_time":"2014-11-02T17:33:45+00:00","article:modified_time":"2024-11-01T16:47:00+00:00","twitter:card":"summary_large_image","twitter:site":"@juancadotcom","twitter:title":"Estructura de un hiperdocumento - Escuela Digital","twitter:description":"Aprende a estructurar sem\u00e1ntica un documento web. Conoce las etiquetas y cu\u00e1l es su valor sem\u00e1ntico, por que no es un asunto de look&amp;feel.","twitter:creator":"@juancadotcom","twitter:image":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg","twitter:label1":"Escrito por","twitter:data1":"juancadotcom","twitter:label2":"Tiempo de lectura estimado","twitter:data2":"12 minutos"},"aioseo_meta_data":{"post_id":"1037","title":null,"description":"Aprende a estructurar sem\u00e1ntica un documento web. Conoce las etiquetas y cu\u00e1l es su valor sem\u00e1ntico, por que no es un asunto de look&amp;feel.","keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2022-12-24 03:18:25","updated":"2025-06-04 13:28:01","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/e-lexia.com\/blog\" title=\"Inicio\">Inicio<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&#047;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/\" title=\"Escuela de Producci\u00f3n\">Escuela de Producci\u00f3n<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&#047;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tEstructura de un hiperdocumento\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Inicio","link":"https:\/\/e-lexia.com\/blog"},{"label":"Escuela de Producci\u00f3n","link":"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/"},{"label":"Estructura de un hiperdocumento","link":"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/"}],"_links":{"self":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1037","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/comments?post=1037"}],"version-history":[{"count":0,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1037\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media\/1645"}],"wp:attachment":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media?parent=1037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/categories?post=1037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/tags?post=1037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}