This content originally appeared on DEV Community and was authored by Karlgusta Esimit
Computers don't understand characters like A, B, C and so on. They only understand numbers which are represented in the binary format: 0s and 1s.
So, using a Character set, we can map a character to a numeric value.
The first character set that was designed was the ASCII set, which is short for American Standard Code for Information Interchange.
ASCII can only represent the characters in the English language. So, it is very limited.
The character set that we use most these days is UTF-8, which can represent almost all characters in the world.
So, back to our code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
</body>
</html>
With this meta element, <meta charset="UTF-8">, we are defining the character set used in this HTML document.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Below that, we have a meta element, <meta name="viewport content="width=device-width, initial-scale=1.0"> for configuring the viewport. The viewport is the visible area of a web page.
On a phone or a tablet, the viewport is smaller. While here on desktop, we can change the size of the view port by resizing the browser.
So now our viewport is smaller.
Back to our code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
</body>
</html>
In this meta element, we are defining the initial width and zoom factor for the viewport. We will talk about this in more detail later. For now, all I need you to know is that we need this element so that our web page looks good on all devices: mobile, tablet, and desktop computers.
So, as a best practice, every web page should have at least these two meta elements. But we have additional meta elements. Let me show you some:
So, if you type meta:
meta:compact
meta:desc
meta:edge
meta:redirect
meta:refresh
meta:utf
In this list we can see all types of meta elements. For example, we have an element for defining keywords on a web page. Let's select it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML,CSS" />
<title>Document</title>
</head>
<body></body>
</html>
Here, we can type multiple keywords like HTML, CSS, and so on.
<meta name="keywords" content="HTML, CSS">
In the past, these keywords were heavily used for Search Engine Optimization. But these days most search engines don't put much weight on these keywords. Still, we can use them to define the keywords that represent this page.
We have another meta element for defining the description for this page.
So, if you type <meta name="description" content="">:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project." />
<title>Document</title>
</head>
<body></body>
</html>
In the content, we can type the description for this page. What we type here will appear on Google or other search engines when someone searches for our website.
For example, if you search for Windows here is what we get:
Now, look at this text:
What you see here comes from this element over here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body></body>
</html>
So, this is the purpose of meta elements. With meta elements, we can get information about a web page.
Next, we are going to talk about the elements you need to know about when working with text.
See you on the next one!
P.S. 🚀 Ready to kickstart your career in web development? Join our course to master HTML, CSS, JavaScript, React, and more! Build real-world projects, learn from industry experts, and connect with a supportive community. Enroll now!
This content originally appeared on DEV Community and was authored by Karlgusta Esimit
Karlgusta Esimit | Sciencx (2024-08-28T11:14:00+00:00) What is a Character Set?. Retrieved from https://www.scien.cx/2024/08/28/what-is-a-character-set/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.