Hogar › Tarifas › Caracteres HTML no imprimibles. Espacio sin separación y guión suave en los ejemplos. Espacios y caracteres de espacio en blanco en HTML

Caracteres HTML no imprimibles. Espacio sin separación y guión suave en los ejemplos. Espacios y caracteres de espacio en blanco en HTML

Hola, queridos lectores del blog. Un poco antes ya pudimos hablar sobre eso y también aprendimos sobre el diseño que contiene. Hoy tenemos a su vez el concepto de espacio en blanco en HTML, así como el formato del código asociado a la hora de escribirlo (para la comodidad de su posterior lectura y percepción).

Bueno, en relación con el hecho de que tocaremos el tema. espacio sin rupturas y transferencia suave, tendremos que centrar nuestra atención en los llamados caracteres especiales o mnemotécnicos utilizados en el lenguaje HTML, que permitirán agregar codigo web conjunto de documentos personajes adicionales, como el ya mencionado anteriormente. Pero primero lo primero.

Espacios y caracteres de espacio en blanco en HTML

Antes de pasar al tema del formato del texto utilizando etiquetas especialmente diseñadas para esto (párrafo, títulos, etc.), quiero detenerme en cómo se interpretan los espacios, los saltos de línea (Enter) y la tabulación en el lenguaje HTML, y cómo se divide el texto. lleva a cabo el texto en la ventana del navegador cuando se cambia su tamaño.

cierto para este tipo formato visual(que no será visible en la página web) la mayoría de las veces no se utilizan espacios en sí, sino tabulaciones y saltos de línea. Existe una regla de este tipo: cuando comienzas a escribir una etiqueta HTML anidada, entonces sangría usando pestañas(tecla Tabulador en el teclado), y cuando cierre esta etiqueta, elimine la sangría (combinación de teclas Mayús+Tab en el teclado).

Esto debe hacerse para que las etiquetas de apertura y cierre estén en el mismo nivel vertical (en el mismo número de pestañas desde el borde derecho de la página en su editor HTML, por ejemplo, Notepad++, sobre el cual escribí). Además, te aconsejo que inmediatamente después de escribir el elemento de apertura hagas varios saltos de línea e inmediatamente escribas el de cierre en el mismo nivel (número de pestañas), para que no te olvides de hacerlo más tarde.

Aquellos. los elementos de apertura y cierre deben estar al mismo nivel verticalmente, y las etiquetas internas deben desplazarse un carácter de tabulación y colocar los de cierre y apertura nuevamente en el mismo nivel.

Para web sencilla documentos esto puede parecer excesivo, pero al crear otros más o menos complejos, el código será mucho más claro y legible debido a la abundancia de espacios, y también será mucho más fácil detectar errores debido a la disposición simétrica de las etiquetas.

Caracteres especiales o mnemónicos en código HTML

Entonces, ahora hablemos del llamado personajes especiales, cuya facilidad de uso anuncié al principio de este artículo. Los caracteres especiales a veces también se denominan mnemónicos o sustituciones. Están destinados a solucionar un problema que surgió en el idioma hace bastante tiempo. marcado de hipertexto problema relacionado con las codificaciones utilizadas.

Cuando escribes texto desde el teclado, los caracteres de tu idioma se codifican de antemano algoritmo establecido, y luego se muestran en el sitio usando las fuentes que usa (dónde encontrarlas y cómo instalarlas para el sitio) debido a la decodificación.

Hay muchas codificaciones, pero para el lenguaje HTML se adoptó de forma predeterminada la versión extendida de codificaciones.

En esta codificación de texto fue posible escribir sólo 256 caracteres: 128 de ASCII y otros 128 de letras rusas. Como resultado, surgió un problema con el uso en sitios web de caracteres que no están incluidos en ASCII y no son letras rusas incluidas en Codificaciones de Windows 1251 (CP1251). Bueno, decidiste usar tilde o apóstrofe, pero esas posibilidades son inherentes al lenguaje utilizado. codificación HTML no hipotecado.

Es para estos casos que se inventaron las sustituciones o, en otras palabras, las mnemónicas. Inicialmente personajes especiales tenían vista digital archivos, pero luego, para los más comunes, se agregaron sus contrapartes en letras para que sean más fáciles de recordar.

EN comprensión general, un mnemotécnico es un carácter que comienza con un signo "&" y termina con un punto y coma ";". Es precisamente por estas razones que el navegador análisis HTML El código extrae caracteres especiales de él. El signo comercial en un código comodín numérico debe ir seguido inmediatamente de un signo de almohadilla "#", a veces denominado hash. Y solo entonces sigue código digital el carácter deseado en codificación Unicode.

Se pueden escribir más de 60.000 caracteres en Unicode; lo principal es que el símbolo mnemotécnico que necesita sea compatible con la fuente utilizada en su sitio. Hay fuentes que admiten casi todos los caracteres Unicode y hay opciones solo con un determinado conjunto de caracteres.

La lista completa de personajes especiales será simplemente enorme, pero mnemónicos más utilizados puedes pedir prestado, por ejemplo, de esta tabla:

Símbolo	código HTML	Decimal código	Descripción
			espacio sin rupturas
			espacio estrecho (ancho como letra n)
			espacio amplio (ancho em como letra m)
–	-	–	en guión (en-guión)
-	—	—	em guión (em guión)
	-		transferencia suave
A		́	El estrés se coloca después de la letra "estrés".
©		©	derechos de autor
®	®	®	marca registrada
™	™	™	signo de marca registrada
º	º	º	lanza de marte
ª	ª	ª	espejo de venus
‰	‰	‰	ppm
π	π	π	pi (use Times New Roman)
¦	¦	¦	línea punteada vertical
§	§	§	párrafo
°	°	°	grado
µ	µ	µ	micro signo
¶	¶	¶	marca de párrafo
…	…	…	elipsis
‾	‾	‾	superponer
´	´	´	marca de acento
№		№	signo de número
🔍		🔍	Lupa (inclinada hacia la izquierda)
🔎		🔎	Lupa (inclinada hacia la derecha)
signos de operaciones aritméticas y matemáticas
×	×	×	multiplicar
÷	÷	÷	dividir
<	<		menos
>	>	>	más
±	±	±	más/menos
¹	¹	¹	grado 1
²	²	²	grado 2
³	³	³	grado 3
¬	¬	¬	negación
¼	¼	¼	un cuarto
½	½	½	un segundo
¾	¾	¾	tres cuartos
⁄	⁄	⁄	coma decimal
−	−	−	menos
≤	≤	≤	menor o igual a
≥	≥	≥	mayor o igual a
≈	≈	≈	aproximadamente (casi) igual
≠	≠	≠	no igual
≡	≡	≡	idénticamente
√	√	√	raíz cuadrada (radical)
∞	∞	∞	infinidad
∑	∑	∑	signo de suma
∏	∏	∏	marca de trabajo
∂	∂	∂	diferencial parcial
∫	∫	∫	integral
∀	∀	∀	para todos (solo visible si está en negrita)
∃	∃	∃	existe
∅	∅	∅	conjunto vacío
Ø	Ø	Ø	diámetro
∈	∈	∈	pertenece
∉	∉	∉	no pertenece
∋	∋	∗	contiene
⊂	⊂	⊂	es un subconjunto
⊃	⊃	⊃	es un superconjunto
⊄	⊄	⊄	no es un subconjunto
⊆	⊆	⊆	es un subconjunto o igual
⊇	⊇	⊇	es un superconjunto o igual
⊕	⊕	⊕	más en un círculo
⊗	⊗	⊗	signo de multiplicación en un círculo
⊥	⊥	⊥	perpendicular
∠	∠	∠	esquina
∧	∧	∧	lógico Y
∨	∨	∨	O lógico
∩	∩	∩	intersección
∪	∪	∪	asociación
signos de moneda
₽		₽	Rublo. El signo del rublo debe usarse junto con el número. Estándar Unicode 7.0. Si no ve la imagen, actualice sus fuentes Unicode.
€	€	€	Euro
¢	¢	¢	Centavo
£	£	£	libra
¤	¤	¤	signo de moneda
¥	¥	¥	Signo del yen y del yuan
ƒ	ƒ	ƒ	signo de florín
marcadores
	.		marcador sencillo
○		○	círculo
·	·	·	punto medio
†		†	cruz
‡		‡	doble cruz
♠	♠	♠	picos
♣	♣	♣	clubs
			copas
♦	♦	♦	diamantes
◊	◊	◊	rombo
✏		✏	lápiz
✎		✎	lápiz
✐		✐	lápiz
✍		✍	mano
citas
"	"	"	comillas dobles
&	&	&	signo comercial
«	«	«	comillas tipográficas izquierdas (comillas en espiga)
»	»	»	comillas tipográficas derechas (comillas en espiga)
‹		‹	cita de apertura de una sola esquina
›		›	cierre de cotización de esquina única
′	′	′	prime (minutos, pies)
″	″	″	doble prima (segundos, pulgadas)
‘	‘	‘	comilla simple arriba a la izquierda
’	’	’	comilla simple arriba a la derecha
‚	‚	‚	comilla simple inferior derecha
“	“	“	comillas izquierdas
”	”	”	citar pie arriba a la derecha
„	„	„	citar pie abajo a la derecha
❛		❛	comillas simples de apertura en inglés
❜		❜	comillas simples en inglés
❝		❝	apertura de comillas dobles
❞		❞	cierre de comillas dobles
flechas
←	←	←	flecha izquierda
			flecha arriba
→	→	→	flecha derecha
↓	↓	↓	flecha hacia abajo
↔	↔	↔	flecha izquierda y derecha
↕		↕	flecha arriba y abajo
↵	↵	↵	retorno de carro
⇐	⇐	⇐	doble flecha izquierda
⇑	⇑	⇑	doble flecha hacia arriba
⇒	⇒	⇒	doble flecha derecha
⇓	⇓	⇓	doble flecha hacia abajo
⇔	⇔	⇔	doble flecha izquierda y derecha
⇕		⇕	doble flecha arriba y abajo
▲		▲	triángulo flecha arriba
▼		▼	flecha hacia abajo del triángulo
			triángulo flecha derecha
◄		◄	triángulo flecha izquierda
estrellas, copos de nieve
☃		☃	Muñeco de nieve
❄		❄	Copo de nieve
❅		❅	Copo de nieve intercalado por tréboles
❆		❆	Copo de nieve gordo y de ángulo agudo
★		★	estrella sombreada
☆		☆	estrella en blanco
✪		✪	Estrella vacía en un círculo lleno
✫		✫	Estrella rellena con un círculo abierto en su interior.
✯		✯	estrella giratoria
⚝		⚝	Estrella blanca dibujada
⚪		⚪	círculo abierto medio
⚫		⚫	Círculo lleno en el medio
⚹		⚹	Sextil (tipo copo de nieve)
✵		✵	Estrella giratoria de ocho puntas
❉		❉	Estrella con extremos esféricos
❋		❋	Atrevida hélice en forma de estrella de ocho puntas
✺		✺	Asterisco de dieciséis puntas
✹		✹	Estrella llena de doce puntas
✸		✸	Negrita estrella rellena recta de ocho puntas
✶		✶	Estrella llena de seis puntas
✷		✷	Estrella llena recta de ocho puntas
✴		✴	estrella de ocho puntas
✳		✳	estrella de ocho puntas
✲		✲	Estrella con centro en blanco
✱		✱	estrella gorda
✧		✧	Estrella abierta puntiaguda de cuatro puntas.
✦		✦	Estrella llena de cuatro puntas puntiagudas
⍟		⍟	estrella en un circulo
⊛		⊛	Copo de nieve en círculo
reloj, tiempo
⏰		⏰	Mirar
⌚		⌚	Mirar
⌛		⌛	Reloj de arena
⏳		⏳	Reloj de arena

Hay algo bastante interesante método de obtención código HTML mnemotécnico para el cartel que necesitas. Para hacer esto, simplemente abra el editor. Microsoft Word, crear nuevo documento y elegir entre menú superior“Insertar” - “Símbolo” (estoy usando la versión 2003, así que no sé cómo realizar una operación similar en versiones posteriores).

En la ventana que se abre, debe seleccionar una fuente, por ejemplo, Times New Roman (o cualquier otra que obviamente estará presente en la mayoría de las computadoras de los visitantes de su sitio: Courier o Arial, por ejemplo).

Agregar de la lista que se abre a la tuya documento de palabra todos los caracteres especiales que necesita y guarde este documento de Word como una página web (seleccionada de la lista desplegable “.html” al guardar). Bueno, entonces todo lo que tienes que hacer es abrir esta página web en cualquier editor HTML(el mismo Notepad++ servirá) y verás todos los códigos digitales de los mnemotécnicos que necesitas:

El método es un poco complicado, pero si desea utilizar algún carácter especial poco común en la página de su sitio web, será más fácil que buscar en Internet tablas como la que se muestra arriba. Deberá pegar el código de carácter especial resultante en lugar correcto y en lugar de esto, en la página web, el navegador mostrará el carácter que necesita (por ejemplo, un espacio continuo).

Espacio sin separación y guión suave en ejemplos

Como ya mencioné anteriormente y como puede ver en la tabla de caracteres especiales que figura arriba, algunos mnemotécnicos en HTML recibieron, además de digitales, también una designación simbólica por su mayor memorización sencilla. Aquellos. En lugar del signo almohadilla “#” (hash), se utilizan palabras en variantes simbólicas. Por ejemplo, el mismo espacio sin separación se puede escribir como (mnemónico digital) o como (carácter).

Al escribir artículos, si necesita insertar un signo comercial (&) o un corchete de ángulo abierto (<), то для этого обязательно нужно использовать спецсимволы. Дело в том, что эти знаки в Html означают начало тега и браузер будет рассматривать их именно с этой точки зрения и отображать в тексте не будет.

Es decir, si está escribiendo un artículo en el que deberá insertar, por ejemplo, la visualización de una etiqueta en el texto< body>o simplemente necesita insertar un signo menor que (<), то сделав это без использования подстановок на веб странице вы ничего не увидите, т.к. браузер, обнаружив «<» , поймет, что это Html тег, а не текст статьи.

Por lo tanto, necesitarás insertar la siguiente construcción para resolver un problema similar:

Lo mismo se aplica a la visualización del código de los propios mnemotécnicos, ya que comienzan con un signo comercial. Deberá insertar el código en el texto, reemplazando el signo comercial con su sustitución (carácter especial):

Esto deberá hacerse para ingresar a la página.<, а не отображение левой угловой скобки (<), в которую преобразует браузер мнемонику <, обнаружив при разборе знак амперсанда. Хитро, но вы все поймете попробовав это на практике.

Lo más probable es que también utilices un espacio sin separación, que se verá como un espacio normal en una página web, pero el navegador no lo tratará como un carácter de espacio en absoluto y no realizará transferencias sobre él(por ejemplo, esto será apropiado para frases como 1400 GB, etc., que no sería aconsejable traspasar diferentes lineas):

1400 GB.

A veces puede surgir la situación contraria, cuando el texto contiene palabras muy largas y se quiere asegurarse de que, si es necesario, el navegador Podría dividir estas palabras con guiones. Para tales fines, se proporciona un símbolo especial "transferencia suave":

Palabra muy, muy larga;

Cuando sea necesario pasar a otra línea, el navegador utilizará un guión en lugar del mnemotécnico de guión suave y enviará el resto de la palabra a la siguiente línea. Si hay suficiente espacio para colocar esta palabra completa en una línea, entonces el navegador no dibujará ninguna nueva línea. Es así de simple.

¡Buena suerte para ti! Nos vemos pronto en las páginas del blog.

Puedes ver más vídeos entrando a

");">

Caracteres de control en HTML (XHTML)

Los caracteres de control en HTML (XHTML) son caracteres de servicio del lenguaje HTML que se utilizan en el diseño HTML de una página web. Cualquier navegador debe admitir estos caracteres, ya que sin ellos es imposible mostrar correctamente el texto HTML. Los caracteres de control no se muestran en el texto y, cuando se ingresan directamente desde el teclado, el navegador los interpreta como signos de puntuación que requieren la realización de alguna acción cuando la página se dibuja en la pantalla.

Está permitido utilizar caracteres de control en textos ordinarios, donde simbolizan conceptos universales y el navegador los interpreta como caracteres tipográficos ordinarios. Al utilizar símbolos de servicio en textos HTML de esta manera, no es necesario introducir el valor del símbolo en sí, sino su código HTML. Porque, repito, de lo contrario el navegador percibirá el símbolo del servicio como una llamada a la acción y no mostrará correctamente el texto HTML en la pantalla del monitor.

Los símbolos de control y su código HTML son conocidos y comprendidos por todos los navegadores sin excepción, lo que no se puede decir, lamentablemente, de otros símbolos que pueden mostrarse incorrectamente en diferentes navegadores o, peor aún, no mostrarse en absoluto.

Sintaxis y puntuación


	espacio de longitud N (espacio regular)
	espacio de longitud M (espacio largo)

-	guión suave (carácter no imprimible)	-
‑	guión		‑
-	guión de longitud N (guión normal)	-	–
—	guión de longitud M (em guión)	—	—
.	punto		.
,	coma		,
…	elipsis	…	…
:	colon		:
;	punto y coma		;
!	signo de admiración		! ǃ
?	signo de interrogación		?
@	"perro"		@
*	"estrella"		*
#	"enrejado"		#
‘	cita única superior izquierda	‘	‘
’	cita única superior derecha	’	’
‚	cita única inferior derecha	‚	‚
“	cita doble arriba a la izquierda	“	“
”	doble cita superior derecha	”	”
„	doble cita inferior derecha	&bdquo	„
«	comillas dobles en la esquina izquierda (ruso)	«	«
»	comillas dobles en la esquina derecha (ruso)	»	»
́	acento, ejemplo: Vasya		́
"	apóstrofo, ejemplo: tú"yo		"
´	agudo, ejemplo: Vasya	´	´
¶	párrafo (carácter no imprimible)	¶	¶
§	párrafo	§	§
ˆ	acento (pájaro invertido)	ˆ	ˆ
˜	tilde pequeña	˜	˜
¦	línea punteada vertical	¦	¦
(	paréntesis izquierdo		(
)	paréntesis derecho		)
〈	soporte de ángulo izquierdo	〈	〈
〉	soporte de ángulo recto	〉	〉
‹	soporte en ángulo izquierdo, opción	‹	‹
›	soporte en ángulo recto, opción	›	›
[	corchete izquierdo		[
]	corchete derecho		]
/	barra diagonal - carácter de barra diagonal		/
\	barra invertida		\
⁄	barra diagonal (signo de división)	⁄	⁄
ǀ	barra vertical		ǀ
ǁ	doble barra vertical		ǁ
‾	superposición, ejemplo: Vasya‾vasya	‾	‾
¯	macron, ejemplo: Vasya¯vasya	¯	¯

Marcas y moneda

+	más	+	+
−	menos	−	- −
=	es igual		=
±	más o menos	±	±
×	signo de multiplicación	×	×
÷	signo de división	÷	÷
⋅	operador de punto (en medio de la línea)	⋅	· ⋅
∗	operador de asterisco (en medio de la línea)	∗	∗
∼	operador de tilde	∼	∼
.	marcador de lista (en medio de la línea)	.
¹	superíndice "1"	¹	¹
²	superíndice "2"	²	²
³	superíndice "3"	³	³
Superíndice y subíndice en HTML (XHTML) se puede insertar usando etiquetas ^{Y _{, respectivamente: NÚMERO ^Sobrescrito→ NÚMERO Superíndice NÚMERO _Subíndice→ NÚMERO Subíndice}}
½	fracción "la mitad"	½	½
⅓	fracción "un tercio"		⅓
¼	fracción "un cuarto"	¼	¼
¾	fracción "tres cuartos"	¾	¾
№	signo de número		№
%	por ciento		%
‰	ppm	‰	‰
°	grados	°	°
′	prime (minutos, pies)	′	′
″	doble prima (segundos, pulgadas) Ejemplo 1: 30° 25′ 12″ Ejemplo 2: 25′ 12 ″	″	″
µ	micro	µ	µ
π	Pi	π	π
ƒ	signo de función (no confundir con "integral")	ƒ	ƒ
∫	integral	∫	∫
∅	cero cruzado, conjunto vacío (no confundir con "diámetro")	∅	∅
⌀	diámetro (no confundir con la “o” latina tachada)		⌀
ø	"o" latina tachada en diagonal	ø	ø
Ø	"O" mayúscula latina tachada en diagonal	Ø	Ø
∏	marca de trabajo	∏	∏
∑	signo de suma	∑	∑
√	radical (raíz cuadrada o raíz x)	√	√
∝	proporcionalmente	∝	∝
∞	infinidad	∞	∞
∠	esquina	∠	∠
⊥	ortogonal (perpendicular)	⊥	⊥
∴	firmar "por lo tanto"	∴	∴
≅	aproximadamente igual	≅	≅
≈	casi igual	≈	≈
≠	no igual	≠	≠
≡	idénticamente	≡	≡
≤	menor o igual a	≤	≤
≥	mayor o igual a	≥	≥
∧	lógico Y	∧	∧
∨	O lógico	∨	∨
⊕	signo más en un círculo (cantidad directa)	⊕	⊕
⊗	signo de multiplicación en un círculo (producto cruzado, flecha del observador)	⊗	⊗
ʘ	punto en un círculo (flecha al observador)		ʘ










				✵ ✵

Lección 5.

En esta lección nosotros:
1. Descubramos cómo hacer que el código html sea más conveniente y fácil de leer para nosotros.
2. Veamos cómo ajustar correctamente una línea de texto.

Hacer que el código html sea conveniente.

Ahora nuestro código es claro y fácil de leer, ya que hay poco texto y prácticamente ninguna etiqueta. Cuando creamos una página más compleja, habrá muchas etiquetas, por lo que será difícil encontrar la correcta.

Para evitar un desorden de etiquetas, inicialmente debe organizar las etiquetas y las líneas de manera que sean visualmente más fáciles de percibir. Cuando el navegador lee información de una página html, no importa cuántos espacios o líneas vacías haya en el código.

Cambié el texto en el código de la página relativo al que creamos, pero no importa. Las imágenes de izquierda y derecha muestran el mismo código. Ambas opciones serán mostradas por el navegador en la pantalla del monitor exactamente igual. De acuerdo, trabajar con el código que se muestra a la derecha será mucho más fácil que con el de la izquierda.

El código que estamos viendo es muy simple, pero incluso ahora la diferencia en la percepción visual es notable. No existen reglas específicas para “poner las cosas en orden”; cada maestro decide por sí mismo cómo le conviene trabajar.

Salto de línea HTML. Etiqueta <br>.

Presta atención a la imagen. En la primera versión el texto está escrito en una línea, en la segunda versión en dos líneas.

El navegador mostrará ambas opciones iguales. El texto se escribirá en una línea:

¿Preguntas por qué es esto? De hecho, en uno de los códigos, parte del texto se traslada a otra línea. Sería lógico que en el navegador parte del texto también se moviera a otra línea, pero HTML tiene su propia lógica a este respecto. Si hacemos un salto de línea en el código html, entonces para el navegador esto equivale a un espacio(como un espacio regular entre palabras en el texto). Si movemos parte del texto no una línea hacia abajo, sino 2 o 3 (cualquier número), entonces el navegador seguirá considerando esta distancia como un espacio regular entre palabras y cuando se muestre en la pantalla, el texto se escribirá en una línea. .

Etiqueta <br>

Cuando nos familiarizamos con las etiquetas en la tercera lección, mencioné que hay etiquetas que no requieren cierre. Etiqueta <br> uno de ellos se utiliza para saltos de línea.
Apliquemoslo en código:

Hemos insertado una etiqueta <br> en nuestro código html y ahora, cuando inicie el archivo a través del navegador, parte del texto se transferirá a la siguiente línea.
* No olvide guardar los cambios en el Bloc de notas (Ctrl + S) y actualizar la página en el navegador (F5).

¡Hola, queridos lectores del blog! Quienes lo conocen al menos superficialmente probablemente ya lo hayan notado, aunque sea en términos generales. Esto significa que tienen una idea de qué símbolos HTML se utilizan generalmente en el código del documento.

En el artículo de hoy intentaremos descubrir qué es un espacio en HTML y en qué casos se pueden utilizar espacios en blanco al formatear el código para facilitar su lectura. Descubriremos cuándo es necesario utilizar un espacio sin separación y también nos familiarizaremos con otros caracteres especiales (o, como también se les llama, mnemónicos).

De hecho, le aconsejaría que no ignore el tema del uso de varios caracteres especiales, ya que este es un componente importante que le permitirá completar su estudio del lenguaje de marcado de hipertexto. En general, la información proporcionada en esta publicación definitivamente no será superflua. Bueno, ahora al grano.

Espacios y caracteres de espacio en blanco en HTML

Primero hay una nota importante que hacer. Hay teclas especiales en el teclado de una computadora que le permiten separar texto (más sobre esto a continuación). Sin embargo, sólo una barra espaciadora amplia proporciona separación entre palabras no sólo en el editor, sino también en la ventana del navegador. Hay matices al dividir líneas y sangrar los bordes.

Como sabes, la visualización de determinados elementos en un navegador web está determinada por etiquetas. Para formatear el texto se utiliza el conocido , que está basado en bloques. Es decir, su contenido se ubica en todo el ancho disponible.

A ajustar líneas dentro del párrafo P, debe utilizar una única etiqueta BR con la que pueda hacer esto. Digamos que necesitamos insertar en el texto algunas líneas de un poema que escribimos en un editor de texto:

A pesar de que las líneas del verso están ubicadas correctamente y los guiones están en los lugares correctos, todo se verá diferente en el navegador:

Para lograr la misma visualización en la ventana de un navegador web, debe escribir BR en cada salto de línea:

Ahora hemos logrado la tarea y las líneas poéticas se mostrarán de forma completamente correcta en el navegador:

De esta forma se completan los saltos de línea necesarios. Otra característica que debe tenerse en cuenta aquí es que el navegador web muestra como uno solo los espacios múltiples que aparecen uno tras otro. Puedes comprobarlo si en el mismo editor intentas poner no uno, sino varios espacios entre dos palabras y, pulsando en el botón “Guardar”, miras el resultado en el navegador.

Espacio, tabulación y salto de línea

Básicamente, con estos caracteres de espacio en blanco Nos conocemos tan pronto como empezamos a trabajar con el texto en el editor y le damos el formato requerido. Para implementar tal tarea, existen claves especiales, cada una de las cuales corresponde a su propio carácter de espacio:

La barra espaciadora es la tecla más ancha del teclado de una computadora (sin etiqueta);
Tabulador: una tecla a la izquierda con la inscripción "Tab" y dos flechas que apuntan en diferentes direcciones;
Salto de línea: tecla "Intro".

Sin embargo, como dije anteriormente, obtenemos el resultado final deseado no solo en un editor de texto, sino también en un navegador, solo cuando usamos la primera tecla. Las tres teclas (incluidas la tabulación y el salto de línea son útiles al formatear el código HTML. Digamos que así es como se ve un fragmento de código en NotePad++ (hay mucha información sobre este editor) cuando se muestran todos los caracteres de espacio en blanco:

Obtenemos un código fácil de leer y comprender gracias a los espacios. Las flechas naranjas indican sangrías creadas con la tecla Tab y los símbolos CR y LF indican saltos de línea creados con la tecla Intro.

Se ven los contenedores anidados unos dentro de otros y las etiquetas de apertura y cierre son claramente visibles. De esta forma, este código se puede editar fácilmente. Ahora compárelo con el mismo código, que no tiene dicha división de texto:

De la misma manera, utilizando caracteres de espacio en blanco, puede escribir reglas CSS que visualmente se verán claras y digeribles:

Después de llevar todos los estilos a un denominador común y terminar de editar completamente el archivo de estilos, puede realizar la edición eliminando todos los espacios del código. Esto es necesario aumentar, lo cual es muy importante a la hora de promocionar un recurso.

Caracteres especiales (o mnemónicos) en código HTML

Ahora veamos los casos en los que es necesario utilizar los caracteres especiales que mencioné al principio del artículo. Los caracteres especiales HTML, a veces llamados mnemónicos, se introdujeron para resolver un problema de larga data con las codificaciones que surgieron en el lenguaje de marcado de hipertexto.

Cuando escribes texto en el teclado, se codifican los caracteres del idioma que estás utilizando. En el navegador web, el texto escrito se mostrará utilizando las fuentes que seleccionó como resultado de la operación de decodificación inversa.

El hecho es que existen muchas codificaciones de este tipo; ahora no tenemos el objetivo de analizarlas en detalle. Lo que pasa es que a cada uno de ellos le pueden faltar ciertos símbolos, que, sin embargo, deben mostrarse. Digamos que siente la necesidad de escribir comillas simples o un acento, pero estos íconos simplemente no están incluidos en el conjunto.

Para eliminar este problema, se introdujo un sistema de símbolos especiales, que incluye una gran cantidad de mnemónicos diferentes. Todos comienzan con un signo "&" y normalmente terminan con un punto y coma ";". Al principio, cada carácter especial tenía su propio código digital. Por ejemplo, para un espacio no separable, que consideraremos con más detalle a continuación, será válida la siguiente entrada:

Pero después de un tiempo, a los símbolos más comunes se les asignaron letras equivalentes (mnemónicos) para hacerlos más fáciles de recordar. Digamos que para el mismo espacio sin separación se ve así:

Como resultado, el navegador muestra el símbolo correspondiente. La lista de mnemónicos es muy voluminosa, caracteres especiales más utilizados en HTML Puede descubrirlo a continuación en la siguiente tabla:

símbolo	código	mnemotécnica	descripción
			espacio sin rupturas
			espacio estrecho (ancho como letra n)
			espacio amplio (ancho em como letra m)
–	-	–	en guión (en-guión)
-	—	—	em guión (em guión)
	-		transferencia suave
A		́	El acento se coloca después de la letra "estrés".

©		©	derechos de autor
®	®	®	marca registrada
™	™	™	signo de marca registrada
º	º	º	lanza de marte
ª	ª	ª	espejo de venus
‰	‰	‰	ppm
π	π	π	pi (use Times New Roman)
¦	¦	¦	línea punteada vertical
§	§	§	párrafo
°	°	°	grado
µ	µ	µ	micro signo
¶	¶	¶	marca de párrafo
…	…	…	elipsis
‾	‾	‾	superponer
´	´	´	marca de acento
№		№	signo de número
🔍		🔍	Lupa (inclinada hacia la izquierda)
🔎		🔎	Lupa (inclinada hacia la derecha)
signos de operaciones aritméticas y matemáticas
×	×	×	multiplicar
÷	÷	÷	dividir
<	<		menos
>	>	>	más
±	±	±	más/menos
¹	¹	¹	grado 1
²	²	²	grado 2
³	³	³	grado 3
¬	¬	¬	negación
¼	¼	¼	un cuarto
½	½	½	un segundo
¾	¾	¾	tres cuartos
⁄	⁄	⁄	coma decimal
−	−	−	menos
≤	≤	≤	menor o igual a
≥	≥	≥	mayor o igual a
≈	≈	≈	aproximadamente (casi) igual
≠	≠	≠	no igual
≡	≡	≡	idénticamente
√	√	√	raíz cuadrada (radical)
∞	∞	∞	infinidad
∑	∑	∑	signo de suma
∏	∏	∏	marca de trabajo
∂	∂	∂	diferencial parcial
∫	∫	∫	integral
∀	∀	∀	para todos (solo visible si está en negrita)
∃	∃	∃	existe
∅	∅	∅	conjunto vacío
Ø	Ø	Ø	diámetro
∈	∈	∈	pertenece
∉	∉	∉	no pertenece
∋	∋	∗	contiene
⊂	⊂	⊂	es un subconjunto
⊃	⊃	⊃	es un superconjunto
⊄	⊄	⊄	no es un subconjunto
⊆	⊆	⊆	es un subconjunto o igual
⊇	⊇	⊇	es un superconjunto o igual
⊕	⊕	⊕	más en un círculo
⊗	⊗	⊗	signo de multiplicación en un círculo
⊥	⊥	⊥	perpendicular
∠	∠	∠	esquina
∧	∧	∧	lógico Y
∨	∨	∨	O lógico
∩	∩	∩	intersección
∪	∪	∪	asociación
signos de moneda
€	€	€	Euro
¢	¢	¢	Centavo
£	£	£	libra
¤	¤t;	¤	signo de moneda
¥	¥	¥	Signo del yen y del yuan
ƒ	ƒ	ƒ	signo de florín
marcadores
	.		marcador sencillo
○		○	círculo
·	·	·	punto medio
†		†	cruz
‡		‡	doble cruz
♠	♠	♠	picos
♣	♣	♣	clubs
			copas
♦	♦	♦	diamantes
◊	◊	◊	rombo
✏		✏	lápiz
✎		✎	lápiz
✐		✐	lápiz
✍		✍	mano
citas
"	"	"	comillas dobles
&	&	&	signo comercial
«	«	«	comillas tipográficas izquierdas (comillas en espiga)
»	»	»	comillas tipográficas derechas (comillas en espiga)
‹		‹	cita de apertura de una sola esquina
›		›	cierre de cotización de esquina única
′	′	′	prime (minutos, pies)
″	″	″	doble prima (segundos, pulgadas)
‘	‘	‘	comilla simple arriba a la izquierda
’	’	’	comilla simple arriba a la derecha
‚	‚	‚	comilla simple inferior derecha
“	“	“	comillas izquierdas
”	”	”	citar pie arriba a la derecha
„	„	„	citar pie abajo a la derecha
❛		❛	comillas simples de apertura en inglés
❜		❜	comillas simples en inglés
❝		❝	apertura de comillas dobles
❞		❞	cierre de comillas dobles
flechas
←	←	←	flecha izquierda
			flecha arriba
→	→	→	flecha derecha
↓	↓	↓	flecha hacia abajo
↔	↔	↔	flecha izquierda y derecha
↕		↕	flecha arriba y abajo
↵	↵	↵	retorno de carro
⇐	⇐	⇐	doble flecha izquierda
⇑	⇑	⇑	doble flecha hacia arriba
⇒	⇒	⇒	doble flecha derecha
⇓	⇓	⇓	doble flecha hacia abajo
⇔	⇔	⇔	doble flecha izquierda y derecha
⇕		⇕	doble flecha arriba y abajo
▲		▲	triángulo flecha arriba
▼		▼	flecha hacia abajo del triángulo
			triángulo flecha derecha
◄		◄	triángulo flecha izquierda
estrellas, copos de nieve
☃		☃	Muñeco de nieve
❄		❄	Copo de nieve
❅		❅	Copo de nieve intercalado por tréboles
❆		❆	Copo de nieve gordo y de ángulo agudo
★		★	estrella sombreada
☆		☆	estrella en blanco
✪		✪	Estrella vacía en un círculo lleno
✫		✫	Estrella rellena con un círculo abierto en su interior.
✯		✯	estrella giratoria
⚝		⚝	Estrella blanca dibujada
⚪		⚪	círculo abierto medio
⚫		⚫	Círculo lleno en el medio
⚹		⚹	Sextil (tipo copo de nieve)
✵		✵	Estrella giratoria de ocho puntas
❉		❉	Estrella con extremos esféricos
❋		❋	Atrevida hélice en forma de estrella de ocho puntas
✺		✺	Asterisco de dieciséis puntas
✹		✹	Estrella llena de doce puntas
✸		✸	Negrita estrella rellena recta de ocho puntas
✶		✶	Estrella llena de seis puntas
✷		✷	Estrella llena recta de ocho puntas
✴		✴	estrella de ocho puntas
✳		✳	estrella de ocho puntas
✲		✲	Estrella con centro en blanco
✱		✱	estrella gorda
✧		✧	Estrella abierta puntiaguda de cuatro puntas.
✦		✦	Estrella llena de cuatro puntas puntiagudas
⍟		⍟	estrella en un circulo
⊛		⊛	Copo de nieve en círculo
reloj, tiempo
⏰		⏰	Mirar
⌚		⌚	Mirar
⌛		⌛	Reloj de arena
⏳		⏳	Reloj de arena

Casos de uso de algunos caracteres especiales, incluidos espacios sin separación y guiones suaves

Si ya ha estudiado un poco la tabla, ha recibido la confirmación de lo que dije anteriormente, que para mostrar todos los caracteres especiales se utiliza un código digital () o su análogo alfabético (mnemónicos simbólicos), donde en lugar de un conjunto de hash Se escriben marcas y números, letras ().

Ahora veamos cuándo usar estos códigos. Digamos que en un artículo necesitas indicar algunos etiqueta HTML, Por ejemplo,