The basics of the head section in HTML and CSS

The head section of an HTML document is essential for the structure and functioning of the website. In this tutorial, you will learn what exactly is hidden in the head section and how you can use it effectively. We will cover meta information, title, character encoding as well as linking stylesheets and scripts.

Key Insights

• The head section () contains no visible content, but rather meta information.
• The title tag defines the title displayed in the browser's address bar.
• Meta tags, such as the charset tag, are important for character encoding.
• Stylesheets and scripts can be linked in the head section.

Step-by-Step Guide

1. The Head Section Itself

The head section (head) of an HTML document begins with the tags and ends with. This area should not be confused with the menu bar or the logo, which belong to a header. The head section is solely for providing meta information about the document.

2. The Title Tag

Within the head section, you define the title of the webpage with the <title>-tag. This title appears in the browser's address bar and is essential for users and search engines. For example, you might use “My Test Title”.

3. Meta Tags

A central component of the head section is the so-called meta tags. The charset tag is particularly important. Specify UTF-8 for international character encoding to ensure that all characters are displayed correctly.

4. The Meta Charset Tag

The meta charset tag is written as: . This is a common standard that supports international character sets. Unlike other tags, the meta tag is not accompanied by a closing tag, as it does not have any content in between.

5. Attributes in HTML Tags

In HTML, attributes can also be used. These are specified in the tag itself and separated by a space. The charset tag has the attribute charset, to which the value “UTF-8” is assigned.

6. Meta Description

Another important meta tag is the meta description, defined by . This description is often displayed in search engines when your page is found, making it significant for SEO.

7. Other Meta Tags

In addition to the previous meta tags, there are many others, such as the robots tag, which gives instructions for search engines, and the viewport tag, which is used for responsive designs. However, these are additional aspects and go beyond the basics.

8. Linking Stylesheets

In the head section, you can also link stylesheets. This is done with the tag . Here, an external CSS file is loaded into the HTML document, resulting in a consistent design.

9. Linking Scripts

To use JavaScript on your website, you can include scripts in the head section. This is done with the tag . This allows you to add functions and logic to your page that enhance the user experience.

10. The Head Section and Its Function

In summary, the head section is a place for meta information and links, not for visible content. The actual content of a webpage is inserted in the -tag. This is important for the structure and performance of your website.

Summary – Head Section and Meta Information in HTML, CSS, and JavaScript

The head section is of central importance in defining basic information and settings for your website. In this guide, you learned how to effectively integrate titles, character encodings, as well as stylesheets and scripts.