-
HTML Choosing Editors
-
HTML Basic Structure
-
HTML Head
-
HTML Element
-
HTML Attribute
-
HTML Headings
-
HTML Paragraphs
-
HTML Style
-
HTML Formatting
-
HTML Colors
-
HTML CSS
-
HTML Comments
-
HTML Links
-
HTML Images
-
HTML Table
-
HTML List
-
HTML Block and Inline
-
HTML Class & Id
-
HTML iFrames
-
HTML JavaScript
-
HTML File Paths
-
HTML Layout
-
HTML Responsive
-
HTML Style Guide
-
HTML Forms
HTML Head
What is the HTML head tag?
The <head> element in HTML serves as a container for metadata and other essential information about the web page. While the content inside the <body> element is what’s visible to users, the <head> element contains data that helps browsers and search engines understand and display the page correctly.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Head Example</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
font-family: Arial, sans-serif;
}
</style>
<script src="script.js"></script>
<base href="https://www.example.com/">
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is the main content of my web page.</p>
<noscript>Your browser does not support JavaScript!</noscript>
</body>
</html>
Here’s a breakdown of what you can include in the HTML <head> section:
1. <title>:
The <title> element sets the title of the web page, which appears in the browser’s title bar or tab. It’s also used by search engines for indexing.
<title>My Web Page Title</title>
2. Metadata Tags:
- <meta charset=”UTF-8″>: Specifies the character encoding for the document (usually UTF-8).
- <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>: Defines the viewport settings for responsive web design.
- Other metadata tags for authorship, keywords, and descriptions can also be added.
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
3. <link>:
The <link> element is used to link external resources like stylesheets (CSS) or web fonts. Example:
<link rel=”stylesheet” href=”styles.css”>
4. <style>:
You can include internal CSS styles within the <style> tags. These styles apply to the entire document.
<style>
body {
font-family: Arial, sans-serif;
}
</style>
5. <script>:
The <script> element is used to embed JavaScript code within the HTML document. You can place it in the <head> for scripts that need to be loaded before the page is displayed.
<script src=”script.js”></script>
6. <base>:
The <base> element specifies a base URL for relative URLs within the document.
<base href=”https://www.example.com/”>
7. <noscript>:
This element provides fallback content for users who have disabled JavaScript in their browsers. It’s enclosed within <noscript> tags.
<noscript>Your browser does not support JavaScript!</noscript>
Including these elements in the <head> section of your HTML document helps ensure proper rendering, SEO optimization, and improved user experience. It’s essential for structuring your web page correctly.
