The HTML < head> element serves as a container for metadata, which is data about the data in your document. It is placed between the < html> tag and the < body> tag in an HTML document.
Head The content within the <head> element is not displayed directly on the webpage when it loads in a browser. Instead, it contains essential metadata about the HTML document, helping define various aspects such as the document title, character set, styles, links, and scripts.
Metadata within the <head> section plays a crucial role in defining how a webpage behaves and is presented. While the amount of metadata can vary depending on the requirements, it often includes the following tags:
<title>:Sets the title of the web page, which appears in the browser tab.
<style>: Embeds internal CSS styles for the webpage.
<meta>: Provides metadata such as character set, viewport settings, and search engine descriptions.
<link>: Links to external resources like CSS files and icons.
<script>: Embeds or links to JavaScript files.
<base>: Specifies a base URL for all relative URLs in the document.
Browser Tab Title: The text inside the <title> element is displayed in the browser tab. Favorites Title: When a user bookmarks or adds the page to their favorites, the title specified in the <title> element is used as the bookmark name. Search Engine Results: Search engines display the title of the page as part of the search results, making it an essential component for SEO (Search Engine Optimization).
<!DOCTYPE html>
<html>
<head>
<title>TITLE FOR THE PAGE</title>
</head>
<body>
<p>CONTENT OR PARAGRAPH HERE</p>
</body>
</html>
The HTML <style> element is used to apply CSS (Cascading Style Sheets) directly within an HTML document. This allows you to style the content of the page without needing an external CSS file. However, for styling multiple pages consistently, it's recommended to use a separate CSS file.
Scoped Styling: The CSS rules defined within the <style> element apply only to the HTML document in which they are written.
Placement: The <style> element should be placed within the <head> section of the HTML document.
Single Page Styling: Ideal for small projects or single pages where external CSS might be unnecessary.
Testing and Prototyping: Useful for quickly testing CSS rules or for prototyping before moving styles to an external file.
<!DOCTYPE html>
<html>
<head>
<title>TITLE FOR THE PAGE</title>
</head>
<body>
<p>CONTENT OR PARAGRAPH HERE</p>
</body>
</html>
The HTML <link> element is essential for linking an external style sheet to your webpage. It allows you to maintain consistency in styling across multiple pages by referencing a separate CSS file.
rel: Specifies the relationship between the current document and the linked resource. When linking a stylesheet, the value should be "stylesheet".
href: Specifies the path to the external CSS file. This attribute is required and points to the location of the CSS file.
Centralized Styling: Allows you to maintain a single CSS file that styles multiple pages, promoting consistency in design and layout.
Efficiency: Separates content (HTML) from presentation (CSS), making your codebase cleaner and easier to manage.
Browser Caching: External CSS files linked via <link> are often cached by browsers, improving page load times for subsequent visits.
<!DOCTYPE html>
<html>
<head>
<title>This is title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Web-page with external CSS</h2>
<p>This is looking a cool page</p>
</body>
</html>
The HTML <meta> element is crucial for providing metadata—data about data—related to your webpage. It offers a way to specify information like character set, page description, keywords, authors, and more, which browsers, search engines, and other web services utilize for various purposes, including better ranking in search results.
Character Set: Defines the character encoding for the HTML document using the charset attribute.
Viewport Settings: Specifies how the webpage should be scaled on different devices using the viewport meta tag.
Description: Provides a concise summary or description of the webpage using the description meta tag.
Keywords: Lists relevant keywords that describe the content of the webpage using the keywords meta tag.
Authorship: Indicates the author(s) of the webpage using the author meta tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>paragraph here</p>
</body>
</html>