Una consideración importante directamente relacionada con el texto de las páginas HTML es la codificación de los caracteres y la inserción de caracteres especiales. Algunos de los caracteres que se utilizan habitualmente en los textos no se pueden incluir directamente en las páginas web:
- Los caracteres que utiliza HTML para definir sus etiquetas (
<,>y") no se pueden utilizar libremente. - Los caracteres propios de los idiomas que no son el inglés (
ñ,á,ç,¿,¡, etc.) pueden ser problemáticos dependiendo de la codificación de caracteres utilizada.
La solución a la primera limitación consiste en sustituir los caracteres reservados de HTML por unas expresiones llamadas entidades HTML y que representan a cada carácter:
| Entidad | Carácter | Descripción | Traducción |
|---|---|---|---|
< | < | less than | signo de menor que |
> | > | more than | signo de mayor que |
& | & | ampersand | ampersand |
" | " | quotation mark | comillas |
| | non-breaking space | espacio en blanco |
' | ' | apostrophe | apóstrofo |
De esta forma, si se considera el siguiente texto:
Los caracteres <, >, " y & pueden dar problemas con los textos en HTMLPara mostrar correctamente el texto anterior en una página HTML, se debe sustituir cada carácter especial por su entidad HTML:
<p>Los caracteres <, >, " y & pueden dar problemas con los textos en HTML</p>Etiqueta blockquote
blockquote –cita en bloque . Crea citas en bloque, marca las citas a otros autores o documentos.
Sus etiquetas son: <blockquote> y </blockquote> (ambas obligatorias).
Está definido como: Elemento en bloque.
Crea una caja: En bloque.
Puede y debe contener: Uno o más elementos en bloque o script
Con un doctype transicional Puede contener: texto, y/o cero o más elementos en bloque o en línea
Atributos
| atributo | descripción | valor |
|---|---|---|
| Genéricos | ||
| title | Texto informativo o título del elemento. Suele mostrarse a modo de “tool tip”. | Texto legible por personas. Sensible a M/m.. Por defecto: Lo fija el navegador. |
| id | Le da un nombre al elemento que lo diferencia de todos los demás del documento. | Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador. |
| class | Asigna nombres de clases al elemento. Por defecto, clases CSS. | Lista de clases separadas por espacio en blanco. Sensible a M/m. Por defecto: Lo fija el navegador. |
| style | Permite especificar información de estilo. Por defecto, estilos CSS. | Declaraciones de estilo. Por defecto: Lo fija el navegador. |
| lang | Información sobre el idioma del contenido del elemento y del valor de sus atributos. | Un código de idioma. Por defecto: “desconocido”. Lo fija el navegador. |
| dir | Indica la dirección de texto y tablas. | Uno de los siguientes: ‘ltr’ o ‘rtl’. Por defecto: En castellano ‘ltr’. Lo fija el navegador. |
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. | ||
| Específicos | ||
cite | Proporciona un enlace al documento original o fuente | Una dirección URI. Por defecto: lo fija el navegador |
| De transición | ||
| No tiene | ||
| atributo | descripción | valor |
Veamos un ejemplo de cómo se utiliza la etiqueta blockquote:
<body>
<h1>Etiqueta <blockquote></h1>
<p>
El Syntax o sintaxis de la etiqueta <blockquote> se muestra a continuación: <br/><br/>
<blockquote cite="<em>...dirección original de la cita...</em>">Texto que se cita</blockquote>
</p>
</body>El mismo se verá de la siguiente manera en el buscador. Podrías intentar hacerlo.
Por otra parte, los caracteres propios de los idiomas diferentes al inglés también pueden ser problemáticos. El motivo es que desde que se crea una página web hasta que llega al navegador del usuario, intervienen numerosos procesos:
- El diseñador crea la página web con su editor HTML (por ejemplo Visual Studio Code).
- Si se trata de una aplicación dinámica, el programador recorta la página HTML del diseñador y la mezcla con el resto del código de la aplicación (por ejemplo PHP).
- El servidor web almacena las páginas HTML estáticas o el código de la aplicación web y sirve las páginas solicitadas por los usuarios.
- El usuario solicita y visualiza las páginas web a través de su navegador.
Si en todos los procesos anteriores se utiliza la misma codificación de caracteres, los caracteres propios de los idiomas se pueden escribir directamente:
<p>Este párrafo contiene caracteres acentuados y se almacena en formato UTF-8</p>La palabra párrafo del ejemplo anterior incluye la letra á. Si el editor HTML del diseñador utiliza la codificación UTF-8, el entorno de desarrollo del programador también utiliza UTF-8, el servidor web sirve las páginas con esa codificación y el navegador del usuario es capaz de visualizar las páginas con formato UTF-8, el texto anterior se verá correctamente en el navegador del usuario.
Sin embargo, muchas veces no es posible que todos los procesos involucrados utilicen la misma codificación de caracteres. Por limitaciones técnicas o por decisiones de los diseñadores y programadores, los textos pueden pasar de codificación UTF-8 a codificación ISO-8859 en cualquier momento. Si se produce este cambio sin realizar una conversión correcta, el navegador del usuario mostrará caracteres extraños en todos los acentos y en todas las letras como la ñ.
La solución más sencilla para asegurar que todos estos caracteres potencialmente problemáticos se van a visualizar correctamente en el navegador del usuario consiste en sustituir cada carácter problemático por su entidad HTML:
| Entidad | Carácter | Descripción oficial |
|---|---|---|
ñ | ñ | latin letter n with tilde |
Ñ | Ñ | latin capital n letter with tilde |
á | á | a acute |
é | é | e acute |
í | í | i acute |
ó | ó | o acute |
ú | ú | u acute |
Á | Á | A acute |
É | É | E acute |
Í | Í | I acute |
Ó | Ó | O acute |
Ú | Ú | U acute |
€ | € | euro |
Así, el párrafo de texto del ejemplo anterior, se podría escribir de la siguiente manera:
<p>Este párrafo contiene caracteres acentuados y se almacena en formato UTF-8</p>Si se utilizan las entidades HTML en vez de los caracteres problemáticos, es indiferente pasar de una codificación de caracteres a otra diferente.
Sí te interesa conocer ahora la lista completa de todos los caracteres, ve a este artículo de Wikipedia ↗.
