• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Head

← Previous Next →

🔹 What is the <head> in HTML?

The <head> tag is a container for metadata and is placed before the <body> tag. It holds information about the web page such as title, character set, styles, scripts, and more. Content inside <head> does not appear visually on the web page.

🔹 Basic Structure
<!DOCTYPE html>
<html>
  <head>
    <!-- Metadata goes here -->
  </head>
  <body>
    <!-- Page content goes here -->
  </body>
</html>

🔹 Common Tags Inside <head>

Tag Purpose
<title> Sets the title in browser tab
<meta> Provides metadata like description, author, charset
<link> Links external resources like CSS or favicon
<style> Adds internal CSS
<script> Adds or links JavaScript
<base> Sets a base URL for all relative URLs in the document

🔹 Detailed Examples

✅ <title> – Sets the page title
<title>My Awesome Website</title>
✅ <meta> – Adds metadata
<meta charset="UTF-8">
<meta name="description" content="A beginner’s guide to HTML">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
✅ <link> – Links external resources (e.g., CSS, favicon)
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
✅ <style> – Internal CSS
<style>
  body {
    background-color: #f2f2f2;
    font-family: Arial, sans-serif;
  }
</style>
✅ <script> – JavaScript
<script>
  console.log("Welcome to my website!");
</script>

Or external:

<script src="script.js"></script>

Practice Questions

Q1. Add a <title> tag to your HTML document.

Q2. Include a <meta> tag to set UTF-8 character encoding.

Q3. Write a <meta> tag with a page description.

Q4. Link a CSS file called main.css using <link>.

Q5. Use <style> inside the <head> to change body text color.

Q6. Insert JavaScript code using <script> to display an alert.

Q7. Set a favicon with <link rel="icon">.

Q8. Use <meta name="viewport"> for responsive design.

Q9. Create a <head> section with all standard tags.

Q10. Add a <base> tag to set the base URL for your links.

HTML Head Quiz

Q1: What is the main purpose of the <head> tag?

A. Display content
B. Show header
C. Contain metadata
D. Style the footer

Q2: Which tag defines the title shown in the browser tab?

A. <header>
B. <meta>
C. <title>
D. <h1>

Q3: What does <meta charset="UTF-8"> do?

A. Links CSS
B. Sets document language
C. Sets character encoding
D. Creates a comment

Q4: What tag is used to link an external CSS file?

A. <style>
B. <script>
C. <meta>
D. <link>

Q5: Which tag is used to set a favicon?

A. <icon>
B. <favicon>
C. <link rel="icon">
D. <meta icon>

Q6: Where should the <head> tag appear?

A. Before <!DOCTYPE>
B. Inside <body>
C. After <body>
D. Before <body>

Q7: What tag sets responsive behavior for mobile devices?

A. <responsive>
B. <media>
C. <meta name="viewport">
D. <device>

Q8: Which of the following tags is not usually placed in <head>?

A. <meta>
B. <title>
C. <footer>
D. <style>

Q9: Which tag is used to embed internal CSS styles?

A. <css>
B. <script>
C. <style>
D. <design>

Q10: What does <script src="app.js"> do?

A. Adds a link
B. Includes a CSS file
C. Links a JavaScript file
D. Adds a favicon
← Previous Next →
Login
Go Back Top