{"id":3377,"date":"2020-12-25T13:00:00","date_gmt":"2020-12-25T12:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=3377"},"modified":"2024-03-13T17:35:39","modified_gmt":"2024-03-13T16:35:39","slug":"estructura-basica-html","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/estructura-basica-html\/","title":{"rendered":"Estructura B\u00e1sica HTML"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Es muy posible que hayas escuchado muchas veces la palabra HTML, ya que, ni m\u00e1s ni menos, es el lenguaje sobre el que se construye Internet. Toda p\u00e1gina web o plataforma se basa, en su nivel m\u00e1s b\u00e1sico, en el lenguaje HTML. Sin embargo puede que no sepas que <strong>crear la estructura b\u00e1sica HTML es muy f\u00e1cil<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tener unos conocimientos b\u00e1sicos de HTML no es \u00fanicamente el primer paso para adentrarse en el mundo del desarrollo web, sino que es una manera fundamental para entender la sociedad digital en la que vivimos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En este art\u00edculo <strong>te ense\u00f1amos a crear la estructura b\u00e1sica HTML de una forma muy sencilla<\/strong>. Es decir, te mostramos como crear una p\u00e1gina web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00a1Empecemos!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Primeros pasos para crear la estructura b\u00e1sica HTML<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">En primer lugar, debes saber qu\u00e9 es lo que necesitas para crear una p\u00e1gina web con la estructura b\u00e1sica HTML. B\u00e1sicamente, te van a hacer falta dos cosas: <strong>un editor de texto<\/strong> (servir\u00eda el mismo bloc de notas, aunque tienes opciones m\u00e1s profesionales, como <a href=\"https:\/\/visualstudio.microsoft.com\/es\/\" target=\"_blank\" rel=\"noreferrer noopener\">Visual Studio<\/a> o <a href=\"https:\/\/www.sublimetext.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sublime Text<\/a>) <strong>y un navegador web <\/strong>(como <a href=\"https:\/\/www.google.com\/intl\/es_es\/chrome\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google Chrome<\/a>). As\u00ed de sencillo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En segundo lugar, es conveniente tener unas nociones b\u00e1sicas sobre este lenguaje. Debes saber que <strong>HTML es un est\u00e1ndar que define la estructura y el contenido de una web, no determina ni su estilo ni su comportamiento<\/strong>. Esos aspectos se trabajan con otros lenguajes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por otro lado, debes saber que <strong>los archivos que contienen c\u00f3digo HTML se guardan con extensi\u00f3n .html y se pueden abrir con el navegador web<\/strong>. Es decir, b\u00e1sicamente son p\u00e1ginas web. Lo que ocurre a grandes rasgos cuando accedes a cualquier p\u00e1gina web de Internet, es que el servidor que almacena dicha p\u00e1gina env\u00eda a tu dispositivo el archivo HTML correspondiente para que tu navegador lo interprete y muestre la p\u00e1gina en pantalla.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Una vez que conoces estos aspectos, ya est\u00e1s preparado para crear tu primera p\u00e1gina web.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"640\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/12\/estructura-basica-html-1-1.jpg\" alt=\"Primeros pasos para crear la estructura b\u00e1sica HTML\" class=\"wp-image-3404\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/12\/estructura-basica-html-1-1.jpg 640w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/12\/estructura-basica-html-1-1-300x300.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/12\/estructura-basica-html-1-1-150x150.jpg 150w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Etiquetas para crear la estructura b\u00e1sica HTML<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-cover\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-0 has-background-dim\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"960\" class=\"wp-block-cover__image-background wp-image-3406\" alt=\"C\u00f3mo crear una estructura b\u00e1sica HTML\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/12\/estructura-basica-html-2.jpg\" data-object-fit=\"cover\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/12\/estructura-basica-html-2.jpg 640w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/12\/estructura-basica-html-2-200x300.jpg 200w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-large-font-size wp-block-paragraph\"><\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Antes de nada, debes saber que el c\u00f3digo HTML se compone de etiquetas. <strong>Las <a href=\"https:\/\/carontestudio.com\/blog\/enriquece-tus-textos-con-etiquetas-basicas-html\/\">etiquetas HTML<\/a> son palabras clave que se escriben entre los signos &lt;><\/strong> y que el navegador entiende.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Normalmente <strong>las etiquetas se componen de una etiqueta de apertura <\/strong>(entre los signos &lt;&gt;), <strong>una etiqueta de cierre<\/strong> (entre los signos &lt;\/&gt;) <strong>y un contenido<\/strong>. El contenido puede ser texto u otras etiquetas. Aunque existen algunas etiquetas que no tienen ni contenido ni etiqueta de cierre, son una excepci\u00f3n. La sintaxis ser\u00eda la siguiente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;etiqueta1&gt;\n     contenido etiqueta1\n&lt;\/etiqueta1&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>&lt;!DOCTYPE html&gt;<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Pues bien, <strong>la primera etiqueta que colocaremos en todo documento HTML es &lt;!DOCTYPE html&gt;<\/strong>. No tiene ni contenido ni etiqueta de cierre, simplemente indica al navegador que el documento es de tipo HTML5.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>&lt;html&gt;<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Justo despu\u00e9s de esta ir\u00e1 la etiqueta &lt;html&gt;<\/strong>. Esta segunda etiqueta s\u00ed que tiene etiqueta de cierre (&lt;\/html&gt;) y englobar\u00e1 todo el contenido de la p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>&lt;body&gt; y &lt;head&gt;<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Dentro de las etiquetas &lt;html&gt; y &lt;\/html&gt;, colocaremos las etiquetas &lt;body&gt; y &lt;head&gt;<\/strong> de la siguiente manera:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n   &lt;head&gt;\n   &lt;\/head&gt;\n   &lt;body&gt;\n   &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">A\u00f1adiendo estas etiquetas a tu editor de texto habr\u00e1s creado <strong>la estructura HTML m\u00e1s elemental de una p\u00e1gina web<\/strong>. Obviamente, existen muchas m\u00e1s etiquetas, en este art\u00edculo nos centramos \u00fanicamente en las principales. Si quieres conocer todas las etiquetas te recomendamos visitar nuestro <a href=\"https:\/\/carontestudio.com\/blog\/listado-de-etiquetas-html\/\">listado de etiquetas HTML5<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">El head y el body: protagonistas de la estructura b\u00e1sica HTML<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"960\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/12\/estructura-basica-html-3.jpg\" alt=\"Head y Body, elementos principales de la estructura b\u00e1sica HTML. \" class=\"wp-image-3415\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/12\/estructura-basica-html-3.jpg 640w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/12\/estructura-basica-html-3-200x300.jpg 200w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Las etiquetas &lt;head&gt; y &lt;body&gt; y son los principales bloques<\/strong> en los que se divide el documento HTML.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El <strong>head<\/strong> es la parte de nuestro documento donde incluimos informaci\u00f3n de utilidad para el navegador web. La mayor parte del c\u00f3digo HTML incluido en el head no ser\u00e1 directamente visible por el usuario, por lo que en esta entrada no lo explicaremos en profundidad. Sin embargo, cabe destacar su <strong>etiqueta &lt;title&gt;, que define el t\u00edtulo de la p\u00e1gina y lo hace visible en la barra de t\u00edtulo del navegador<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>El body es la parte que incluye todo el contenido visible de la web<\/strong>. Normalmente, su contenido se organiza a trav\u00e9s de otras tres etiquetas: <strong>&lt;header&gt; (encabezado), &lt;main&gt; (contenido principal) y &lt;footer&gt; (pie de p\u00e1gina)<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para a\u00f1adir contenido visual al body, tenemos<strong> etiquetas como &lt;h1&gt; (t\u00edtulo principal), &lt;h2&gt; (subt\u00edtulo) o &lt;p&gt; (p\u00e1rrafo)<\/strong>. De esta manera podemos definir la estructura b\u00e1sica HTML de cualquier p\u00e1gina de la siguiente manera:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n   &lt;head&gt;\n      &lt;title&gt;T\u00edtulo de mi p\u00e1gina web&lt;\/title&gt;\n   &lt;\/head&gt;\n   &lt;body&gt;\n      &lt;header&gt;\n         &lt;h1&gt;Titular principal de la p\u00e1gina&lt;\/h1&gt;\n      &lt;\/header&gt;\n      &lt;main&gt;\n         &lt;h2&gt;Primer Subt\u00edtulo de la p\u00e1gina&lt;\/h2&gt;\n         &lt;p&gt;Primer p\u00e1rrafo&lt;\/p&gt;\n      &lt;\/main&gt;\n      &lt;footer&gt;\n      &lt;\/footer&gt;\n   &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Como ves, escribir la estructura b\u00e1sica HTML de una p\u00e1gina web est\u00e1 al alcance de cualquiera. Este es solo el primer paso del camino del dise\u00f1o web, si quieres seguir aprendiendo, puedes leer nuestros tutoriales en el blog o visitar el siguiente <a href=\"https:\/\/htmlmasters.tech\/\" target=\"_blank\" rel=\"noreferrer noopener\">sitio web<\/a>. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusiones<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ya has visto c\u00f3mo crear la <strong>estructura b\u00e1sica HTML<\/strong> de una web. Te animo a que utilices el c\u00f3digo mostrado y pruebes a ir a\u00f1adiendo nuevas etiquetas, para seguir construyendo y aprendiendo. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Espero que te haya servido de ayuda. Si quieres aportar algo, por favor, no dudes en dejarme un comentario en esta publicaci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00a1Te espero en el siguiente art\u00edculo!<\/p>\n\n\n\n<div class=\"wp-block-columns sabermas is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/carontestudio.com\/blog\/enriquece-tus-textos-con-etiquetas-basicas-html\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"604\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/02\/enriquece-textos-etiquetas-html-1024x604.jpg\" alt=\"Enriquece tus textos con etiquetas b\u00e1sicas HTML\" class=\"wp-image-18295\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/02\/enriquece-textos-etiquetas-html-1024x604.jpg 1024w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/02\/enriquece-textos-etiquetas-html-300x177.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/02\/enriquece-textos-etiquetas-html-768x453.jpg 768w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/02\/enriquece-textos-etiquetas-html.jpg 1250w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/carontestudio.com\/blog\/como-poner-una-imagen-de-fondo-en-html\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"604\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/01\/como-poner-imagen-de-fondo-en-html-1024x604.jpg\" alt=\"Como poner imagen de fondo en html\" class=\"wp-image-3778\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/01\/como-poner-imagen-de-fondo-en-html-1024x604.jpg 1024w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/01\/como-poner-imagen-de-fondo-en-html-300x177.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/01\/como-poner-imagen-de-fondo-en-html-768x453.jpg 768w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/01\/como-poner-imagen-de-fondo-en-html.jpg 1250w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Crear la estructura b\u00e1sica HTML de una p\u00e1gina web nunca fue tan sencillo. Te explicamos como hacerlo. <\/p>\n","protected":false},"author":21,"featured_media":3431,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[94,50],"tags":[92],"class_list":["post-3377","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-programacion-web","tag-html"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Estructura B\u00e1sica HTML - Blog Caronte Web Studio<\/title>\n<meta name=\"description\" content=\"Si quieres iniciarte en el desarrollo web, tu primer gran paso es aprender la estructura b\u00e1sica de HTML. \u00a1En este art\u00edculo te lo ense\u00f1amos!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carontestudio.com\/blog\/estructura-basica-html\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Estructura B\u00e1sica HTML - Blog Caronte Web Studio\" \/>\n<meta property=\"og:description\" content=\"Si quieres iniciarte en el desarrollo web, tu primer gran paso es aprender la estructura b\u00e1sica de HTML. \u00a1En este art\u00edculo te lo ense\u00f1amos!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/estructura-basica-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de marketing | Caronte\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/carontewebstudio\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-25T12:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-13T16:35:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/12\/estructura-basica-html.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1250\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Caronte Studio\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Caronte Studio\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/estructura-basica-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/estructura-basica-html\\\/\"},\"author\":{\"name\":\"Caronte Studio\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/af53223b68efd2be07f600dfc0506979\"},\"headline\":\"Estructura B\u00e1sica HTML\",\"datePublished\":\"2020-12-25T12:00:00+00:00\",\"dateModified\":\"2024-03-13T16:35:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/estructura-basica-html\\\/\"},\"wordCount\":920,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/estructura-basica-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/estructura-basica-html.jpg\",\"keywords\":[\"HTML\"],\"articleSection\":[\"Dise\u00f1o web\",\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/estructura-basica-html\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/estructura-basica-html\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/estructura-basica-html\\\/\",\"name\":\"Estructura B\u00e1sica HTML - Blog Caronte Web Studio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/estructura-basica-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/estructura-basica-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/estructura-basica-html.jpg\",\"datePublished\":\"2020-12-25T12:00:00+00:00\",\"dateModified\":\"2024-03-13T16:35:39+00:00\",\"description\":\"Si quieres iniciarte en el desarrollo web, tu primer gran paso es aprender la estructura b\u00e1sica de HTML. \u00a1En este art\u00edculo te lo ense\u00f1amos!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/estructura-basica-html\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/estructura-basica-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/estructura-basica-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/estructura-basica-html.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/estructura-basica-html.jpg\",\"width\":1250,\"height\":737,\"caption\":\"Estructura b\u00e1sica HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/estructura-basica-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Estructura B\u00e1sica HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"name\":\"Blog de marketing | Caronte\",\"description\":\"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.\",\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\",\"name\":\"Caronte - Agencia de marketing\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"width\":1090,\"height\":155,\"caption\":\"Caronte - Agencia de marketing\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/carontewebstudio\\\/\",\"https:\\\/\\\/www.instagram.com\\\/caronte_studio\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@carontewebstudio\",\"https:\\\/\\\/www.youtube.com\\\/@carontewebstudio\",\"https:\\\/\\\/es.linkedin.com\\\/company\\\/carontewebstudio\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/af53223b68efd2be07f600dfc0506979\",\"name\":\"Caronte Studio\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g\",\"caption\":\"Caronte Studio\"},\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/author\\\/caronte-studio\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Estructura B\u00e1sica HTML - Blog Caronte Web Studio","description":"Si quieres iniciarte en el desarrollo web, tu primer gran paso es aprender la estructura b\u00e1sica de HTML. \u00a1En este art\u00edculo te lo ense\u00f1amos!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/carontestudio.com\/blog\/estructura-basica-html\/","og_locale":"es_ES","og_type":"article","og_title":"Estructura B\u00e1sica HTML - Blog Caronte Web Studio","og_description":"Si quieres iniciarte en el desarrollo web, tu primer gran paso es aprender la estructura b\u00e1sica de HTML. \u00a1En este art\u00edculo te lo ense\u00f1amos!","og_url":"https:\/\/carontestudio.com\/blog\/estructura-basica-html\/","og_site_name":"Blog de marketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2020-12-25T12:00:00+00:00","article_modified_time":"2024-03-13T16:35:39+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/12\/estructura-basica-html.jpg","type":"image\/jpeg"}],"author":"Caronte Studio","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Caronte Studio","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/estructura-basica-html\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/estructura-basica-html\/"},"author":{"name":"Caronte Studio","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/af53223b68efd2be07f600dfc0506979"},"headline":"Estructura B\u00e1sica HTML","datePublished":"2020-12-25T12:00:00+00:00","dateModified":"2024-03-13T16:35:39+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/estructura-basica-html\/"},"wordCount":920,"commentCount":1,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/estructura-basica-html\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/12\/estructura-basica-html.jpg","keywords":["HTML"],"articleSection":["Dise\u00f1o web","Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/estructura-basica-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/estructura-basica-html\/","url":"https:\/\/carontestudio.com\/blog\/estructura-basica-html\/","name":"Estructura B\u00e1sica HTML - Blog Caronte Web Studio","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/estructura-basica-html\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/estructura-basica-html\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/12\/estructura-basica-html.jpg","datePublished":"2020-12-25T12:00:00+00:00","dateModified":"2024-03-13T16:35:39+00:00","description":"Si quieres iniciarte en el desarrollo web, tu primer gran paso es aprender la estructura b\u00e1sica de HTML. \u00a1En este art\u00edculo te lo ense\u00f1amos!","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/estructura-basica-html\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/estructura-basica-html\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/estructura-basica-html\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/12\/estructura-basica-html.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/12\/estructura-basica-html.jpg","width":1250,"height":737,"caption":"Estructura b\u00e1sica HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/estructura-basica-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/carontestudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Estructura B\u00e1sica HTML"}]},{"@type":"WebSite","@id":"https:\/\/carontestudio.com\/blog\/#website","url":"https:\/\/carontestudio.com\/blog\/","name":"Blog de marketing | Caronte","description":"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.","publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carontestudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/carontestudio.com\/blog\/#organization","name":"Caronte - Agencia de marketing","url":"https:\/\/carontestudio.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","width":1090,"height":155,"caption":"Caronte - Agencia de marketing"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/carontewebstudio\/","https:\/\/www.instagram.com\/caronte_studio\/","https:\/\/www.tiktok.com\/@carontewebstudio","https:\/\/www.youtube.com\/@carontewebstudio","https:\/\/es.linkedin.com\/company\/carontewebstudio"]},{"@type":"Person","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/af53223b68efd2be07f600dfc0506979","name":"Caronte Studio","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g","caption":"Caronte Studio"},"url":"https:\/\/carontestudio.com\/blog\/author\/caronte-studio\/"}]}},"_links":{"self":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/3377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/comments?post=3377"}],"version-history":[{"count":39,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/3377\/revisions"}],"predecessor-version":[{"id":19344,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/3377\/revisions\/19344"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/3431"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=3377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=3377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=3377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}