HTML special characters

Special HTML characters are used to indicate characters that are not in the list of a conventional computer keyboard, or the HTML encoding of the page does not support the direct use of this character. At the same time, such icons can significantly increase the efficiency of transitions to the pages of a site from the list of search results ( SERP ) by attracting additional user attention . You can read more about this in the pages of the handbook on SEO elements .

How to insert a special character on the HTML page

Inserting any special characters on the page is possible in two ways.

Method one (main) - through HTML

In the content stream of the HTML page in the right place, simply insert the mnemonic code or the decimal code of the desired character. During rendering (drawing) of the page, the specified combination will automatically be replaced by the browser to the desired icon.

<!-- An example of using decimal and mnemo code in HTML -->
<p> Example: &#169; or &copy; </p>

As a result, we get a string with the desired character: Example: © or ©

If you place special characters in tags TITLEor DESCRIPTIONpages, you can get a beautiful snippet of the article in the search results or messenger, which will help to draw even more attention to the promoted resource.

Character in TITLE

Method two (alternative) - via CSS

In the descriptions of the styles of the desired element, you can use the attribute contentby assigning to it the CSS code of the desired character. As in the previous case, the combination when rendering the page will be replaced with the desired icon, but the contents of the property contentwill not get into the document as text and will not be indexed.

<!-- Example of special character output through CSS properties -->
<p> Example: <span class='copyright'></span>  </p>
/* CSS */
.copyright:after{
    content: '\00A9';
}

This use case will also give us: Example: ©

It is important to keep in mind that  special character codes are case sensitive . For this reason, it is better to copy them from tables to avoid errors. The Ogmeta service allows you to test the ability to display a symbol, both in the title bar of the browser and in the content of the page. It is also important to note that some icons (for example, symbols of the signs of the zodiacs) may differ slightly in different browsers and operating systems.

Liked the project?

Just share the link to this page with your friends