⬅ Previous Next ➡

6. Head Section Elements

Head Section Elements
  • The Head Section (<head>): This section acts as a container for metadata (data about data). It is processed by the browser and search engines but its content is not visible on the actual webpage (except for the Title).
  • Common Head Elements:
    • <title>: Defines the title of the document.
      • Shows up in the browser tab.
      • Used by search engines (SEO) as the main heading in search results.
    • <meta>: Used to specify character sets, page descriptions, keywords, and viewport settings.
      • Charset: <meta charset="UTF-8"> ensures all characters/symbols display correctly.
      • Viewport: Makes the website look good on all devices (mobile responsive).
    • <link>: Used to connect the HTML file to external resources.
      • Most commonly used to link CSS Stylesheets: <link rel="stylesheet" href="style.css">.
      • Also used for "favicons" (the small icon on the browser tab).
    • <style>: Used to write Internal CSS directly within the HTML file.
      • Example: Changing the background color of the body within the head section.
    • <script>: Used to include JavaScript code to make the page interactive.
      • Can be used to write code directly or link to an external .js file.
    • <base>: Specifies a default URL or target for all relative links in a document.
<!DOCTYPE html>
<html>
<head>

<!-- 1. Character Encoding -->
<meta charset="UTF-8">

<!-- 2. Page Title -->
<title>My Learning Page</title>

<!-- 3. Linking External CSS -->
<link rel="stylesheet" href="styles.css">

<!-- 4. Internal CSS -->
<style>
  h1 { color: blue; }
</style>

<!-- 5. Internal JavaScript -->
<script>
  console.log("Hello from the head section!");
</script>

</head>
<body>

<h1>Content goes here</h1>

</body>
</html>
⬅ Previous Next ➡