HTML Head

The <head> element in HTML is a container for metadata and links to external resources that are essential for the document but are not directly visible to users on the webpage. It is placed inside the <html> element and comes before the <body> element. Here’s a breakdown of what you typically include in the <head> section and examples of each:

Title:
- Sets the title of the document that appears in the browser’s title bar or tab.
```
<title>My Awesome Webpage</title>
```

Meta Tags:

Provide metadata about the HTML document, like character encoding, author, and viewport settings.

<meta charset="UTF-8">
<meta name="description" content="A brief description of the webpage">
<meta name="author" content="Your Name">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Link to Stylesheets:
- Links to external CSS files for styling the webpage.
```
<link rel="stylesheet" href="styles.css">
```
Scripts:
- Links to external JavaScript files or includes internal JavaScript code.
```
<script src="script.js" defer></script>
```
- Internal script example:
```
<script>
  console.log('Hello, World!');
</script>
```

Favicon:

Specifies an icon to be shown in the browser tab.

<link rel="icon" href="favicon.ico" type="image/x-icon">

Additional Metadata:

Custom data and links for specific functionality or services.

<meta property="og:title" content="My Awesome Webpage">
<meta property="og:description" content="A brief description of the webpage">

Example of a Complete `<head>` Section

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="A brief description of the webpage">
    <meta name="author" content="Your Name">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Webpage</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <script src="script.js" defer></script>
</head>
<body>
    <!-- Content of the webpage goes here -->
</body>
</html>

The <head> section helps set up the document's environment and provides the browser with essential information to render the webpage correctly.

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: HTML Head

Next: HTML Semantic Elements

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us

HTML Head

Example of a Complete <head> Section

Your Feedback

Example of a Complete `<head>` Section