{"id":1,"date":"2019-02-03T07:13:21","date_gmt":"2019-02-03T07:13:21","guid":{"rendered":"https:\/\/www.francescopepe.com\/?p=1"},"modified":"2024-11-05T11:52:59","modified_gmt":"2024-11-05T11:52:59","slug":"guia-html","status":"publish","type":"post","link":"https:\/\/www.francescopepe.com\/es\/guia-html\/","title":{"rendered":"Gu\u00eda HTML para principiantes: etiquetas y formato de texto e im\u00e1genes"},"content":{"rendered":"

HTML es un lenguaje de marcado<\/strong> para p\u00e1ginas web. De hecho, HTML significa Lenguaje de marcado de hipertexto<\/strong>.<\/p>\n\n\n\n

Una cosa que hay que dejar clara desde el principio y tener presente es que elHTML no es un lenguaje de programaci\u00f3n<\/strong>HTML es s\u00f3lo para dar formato al texto<\/strong> y para maquetar elementos como formularios, citas, v\u00eddeos.<\/p>\n\n\n\n

En esta breve gu\u00eda no nos detendremos demasiado en discusiones t\u00e9cnicas o filos\u00f3ficas sobre qu\u00e9 es un hipertexto<\/a>pero tomaremos como definici\u00f3n la de p\u00e1gina web, una p\u00e1gina navegable en Internet.<\/p>\n\n\n

Herramientas<\/h2>\n\n\n

Para desarrollar su primera p\u00e1gina html, un simple editor de texto<\/strong>Para los usuarios de Windows, la sencilla Bloc de notas<\/strong>.<\/p>\n\n\n

Nuestra primera p\u00e1gina HTML<\/h2>\n\n\n

Abre el bloc de notas e introduce el siguiente c\u00f3digo:<\/p>\n\n\n\n

<html><\/html><\/code><\/pre>\n\n\n\n
Haz clic en Guardar y elige un nombre \"p\u00e1gina.html<\/strong>\" y en el men\u00fa desplegable \"guardar como<\/strong>\"recuerde seleccionar \"todos los archivos<\/strong>\u201c.<\/p>\n\n\n\n
Ya hemos creado nuestra primera p\u00e1gina html, que una vez abierta mostrar\u00e1 una p\u00e1gina en blanco.<\/p>\n\n\n\n
Cada p\u00e1gina html consta b\u00e1sicamente de dos elementos, un head <head><\/strong> y un cuerpo <body><\/strong>.<\/p>\n\n\n\n
As\u00ed modificamos nuestra p\u00e1gina:<\/p>\n\n\n\n
<html>\n<head><\/head>\n<body><\/body>\n<\/html><\/code><\/pre>\n\n\n
El DOCTYPE<\/h2>\n\n\n
En este punto es importante introducir el concepto de DOCTYPE<\/strong>. El doctype es una declaraci\u00f3n que se inserta al principio del documento y que permite a los navegadores renderizar la p\u00e1gina correctamente. En el caso de HTML5<\/strong> la declaraci\u00f3n doctype es la siguiente<\/p>\n\n\n\n
<!doctype html>\n<html>\n<head><\/head>\n<body><\/body>\n<\/html><\/code><\/pre>\n\n\n\n
En el pasado, se utilizaban declaraciones de doctype m\u00e1s largas y articuladas, pero ahora elHTML5<\/strong> es una norma, por lo que nos limitaremos a \u00e9sta.<\/p>\n\n\n
A\u00f1adir un t\u00edtulo a la p\u00e1gina HTML: la etiqueta title<\/h2>\n\n\n
Si intentamos abrir la p\u00e1gina html creada anteriormente, veremos que en la barra de la ventana aparece la ruta del archivo. Si queremos a\u00f1adir un t\u00edtulo m\u00e1s explicativo, podemos a\u00f1adir la etiqueta <\/strong> en el<strong><head><\/strong> del documento.<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-markup line-numbers\"><!doctype html>\n<html>\n<head>\n  <title>Mi primera página web<\/title>\n<\/head>\n<body><\/body>\n<\/html><\/code><\/pre>\n\n\n\n<p>Adem\u00e1s de hacer la p\u00e1gina m\u00e1s f\u00e1cil de usar, la presencia del t\u00edtulo tambi\u00e9n es importante en el lateral <strong>SEO<\/strong>.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"i-tag\">Etiquetas<\/h2>\n\n\n<p>Una de las primeras cosas que podemos observar es que HTML es un lenguaje compuesto de etiquetas. Cada etiqueta HTML va siempre encerrada entre un signo menor (  ). Una etiqueta gen\u00e9rica se caracteriza por la siguiente sintaxis: <\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-markup line-numbers\"><nomedeltag><\/code><\/pre>\n\n\n\n<p>Las etiquetas pueden incluir una apertura <strong><nometag><\/strong> y un cierre <strong>.<\/strong>, <\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-markup\"><h1>Título del artículo<\/h1><\/code><\/pre>\n\n\n\n<p>o ser etiquetas que no contienen ning\u00fan elemento y, por tanto, se cierran solas. Un ejemplo de este \u00faltimo tipo de etiquetas es <strong><img \/><\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-markup line-numbers\"><img src="mondo.jpg" \/><\/code><\/pre>\n\n\n\n<p>En esta breve gu\u00eda no analizaremos todas las etiquetas html, sino s\u00f3lo las que se utilizan con m\u00e1s frecuencia. Para obtener una lista exhaustiva de todas las etiquetas puede consultar <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<p>Veamos cu\u00e1les son las principales etiquetas y c\u00f3mo utilizarlas.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"il-tag-h1-e-gli-altri-headings\">La etiqueta <h1> y las demás rúbricas<\/h2>\n\n\n<p>La etiqueta <strong><h1><\/strong> se utiliza para definir un encabezado, es decir, un texto que tiene mayor importancia dentro del contenido de nuestra p\u00e1gina html, por lo que se formatear\u00e1 con una fuente m\u00e1s grande. <\/p>\n\n\n\n<p>Existen varias etiquetas de cabecera en funci\u00f3n de su importancia: as\u00ed, se puede tener <strong><h1><\/strong>, <strong><h2><\/strong> , <<strong>h3><\/strong> , <strong><h4><\/strong> , <strong><h5><\/strong> , <strong><h6><\/strong>. <\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-markup\"><h1>Título de la página<\/h1><\/code><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id=\"il-tag-p\">La etiqueta <p><\/h2>\n\n\n<p>El <<strong>p><\/strong> se utiliza para definir un p\u00e1rrafo. Si se inserta texto dentro de esta etiqueta, se formatear\u00e1 como texto libre. <\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-markup\"><p>En esta página hablaremos de HTML.<\/p><\/code><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id=\"il-tag-b\">La etiqueta <b><\/h2>\n\n\n<p>La etiqueta <strong><b><\/strong> se utiliza para resaltar texto:<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-markup\"><b>texto muy importante<\/b><\/code><\/pre>\n\n\n\n<p>Su funcionamiento es idéntico al del <strong>ponga una parte del texto en negrita.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"il-tag-a\">La etiqueta <a> <\/h2>\n\n\n<p>La etiqueta <a> se utiliza para definir un enlace (enlaces entre páginas web) nos permite crear un enlace desde nuestra página a otra página. La sintaxis de un enlace es la siguiente:  <\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-markup\"><a href="https:\/\/www.google.it">Enlaces Google<\/a><\/code><\/pre>\n\n\n\n<p>Podemos ver que el <a> necesita el atributo href que indica la página de destino. <\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"il-tag-img\">La etiqueta <img><\/h2>\n\n\n<p>La etiqueta <strong><img><\/strong> se utiliza para insertar una imagen en la página HTML. A diferencia de las etiquetas anteriores, la etiqueta <img> es una etiqueta de cierre automático, es decir, no necesita una etiqueta de cierre.<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-markup\"><img src="immagini\/terra.jpg" \/><\/code><\/pre>\n\n\n\n<p>Como vemos en el ejemplo, el <img> necesita el atributo src, que indica la ruta a la imagen que se va a mostrar. El atributo <img> también puede tener otros atributos:<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-markup\"><img src="immagini\/terra.jpg" alt="imagen de la Tierra" \/><\/code><\/pre>\n\n\n\n<p>En este ejemplo, el atributo alt se utiliza para mostrar un texto alternativo en caso de que la imagen no se cargue. Tambi\u00e9n es \u00fatil para indicar a los motores de b\u00fasqueda lo que se muestra en la p\u00e1gina, lo que es muy importante en t\u00e9rminos de SEO.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"i-tag-lista-ul-ol-li\">Las etiquetas de lista <ul>, <ol>, <li><\/h2>\n\n\n<p>Si queremos mostrar una lista en nuestra p\u00e1gina html, podemos utilizar la etiqueta <ul>. Esta etiqueta muestra una lista desordenada, por lo que aparecer\u00e1 un punto junto a cada elemento de la lista. Si queremos mostrar una lista numerada, podemos utilizar la etiqueta <ol>. <\/p>\n\n\n\n<p>Cada elemento de la lista debe ir dentro de la etiqueta <li>.<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-markup\"><ul>\n  <li>Primo punto<\/li>\n  <li>Secondo punto<\/li>\n  <li>Terzo punto<\/li>\n<\/ul><\/code><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id=\"mini-tutorial-come-creare-la-tua-prima-pagina-web\">Mini tutorial: c\u00f3mo crear tu primera p\u00e1gina web<\/h2>\n\n\n<p>Tras un r\u00e1pido vistazo a las principales etiquetas html, podemos intentar crear nuestra primera p\u00e1gina web.<\/p>\n\n\n\n<p>Abre el Bloc de notas o cualquier otro editor de texto y empieza a escribir este c\u00f3digo:<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-markup\"><!doctype html>\n<html>\n<head>\n  <title>Mi primera página web<\/title>\n<\/head>\n<body><\/body>\n<\/html><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"400\" src=\"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/07\/tutorial_html_02.png\" alt=\"primera p\u00e1gina html\" class=\"wp-image-133\" srcset=\"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/07\/tutorial_html_02.png 600w, https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/07\/tutorial_html_02-300x200.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure>\n\n\n\n<p>Guardar como y recuerde seleccionar \"Todos los archivos\" en el cuadro desplegable y, a continuaci\u00f3n, guardar como <strong>index.html<\/strong> o <strong>mipagina.html<\/strong> o lo que m\u00e1s nos gusta. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"540\" src=\"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/07\/tutorial_html_02-1.png\" alt=\"\" class=\"wp-image-135\" srcset=\"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/07\/tutorial_html_02-1.png 960w, https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/07\/tutorial_html_02-1-300x169.png 300w, https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/07\/tutorial_html_02-1-768x432.png 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n\n\n<p>Si hacemos doble clic en el archivo que acabamos de guardar, se abrir\u00e1 una nueva ventana del navegador con nuestra primera p\u00e1gina html. Ser\u00e1 una p\u00e1gina vac\u00eda, pero tendr\u00e1 el t\u00edtulo que hemos introducido en el campo <strong><title><\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"133\" src=\"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/07\/tutorial_html_03.png\" alt=\"\" class=\"wp-image-136\" srcset=\"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/07\/tutorial_html_03.png 650w, https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/07\/tutorial_html_03-300x61.png 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<p>Pasemos a la construcci\u00f3n de la p\u00e1gina web. A\u00f1adimos una cabecera y algunos p\u00e1rrafos. Aplicamos el <strong><b><\/strong> algunas palabras para destacar, como el nombre de la ciudad de nacimiento, a\u00f1adir una foto con la etiqueta <strong><img><\/strong> y un enlace a la p\u00e1gina en Wikipedia.<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-markup line-numbers\"><!doctype html>\n<html>\n<head>\n  <title>Mi primera página web<\/title>\n<\/head>\n<body>\n<h1>Lionel Messi<\/h1>\n<p>Lionel Andrés Messi, al que muchos llaman simplemente Leo, nació el 24 de junio de 1987 en <b>Rosario<\/b>en el estado argentino de Santa Fe.\n<\/p>\n<img src="Messi.jpg" \/>\n<p>Sólo tiene cinco años cuando empieza a dar patadas al balón. Su primer equipo es el <b>Grandoli<\/b>En su ciudad hay una pequeña escuela de fútbol para niños. El entrenador de los chicos es Jorge Messi, obrero metalúrgico y padre del futuro campeón.\n<\/p>\n<p>A los siete años <a href="https:\/\/it.wikipedia.org\/wiki\/Lionel_Messi">Lionel Messi<\/a> Viste la camiseta de "Newell's Old Boys" y juega en las categorías inferiores. A los ojos de los aficionados al fútbol que seguían al chaval por los campos de Rosario, el talento del joven ya era evidente.\n<\/p>\n<h2>La llegada a barcelona<\/h2>\n<p>Debido a un retraso en el desarrollo óseo del niño causado por los bajos niveles de hormonas del crecimiento en su organismo, la transición se desvanece.\n<\/p>\n<p>Se aconseja a la familia que busque tratamiento médico, pero es muy caro: se habla de 900 dólares al mes; Jorge Messi pide ayuda a Newell's Old Boys y a River Plate sin obtener soluciones adecuadas. Creyendo firmemente en el posible futuro de Lionel como campeón, pide ayuda a algunas fundaciones.\n<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n<p>Si queremos insertar una imagen, podemos guardarla en la misma carpeta que el archivo html y recuperarla introduciendo el nombre del archivo en el campo <strong>src<\/strong> de la etiqueta <strong><img><\/strong>.<\/p>\n\n\n\n<p>Si hemos hecho todo correctamente, deber\u00edamos obtener algo como esto:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"902\" height=\"654\" src=\"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/07\/tutorial_html_04.png\" alt=\"\" class=\"wp-image-146\" srcset=\"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/07\/tutorial_html_04.png 902w, https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/07\/tutorial_html_04-300x218.png 300w, https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/07\/tutorial_html_04-768x557.png 768w\" sizes=\"auto, (max-width: 902px) 100vw, 902px\" \/><\/figure>\n\n\n\n<p>En esta breve gu\u00eda sobre HTML, hemos visto c\u00f3mo hacer una p\u00e1gina web, a\u00f1adir texto e im\u00e1genes, dar formato a una cabecera y texto en negrita, y a\u00f1adir enlaces. <\/p>\n\n\n\n<p>Para mejorar nuestra p\u00e1gina tendremos que cambiar su apariencia, utilizando la funci\u00f3n <strong>CSS<\/strong>. Este ser\u00e1 el tema de una futura gu\u00eda.<\/p>","protected":false},"excerpt":{"rendered":"<p>Breve gu\u00eda sobre HTML para formatear texto e im\u00e1genes: explicar\u00e9 c\u00f3mo se hace una p\u00e1gina web, c\u00f3mo se crea y qu\u00e9 son las etiquetas html.<\/p>","protected":false},"author":1,"featured_media":194,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-1","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Guida HTML per capire i tag, la formattazione del testo e delle immagini<\/title>\n<meta name=\"description\" content=\"In questa semplice guida ti spiego cos'\u00e8 l'HTML e ti mostro i principali tag e il loro utilizzo e come formattare il testo anche in ottica SEO.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.francescopepe.com\/es\/guia-html\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guida HTML per capire i tag, la formattazione del testo e delle immagini\" \/>\n<meta property=\"og:description\" content=\"In questa semplice guida ti spiego cos'\u00e8 l'HTML e ti mostro i principali tag e il loro utilizzo e come formattare il testo anche in ottica SEO.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.francescopepe.com\/es\/guia-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Francesco Pepe\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-03T07:13:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-05T11:52:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/02\/HTML5.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"450\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Francesco\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Francesco\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.francescopepe.com\/guida-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.francescopepe.com\/guida-html\/\"},\"author\":{\"name\":\"Francesco\",\"@id\":\"https:\/\/www.francescopepe.com\/#\/schema\/person\/151e90eaa70ca03f7637e395898a6743\"},\"headline\":\"Guida HTML per principianti: i tag e la formattazione di testo e immagini\",\"datePublished\":\"2019-02-03T07:13:21+00:00\",\"dateModified\":\"2024-11-05T11:52:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.francescopepe.com\/guida-html\/\"},\"wordCount\":1084,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.francescopepe.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.francescopepe.com\/guida-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/02\/HTML5.jpg\",\"articleSection\":[\"Guide\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.francescopepe.com\/guida-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.francescopepe.com\/guida-html\/\",\"url\":\"https:\/\/www.francescopepe.com\/guida-html\/\",\"name\":\"Guida HTML per capire i tag, la formattazione del testo e delle immagini\",\"isPartOf\":{\"@id\":\"https:\/\/www.francescopepe.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.francescopepe.com\/guida-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.francescopepe.com\/guida-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/02\/HTML5.jpg\",\"datePublished\":\"2019-02-03T07:13:21+00:00\",\"dateModified\":\"2024-11-05T11:52:59+00:00\",\"description\":\"In questa semplice guida ti spiego cos'\u00e8 l'HTML e ti mostro i principali tag e il loro utilizzo e come formattare il testo anche in ottica SEO.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.francescopepe.com\/guida-html\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.francescopepe.com\/guida-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.francescopepe.com\/guida-html\/#primaryimage\",\"url\":\"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/02\/HTML5.jpg\",\"contentUrl\":\"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/02\/HTML5.jpg\",\"width\":900,\"height\":450,\"caption\":\"guida html\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.francescopepe.com\/guida-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.francescopepe.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Guide\",\"item\":\"https:\/\/www.francescopepe.com\/guide\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Guida HTML per principianti: i tag e la formattazione di testo e immagini\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.francescopepe.com\/#website\",\"url\":\"https:\/\/www.francescopepe.com\/\",\"name\":\"Francesco Pepe\",\"description\":\"Coding e digital marketing\",\"publisher\":{\"@id\":\"https:\/\/www.francescopepe.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.francescopepe.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.francescopepe.com\/#organization\",\"name\":\"Francesco Pepe\",\"url\":\"https:\/\/www.francescopepe.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.francescopepe.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2024\/04\/fp-logo.png\",\"contentUrl\":\"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2024\/04\/fp-logo.png\",\"width\":1250,\"height\":1250,\"caption\":\"Francesco Pepe\"},\"image\":{\"@id\":\"https:\/\/www.francescopepe.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.francescopepe.com\/#\/schema\/person\/151e90eaa70ca03f7637e395898a6743\",\"name\":\"Francesco\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.francescopepe.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/660288424706c1e81cdfa984813e860d815034a29d8f74fe11d34010ddd652c8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/660288424706c1e81cdfa984813e860d815034a29d8f74fe11d34010ddd652c8?s=96&d=mm&r=g\",\"caption\":\"Francesco\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gu\u00eda HTML para entender las etiquetas y el formato del texto y las im\u00e1genes","description":"En esta sencilla gu\u00eda, te explico qu\u00e9 es HTML y te muestro las principales etiquetas y su uso, as\u00ed como la forma de dar formato al texto con fines de SEO.","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:\/\/www.francescopepe.com\/es\/guia-html\/","og_locale":"es_ES","og_type":"article","og_title":"Guida HTML per capire i tag, la formattazione del testo e delle immagini","og_description":"In questa semplice guida ti spiego cos'\u00e8 l'HTML e ti mostro i principali tag e il loro utilizzo e come formattare il testo anche in ottica SEO.","og_url":"https:\/\/www.francescopepe.com\/es\/guia-html\/","og_site_name":"Francesco Pepe","article_published_time":"2019-02-03T07:13:21+00:00","article_modified_time":"2024-11-05T11:52:59+00:00","og_image":[{"width":900,"height":450,"url":"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/02\/HTML5.jpg","type":"image\/jpeg"}],"author":"Francesco","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Francesco","Tiempo de lectura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.francescopepe.com\/guida-html\/#article","isPartOf":{"@id":"https:\/\/www.francescopepe.com\/guida-html\/"},"author":{"name":"Francesco","@id":"https:\/\/www.francescopepe.com\/#\/schema\/person\/151e90eaa70ca03f7637e395898a6743"},"headline":"Guida HTML per principianti: i tag e la formattazione di testo e immagini","datePublished":"2019-02-03T07:13:21+00:00","dateModified":"2024-11-05T11:52:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.francescopepe.com\/guida-html\/"},"wordCount":1084,"commentCount":0,"publisher":{"@id":"https:\/\/www.francescopepe.com\/#organization"},"image":{"@id":"https:\/\/www.francescopepe.com\/guida-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/02\/HTML5.jpg","articleSection":["Guide"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.francescopepe.com\/guida-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.francescopepe.com\/guida-html\/","url":"https:\/\/www.francescopepe.com\/guida-html\/","name":"Gu\u00eda HTML para entender las etiquetas y el formato del texto y las im\u00e1genes","isPartOf":{"@id":"https:\/\/www.francescopepe.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.francescopepe.com\/guida-html\/#primaryimage"},"image":{"@id":"https:\/\/www.francescopepe.com\/guida-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/02\/HTML5.jpg","datePublished":"2019-02-03T07:13:21+00:00","dateModified":"2024-11-05T11:52:59+00:00","description":"En esta sencilla gu\u00eda, te explico qu\u00e9 es HTML y te muestro las principales etiquetas y su uso, as\u00ed como la forma de dar formato al texto con fines de SEO.","breadcrumb":{"@id":"https:\/\/www.francescopepe.com\/guida-html\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.francescopepe.com\/guida-html\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.francescopepe.com\/guida-html\/#primaryimage","url":"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/02\/HTML5.jpg","contentUrl":"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/02\/HTML5.jpg","width":900,"height":450,"caption":"guida html"},{"@type":"BreadcrumbList","@id":"https:\/\/www.francescopepe.com\/guida-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.francescopepe.com\/"},{"@type":"ListItem","position":2,"name":"Guide","item":"https:\/\/www.francescopepe.com\/guide\/"},{"@type":"ListItem","position":3,"name":"Guida HTML per principianti: i tag e la formattazione di testo e immagini"}]},{"@type":"WebSite","@id":"https:\/\/www.francescopepe.com\/#website","url":"https:\/\/www.francescopepe.com\/","name":"Francesco Pepe","description":"Codificaci\u00f3n y marketing digital","publisher":{"@id":"https:\/\/www.francescopepe.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.francescopepe.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.francescopepe.com\/#organization","name":"Francesco Pepe","url":"https:\/\/www.francescopepe.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.francescopepe.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2024\/04\/fp-logo.png","contentUrl":"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2024\/04\/fp-logo.png","width":1250,"height":1250,"caption":"Francesco Pepe"},"image":{"@id":"https:\/\/www.francescopepe.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.francescopepe.com\/#\/schema\/person\/151e90eaa70ca03f7637e395898a6743","name":"Francesco","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.francescopepe.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/660288424706c1e81cdfa984813e860d815034a29d8f74fe11d34010ddd652c8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/660288424706c1e81cdfa984813e860d815034a29d8f74fe11d34010ddd652c8?s=96&d=mm&r=g","caption":"Francesco"}}]}},"_links":{"self":[{"href":"https:\/\/www.francescopepe.com\/es\/wp-json\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.francescopepe.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.francescopepe.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.francescopepe.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.francescopepe.com\/es\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":6,"href":"https:\/\/www.francescopepe.com\/es\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":1451,"href":"https:\/\/www.francescopepe.com\/es\/wp-json\/wp\/v2\/posts\/1\/revisions\/1451"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.francescopepe.com\/es\/wp-json\/wp\/v2\/media\/194"}],"wp:attachment":[{"href":"https:\/\/www.francescopepe.com\/es\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.francescopepe.com\/es\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.francescopepe.com\/es\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}