Curso de html. ¿Que es Enfatisar y resaltar textos en Html?.
Ya hemos comentado algo al respecto de lo que es un elemento Block-level, con las etiquetas <h1> y <p>. A continuación hablaremos de los elementos inline-level, los cuales como ya sabemos, funcionan en la misma linea donde actuan, sin generar ningún salto de linea anterior o posterior. Pero antes hemos de aclarar algunos conceptos sobre lo que es un elemento, para no crear ninguna duda al confundirse el concepto de elemento, con el concepto de etiqueta. esto es como sigue:
Sabemos que un elemento esta formado por una etiqueta de entrada <etiqueta>, por el contenido que alberga y por su correspondiente etiqueta de cierre </etiqueta> y que a esta síntesis se la podía nombrar tan solo por su tipo de etiqueta, por ejemplo al elemento formado por las etiquetas <p>contenido</p>, se le podía nombrar como elemento p. Hasta aquí todos estaremos deacuerdo. Sin embargo no dijimos que el contenido de ese elemento, podia consistir en otros elementos, que a su vez estos elementos también albergasen más elementos.
Un claro ejemplo de esto sería el elemento html. Este elemento es el que más elementos abarca de cualquier página web como es lógico. Seguido del elemento body.
En el elemento body. se dan elementos que a su vez contienen otros elementos, por ejemplo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head> <title><title> </head> <body> <h1>Ejemplo de elementos</h1> <p>Este es un ejemplo para explicar la diferencia que existe entre el concepto de <em>etiqueta</em> y el concepto de lo que consideramos un<i>elemento</i> en html</p> <p>Este es otro ejemplo para clarificar lo que significa dar sentido <strong>semántico</strong> al etiquetado y dar sentido sólamente de <b>presencia</b> al etiquetado</p> </body> </html> |
A simple vista todo esto se presenta un tanto lioso, pero no os preocupeis enseguida lo vais a entender.
Solo nos interesa para clarificar el ejemplo, el contenido de nuestro elemento body el resto de etiquetas por encima de la etiqueta <body> y por debajo de la etiqueta </body>, solo se añaden al ejemplo, para dar cierta validez a la página, por si queremos probarlo por nosotros mismos en un navegador, utilizando un editor de texto sin formato, como puede ser el blog de notas de windows.
En primer lugar encontramos en nuestro elemento body un elemento h1, formado por las etiquetas <h1></h1> y el contenido que hay entre ambas. Ya sabemos que las etiquetas del tipo <h1> son para encabezamientos. El siguiente elemento que nos encontramos es un elemento p. Vamos a explicarlas una vez veamos el resultado en nuestro navegador del ejemplo anterior.
Por último nos encontramos con otro elemento p , que a su vez contiene otros dos tipos de etiquetas.
Vamos a ver el resultado de esta página en el navegador:
Ya tenemos nuestro ejemplo en vista de navegador y ahora vamos a explicar que es lo que ha sucedido. Como podeis ver el elemento h1, crea un título. Esto ya lo vimos antes. También vimos que el elemento p, crea párrafos, los cuales podemos apreciar fácilmente. Lo que realmente nos interesa saber, es cómo han actuado el resto de etiquetas inline-level.
Si os fijais en el contenido del elemento em, «etiqueta» , vemos que este se presenta en cursiva en el navegador «etiqueta«. lo mismo ocurre con el elemento i, «elemento» que también se nos presenta en cursiva «elemento«. Os preguntareis, ¿Donde esta la diferencia?. La diferencia está en que un elemento es semántico y el otro es para resaltar o diferenciar. Un contenido semántico se utiliza de cara a los lectores de pantalla, para las personas con discapacidad visual. Cuando un lector de pantalla topa con un etiquetado semántico, este lo lee con un énfasis diferente, a veces adaptan su velocidad ralentizandola un poco.
Lo mismo ocurre con los dos elementos del último párrafo. Aunque ambos se presentan en negrita, uno es semántico y el otro presencial.
Como recordatorio, quedaros con esto:
Los elementos formados por las etiquetas <em>Texto a enfatizar</em> y <strong>Texto a enfatizar</strong>, son semánticos y los utilizaremos cuando necesitemos dar mucho énfasis a una o varias palabras o frases. Son inline-level, por lo tanto se introducen en la frase, sin causar salto de linea. por defecto el navegador las presenta en cursiva y negrita respectivamente. Al ser elementos inline-level no pueden tener otros elementos anidados en su contenido.
Los elementos formados por las etiquetas <i>Texto a resaltar</i> y <b>Texto a resaltar</b>, se utilizan para resaltar o presentar el contenido que etiquetan diferente al resto del texto presente en la página. Por defecto el navegador las presenta en cursiva y negrita respectivamente. También son inline-level, por lo tanto se introducen en la frase, sin causar salto de linea.
Ha sido una sección bastante intensa, pero debeis saber que tiene mucha importancia el dar sentido semántico a ciertas palabras que lo requieren, aunque tampoco debemos abusar de su uso. Los motores de búsqueda también hacen incapié en este tipo de detalles, así que tener estos elementos siempre muy presente en vuestras presentaciones web.