{"id":1695,"date":"2019-09-14T14:59:52","date_gmt":"2019-09-14T19:59:52","guid":{"rendered":"https:\/\/e-lexia.com\/blog\/?p=1695"},"modified":"2024-11-01T11:33:01","modified_gmt":"2024-11-01T16:33:01","slug":"usos-semanticos-etiquetas-texto-html","status":"publish","type":"post","link":"https:\/\/e-lexia.com\/blog\/usos-semanticos-etiquetas-texto-html\/","title":{"rendered":"Usos sem\u00e1nticos de las etiquetas de texto HTML"},"content":{"rendered":"<p>Dise\u00f1ar una p\u00e1gina web no es una tarea netamente visual. S\u00ed, est\u00e1 el trabajo del <em>frontend<\/em>, que consiste en definir de la interfaz del recurso: paleta de colores, tipograf\u00eda, iconograf\u00eda, entre otros. Pero la creaci\u00f3n de una p\u00e1gina web tambi\u00e9n exige (y como mayor hincapi\u00e9) el dise\u00f1o sem\u00e1ntico de sus contenidos.<\/p>\n<p>Antes de seguir es preciso tener presente que -como ya lo he revisado en este blog- el HTML sirve como base en la estructuraci\u00f3n de un hiperdocumento web. Esto, en palabras sencillas, es que la mayor\u00eda de los recursos que visualiza un navegador est\u00e1n creados a partir de las definiciones HTML. Para tener mayor claridad sobre esto te invito a revisar la publicaci\u00f3n <a href=\"https:\/\/e-lexia.com\/blog\/que-es-html\/\">\u00ab\u00bfQu\u00e9 es el HTML?\u00bb<\/a>.<\/p>\n<p><!-- Google Adsense --><\/p>\n<div class=\"adsense\">\n  <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7923590131153633\" crossorigin=\"anonymous\"><\/script><br \/>\n  <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-7923590131153633\" data-ad-slot=\"5345374831\"><\/ins><br \/>\n  <script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>\n<\/div>\n<h2>\u00bfQu\u00e9 es el dise\u00f1o sem\u00e1ntico?<\/h2>\n<p>Cada p\u00e1gina web est\u00e1 compuesta por diferentes elementos: textos, im\u00e1genes fijas, formularios, sistemas de navegaci\u00f3n, elementos audiovisuales, entre otros. Cada uno de estos elementos tiene un valor, un significado, <strong>una carga sem\u00e1ntica<\/strong>.<\/p>\n<p>Para comprender este concepto, miremos este art\u00edculo. \u00bfCu\u00e1l es el t\u00edtulo? F\u00e1cil: <em>\u00abUsos sem\u00e1nticos de las etiquetas HTML\u00bb<\/em>. Ahora, \u00bfcu\u00e1l es un subt\u00edtulo?. F\u00e1cil tambi\u00e9n: <em>\u00ab\u00bfQu\u00e9 es el dise\u00f1o sem\u00e1ntico?\u00bb<\/em>. Si continuamos leyendo encontraremos otros subt\u00edtulos, unos de igual y otros de menor jerarqu\u00eda.<\/p>\n<p>\u00bfQu\u00e9 m\u00e1s podemos encontrar en esta p\u00e1gina? Est\u00e1 la imagen de inicio. Tambi\u00e9n un sistema de navegaci\u00f3n global (o funcional), que son los enlaces <em>\u00abcomunicaciones, e-Learning, empresario, producci\u00f3n web y surfeando\u00bb<\/em>. A la derecha encontramos el formulario de b\u00fasqueda, que tiene un campo de texto y un bot\u00f3n. \u00bfLos identificas?<\/p>\n<p>El dise\u00f1o (o marcado) sem\u00e1ntico consiste en <strong>identificar cada uno de esos elementos<\/strong> y -siguiendo las instrucciones del HTML- asignarles una etiqueta espec\u00edfica. As\u00ed, los t\u00edtulos y subt\u00edtulos (que llamaremos <em>encabezados<\/em>) se definen por la etiqueta <code>&lt;h1&gt;<\/code>; para la imagen, <code>&lt;img&gt;<\/code>; el formulario, <code>&lt;form&gt;<\/code>, y los <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/enlace-web\/\" rel=\"noopener\" target=\"_blank\">enlaces<\/a>, <code>&lt;a&gt;<\/code>.<\/p>\n<p>En esta entrada vamos a revisar algunas etiquetas HTML y c\u00f3mo utilizar sem\u00e1nticamente.<\/p>\n<h2>Los encabezados<\/h2>\n<p>Este recurso permite fragmentar o jerarquizar el recurso hasta en seis niveles.<\/p>\n<p>El primer nivel es t\u00edtulo del recurso, el gran t\u00edtulo. \u00a1Ojo! Este <strong>solo puede presentarse una vez por p\u00e1gina<\/strong>. Un error com\u00fan entre los creadores de contenidos es pretender que una misma p\u00e1gina aborde dos temas, es decir, dos \u00abgrandes t\u00edtulos\u00bb. Si tienes dos temas principales, crea una p\u00e1gina web para cada uno de ellos.<\/p>\n<p>Luego contin\u00faan los encabezados de segundo nivel, que son los subt\u00edtulos del primer nivel. A continuaci\u00f3n, est\u00e1n los encabezados de tercer nivel, que son los subt\u00edtulos del segundo nivel. Luego los encabezados de cuarto nivel que sirven como subt\u00edtulos del tercer nivel. Y as\u00ed sucesivamente, hasta llegar a los encabezados de sexto nivel.<\/p>\n<p>Comprender esto tomemos como ejemplo la tabla de contenidos del libro \u00ab<em>Looking at Movies<\/em>\u00bb de Richard Barsam y Dave Monahan.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/09\/jerarquias-encabezados-html.gif\" alt=\"Jerarqu\u00edas de contenido. HTML headings. Dise\u00f1o por Juan Carlos Morales S.\" style=\"width:100%; height:auto; margin: 20px auto;\" \/><\/p>\n<p>El marcado sem\u00e1ntico para esta estructura ser\u00eda:<\/p>\n<pre>\r\n&lt;h1&gt;Looking at movies&lt;\/h1&gt;\r\n&lt;h2&gt;Chapter 1: Looking at movies&lt;\/h2&gt;\r\n&lt;h3&gt;Learning objectives&lt;\/h3&gt;\r\n&lt;h4&gt;Look at movies&lt;\/h4&gt;\r\n&lt;h3&gt;What is a movie&lt;\/h3&gt;\r\n&lt;h4&gt;The movie director&lt;\/h4&gt;\r\n&lt;h3&gt;Ways of looking at movies&lt;\/h3&gt;\r\n&lt;h4&gt;Invisibility and cinematics language&lt;\/h4&gt;\r\n&lt;h4&gt;Cultural invisibility&lt;\/h4&gt;\r\n&lt;h4&gt;Implicit and explicit meaning&lt;\/h4&gt;\r\n&lt;h4&gt;Viewer expectations&lt;\/h4&gt;\r\n<\/pre>\n<h2>Los p\u00e1rrafos<\/h2>\n<p>Los p\u00e1rrafos son la base del contenido en texto de un hiperdocumento. No hay mucho m\u00e1s por decir.<\/p>\n<p>Tengamos presente que cada p\u00e1rrafo debe desarrollar una y solamente una idea. En texto impreso es com\u00fan encontrar varias ideas en la misma unidad de texto, pero en pantalla la lectura es m\u00e1s lenta y se recomienda limitar su uso.<\/p>\n<p>Otra recomendaci\u00f3n es procurar que las l\u00edneas de texto en pantalla deben contener entre 45 y 75 caracteres. Una medida m\u00e1s precisa: 66. Esta extensi\u00f3n puede controlarse a trav\u00e9s de <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/css\/\" rel=\"noopener\" target=\"_blank\">CSS<\/a>, con el uso de m\u00e1rgenes (<code>margin<\/code>) y tama\u00f1o de la fuente (<code>font-size<\/code>).<\/p>\n<p>Por \u00faltimo, hay que tener presente que con HTML no puede controlarse la salida (visualizaci\u00f3n) del texto. Esto es, por m\u00e1s espacios o l\u00edneas adicionales que agregue a su c\u00f3digo el navegador interpretar\u00e1 el texto como una sola l\u00ednea.<\/p>\n<p>As\u00ed luce el marcado sem\u00e1ntico de un p\u00e1rrafo:<\/p>\n<pre>\r\n&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;\/p&gt;\r\n<\/pre>\n<p><!-- ASESOR COMUNICATIVO --><\/p>\n<div class=\"destacado-asesor\">\n<div class=\"destacado-asesor__imagen\">\n    <a href=\"https:\/\/e-lexia.com\/contacto.html\"><br \/>\n      <img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2023\/01\/asesor-comunicativo-juancadotcom.png\" alt=\"Juan Carlos Morales S., asesor en comunicaci\u00f3n digital\"><br \/>\n    <\/a>\n   <\/div>\n<div class=\"destacado-asesor__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/contacto.html\">\u00bfNecesitas asesor\u00eda en comunicaci\u00f3n digital?<\/a><\/h2>\n<p>Dise\u00f1a y optimiza tus proyectos en comunicaci\u00f3n digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.<br \/>\n      <a class=\"cta-asesor\" href=\"https:\/\/e-lexia.com\/contacto.html\">Conversemos<\/a>\n     <\/p>\n<\/p><\/div>\n<\/div>\n<h2>Formato de texto<\/h2>\n<p>Los textos (sean en p\u00e1rrafo o encabezados) tambi\u00e9n tienen caracter\u00edsticas de formato, que agregan valor sem\u00e1ntico. Las posibilidades son: negrita, cursiva, resaltado, peque\u00f1o, borrado, insertado, sub\u00edndice y super\u00edndice.<\/p>\n<p>Las negritas se utilizan para destacar una palabra u oraci\u00f3n. <strong>No hay que abusar de ella<\/strong>, bajo la premisa \u00abtodo lo que escribo en mi p\u00e1gina web es de vital importancia\u00bb. \u00a1Seguro que lo es! Pero \u00bfqu\u00e9 es lo m\u00e1s importante?<\/p>\n<p>Las cursivas sirven para hacer \u00e9nfasis en una palabra o frase, de ah\u00ed que su etiqueta HTML sea <code>&lt;em&gt;<\/code>. Tambi\u00e9n es posible encontrar este recurso bajo la etiqueta <code>&lt;i&gt;<\/code> que supone letra <em>it\u00e1lica<\/em>, pero agregar valor sem\u00e1ntico. Particularmente, utilizo este recurso para extranjerismos y citas textuales pero de fuente superior a 20 pixeles.<\/p>\n<p>El resaltado permite destacar una palabra o una frase con un color que contraste con el fondo. No es una etiqueta utilizada, pero <mark>puede ser de utilidad para contexto educativos<\/mark>.<\/p>\n<p>El texto peque\u00f1o indica menor relevancia al contenido base. Un ejemplo cercano es \u00abla letra peque\u00f1a\u00bb de los contratos. Su etiqueta HTML es <code>&lt;small&gt;<\/code><\/p>\n<p>Las caracter\u00edsticas de texto borrado e insertado no son comunes en los documentos web. Su uso se limita al control de cambios de un contenido. As\u00ed, <del>este texto fue borrado<\/del> y <ins>este fue insertado<\/ins> con la \u00faltima actualizaci\u00f3n, por ejemplo.<\/p>\n<p>Y, por \u00faltimo, est\u00e1 el sub\u00edndice y super\u00edndice que sirven para marcar elementos matem\u00e1ticos, financieros, qu\u00edmicos, entre otros. El sub\u00edndice luce as\u00ed: 2<sub>10<\/sub>. Y el super\u00edndice se presenta as\u00ed: 2<sup>da<\/sup>.<\/p>\n<p>El marcado sem\u00e1ntico, conservando el orden de la exposici\u00f3n, ser\u00eda as\u00ed:<\/p>\n<pre>\r\n\r\n&lt;p&gt;Negrita: &lt;strong&gt;no hay que abusar de ella&lt;\/strong&gt;&lt;\/p&gt;\r\n\r\n&lt;p&gt;Cursiva: \u00fatil para extranjerismo, como: &lt;em&gt;What do you want to learn!&lt;\/em&gt;&lt;\/p&gt;\r\n\r\n&lt;p&gt;Resaltado: &lt;mark&gt;esto es de utilidad para contextos educativos&lt;\/mark&gt;&lt;\/p&gt;\r\n\r\n&lt;p&gt;Peque\u00f1o: &lt;small&gt;estos son los t\u00e9rminos del contrato&lt;\/small&gt;&lt;\/p&gt;\r\n\r\n&lt;p&gt;Borrado: &lt;del&gt;eso dec\u00eda antes de la actualizaci\u00f3n&lt;\/del&gt;&lt;\/p&gt;\r\n\r\n&lt;p&gt;Insertado: &lt;ins&gt;esto dice ahora con la actualizaci\u00f3n&lt;\/ins&gt;&lt;\/p&gt;\r\n\r\n&lt;p&gt;Sub\u00edndice: 2&lt;sub&gt;10&lt;\/sub&gt;&lt;\/p&gt;\r\n\r\n&lt;p&gt;Super\u00edndice: 2&lt;sup&gt;da&lt;\/sup&gt;&lt;\/p&gt;\r\n\r\n<\/pre>\n<h2>Listas de elementos<\/h2>\n<p>Por \u00faltimo, al menos para esta entrada, est\u00e1n las listas de elementos. Estas son \u00fatiles para listar elementos, por lo que se utilizan -con gran acierto- para reemplazar las comas enumerativas que va en un p\u00e1rrafo.<\/p>\n<p>Estas se dividen en listas sin ordenar y listas ordenadas.<\/p>\n<p>Sem\u00e1nticamente, la lista sin ordenar permite presentar elementos sin agregar importancia al orden en que aparecen. As\u00ed, el \u00edtem uno tendr\u00e1 el mismo peso sem\u00e1ntico que el elemento cuatro, por ejemplo. Estas listas utilizan vi\u00f1etas para identificar cada elemento.<\/p>\n<p>En las listas ordenadas <strong>s\u00ed tiene importancia el orden de los elementos<\/strong>. Este recurso se vale de n\u00fameros y letras para indicar la jerarqu\u00eda de cada \u00edtem.<\/p>\n<p>Por \u00faltimo, las listas sin ordenar son utilizadas -adem\u00e1s- para agrupar elementos de navegaci\u00f3n, pero este ser\u00e1 tema de otra entrada.<\/p>\n<p>El marcado sem\u00e1ntico de una lista sin ordenar luce as\u00ed:<\/p>\n<pre>\r\n&lt;p&gt;Los estudiantes del curso son:&lt;\/p&gt;\r\n\r\n&lt;ul&gt;\r\n&lt;li&gt;Carlos&lt;\/li&gt;\r\n&lt;li&gt;Vanessa&lt;\/li&gt;\r\n&lt;li&gt;Wilson&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n<\/pre>\n<p>Y el marcado HTML de una lista ordenada:<\/p>\n<pre>\r\n&lt;p&gt;El proceso exige los siguientes pasos:&lt;\/p&gt;\r\n\r\n&lt;ol&gt;\r\n&lt;li&gt;Limpiar el recipiente&lt;\/li&gt;\r\n&lt;li&gt;Agregar la soluci\u00f3n&lt;\/li&gt;\r\n&lt;li&gt;Agitar por 120 segundos&lt;\/li&gt;\r\n&lt;\/ol&gt;\r\n<\/pre>\n<p>Como se puede apreciar en los ejemplos anteriores, las listas sin ordenar utilizan la etiqueta <code>&lt;ul&gt;<\/code>, y las ordenadas, <code>&lt;ol&gt;<\/code>. Y los elementos, independiente del tipo de lista, se marcar con la etiqueta <code>&lt;li&gt;<\/code>.<\/p>\n<h2>Conclusi\u00f3n<\/h2>\n<p>En este art\u00edculo hemos revisando algunas etiquetas HTML y cu\u00e1les son sus usos sem\u00e1nticos. A\u00fan quedan muchos m\u00e1s que iremos abordando en pr\u00f3ximas entregas.<\/p>\n<p>Cabe recordar que crear p\u00e1ginas web no es una tarea exclusiva de los dise\u00f1adores gr\u00e1ficos. El comunicador -como experto sem\u00e1ntico- tiene un rol importante en este proceso, pues es el que tiene las competencias para identificar y marcar cada elemento seg\u00fan su funci\u00f3n.<\/p>\n<p>Por cierto, muchas de las pol\u00edticas de <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/indexacion-web\/\" rel=\"noopener\" target=\"_blank\">indexaci\u00f3n de contenidos<\/a> en Google est\u00e1n vinculadas con el correcto marcado sem\u00e1ntico. De ah\u00ed la importancia de dominar el c\u00f3digo HTML.<\/p>\n<div class=\"destacado-libro\">\n<div class=\"destacado-libro__imagen\">\n  <a href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\"><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2021\/04\/libro-prodccion-contenidos-web.jpg\" alt=\"Producci\u00f3n de contenidos web. Libro gratuito. Autor: Juan Carlos Morales S.\"><\/a>\n <\/div>\n<div class=\"destacado-libro__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\">Producci\u00f3n de contenidos web<\/a><\/h2>\n<p>  Descarga este libro electr\u00f3nico de acceso libre, donde se presentan recomendaciones de producci\u00f3n multimedia.<br \/>\n  <a class=\"cta-libro\" href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\">Obtener una copia<\/a>\n <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Dise\u00f1ar una p\u00e1gina web no es una tarea netamente visual. S\u00ed, est\u00e1 el trabajo del frontend, que consiste en definir de la interfaz del recurso: paleta de colores, tipograf\u00eda, iconograf\u00eda, entre otros. Pero la creaci\u00f3n de una p\u00e1gina web tambi\u00e9n exige (y como mayor hincapi\u00e9) el dise\u00f1o sem\u00e1ntico de sus&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1645,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[65,44],"class_list":["post-1695","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-produccion-web","tag-codigo","tag-seo","has-post-thumbnail-archive"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1695","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/comments?post=1695"}],"version-history":[{"count":0,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1695\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media\/1645"}],"wp:attachment":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media?parent=1695"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/categories?post=1695"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/tags?post=1695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}