{"id":5070,"date":"2024-11-18T09:00:00","date_gmt":"2024-11-18T09:00:00","guid":{"rendered":"https:\/\/www.vadavo.com\/blog\/?p=5070"},"modified":"2024-11-21T17:28:52","modified_gmt":"2024-11-21T17:28:52","slug":"html-que-es-y-para-que-sirve","status":"publish","type":"post","link":"https:\/\/www.vadavo.com\/blog\/html-que-es-y-para-que-sirve\/","title":{"rendered":"Conceptos b\u00e1sicos de HTML: Gu\u00eda para principiantes"},"content":{"rendered":"\n<p>Si has o\u00eddo hablar de HTML pero no tienes ni idea de qu\u00e9 es o para qu\u00e9 se utiliza, est\u00e1s en el lugar correcto. <strong>HTML<\/strong> (Lenguaje de Marcado de Hipertexto) es el c\u00f3digo que usamos para crear y estructurar el contenido de las p\u00e1ginas web. En esta gu\u00eda b\u00e1sica, aprender\u00e1s los conceptos esenciales de HTML para comenzar a entender c\u00f3mo funcionan las p\u00e1ginas web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 es HTML? <\/h2>\n\n\n\n<p><strong>HTML<\/strong> es el lenguaje con el que se define el <strong>contenido de las p\u00e1ginas web<\/strong>. Corresponde a las siglas en ingl\u00e9s de <em>Lenguaje de Marcado de Hipertexto<\/em>, b\u00e1sicamente son un <strong>conjunto de etiquetas<\/strong> que el navegador interpreta y se emplean para <strong>definir el texto<\/strong> y otros elementos que compondr\u00e1n una p\u00e1gina web, como im\u00e1genes, listas, tablas, v\u00eddeos, etc.<\/p>\n\n\n\n<p>El <strong>lenguaje HTML<\/strong> sirve para <strong>describir la estructura b\u00e1sica de una p\u00e1gina<\/strong> y organizar la forma en que se mostrar\u00e1 su contenido, adem\u00e1s de que HTML permite incluir enlaces hacia otras p\u00e1ginas o documentos.<\/p>\n\n\n\n<p>Hay que mencionar que el HTML no es un lenguaje de programaci\u00f3n,&nbsp;ya que no cuenta con funciones aritm\u00e9ticas, variables o estructuras de control propias de estos lenguajes, por lo que el HTML \u00fanicamente <strong>sirve para crear p\u00e1ginas web est\u00e1ticas<\/strong>. Sin embargo, este lenguaje es muy \u00fatil ya que combinado con otros lenguajes de programaci\u00f3n obtenemos p\u00e1ginas web din\u00e1micas como las que conocemos hoy en d\u00eda.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<p>Por ejemplo, con HTML podemos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Crear p\u00e1rrafos.<\/li>\n\n\n\n<li>Insertar im\u00e1genes.<\/li>\n\n\n\n<li>Crear listas y tablas.<\/li>\n\n\n\n<li>A\u00f1adir enlaces a otras p\u00e1ginas.<\/li>\n<\/ul>\n\n\n\n<p><strong>Un ejemplo simple:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted has-white-background-color has-background\">&lt;p&gt;Mi gato es muy gru\u00f1\u00f3n.&lt;\/p&gt;<\/pre>\n\n\n\n<p>En este ejemplo, <code><mark style=\"background-color:#d4e686\" class=\"has-inline-color\">&lt;p&gt;<\/mark><\/code> es una <strong>etiqueta<\/strong> que indica el inicio de un p\u00e1rrafo, y <code><mark style=\"background-color:#d4e686\" class=\"has-inline-color\">&lt;\/p&gt;<\/mark><\/code> marca el final del mismo.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-default\" style=\"background-color:#ebebe4;color:#ebebe4\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Historia del HTML<\/h2>\n\n\n\n<p>El HTML nace en 1980 cuando el cient\u00edfico <strong>Tim Berners-Lee&nbsp;<\/strong>propuso un nuevo <strong>sistema de&nbsp;<em>hipertexto<\/em><\/strong>&nbsp;para compartir documentos. Surge ante la necesidad de encontrar documentos que te aporten <strong>informaci\u00f3n relacionada <\/strong>con el tema que necesitas y que, adem\u00e1s, puedas acceder a ellos desde cualquier parte del mundo.&nbsp;<\/p>\n\n\n\n<p>Es por ello por lo que un grupo de expertos con Berners-Lee de cabecilla deciden crear un nuevo proyecto: el <em>World Wide Web<\/em> (WWW). Una de las bases de este proyecto es el lenguaje<em>&nbsp;<\/em>HTML, que como ya hemos mencionado permitir\u00e1 que cada uno de los documentos que est\u00e1n en internet tengan un <strong>formato unificado<\/strong> y que le d\u00e9 una estructura.&nbsp;<\/p>\n\n\n\n<p>La forma de hacerlo es a trav\u00e9s de <strong>etiquetas con un orden determinado<\/strong>. Recordemos que este lenguaje s\u00f3lo podr\u00e1 ser <strong>procesado por un navegador<\/strong> como los que usamos a diario, como el que posiblemente est\u00e9s empleando ahora para leer este art\u00edculo. Los m\u00e1s conocidos son <em>Safari, Chrome, Firefox <\/em>y<em> Opera<\/em>, entre otros.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-default\" style=\"background-color:#ebebe4;color:#ebebe4\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Anatom\u00eda de un elemento HTML<\/h2>\n\n\n\n<p>Un <strong>elemento HTML<\/strong> se compone de varias partes importantes:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\"><strong>Etiqueta de apertura<\/strong><\/mark><strong>:<\/strong> Es el nombre del elemento (como <code>&lt;p&gt;<\/code> para un p\u00e1rrafo), encerrado entre corchetes angulares <code>&lt; &gt;<\/code>.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">Contenido<\/mark>:<\/strong> El texto o los datos que aparecer\u00e1n en la p\u00e1gina (por ejemplo, \u00abMi gato es muy gru\u00f1\u00f3n\u00bb).<\/li>\n\n\n\n<li><strong><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">Etiqueta de cierre<\/mark>:<\/strong> Indica el final del elemento y se parece a la etiqueta de apertura, pero con una barra <code>\/<\/code> (por ejemplo, <code>&lt;\/p&gt;<\/code>).<\/li>\n\n\n\n<li><strong><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">Atributos (opcional)<\/mark>:<\/strong> Los atributos proporcionan informaci\u00f3n adicional sobre el elemento. Se colocan dentro de la etiqueta de apertura, como <code>class<\/code> o <code>id<\/code>.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><img decoding=\"async\" style=\"width: 35px;\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" alt=\"\"> Ejemplo con un atributo:<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted has-white-background-color has-background\">&lt;p class=\"important\"&gt;Este es un p\u00e1rrafo importante.&lt;\/p&gt;<\/pre>\n\n\n\n<p>En este caso, <code><mark style=\"background-color:#d4e686\" class=\"has-inline-color\">class=\"important\"<\/mark><\/code> es un atributo que puede utilizarse para aplicar estilos espec\u00edficos a este p\u00e1rrafo.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-default\" style=\"background-color:#ebebe4;color:#ebebe4\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Estructura b\u00e1sica de una p\u00e1gina HTML<\/h2>\n\n\n\n<p>Un documento HTML completo tiene una estructura b\u00e1sica que todo navegador puede entender. Aqu\u00ed te mostramos c\u00f3mo se organiza:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted has-white-background-color has-background\">&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>  &lt;head&gt;<br>    &lt;meta charset=\"UTF-8\"&gt;<br>    &lt;title&gt;Mi primera p\u00e1gina&lt;\/title&gt;<br>  &lt;\/head&gt;<br>  &lt;body&gt;<br>    &lt;h1&gt;\u00a1Bienvenido a mi sitio web!&lt;\/h1&gt;<br>    &lt;p&gt;Este es un p\u00e1rrafo de ejemplo.&lt;\/p&gt;<br>  &lt;\/body&gt;<br>&lt;\/html&gt;<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1920\" height=\"287\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.42.41-1920x287.png\" alt=\"Ejemplo Estructura b\u00e1sica p\u00e1gina HTML\" class=\"wp-image-6658\" srcset=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.42.41-1920x287.png 1920w, https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.42.41-300x45.png 300w, https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.42.41-768x115.png 768w, https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.42.41-1536x230.png 1536w, https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.42.41-2048x307.png 2048w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\"><em>Ejemplo Estructura b\u00e1sica p\u00e1gina HTML<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><img decoding=\"async\" style=\"width: 35px;\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" alt=\"\"> Elementos principales:<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><code><mark style=\"background-color:#d4e686\" class=\"has-inline-color\">&lt;!DOCTYPE html&gt;<\/mark><\/code>: Define el tipo de documento y es obligatorio en HTML5.<\/li>\n\n\n\n<li><code><mark style=\"background-color:#d4e686\" class=\"has-inline-color\">&lt;html&gt;<\/mark><\/code>: El elemento ra\u00edz que encierra todo el contenido de la p\u00e1gina.<\/li>\n\n\n\n<li><code><mark style=\"background-color:#d4e686\" class=\"has-inline-color\">&lt;head&gt;<\/mark><\/code>: Contiene informaci\u00f3n no visible para los usuarios, como el t\u00edtulo de la p\u00e1gina y metaetiquetas.<\/li>\n\n\n\n<li><code><mark style=\"background-color:#d4e686\" class=\"has-inline-color\">&lt;meta charset=\"UTF-8\"&gt;<\/mark><\/code>: Especifica la codificaci\u00f3n de caracteres (UTF-8 es la m\u00e1s com\u00fan).<\/li>\n\n\n\n<li><code><mark style=\"background-color:#d4e686\" class=\"has-inline-color\">&lt;title&gt;<\/mark><\/code>: El t\u00edtulo que aparecer\u00e1 en la pesta\u00f1a del navegador.<\/li>\n\n\n\n<li><code><mark style=\"background-color:#d4e686\" class=\"has-inline-color\">&lt;body&gt;<\/mark><\/code>: Encierra todo el contenido visible para el usuario.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-default\" style=\"background-color:#ebebe4;color:#ebebe4\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Etiquetas HTML Comunes<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><img decoding=\"async\" style=\"width: 35px;\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" alt=\"\"> Encabezados<\/h3>\n\n\n\n<p>HTML tiene seis niveles de encabezados, desde <code><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">&lt;h1&gt;<\/mark><\/code> (el m\u00e1s importante) hasta <code><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">&lt;h6&gt;<\/mark><\/code> (el menos importante).<\/p>\n\n\n\n<pre class=\"wp-block-preformatted has-white-background-color has-background\">&lt;h1&gt;Este es el t\u00edtulo principal&lt;\/h1&gt;<br>&lt;h2&gt;Este es un subt\u00edtulo&lt;\/h2&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><img decoding=\"async\" style=\"width: 35px;\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" alt=\"\"> P\u00e1rrafos<\/h3>\n\n\n\n<p>Se utilizan para agrupar bloques de texto <mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">&lt;p&gt;<\/mark>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted has-white-background-color has-background\"><code>&lt;p&gt;Este es un p\u00e1rrafo de texto.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><img decoding=\"async\" style=\"width: 35px;\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" alt=\"\"> Listas<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Listas desordenadas<\/strong> usan la etiqueta <code><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">&lt;ul&gt;<\/mark><\/code> y cada elemento se define con <code><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">&lt;li&gt;<\/mark><\/code>:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted has-white-background-color has-background\"><code>&lt;ul&gt;\n  &lt;li&gt;Primer elemento&lt;\/li&gt;\n  &lt;li&gt;Segundo elemento&lt;\/li&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Listas ordenadas<\/strong> usan <code><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">&lt;ol&gt;<\/mark><\/code> para numerar los elementos:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted has-white-background-color has-background\"><code>&lt;ol&gt;<br>  &lt;li&gt;Primer paso&lt;\/li&gt;<br>  &lt;li&gt;Segundo paso&lt;\/li&gt;<br>&lt;\/ol&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><img decoding=\"async\" style=\"width: 35px;\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" alt=\"\"> Im\u00e1genes<\/h3>\n\n\n\n<p>Las im\u00e1genes se insertan con la etiqueta <code><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">&lt;img&gt;<\/mark><\/code>, que es un <strong>elemento vac\u00edo<\/strong> (no necesita etiqueta de cierre).<\/p>\n\n\n\n<pre class=\"wp-block-preformatted has-white-background-color has-background\"><code>&lt;img src=\"mi-imagen.jpg\" alt=\"Descripci\u00f3n de la imagen\"&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><img decoding=\"async\" style=\"width: 35px;\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" alt=\"\"> V\u00ednculos o enlaces<\/h3>\n\n\n\n<p>Los enlaces se crean con la etiqueta <code><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">&lt;a&gt;<\/mark><\/code>, que convierte un texto en un hiperv\u00ednculo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted has-white-background-color has-background\"><code>&lt;a href=\"https:\/\/www.test.com\"&gt;<\/code><br><code>Ver mas&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-default\" style=\"background-color:#ebebe4;color:#ebebe4\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Sem\u00e1ntico<\/h2>\n\n\n\n<p>El <strong><a href=\"https:\/\/es.wikipedia.org\/wiki\/HTML\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">HTML<\/a> sem\u00e1ntico<\/strong> se refiere al uso de etiquetas que no solo organizan la estructura de la p\u00e1gina, sino que tambi\u00e9n tienen un significado espec\u00edfico sobre el tipo de contenido que encierran. Esto mejora la accesibilidad y el SEO de una p\u00e1gina.<\/p>\n\n\n\n<p>Algunas etiquetas sem\u00e1nticas importantes son:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">&lt;header&gt;<\/mark><\/code>: Define el encabezado de una p\u00e1gina o secci\u00f3n.<\/li>\n\n\n\n<li><code><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">&lt;nav&gt;<\/mark><\/code>: Representa un conjunto de enlaces de navegaci\u00f3n.<\/li>\n\n\n\n<li><code><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">&lt;article&gt;<\/mark><\/code>: Contenido independiente que puede ser distribuido (como un art\u00edculo de blog).<\/li>\n\n\n\n<li><code><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">&lt;section&gt;<\/mark><\/code>: Agrupa contenido relacionado bajo un mismo tema.<\/li>\n\n\n\n<li><code><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">&lt;footer&gt;<\/mark><\/code>: Contiene informaci\u00f3n del pie de p\u00e1gina, como enlaces de contacto o derechos de autor.<\/li>\n<\/ul>\n\n\n\n<p>El uso de etiquetas sem\u00e1nticas ayuda a que los motores de b\u00fasqueda y las herramientas de accesibilidad (como los lectores de pantalla) comprendan mejor el contenido y su prop\u00f3sito.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><img decoding=\"async\" style=\"width: 35px;\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" alt=\"\">Ejemplo de HTML sem\u00e1ntico:<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted has-white-background-color has-background\"><code>&lt;article&gt;<br>  &lt;header&gt;<br>    &lt;h1&gt;Art\u00edculo sobre HTML Sem\u00e1ntico&lt;\/h1&gt;<br>    &lt;p&gt;Publicado el 26 de septiembre de 2024&lt;\/p&gt;<br>  &lt;\/header&gt;<br>  &lt;p&gt;Este art\u00edculo explica c\u00f3mo usar etiquetas HTML sem\u00e1nticas para mejorar la estructura y accesibilidad de una p\u00e1gina web.&lt;\/p&gt;<br>  &lt;footer&gt;<br>    &lt;p&gt;Autora: Carla Planes&lt;\/p&gt;<br>  &lt;\/footer&gt;<br>&lt;\/article&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1920\" height=\"284\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.41.26-1920x284.png\" alt=\"Art\u00edculo sobre HTML Sem\u00e1ntico\" class=\"wp-image-6656\" style=\"width:840px;height:auto\" srcset=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.41.26-1920x284.png 1920w, https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.41.26-300x44.png 300w, https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.41.26-768x114.png 768w, https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.41.26-1536x227.png 1536w, https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.41.26-2048x303.png 2048w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\"><em>Ejemplo de Art\u00edculo sobre HTML Sem\u00e1ntico<\/em><\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-default\" style=\"background-color:#ebebe4;color:#ebebe4\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Elementos Vac\u00edos<\/h2>\n\n\n\n<p>Algunos elementos de HTML no tienen contenido y se denominan <strong>elementos vac\u00edos<\/strong>. Ya mencionamos uno, la etiqueta <code><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">&lt;img&gt;<\/mark><\/code>. Otros ejemplos incluyen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">&lt;br&gt;<\/mark><\/code>: Inserta un salto de l\u00ednea.<\/li>\n\n\n\n<li><code><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">&lt;hr&gt;<\/mark><\/code>: Inserta una l\u00ednea horizontal para separar contenido.<\/li>\n<\/ul>\n\n\n\n<p>Estos elementos no necesitan una etiqueta de cierre porque no envuelven contenido.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-default\" style=\"background-color:#ebebe4;color:#ebebe4\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Formulario HTML<\/h2>\n\n\n\n<p>Los formularios son una parte crucial de la interacci\u00f3n entre usuarios y sitios web. La etiqueta<mark style=\"background-color:#d8ea89\" class=\"has-inline-color\"> <code>&lt;form&gt;<\/code><\/mark> permite crear formularios que los usuarios pueden rellenar y enviar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><img decoding=\"async\" style=\"width: 35px;\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" alt=\"\"> Componentes de un formulario:<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Etiqueta <code><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">&lt;input&gt;<\/mark><\/code>:<\/strong> Define campos de entrada.\n<ul class=\"wp-block-list\">\n<li>Tipos comunes: <code>text<\/code>, <code>email<\/code>, <code>password<\/code>, <code>checkbox<\/code>, <code>radio<\/code>, <code>submit<\/code>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Etiqueta <code><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">&lt;label&gt;<\/mark><\/code>:<\/strong> Asocia un texto descriptivo con un campo de formulario.<\/li>\n\n\n\n<li><strong>Etiqueta <code><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">&lt;button&gt;<\/mark><\/code>:<\/strong> Crea botones de env\u00edo o acciones.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><img decoding=\"async\" style=\"width: 35px;\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" alt=\"\"> Ejemplo de formulario simple:<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted has-white-background-color has-background\"><code>&lt;form action=\"\/enviar\" method=\"POST\"&gt;<br>  &lt;label for=\"nombre\"&gt;Nombre:&lt;\/label&gt;<br>  &lt;input type=\"text\" id=\"nombre\" name=\"nombre\"&gt;<br>  <br>  &lt;label for=\"email\"&gt;Correo electr\u00f3nico:&lt;\/label&gt;<br>  &lt;input type=\"email\" id=\"email\" name=\"email\"&gt;<br>  <br>  &lt;button type=\"submit\"&gt;Enviar&lt;\/button&gt;<br>&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1920\" height=\"226\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.47.00-1920x226.png\" alt=\"Ejemplo de formulario simple\" class=\"wp-image-6661\" srcset=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.47.00-1920x226.png 1920w, https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.47.00-300x35.png 300w, https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.47.00-768x90.png 768w, https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.47.00-1536x180.png 1536w, https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.47.00-2048x241.png 2048w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\"><em>Ejemplo de formulario simple<\/em><\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-default\" style=\"background-color:#ebebe4;color:#ebebe4\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">HTML y CSS: Una Combinaci\u00f3n Indispensable<\/h2>\n\n\n\n<p>HTML define la <strong>estructura<\/strong> de una p\u00e1gina, pero para hacerla visualmente atractiva, necesitamos <strong>CSS<\/strong> (Cascading Style Sheets). CSS permite controlar el dise\u00f1o: colores, fuentes, m\u00e1rgenes, espaciado, y m\u00e1s. As\u00ed, HTML y CSS trabajan juntos para crear p\u00e1ginas web completas y est\u00e9ticas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><img decoding=\"async\" style=\"width: 35px;\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" alt=\"\"> Ejemplo de combinaci\u00f3n de HTML y CSS<strong>:<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-preformatted has-white-background-color has-background\"><code>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>  &lt;head&gt;<br>    &lt;style&gt;<br>      body {<br>        font-family: Arial, sans-serif;<br>        background-color: #f0f0f0;<br>      }<br>      h1 {<br>        color: #333;<br>      }<br>    &lt;\/style&gt;<br>    &lt;title&gt;Mi p\u00e1gina con estilo&lt;\/title&gt;<br>  &lt;\/head&gt;<br>  &lt;body&gt;<br>    &lt;h1&gt;Hola, mundo!&lt;\/h1&gt;<br>    &lt;p&gt;Esta es una p\u00e1gina con estilo gracias a CSS.&lt;\/p&gt;<br>  &lt;\/body&gt;<br>&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"480\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.48.39-1920x480.png\" alt=\"Ejemplo de combinaci\u00f3n de HTML y CSS\" class=\"wp-image-6664\" srcset=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.48.39-1920x480.png 1920w, https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.48.39-300x75.png 300w, https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.48.39-768x192.png 768w, https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.48.39-1536x384.png 1536w, https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/Captura-de-pantalla-2024-09-26-a-las-12.48.39-2048x512.png 2048w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\"><em>Ejemplo de combinaci\u00f3n de HTML y CSS<\/em><\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-default\" style=\"background-color:#ebebe4;color:#ebebe4\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Errores Comunes al Escribir HTML<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">Olvidar cerrar etiquetas<\/mark>:<\/strong> Todas las etiquetas deben tener su correspondiente cierre, excepto las que son elementos vac\u00edos como <code>&lt;img&gt;<\/code>.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">No anidar correctamente los elementos<\/mark>:<\/strong> Aseg\u00farate de que los elementos est\u00e9n correctamente abiertos y cerrados en el orden correcto.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:#d8ea89\" class=\"has-inline-color\">No utilizar etiquetas sem\u00e1nticas<\/mark>:<\/strong> Usa etiquetas significativas como <code>&lt;header&gt;<\/code>, <code>&lt;footer&gt;<\/code>, y <code>&lt;article&gt;<\/code> para mejorar la accesibilidad y SEO.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-default\" style=\"background-color:#ebebe4;color:#ebebe4\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Recursos para aprender HTML<\/h2>\n\n\n\n<p>Existen numerosos recursos en l\u00ednea para aprender HTML, tanto gratuitos como de pago. Algunos de los m\u00e1s populares son:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/developer.mozilla.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><span style=\"text-decoration: underline;\">Mozilla Developer Network (MDN)<\/span><\/a><\/strong>: Ofrece una amplia variedad de tutoriales y gu\u00edas para aprender HTML, CSS, JavaScript y otros aspectos de la creaci\u00f3n de p\u00e1ginas web.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/www.w3schools.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><span style=\"text-decoration: underline;\">W3Schools<\/span><\/a><\/strong>: Una de las fuentes m\u00e1s respetadas y utilizadas para aprender HTML y otros lenguajes web.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/www.codecademy.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><span style=\"text-decoration: underline;\">Codecademy<\/span><\/a><\/strong>: Esta plataforma de aprendizaje interactivo ofrece un curso gratuito de HTML y CSS para principiantes.<\/li>\n<\/ul>\n\n\n\n<p>Al final, HTML es la columna vertebral de la web y un conocimiento indispensable para cualquier persona que quiera dedicarse a la creaci\u00f3n de p\u00e1ginas web, ya sea de manera profesional o como hobby.<\/p>\n\n\n\n<p>La pr\u00e1ctica constante es esencial para dominar HTML, as\u00ed que te animamos a que vayas probando y experimentando con las etiquetas y las estructuras que hemos presentado en este art\u00edculo. No tengas miedo a cometer errores, incluso los programadores m\u00e1s experimentados los cometen y son una de las mejores formas de aprender.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-default\" style=\"background-color:#ebebe4;color:#ebebe4\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n<\/h2>\n\n\n\n<p>Ahora que conoces los conceptos b\u00e1sicos de HTML, puedes empezar a crear tu primera p\u00e1gina web. HTML es el <strong>pilar fundamental<\/strong> de la web, y aprenderlo te dar\u00e1 una base s\u00f3lida para explorar otros lenguajes y tecnolog\u00edas web como CSS y JavaScript.<\/p>\n\n\n\n<p>La pr\u00e1ctica es clave, as\u00ed que no dudes en experimentar y probar nuevos elementos. Si quieres aportar algo o tienes cualquier duda, por favor, \u00a1no dudes en dejarnos un comentario! \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Si has o\u00eddo hablar de HTML pero no tienes ni idea de qu\u00e9 es o para qu\u00e9 se utiliza, est\u00e1s en el lugar correcto. HTML (Lenguaje de Marcado de Hipertexto) es el c\u00f3digo que usamos para crear y estructurar el contenido de las p\u00e1ginas web. En esta gu\u00eda b\u00e1sica, aprender\u00e1s los conceptos esenciales de HTML [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6404,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[217,204,218,172],"class_list":["post-5070","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo","tag-etiquetas","tag-html","tag-lenguaje-html","tag-web"],"_links":{"self":[{"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/posts\/5070","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/comments?post=5070"}],"version-history":[{"count":36,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/posts\/5070\/revisions"}],"predecessor-version":[{"id":6852,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/posts\/5070\/revisions\/6852"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/media\/6404"}],"wp:attachment":[{"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/media?parent=5070"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/categories?post=5070"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/tags?post=5070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}