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="/javascript-tutorial">JavaScript Tutorial</a></li>
<li><a href="/angular-tutorial">Angular Tutorial</a></li>
<li><a href="/react-tutorial">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 type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/removeload/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<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.9.7" id="comment-reply-js" async="async" data-wp-strategy="async" fetchpriority="low"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://www.techfliez.com/wp-includes/js/wp-emoji-release.min.js?ver=6.9.7"}}
</script>
<script type="module">
/* <![CDATA[ */
/*! This file is auto-generated */
var e="script#wp-emoji-settings",t=document.querySelector(e);if(!(t instanceof HTMLScriptElement))throw new Error("Element missing: "+e);const r=JSON.parse(t.text),s=(window._wpemojiSettings=r,"wpEmojiSettingsSupports"),o=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(s,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const r=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===r[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,r){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!r(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,r){let a;const s=(a="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),o=(s.textBaseline="top",s.font="600 32px Arial",{});return e.forEach(e=>{o[e]=t(s,e,n,r)}),o}function a(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}r.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(s));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(o),u.toString(),c.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"});const a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=e=>{i(n=e.data),a.terminate(),t(n)})}catch(e){}i(n=f(o,u,c,p))}t(n)}).then(e=>{for(const n in e)r.supports[n]=e[n],r.supports.everything=r.supports.everything&&r.supports[n],"flag"!==n&&(r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&r.supports[n]);var t;r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&!r.supports.flag,r.supports.everything||((t=r.source||{}).concatemoji?a(t.concatemoji):t.wpemoji&&t.twemoji&&(a(t.twemoji),a(t.wpemoji)))});
//# sourceURL=https://www.techfliez.com/wp-includes/js/wp-emoji-loader.min.js
/* ]]> */
</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>