Languages

How to fix a problem with HTML letters encoding?

6 points
Asked by:
Nikki
9140

Hey! I have a problem with HTML correctly detecting Polish characters. Can someone help me?

My example with the Polish alphabet:

// ONLINE-RUNNER:browser;

<!DOCTYPE html>
<head>
    
    <title> ALFABET </title>

</head>
<body>
    <h1> A ─ä B C ─ć </h1>
    <h2> D E ─ś F G </h2>
    <h3> H I J K L </h3>
    <h4> Ł M N O Ó </h4>
    <h5> P R S T U </h5>
    <h6> W Y Z ┼╣ ┼╗ </h6>

</body>

Output:

2 answers
7 points
Answered by:
Nikki
9140

Fixed version:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>ALFABET</title>
</head>
<body>

    <h1> A ─ä B C ─ć </h1>
    <h2> D E ─ś F G </h2>
    <h3> H I J K L </h3>
    <h4> Ł M N O Ó </h4>
    <h5> P R S T U </h5>
    <h6> W Y Z ┼╣ ┼╗ </h6>

</body>
</html>

What was wrong:

  1. In <head> tag always add <meta charset="utf-8" />
  2. Use <html>, <head>, <body> with closing tags. Those are required tags.
  3. Always use HTML tamplate :)

Ensure your file have correct encoding (UTF-8).

Basic template:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Example template</title>
</head>
<body>

  <p>Web page text...</p>

</body>
</html>

HTML basic templates:

0 comments Add comment
6 points
Answered by:
Nikki
9140

utf-8 is unified way to encode all world characters in text - Polish characters too - it is commonly used standard with good support for different technologies.

It is important to do 2 things:

  • save file with utf-8 encoding,
  • add in html some information┬áhow web browser should encode the file.

To save file with utf-8 for beginners I recommend Nodepad++. To tell web browser about file encoding meta element with utf-8 charset value is good - there are different ways how to do it but meta element is easy to add.

Link to Notepad++ homepage is here.

HTML code with meta element:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>ALFABET</title>
</head>
<body>

    <h1> A ─ä B C ─ć </h1>
    <h2> D E ─ś F G </h2>
    <h3> H I J K L </h3>
    <h4> Ł M N O Ó </h4>
    <h5> P R S T U </h5>
    <h6> W Y Z ┼╣ ┼╗ </h6>

</body>
</html>

Screenshot:

Notepad++ with utf-8 encoding set.
Notepad++ with utf-8 encoding set.

Note: UTF-8-BOM is only for safe (BOM option adds some additional information to file to indicate it is utf-8 file - not necessary at all but useful)

0 comments Add comment
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join