{"id":15935,"date":"2024-02-06T13:00:00","date_gmt":"2024-02-06T12:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=15935"},"modified":"2025-03-26T10:41:24","modified_gmt":"2025-03-26T09:41:24","slug":"enriquece-tus-textos-con-etiquetas-basicas-html","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/enriquece-tus-textos-con-etiquetas-basicas-html\/","title":{"rendered":"Enriquece tus textos con etiquetas b\u00e1sicas HTML"},"content":{"rendered":"\n

En algunas ocasiones tenemos que insertar texto en casillas de Excel, Google Sheets, campos personalizados de WordPress… para importar datos o mostrarlos en nuestras plataformas web. Nada complicado, tecleamos el contenido y guardamos. Pero vamos a ir un poco m\u00e1s all\u00e1: En ocasiones estos campos permiten usar formato HTML<\/strong>, por lo que vamos a dejar aqu\u00ed unas referencias b\u00e1sicas para dar formato a nuestro texto<\/strong>.<\/p>\n\n\n\n

\u00bfQu\u00e9 es dar formato al texto?<\/h2>\n\n\n\n

Si te preguntas qu\u00e9 es dar formato al texto, es darle estilo y forma al contenido: Negritas, it\u00e1licas, fuentes tipogr\u00e1ficas, tama\u00f1os, interlineados, subrayados, colores<\/a>… Cada programa trabaja con unas reglas diferentes y, para lo que perseguimos en este art\u00edculo, vamos a centrarnos en el formato HTML, que nos servir\u00e1, por ejemplo, para importar documentos Excel<\/strong> en nuestro WordPress o PrestaShop. \u00bfCon qu\u00e9 trabajas t\u00fa? Cu\u00e9ntanoslo en los comentarios.<\/p>\n\n\n\n

Formato HTML frente a texto plano<\/h2>\n\n\n\n

El texto plano<\/strong> es un contenido sin ning\u00fan tipo de estilo, el texto en estado puro. Un ejemplo de esto es el cl\u00e1sico block de notas. Es cierto, podemos cambiar la tipograf\u00eda y el tama\u00f1o en este programa, pero no es un valor del texto, sino de previsualizaci\u00f3n general del programa. \u00bfQu\u00e9 ser\u00eda un texto con formato<\/strong>? Pues, por ejemplo, el formato rtf o word, donde cada letra puede tener su valor individual de aspecto: Negritas, tipograf\u00edas, tama\u00f1os, interletraje…<\/p>\n\n\n\n

Estos valores, llevados a la web, se definen con etiquetas HTML y estilos CSS. Para facilitar el formateo de textos en las webs, es casi universal el editor wysiwyg<\/strong>.<\/p>\n\n\n

\n
\"Ejemplo<\/figure>\n<\/div>\n\n\n

Si manej\u00e1is el backoffice<\/em> de un WordPress, PresaShop, Joomla… os resultar\u00e1 muy familiar. Pero no siempre es posible usar estos editores.<\/p>\n\n\n\n

Veamos un ejemplo pr\u00e1ctico que nos pasa mucho en la agencia. Tenemos que rellenar un Excel con las especificaciones de nuestros productos<\/strong> para subir a PrestaShop o WooCommerce<\/a>. Tomemos como muestra la columna de la descripci\u00f3n.<\/p>\n\n\n

\n
\"Ejemplo<\/figure>\n<\/div>\n\n\n

Parece correcto, sin embargo, cuando importemos este documento y vemos la ficha del producto, se ver\u00e1 as\u00ed:<\/p>\n\n\n

\n
\"Ejemplo<\/figure>\n<\/div>\n\n\n

\u00bfPor qu\u00e9 sale todo seguido? \u00bfD\u00f3nde est\u00e1n nuestros saltos de p\u00e1rrafo? Todo el formato que le hayamos dado en con el programa se ha perdido<\/strong>. Aqu\u00ed es donde deben entrar en acci\u00f3n las etiquetas HTML<\/a>. Veamos las m\u00e1s sencillas para enriquecer nuestro texto.<\/p>\n\n\n\n

Etiquetas sencillas para enriquecer el texto<\/h2>\n\n\n\n

Lo primero, aclaremos a qu\u00e9 llamamos etiqueta. Se trata de un c\u00f3digo que delimita un texto y lo etiqueta con ciertas cualidades<\/strong>. En los ejemplos ver\u00e9is que, en realidad, es muy sencillo.<\/p>\n\n\n\n

P\u00e1rrafo<\/h3>\n\n\n\n

La etiqueta m\u00e1s b\u00e1sica de todas las que veremos, y la m\u00e1s necesaria, es el p\u00e1rrafo<\/strong>. Para definir cada p\u00e1rrafo, debemos delimitarlo entre las etiquetas <p><\/code> y <\/p><\/code>. La primera etiqueta indica que se abre el p\u00e1rrafo; la segunda, d\u00f3nde se cierra.<\/p>\n\n\n\n

En nuestro ejemplo quedar\u00eda as\u00ed:<\/p>\n\n\n\n

<p>Texto largo sobre el producto.<\/p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p>\n<p>Integer non ipsum fringilla, rhoncus nisi quis, porttitor justo. Nullam finibus ultricies ex vel hendrerit. Ut dolor nulla, suscipit nec facilisis vitae, bibendum non nisi. Aliquam pulvinar scelerisque nibh, nec sodales tortor scelerisque nec. Quisque congue eleifend neque, quis feugiat odio pharetra vitae. Ut feugiat tincidunt enim tincidunt vestibulum. Vivamus a purus dolor.<\/p><p>Vestibulum imperdiet neque tortor, sed tincidunt arcu porttitor vitae. Proin a tortor at nisi tincidunt fermentum in quis dolor.<\/p><\/code><\/pre>\n\n\n\n
Observa c\u00f3mo es indiferente que se escriba todo seguido o mantengamos los saltos visuales. Lo importante, ahora, son las etiquetas HTML<\/strong>. El resultado ser\u00eda este:<\/p>\n\n\n
\n
\"Ejemplo<\/figure>\n<\/div>\n\n\n
Cursiva<\/h3>\n\n\n\n
Aqu\u00ed tenemos dos opciones <em><\/code> e <i><\/code>. Por razones de uso, que no tiene sentido tratar aqu\u00ed, vamos a usar <em>. La l\u00f3gica es la misma que con el p\u00e1rrafo: Para abrir el contenido en cursiva <\/strong>marcamos <em><\/code>, cerrando el final con <\/em><\/code>. Sencillo, \u00bfverdad?<\/p>\n\n\n\n
<p><em>Lorem ipsum<\/em> dolor sit amet, consectetur adipiscing elit.<\/p><\/code><\/pre>\n\n\n
\n
\"Ejemplo<\/figure>\n<\/div>\n\n\n
Negrita<\/h3>\n\n\n\n
Vamos con un factor clave para el usuario y el SEO<\/a><\/strong>: las negritas. Al igual que con la cursiva, hay dos etiquetas, <strong><\/code> y <b><\/code>. Y, de la misma forma, nos vamos a centrar en la primera, igual que hemos hecho hasta ahora, abrimos con la etiqueta normal y cerramos con la etiqueta con la barra diagonal. Siguiendo con nuestro ejemplo, vamos a poner \u00abproducto\u00bb en negrita<\/strong>.<\/p>\n\n\n\n
<p>Texto largo sobre el <strong>producto<\/strong>.<\/p><\/code><\/pre>\n\n\n
\n
\"Ejemplo<\/figure>\n<\/div>\n\n\n
Salto de l\u00ednea<\/h3>\n\n\n\n
Esta etiqueta es bastante odiada por los puristas, pero tiene sus utilidades y, por eso, la vamos a comentar aqu\u00ed. El salto de l\u00ednea<\/strong> parte el p\u00e1rrafo en el que estamos para pasar a una nueva l\u00ednea, pero dentro del mismo p\u00e1rrafo<\/strong>. \u00bfEn qu\u00e9 se traduce esto? En que los p\u00e1rrafos pueden tener una separaci\u00f3n entre ellos, sin embargo, el salto de l\u00ednea solo tendr\u00e1 la separaci\u00f3n propia del interlineado. En el ejemplo que pongo m\u00e1s abajo lo podr\u00e1s ver diferenciado.<\/p>\n\n\n\n
\u00bfC\u00f3mo usamos esta etiqueta? Su sintaxis es <br><\/code>, y es un poco especial, porque no tiene etiqueta de cierre.<\/p>\n\n\n\n
<p>Integer non ipsum fringilla, rhoncus nisi quis, porttitor justo. Nullam finibus ultricies ex vel hendrerit. Ut dolor nulla, suscipit nec facilisis vitae, bibendum non nisi. Aliquam pulvinar scelerisque nibh, nec sodales tortor scelerisque nec. Quisque congue eleifend neque, quis feugiat odio pharetra vitae.<br>Ut feugiat tincidunt enim tincidunt vestibulum. Vivamus a purus dolor.<\/p><\/code><\/pre>\n\n\n
\n
\"Ejemplo<\/figure>\n<\/div>\n\n\n
Etiquetas avanzadas para enriquecer el texto<\/h2>\n\n\n\n
Si has llegado hasta aqu\u00ed y quieres saber m\u00e1s, hacemos un salto de dificultad. Las que hemos visto hasta ahora son etiquetas individuales sin atributos; las que vienen ahora son m\u00e1s complejas, pero seguro que las entender\u00e1s r\u00e1pido con los ejemplos.<\/p>\n\n\n\n
Enlaces<\/h3>\n\n\n\n
Enlaces, links, hiperv\u00ednculos<\/strong>… Ll\u00e1malos c\u00f3mo quieras, pero ll\u00e1malos. Son imprescindibles para el usuario y para Google<\/strong>, un recurso clave en internet; nos referimos, por si hay alg\u00fan despistado, a esos textos en los que haces clic y te llevan a otra p\u00e1gina web.<\/p>\n\n\n\n
En nuestro ejemplo vamos a hacer clicable el texto \u00abdolor.\u00bb, para que lleve a nuestra p\u00e1gina de inicio.<\/p>\n\n\n\n
<p>Vestibulum imperdiet neque tortor, sed tincidunt arcu porttitor vitae. Proin a tortor at nisi tincidunt fermentum in quis <a href=\"https:\/\/carontestudio.com\/\" target=\"_blank\">dolor.<\/a><\/p><\/code><\/pre>\n\n\n
\n
\"Ejemplo<\/figure>\n<\/div>\n\n\n
Aqu\u00ed necesitamos alguna explicaci\u00f3n adicional. Ver\u00e1s que, en el fondo, hemos hecho lo mismo que hemos hecho con otras etiquetas: delimitamos el texto con una etiqueta de apertura y otra de cierre<\/strong> (<a><\/code> y <\/a><\/code>, respectivamente). La novedad es que dentro de la etiqueta de apertura hay informaci\u00f3n adicional. En nuestro ejemplo hay dos atributos<\/a>:<\/p>\n\n\n\n