The <head> element in HTML is a container for metadata (data about data) and links to external resources that are related to the document. It is placed between the <html> and <body> tags and typically includes information such as the document title, character set, styles, scripts, and other meta-information.
Common Elements in the <head>
1. <title>: Specifies the title of the document, which is displayed in the browser’s title bar or tab.
2. <meta>: Provides metadata such as character set, author, description, keywords, and viewport settings.
3. <link>: Links to external resources like stylesheets, icons, and prefetching.
4. <style>: Embeds internal CSS styles.
5. <script>: Embeds or links to JavaScript code.
Example
Here’s a basic example of a <head> section:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A brief description of the page">
<meta name="keywords" content="HTML, CSS, JavaScript, tutorial">
<meta name="author" content="Your Name">
<title>Document Title</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style>
/* Internal CSS */
body {
font-family: Arial, sans-serif;
}
</style>
<script src="script.js" defer></script>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
Explanation of the Example
1. <meta charset="UTF-8">: Sets the character encoding for the document to UTF-8.
2. <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures proper rendering and touch zooming on mobile devices.
3. <meta name="description" content="A brief description of the page">: Provides a short description of the page, useful for search engines.
4. <meta name="keywords" content="HTML, CSS, JavaScript, tutorial">: Lists keywords relevant to the page content, aiding in SEO.
5. <meta name="author" content="Your Name">: Specifies the author of the document.
6. <title>Document Title</title>: Sets the title of the web page.
7. <link rel="stylesheet" href="styles.css">: Links to an external CSS stylesheet.
8. <link rel="icon" href="favicon.ico" type="image/x-icon">: Links to the favicon of the website.
9. <style>: Contains internal CSS styles.
10. <script src="script.js" defer></script>: Links to an external JavaScript file with the defer attribute, ensuring the script is executed after the document has been parsed.
Importance of the <head> Element
SEO: Meta tags like description and keywords help search engines understand the content and relevance of the page.
Accessibility: Proper metadata can improve the accessibility of the webpage.
Performance: External resources such as stylesheets and scripts linked in the <head> can be loaded efficiently to optimize page performance.
User Experience: The title and favicon enhance the user experience by providing meaningful information and visual cues.
By organizing these elements within the <head>, you can ensure that your webpage is well-optimized, accessible, and user-friendly.
HTML Head – Interview Questions
Q 1: What is the tag used for?
Ans: It contains metadata about the document.
Q 2: Is visible on the page?
Ans: No.
Q 3: Name some elements inside .
Ans: , , , .</div></div><div class="qa-item"><h5 class="question fw-bold">Q 4: Where is placed?</h5><div class="answer"><b>Ans:</b> Between and .</div></div><div class="qa-item"><h5 class="question fw-bold">Q 5: Why is important?</h5><div class="answer"><b>Ans:</b> It improves SEO, performance, and metadata handling.</div></div></div>
</div>
<h2 class="wp-block-heading">HTML Head – Objective Questions (MCQs)</h2>
<div class="quiz-section">
<div class="quiz-box">
<div class="quiz-question" id="quiz_0">
<p><strong>Q1. Which tag contains metadata and links to scripts and stylesheets in HTML?</strong></p>
<label class="quiz-option">
<input type="radio"
name="quiz_0"
value="a"
data-correct-key="a"
data-correct-html="<head>">
<span><head></span>
</label><br>
<label class="quiz-option">
<input type="radio"
name="quiz_0"
value="b"
data-correct-key="a"
data-correct-html="<head>">
<span><header></span>
</label><br>
<label class="quiz-option">
<input type="radio"
name="quiz_0"
value="c"
data-correct-key="a"
data-correct-html="<head>">
<span><meta></span>
</label><br>
<label class="quiz-option">
<input type="radio"
name="quiz_0"
value="d"
data-correct-key="a"
data-correct-html="<head>">
<span><body></span>
</label><br>
<div id="result_quiz_0" class="quiz-result" style="margin-top:8px;"></div>
<hr>
</div>
<div class="quiz-question" id="quiz_1">
<p><strong>Q2. Which tag is used inside to link an external CSS file?</strong></p>
<label class="quiz-option">
<input type="radio"
name="quiz_1"
value="a"
data-correct-key="b"
data-correct-html="<link>">
<span><style></span>
</label><br>
<label class="quiz-option">
<input type="radio"
name="quiz_1"
value="b"
data-correct-key="b"
data-correct-html="<link>">
<span><link></span>
</label><br>
<label class="quiz-option">
<input type="radio"
name="quiz_1"
value="c"
data-correct-key="b"
data-correct-html="<link>">
<span><css></span>
</label><br>
<label class="quiz-option">
<input type="radio"
name="quiz_1"
value="d"
data-correct-key="b"
data-correct-html="<link>">
<span><script></span>
</label><br>
<div id="result_quiz_1" class="quiz-result" style="margin-top:8px;"></div>
<hr>
</div>
<div class="quiz-question" id="quiz_2">
<p><strong>Q3. Which tag is used to define character encoding in ?</strong></p>
<label class="quiz-option">
<input type="radio"
name="quiz_2"
value="a"
data-correct-key="a"
data-correct-html="<meta charset="UTF-8">">
<span><meta charset="UTF-8"></span>
</label><br>
<label class="quiz-option">
<input type="radio"
name="quiz_2"
value="b"
data-correct-key="a"
data-correct-html="<meta charset="UTF-8">">
<span><charset></span>
</label><br>
<label class="quiz-option">
<input type="radio"
name="quiz_2"
value="c"
data-correct-key="a"
data-correct-html="<meta charset="UTF-8">">
<span><encoding></span>
</label><br>
<label class="quiz-option">
<input type="radio"
name="quiz_2"
value="d"
data-correct-key="a"
data-correct-html="<meta charset="UTF-8">">
<span><meta encoding="UTF-8"></span>
</label><br>
<div id="result_quiz_2" class="quiz-result" style="margin-top:8px;"></div>
<hr>
</div>
<div class="quiz-question" id="quiz_3">
<p><strong>Q4. Can the tag be placed inside ?</strong></p>
<label class="quiz-option">
<input type="radio"
name="quiz_3"
value="a"
data-correct-key="a"
data-correct-html="Yes">
<span>Yes</span>
</label><br>
<label class="quiz-option">
<input type="radio"
name="quiz_3"
value="b"
data-correct-key="a"
data-correct-html="Yes">
<span>No</span>
</label><br>
<label class="quiz-option">
<input type="radio"
name="quiz_3"
value="c"
data-correct-key="a"
data-correct-html="Yes">
<span>Only in HTML5</span>
</label><br>
<label class="quiz-option">
<input type="radio"
name="quiz_3"
value="d"
data-correct-key="a"
data-correct-html="Yes">
<span>Only in XHTML</span>
</label><br>
<div id="result_quiz_3" class="quiz-result" style="margin-top:8px;"></div>
<hr>
</div>
<div class="quiz-question" id="quiz_4">
<p><strong>Q5. Which of the following is NOT placed in the ?</strong></p>
<label class="quiz-option">
<input type="radio"
name="quiz_4"
value="a"
data-correct-key="c"
data-correct-html="<h1>">
<span><title></span>
</label><br>
<label class="quiz-option">
<input type="radio"
name="quiz_4"
value="b"
data-correct-key="c"
data-correct-html="<h1>">
<span><link></span>
</label><br>
<label class="quiz-option">
<input type="radio"
name="quiz_4"
value="c"
data-correct-key="c"
data-correct-html="<h1>">
<span><h1></span>
</label><br>
<label class="quiz-option">
<input type="radio"
name="quiz_4"
value="d"
data-correct-key="c"
data-correct-html="<h1>">
<span><meta></span>
</label><br>
<div id="result_quiz_4" class="quiz-result" style="margin-top:8px;"></div>
<hr>
</div>
</div>
</div>
<h2 class="wp-block-heading">Related HTML Head Topics</h2>
<div class="related-box">
<ul>
<li><a href="/html-page-title">HTML Page Title</a></li>
<li><a href="/html-favicon">HTML favicon</a></li>
<li><a href="/html-css">HTML CSS</a></li>
<li><a href="/html-javascript">HTML JavaScript</a></li>
</ul>
</div>
</div><!-- .entry-content -->
<!-----Next and Previous Post Links---->
<div class="post-navigation-bottom mb-2">
<a href="https://www.techfliez.com/html-javascript" class="previous-post-link">Previous</a>
<a href="https://www.techfliez.com/html-responsive" class="next-post-link">Next</a>
</div>
<!-----End, Next and Previous Post Links---->
<footer class="entry-footer">
</footer><!-- .entry-footer -->
</article><!-- #post-## -->
<div class="loop-nav">
</div><!-- .loop-nav -->
</main><!-- #main -->
</div><!-- #primary -->
<div id="right-section">
<!--<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>-->
<!-- right-sidebar -->
<!--<ins class="adsbygoogle"-->
<!-- style="display:block"-->
<!-- data-ad-client="ca-pub-8283729590890465"-->
<!-- data-ad-slot="3334646795"-->
<!-- data-ad-format="auto"-->
<!-- data-full-width-responsive="true"></ins>-->
<!--<script>-->
<!-- (adsbygoogle = window.adsbygoogle || []).push({});-->
<!--</script>-->
<!--<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>-->
<!-- right-sidebar2 -->
<!--<ins class="adsbygoogle"-->
<!-- style="display:block"-->
<!-- data-ad-client="ca-pub-8283729590890465"-->
<!-- data-ad-slot="3983166447"-->
<!-- data-ad-format="auto"-->
<!-- data-full-width-responsive="true"></ins>-->
<!--<script>-->
<!-- (adsbygoogle = window.adsbygoogle || []).push({});-->
<!--</script>-->
</div>
</div><!-- #content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="footer-item">
<div class="row col-sm-12">
<div class="col-sm-4">
<div class="footer-heading-label">Why use techfliez.com?</div>
<div>We provide a free online e-learning tutorial portal written in an easy way to teach a programming language for those students who want to learn a programming language with a live example.</div>
<div class="row col-sm-12 mt-3 font-weight-bold mb-3">Follow Us: </div>
<div class="row col-sm-12">
<div class="footer-social-links">
<a href="https://www.facebook.com/techfliez/" target="_blank"><i class="fa fa-facebook social-link" style="padding-right:10px;"></i></a>
<a href="https://www.youtube.com/@techFliez" target="_blank"><i class="fa fa-youtube social-link" style="padding-right:10px;"></i></a>
<a href="https://www.linkedin.com/company/techfliez-academy" target="_blank"><i class="fa fa-linkedin social-link"></i></a>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="footer-heading-label">Tutorials</div>
<ul class="footer-course-list">
<li><a href="/introduction-to-java">Java Tutorial</a></li>
<li><a href="/what-is-python">Python Tutorial</a></li>
<li><a href="/what-is-c">C Tutorial</a></li>
<li><a href="/what-is-cpp">C++ Tutorial</a></li>
<li><a href="/what-is-csharp">C# Tutorial</a></li>
<li><a href="/what-is-Django">Django Tutorial</a></li>
<li><a href="/what-is-html">HTML Tutorial</a></li>
<li><a href="/css-introduction">CSS Tutorial</a></li>
<li><a href="/what-is-javascript">JavaScript Tutorial</a></li>
<li><a href="/what-is-angular">Angular Tutorial</a></li>
<li><a href="/what-is-reactjs">ReactJs Tutorial</a></li>
<li><a href="/what-is-nodejs">Nodejs Tutorial</a></li>
<li><a href="/what-is-typescript">TypeScript Tutorial</a></li>
<li><a href="/what-is-php">PHP Tutorial</a></li>
<li><a href="/what-is-sql">SQL Tutorial</a></li>
<li><a href="/what-is-mongodb">MongoDB Tutorial</a></li>
</ul>
</div>
<div class="col-sm-1">
<div class="footer-heading-label">Editor</div>
<ul class="footer-course-list">
<li><a href="/html/trycode.php">HTML Editor</a></li>
<li><a href="/js/trycode.php">JavaScript Editor</a></li>
<li><a href="/php/trycode.php">PHP Editor</a></li>
</ul>
</div>
<div class="col-sm-3">
<div class="footer-heading-label">Interview Questions</div>
<ul class="footer-course-list">
<li><a href="/html-interview-questions">HTML Interview Questions </a></li>
<li><a href="/css-interview-questions">CSS Interview Questions </a></li>
<li><a href="/angular-interview-questions">Angular Interview Questions </a></li>
<li><a href="/reactjs-interview-questions">Reactjs Interview Questions </a></li>
<li><a href="/nodejs-interview-questions">Nodejs Interview Questions </a></li>
<li><a href="/mongodb-interview-questions">MongoDB Interview Questions </a></li>
<li><a href="/php-interview-questions">PHP Interview Questions </a></li>
<li><a href="/mysql-interview-questions">MySql Interview Questions </a></li>
<li><a href="/python-interview-questions">Python Interview Questions </a></li>
<li><a href="/django-interview-questions">Django Interview Questions </a></li>
</ul>
</div>
<div class="col-sm-2">
<div class="footer-heading-label">Pages</div>
<ul class="footer-course-list">
<li><a href="/about-us">About Us </a></li>
<li><a href="/contact-us">Contact Us </a></li>
</ul>
</div>
</div>
<div class="footer-text">
Copyright ©2026 <a href="https://www.techfliez.com">techfliez.com</a>
</div>
<div class="site-info">
</div><!-- .site-info -->
</div><!-- .footer-item -->
</footer><!-- #colophon -->
</div><!-- #page -->
<script>document.documentElement.className = 'js';</script>
<script type="text/javascript" src="https://www.techfliez.com/wp-content/themes/removeload/assets/js/plugins.min.js" id="delivery-plugins-js"></script>
<script type="text/javascript" src="https://www.techfliez.com/wp-content/themes/removeload/assets/js/main.min.js" id="delivery-main-js"></script>
<script type="text/javascript" src="https://www.techfliez.com/wp-includes/js/comment-reply.min.js?ver=6.7.5" id="comment-reply-js" async="async" data-wp-strategy="async"></script>
<script src="https://www.techfliez.com/wp-content/themes/removeload/assets/js/prism.js"></script>
<script>
document.querySelectorAll(".quiz-box input[type=radio]").forEach(input => {
input.addEventListener("change", function() {
const id = this.name;
const correctKey = this.dataset.correctKey;
const correctHtml = this.dataset.correctHtml;
const resultBox = document.getElementById("result_" + id);
if (!resultBox) return;
const selectedKey = this.value;
const options = document.querySelectorAll(`input[name="${this.name}"]`);
// Reset previous styles and result
resultBox.innerHTML = "";
resultBox.className = "quiz-result";
options.forEach(opt => opt.parentElement.style.color = "");
if (selectedKey === correctKey) {
// ✅ Correct answer selected
resultBox.innerHTML = "✅ <strong>Correct!</strong>";
resultBox.classList.add("correct");
this.parentElement.style.color = "green";
} else {
// ❌ Wrong answer selected
resultBox.classList.add("wrong");
this.parentElement.style.color = "red";
// Find correct answer text
const correctOption = Array.from(options).find(opt => opt.value === correctKey);
const correctText = correctOption ? correctOption.nextElementSibling.innerHTML : "";
// Show wrong + correct answer text after all options
resultBox.innerHTML = "❌ <strong>Wrong!</strong><br><br>✅ <em>Correct Answer:</em> " + correctText;
}
});
});
</script>
</body>
</html>