{"id":521,"date":"2026-01-11T11:18:11","date_gmt":"2026-01-11T10:18:11","guid":{"rendered":"https:\/\/cienciaytecnology.com\/wordpress\/?p=521"},"modified":"2026-01-11T11:18:11","modified_gmt":"2026-01-11T10:18:11","slug":"html5","status":"publish","type":"post","link":"https:\/\/cienciaytecnology.com\/wordpress\/html5\/","title":{"rendered":"HTML5"},"content":{"rendered":"\n<p>\u00abHTML5 no es solo una versi\u00f3n del lenguaje de marcado; es la columna vertebral de la web moderna. Desde su lanzamiento, transform\u00f3 internet de un conjunto de documentos est\u00e1ticos en una plataforma de aplicaciones interactivas, multimedia y accesibles. En este art\u00edculo, exploraremos la anatom\u00eda completa de HTML5, detallando cada etiqueta y sus atributos para que domines la estructura de cualquier proyecto web.\u00bb<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Estructura y Etiquetas de HTML5<\/p>\n\n\n\n<p>Dada la enorme cantidad de etiquetas (existen m\u00e1s de 100), las hemos agrupado por categor\u00edas funcionales para tu art\u00edculo:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Etiquetas de Ra\u00edz y Metadatos<\/h2>\n\n\n\n<p>Definen la configuraci\u00f3n del documento.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>&lt;html><\/code><\/strong>: El contenedor ra\u00edz. Atributo principal:\u00a0<code>lang<\/code>\u00a0(idioma).<\/li>\n\n\n\n<li><strong><code>&lt;head><\/code><\/strong>: Contenedor de metadatos (no visibles).<\/li>\n\n\n\n<li><strong><code>&lt;meta><\/code><\/strong>: Informaci\u00f3n sobre el documento. Atributos:\u00a0<code>charset<\/code>,\u00a0<code>name<\/code>,\u00a0<code>content<\/code>.<\/li>\n\n\n\n<li><strong><code>&lt;title><\/code><\/strong>: El nombre de la p\u00e1gina que aparece en la pesta\u00f1a del navegador.<\/li>\n\n\n\n<li><strong><code>&lt;link><\/code><\/strong>: Conecta recursos externos (como CSS). Atributos:\u00a0<code>rel<\/code>,\u00a0<code>href<\/code>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">2. Etiquetas Sem\u00e1nticas (Estructura)<\/h2>\n\n\n\n<p>Introducidas en HTML5 para que los buscadores entiendan el contenido.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>&lt;header><\/code><\/strong>: Cabecera de una secci\u00f3n o p\u00e1gina.<\/li>\n\n\n\n<li><strong><code>&lt;nav><\/code><\/strong>: Contenedor de enlaces de navegaci\u00f3n.<\/li>\n\n\n\n<li><strong><code>&lt;main><\/code><\/strong>: Contenido principal y \u00fanico del documento.<\/li>\n\n\n\n<li><strong><code>&lt;article><\/code><\/strong>: Contenido independiente y distribuible (ej. un post).<\/li>\n\n\n\n<li><strong><code>&lt;section><\/code><\/strong>: Agrupa contenido tem\u00e1tico relacionado.<\/li>\n\n\n\n<li><strong><code>&lt;aside><\/code><\/strong>: Contenido tangencial (barras laterales).<\/li>\n\n\n\n<li><strong><code>&lt;footer><\/code><\/strong>: Pie de p\u00e1gina o secci\u00f3n.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">3. Etiquetas de Contenido y Texto<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>&lt;h1><\/code>\u00a0a\u00a0<code>&lt;h6><\/code><\/strong>: T\u00edtulos por orden de jerarqu\u00eda.<\/li>\n\n\n\n<li><strong><code>&lt;p><\/code><\/strong>: P\u00e1rrafos de texto.<\/li>\n\n\n\n<li><strong><code>&lt;a><\/code><\/strong>: Hiperv\u00ednculos. Atributos:\u00a0<code>href<\/code>\u00a0(destino),\u00a0<code>target<\/code>\u00a0(donde abrir).<\/li>\n\n\n\n<li><strong><code>&lt;ul><\/code>,\u00a0<code>&lt;ol><\/code>,\u00a0<code>&lt;li><\/code><\/strong>: Listas desordenadas, ordenadas y sus elementos.<\/li>\n\n\n\n<li><strong><code>&lt;div><\/code><\/strong>: Contenedor gen\u00e9rico de bloque (usar solo si no hay opci\u00f3n sem\u00e1ntica).<\/li>\n\n\n\n<li><strong><code>&lt;span><\/code><\/strong>: Contenedor gen\u00e9rico de l\u00ednea.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">4. Multimedia e Interactividad<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>&lt;img><\/code><\/strong>: Im\u00e1genes. Atributos:\u00a0<code>src<\/code>\u00a0(fuente),\u00a0<code>alt<\/code>\u00a0(texto alternativo).<\/li>\n\n\n\n<li><strong><code>&lt;video><\/code><\/strong>: Reproductor de video. Atributos:\u00a0<code>controls<\/code>,\u00a0<code>autoplay<\/code>,\u00a0<code>loop<\/code>,\u00a0<code>poster<\/code>.<\/li>\n\n\n\n<li><strong><code>&lt;audio><\/code><\/strong>: Reproductor de sonido. Atributos:\u00a0<code>src<\/code>,\u00a0<code>controls<\/code>.<\/li>\n\n\n\n<li><strong><code>&lt;canvas><\/code><\/strong>: Para dibujar gr\u00e1ficos y animaciones v\u00eda JavaScript.<\/li>\n\n\n\n<li><strong><code>&lt;svg><\/code><\/strong>: Para gr\u00e1ficos vectoriales escalables.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">5. Formularios y Entrada de Datos<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>&lt;form><\/code><\/strong>: Contenedor del formulario. Atributos:\u00a0<code>action<\/code>,\u00a0<code>method<\/code>.<\/li>\n\n\n\n<li><strong><code>&lt;input><\/code><\/strong>: Campo de entrada. Atributos:\u00a0<code>type<\/code>\u00a0(text, email, password, date, etc.),\u00a0<code>placeholder<\/code>,\u00a0<code>value<\/code>,\u00a0<code>required<\/code>.<\/li>\n\n\n\n<li><strong><code>&lt;button><\/code><\/strong>: Bot\u00f3n ejecutable.<\/li>\n\n\n\n<li><strong><code>&lt;select><\/code>\u00a0y\u00a0<code>&lt;option><\/code><\/strong>: Listas desplegables.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Atributos Globales (Funcionan en casi todas las etiquetas)<\/h2>\n\n\n\n<p>Para tu art\u00edculo, es vital mencionar que estos atributos se pueden aplicar a cualquier elemento:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong><code>id<\/code><\/strong>: Identificador \u00fanico en toda la p\u00e1gina.<\/li>\n\n\n\n<li><strong><code>class<\/code><\/strong>: Identificador para grupos de elementos (usado en CSS).<\/li>\n\n\n\n<li><strong><code>style<\/code><\/strong>: Reglas de dise\u00f1o CSS directas.<\/li>\n\n\n\n<li><strong><code>title<\/code><\/strong>: Informaci\u00f3n extra que aparece al pasar el rat\u00f3n.<\/li>\n\n\n\n<li><strong><code>data-*<\/code><\/strong>: Atributos personalizados para almacenar datos privados del desarrollador.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Recursos recomendados para ampliar<\/h2>\n\n\n\n<p>Para profundizar en la documentaci\u00f3n t\u00e9cnica oficial mientras redactas, te sugiero consultar la\u00a0Referencia de HTML en MDN Web Docs\u00a0o revisar los est\u00e1ndares actuales en el\u00a0W3C.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><br>1. La Estructura Ra\u00edz <\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>html\n\n&lt;!DOCTYPE html>\n&lt;html lang=\"es\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>T\u00edtulo de tu Articulo - Mi Web&lt;\/title>\n    &lt;link rel=\"stylesheet\" href=\"estilos.css\">\n&lt;\/head>\n&lt;body>\n    &lt;!-- El contenido va aqu\u00ed -->\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>Todo documento&nbsp;<strong>HTML5<\/strong>&nbsp;en 2026 debe comenzar con esta base m\u00ednima obligatoria para que el navegador lo interprete correctamente:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Ejemplo Completo Integrado (Demo)<\/h2>\n\n\n\n<p>Este c\u00f3digo agrupa todas las etiquetas mencionadas con sus atributos clave. He incluido el&nbsp;<strong>Canvas<\/strong>&nbsp;con un peque\u00f1o script para que sea funcional y el&nbsp;<strong>SVG<\/strong>&nbsp;integrado.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"es\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;title>Demo Completa HTML5 - 2026&lt;\/title>\n&lt;\/head>\n&lt;body>\n\n    &lt;header id=\"main-header\">\n        &lt;h1>Gu\u00eda Maestra de HTML5&lt;\/h1>\n        &lt;nav>\n            &lt;ul>\n                &lt;li>&lt;a href=\"#articulos\" title=\"Ir a art\u00edculos\">Art\u00edculos&lt;\/a>&lt;\/li>\n                &lt;li>&lt;a href=\"#contacto\" title=\"Ir a contacto\">Contacto&lt;\/a>&lt;\/li>\n            &lt;\/ul>\n        &lt;\/nav>\n    &lt;\/header>\n\n    &lt;main>\n        &lt;section id=\"articulos\">\n            &lt;article>\n                &lt;header>\n                    &lt;h2>Entendiendo la Sem\u00e1ntica&lt;\/h2>\n                    &lt;p>Publicado por &lt;span style=\"color: blue;\">Redacci\u00f3n&lt;\/span>&lt;\/p>\n                &lt;\/header>\n                \n                &lt;p>HTML5 permite separar el contenido de la estructura.&lt;\/p>\n\n                &lt;!-- Ejemplo de Multimedia -->\n                &lt;figure>\n                    &lt;img src=\"imagen-demo.jpg\" alt=\"Descripci\u00f3n de la imagen\" width=\"300\">\n                    &lt;figcaption>Figura 1: Ejemplo de imagen local.&lt;\/figcaption>\n                &lt;\/figure>\n\n                &lt;audio controls src=\"audio-demo.mp3\">Tu navegador no soporta audio.&lt;\/audio>\n                &lt;br>\n                &lt;video controls width=\"400\" poster=\"miniatura.jpg\">\n                    &lt;source src=\"video-demo.mp4\" type=\"video\/mp4\">\n                &lt;\/video>\n            &lt;\/article>\n\n            &lt;aside>\n                &lt;h3>Recursos Extra&lt;\/h3>\n                &lt;p>Contenido relacionado que no es vital para el art\u00edculo principal.&lt;\/p>\n            &lt;\/aside>\n        &lt;\/section>\n\n        &lt;!-- Secci\u00f3n de Gr\u00e1ficos (Canvas y SVG) -->\n        &lt;section id=\"graficos\">\n            &lt;h2>Gr\u00e1ficos Avanzados&lt;\/h2>\n            \n            &lt;!-- SVG: Gr\u00e1fico vectorial -->\n            &lt;div class=\"svg-container\">\n                &lt;p>C\u00edrculo dibujado con &lt;strong>SVG&lt;\/strong>:&lt;\/p>\n                &lt;svg width=\"100\" height=\"100\">\n                    &lt;circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"green\" stroke-width=\"4\" fill=\"yellow\" \/>\n                &lt;\/svg>\n            &lt;\/div>\n\n            &lt;!-- Canvas: Dibujo por Script -->\n            &lt;div class=\"canvas-container\">\n                &lt;p>Cuadrado dibujado con &lt;strong>Canvas&lt;\/strong>:&lt;\/p>\n                &lt;canvas id=\"miCanvas\" width=\"200\" height=\"100\" style=\"border:1px solid #000;\">&lt;\/canvas>\n                &lt;script>\n                    const c = document.getElementById(\"miCanvas\");\n                    const ctx = c.getContext(\"2d\");\n                    ctx.fillStyle = \"#FF0000\";\n                    ctx.fillRect(20, 20, 150, 60);\n                &lt;\/script>\n            &lt;\/div>\n        &lt;\/section>\n\n        &lt;section id=\"contacto\">\n            &lt;h2>Formulario de Registro&lt;\/h2>\n            &lt;form action=\"\/enviar\" method=\"POST\">\n                &lt;label for=\"nombre\">Nombre:&lt;\/label>\n                &lt;input type=\"text\" id=\"nombre\" name=\"nombre\" placeholder=\"Tu nombre\" required>\n                \n                &lt;label for=\"interes\">Inter\u00e9s:&lt;\/label>\n                &lt;select id=\"interes\" name=\"interes\">\n                    &lt;option value=\"web\">Dise\u00f1o Web&lt;\/option>\n                    &lt;option value=\"dev\">Desarrollo App&lt;\/option>\n                &lt;\/select>\n\n                &lt;button type=\"submit\">Enviar Datos&lt;\/button>\n            &lt;\/form>\n        &lt;\/section>\n    &lt;\/main>\n\n    &lt;footer class=\"site-footer\">\n        &lt;p>&amp;copy; 2026 Mi Web Educativa - Creado con HTML5.&lt;\/p>\n    &lt;\/footer>\n\n&lt;\/body>\n&lt;\/html>\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">3. Explicaci\u00f3n de SVG (Scalable Vector Graphics)<\/h2>\n\n\n\n<p>Para tu art\u00edculo, es fundamental explicar por qu\u00e9&nbsp;<strong>SVG<\/strong>&nbsp;es diferente a una imagen normal (<code>.jpg<\/code>&nbsp;o&nbsp;<code>.png<\/code>):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u00bfQu\u00e9 es?:<\/strong>\u00a0Es un formato basado en\u00a0<strong>XML<\/strong>\u00a0para describir gr\u00e1ficos en 2D. A diferencia de las im\u00e1genes de p\u00edxeles (bitmaps), el SVG se define mediante f\u00f3rmulas matem\u00e1ticas (puntos, l\u00edneas, curvas).<\/li>\n\n\n\n<li><strong>Escalabilidad Infinita:<\/strong>\u00a0La mayor ventaja es que puedes ampliar un SVG tanto como quieras (incluso al tama\u00f1o de una valla publicitaria) y\u00a0<strong>nunca perder\u00e1 resoluci\u00f3n<\/strong>\u00a0ni se ver\u00e1 \u00abpixelado\u00bb.<\/li>\n\n\n\n<li><strong>Interactividad:<\/strong>\u00a0Al ser c\u00f3digo HTML, puedes cambiar el color de un c\u00edrculo o una l\u00ednea usando\u00a0<strong>CSS<\/strong>\u00a0o animarlo con\u00a0<strong>JavaScript<\/strong>\u00a0directamente en el navegador.<\/li>\n\n\n\n<li><strong>Peso:<\/strong>\u00a0Suelen ser archivos muy ligeros porque solo guardan instrucciones de dibujo, no datos de cada p\u00edxel.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">4. Diferencia clave: Canvas vs SVG<\/h2>\n\n\n\n<p>Es un punto excelente para tu blog:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Canvas:<\/strong>\u00a0Se dibuja mediante\u00a0<strong>p\u00edxeles<\/strong>\u00a0a trav\u00e9s de JavaScript. Es ideal para juegos o animaciones complejas de muchos elementos (como lluvia o fuego). Una vez dibujado algo, el navegador \u00abolvida\u00bb qu\u00e9 es; solo ve p\u00edxeles.<\/li>\n\n\n\n<li><strong>SVG:<\/strong>\u00a0Se dibuja mediante\u00a0<strong>objetos<\/strong>. Cada elemento (un c\u00edrculo, un texto) es un nodo en el DOM. Es ideal para iconos, logotipos e ilustraciones que deben ser n\u00edtidas en cualquier pantalla.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u00abHTML5 no es solo una versi\u00f3n del lenguaje de marcado; es la columna vertebral de la web moderna. Desde su lanzamiento, transform\u00f3 internet de un conjunto de documentos est\u00e1ticos en una plataforma de aplicaciones interactivas, multimedia y accesibles. En este art\u00edculo, exploraremos la anatom\u00eda completa de HTML5, detallando cada etiqueta y sus atributos para que&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[60],"tags":[378,372,370,373,371,374,376,377,305,375],"class_list":["post-521","post","type-post","status-publish","format-standard","hentry","category-programacion","tag-main","tag-alternativo","tag-atributos","tag-atributos-fuente","tag-fuente","tag-fuente-texto","tag-prrafos","tag-prrafos-texto","tag-texto","tag-texto-alternativo"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>HTML5 - Ciencia y Tecnologia<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 - Ciencia y Tecnologia\" \/>\n<meta property=\"og:description\" content=\"\u00abHTML5 no es solo una versi\u00f3n del lenguaje de marcado; es la columna vertebral de la web moderna. Desde su lanzamiento, transform\u00f3 internet de un conjunto de documentos est\u00e1ticos en una plataforma de aplicaciones interactivas, multimedia y accesibles. En este art\u00edculo, exploraremos la anatom\u00eda completa de HTML5, detallando cada etiqueta y sus atributos para que...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cienciaytecnology.com\/wordpress\/html5\/\" \/>\n<meta property=\"og:site_name\" content=\"Ciencia y Tecnologia\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-11T10:18:11+00:00\" \/>\n<meta name=\"author\" content=\"david\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"david\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/html5\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/html5\\\/\"},\"author\":{\"name\":\"david\",\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/#\\\/schema\\\/person\\\/b76777e3c0d2d08ea263068461c90d4b\"},\"headline\":\"HTML5\",\"datePublished\":\"2026-01-11T10:18:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/html5\\\/\"},\"wordCount\":690,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/#\\\/schema\\\/person\\\/b76777e3c0d2d08ea263068461c90d4b\"},\"keywords\":[\"<main>\",\"alternativo\",\"atributos\",\"atributos fuente\",\"fuente\",\"fuente texto\",\"p\u00e1rrafos\",\"p\u00e1rrafos texto\",\"texto\",\"texto alternativo\"],\"articleSection\":[\"Programacion\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/html5\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/html5\\\/\",\"url\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/html5\\\/\",\"name\":\"HTML5 - Ciencia y Tecnologia\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/#website\"},\"datePublished\":\"2026-01-11T10:18:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/html5\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/html5\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/html5\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/#website\",\"url\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/\",\"name\":\"Ciencia y Tecnologia\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/#\\\/schema\\\/person\\\/b76777e3c0d2d08ea263068461c90d4b\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/#\\\/schema\\\/person\\\/b76777e3c0d2d08ea263068461c90d4b\",\"name\":\"david\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/a-person-programming-with-a-computer-screen-and-code-visible.jpg\",\"url\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/a-person-programming-with-a-computer-screen-and-code-visible.jpg\",\"contentUrl\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/a-person-programming-with-a-computer-screen-and-code-visible.jpg\",\"width\":1024,\"height\":1024,\"caption\":\"david\"},\"logo\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/a-person-programming-with-a-computer-screen-and-code-visible.jpg\"},\"sameAs\":[\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\"],\"url\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/author\\\/david\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 - Ciencia y Tecnologia","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"HTML5 - Ciencia y Tecnologia","og_description":"\u00abHTML5 no es solo una versi\u00f3n del lenguaje de marcado; es la columna vertebral de la web moderna. Desde su lanzamiento, transform\u00f3 internet de un conjunto de documentos est\u00e1ticos en una plataforma de aplicaciones interactivas, multimedia y accesibles. En este art\u00edculo, exploraremos la anatom\u00eda completa de HTML5, detallando cada etiqueta y sus atributos para que...","og_url":"https:\/\/cienciaytecnology.com\/wordpress\/html5\/","og_site_name":"Ciencia y Tecnologia","article_published_time":"2026-01-11T10:18:11+00:00","author":"david","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"david","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cienciaytecnology.com\/wordpress\/html5\/#article","isPartOf":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/html5\/"},"author":{"name":"david","@id":"https:\/\/cienciaytecnology.com\/wordpress\/#\/schema\/person\/b76777e3c0d2d08ea263068461c90d4b"},"headline":"HTML5","datePublished":"2026-01-11T10:18:11+00:00","mainEntityOfPage":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/html5\/"},"wordCount":690,"commentCount":0,"publisher":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/#\/schema\/person\/b76777e3c0d2d08ea263068461c90d4b"},"keywords":["<main>","alternativo","atributos","atributos fuente","fuente","fuente texto","p\u00e1rrafos","p\u00e1rrafos texto","texto","texto alternativo"],"articleSection":["Programacion"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cienciaytecnology.com\/wordpress\/html5\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cienciaytecnology.com\/wordpress\/html5\/","url":"https:\/\/cienciaytecnology.com\/wordpress\/html5\/","name":"HTML5 - Ciencia y Tecnologia","isPartOf":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/#website"},"datePublished":"2026-01-11T10:18:11+00:00","breadcrumb":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/html5\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cienciaytecnology.com\/wordpress\/html5\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/cienciaytecnology.com\/wordpress\/html5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/cienciaytecnology.com\/wordpress\/"},{"@type":"ListItem","position":2,"name":"HTML5"}]},{"@type":"WebSite","@id":"https:\/\/cienciaytecnology.com\/wordpress\/#website","url":"https:\/\/cienciaytecnology.com\/wordpress\/","name":"Ciencia y Tecnologia","description":"","publisher":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/#\/schema\/person\/b76777e3c0d2d08ea263068461c90d4b"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cienciaytecnology.com\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/cienciaytecnology.com\/wordpress\/#\/schema\/person\/b76777e3c0d2d08ea263068461c90d4b","name":"david","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/cienciaytecnology.com\/wordpress\/wp-content\/uploads\/2024\/10\/a-person-programming-with-a-computer-screen-and-code-visible.jpg","url":"https:\/\/cienciaytecnology.com\/wordpress\/wp-content\/uploads\/2024\/10\/a-person-programming-with-a-computer-screen-and-code-visible.jpg","contentUrl":"https:\/\/cienciaytecnology.com\/wordpress\/wp-content\/uploads\/2024\/10\/a-person-programming-with-a-computer-screen-and-code-visible.jpg","width":1024,"height":1024,"caption":"david"},"logo":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/wp-content\/uploads\/2024\/10\/a-person-programming-with-a-computer-screen-and-code-visible.jpg"},"sameAs":["https:\/\/cienciaytecnology.com\/wordpress"],"url":"https:\/\/cienciaytecnology.com\/wordpress\/author\/david\/"}]}},"_links":{"self":[{"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/posts\/521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/comments?post=521"}],"version-history":[{"count":1,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/posts\/521\/revisions"}],"predecessor-version":[{"id":522,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/posts\/521\/revisions\/522"}],"wp:attachment":[{"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/media?parent=521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/categories?post=521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/tags?post=521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}