Step 2: Head

Nothing has changed in the way that HTML files are built up, so the file still consists of two main sections: a head and a body.

Add a <head>-element

Change your file to look like this and save it.

<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title>Whatever title of your file</title>
</head>

</html>

The bold printed part is newly added. You can alter the italic part to whatever you want your own document title to be.

Choose your page title wisely

This title will show in the top of the browser and it will also show as a title (and link) in search engines if indexed (SEO). Also, not to be ignored these days, your title will show as the title of the page when people share your website on social media. Needless to say, that you have to choose this carefully.

If you want to see what it looks like in the browser now, just open your file in your default browser. You should see the title at the top of the browser and your page should be blank.

Charset

I’m boldly assuming you’ve already done the first HTML course. The old course explained that certain HTML tags allow you to add more values. This is still the case in HTML5, but now our terminology for this is slightly different. An HTML tag can have an attribute, which is an added value. An attribute is what you see with the line <meta charset=“UTF-8”>. Charset is what we call an attribute. In this case it’s an attribute to the <meta>-element. An attribute usually has a value. In this case that’s “UTF-8”.

New to this course, compared to the old HTML course, is the addition of a meta tag that’s nested in the <head>-element.  You should make this a default thing you do. With <meta charset=“UTF-8”> you are assigning a character set to your page. A character set contains all characters that are used in written languages. Here you are telling the browser which characters it can use for your site. Using this will prevent your users to get little squares or weird characters because the browser got confused about what you meant with certain characters (for instance with characters used for measurements or currencies).

UTF-8 is just one setting. It stands for the character set Unicode: One of the most commonly used settings for websites. The other commonly used setting is ISO-8859-1. This assigns the character set to the character encoding for the Latin alphabet. There are many different character sets. You can set any of them here, but browsers are limited to which character sets they actually know and support. Therefor it’s wise to stick to those commonly used.

You’re ready for the next step.

Bookmark the permalink.

Comments are closed