Header section - the head tag
The header section is where you write all the information about your website. This information is the kind that search engines use to figure out how they should list your website, for example what it's called and what it's about.
Big search engines like Google don't have people browsing the Internet and typing in information. Instead, they have a robot search system, where computers browse all the billions of web pages around the world and index their content. It would be impossible to do this if every detail of a website was taken into account, so the information in this section is the most important to them.
Therefore, they can look at the description gievn in the header to figure out the general content of the website.
Also, you should put all of your CSS, JavaScript, etc. inside the <head>~</head> section so that it's out of the way of the content. We'll get to that later.
Let's learn about some of the tags used inside the <head> tag.
Page title
[Example]
<title> How To Homepage </title>
This is the title of your web page. If you enter it between <title> and </title>, the page title is displayed in the tab bar and in the top of your browser, as long as in bookmarks. It's important to have a title, even if it's your site's URL repeated, so that your site looks good. Plus, it's what search engines like Google look at so that they know what to call your site.
Even if you don't care about search engine optimisation, it's still good for your visitors, so that they can understand at a glance what your page is about and what tab they have open if they lose track.
Character set declaration
[Example]
<meta charset="UTF-8">
This page is written with the character encoding UTF-8. Back in the day, there were competing standards for how text was stored on a computer, including different specialised standards for foreign languages. These days, though, there is a set stardard for everything, just like HTML5 is the set standard for HTML documents now..
This is a bit of a holdover from the olden days, but to ensure any text (including foreign text and symbols) displays correctly, please only use UTF-8. There is no need for anything else if you are making a normal website.
Search keywords
[Example]
<meta name="keywords" content="websites, easy HTML, HTML tutorial">
Keywords related to the page's content. You must make sure your keywords are separated by commas. For example, a page about Toyota's Prius cars might have the keywords "Prius, Toyota, hybrid car, fuel efficiency", and so on.
This is honestly another holdover from the olden days, and search engines are very edvanced now, but you might want to use them for fun anyway. Please be aware that filling too many keywords or completely unrelated keywords search engines might realise it's spam and decide not to push your site instead. Use 10 to 15 at most.
Description
[Example]
<meta name="description" content="This website teaches how to create your own webpages. It explains HTML and CSS in an easy to understand way even for complete beginners. Now you, too, can become a webmaster!">
A summary of the page's content. This is effective for search engines, but it's also good for humans.
This will be displayed under the Google search for your website as a description. Think of something sensible and catchy that will make people want to click on your website.
Loading external stylesheets
[Example]
<link rel="stylesheet" href="/style.css">
As we explained, websites are made with a language called HTML. Generally though, HTML looks plain on its own. Wwe use HTML for the basic data, and then to tell the computer how we want it to display things, such as specifying the font size and line spacing, we use CSS (Cascading Style Sheets).
CSS will be explained in About CSS, but here I will only include the explanation on how to load it into your HTML page.
Loading external scripts
[Example]
<script src="/script.js"></script>
JavaScript is a programming language that lets you do all sorts of things with your site. For example, you can replace images on hover, work with numbers, display the current time amd more.
It might be too troublesome to learn JavaScript yourself if all you want is a simple website. That's fine, and you don't have to use it at all, but if there are JavaScript effects you would like you can find various scripts on the Internet which are free to use. If you write your own script and want to use it, you use the script tag in the same way.