Basic HTML

Home / Topic / Basic HTML / HTML Head and Metadata

HTML Head and Metadata

The `<head>` Section

The <head> section of an HTML document contains information about the page that is not directly displayed in the visual content, but is essential for functionality and search engine ranking. Here, elements like the title, metadata, and links to external resources are included.

html

"This header example includes a title. Although the head's content is not displayed on the page, the title does appear in the browser tab."

Meta Tags (`<meta>`)

The <meta> tags provide metadata about the page, such as the character set and page description. They are essential for accessibility and search engine optimization.

html

"This code uses two meta tags. The first specifies the character set as UTF-8, and the second adds a description for search engine optimization."

Title Tag (`<title>`)

The <title> tag sets the title that appears in the browser tab and is used by search engines to identify the page. Each HTML document should have a single title.

html

"The title tag contains the text that will be displayed in the browser tab. In this case, it is shown as Example Page."

Linking External Resources (CSS, JavaScript)

We can link external stylesheets and scripts within the <head> section. This allows us to add styles and functionality to our HTML page.

html

"Here we link a CSS stylesheet with the link attribute and a JavaScript file with the script tag. The defer attribute ensures that the script is executed after the HTML has loaded."

Favicon

The favicon is the small icon that appears in the browser tab next to the page title. Adding a favicon helps improve your website's identity.

html

"To add a favicon, we use the link tag with rel equal to icon, pointing to a small image file. This icon will appear on the browser tab."

Chapter Conclusion

You now have a basic understanding of the structure of the <head> section and how metadata contributes to the functionality and visibility of an HTML page. In the next chapter, we will explore the importance of semantic tags and how they help improve accessibility and content structure.

Back to previous chapter

Mark as read and continue

Ask me anything