HTML Head - Notes By ShariqSP

Introduction to the <head> Element

The <head> element in HTML contains meta-information about the document, links to stylesheets, scripts, and other resources. It is placed inside the <html> element and before the <body> element.

Common <head> Elements

Here are some commonly used elements within the <head> section:

<title>: Defines the title of the document, which appears in the browser's title bar or tab.
<meta>: Provides metadata such as character set, author, and description.
<link>: Links to external resources like stylesheets.
<script>: Links to or contains JavaScript code.
<style>: Contains internal CSS styles.

Title Element

The <title> element specifies the title of the web page. It is important for SEO and user experience:

<title>My Web Page Title</title>

My Web Page Title

Meta Tags

Meta tags provide metadata about the HTML document. Common meta tags include:

<meta charset="UTF-8">: Specifies the character encoding.
<meta name="description" content="A description of the page">: Provides a description of the page for search engines.
<meta name="keywords" content="HTML, CSS, JavaScript">: Lists keywords relevant to the content.
<meta name="author" content="Author Name">: Specifies the author of the document.

<meta charset="UTF-8">
<meta name="description" content="A detailed overview of the HTML head element">
<meta name="keywords" content="HTML, head, meta tags, title">
<meta name="author" content="ShariqSP">

Linking Stylesheets

The <link> element is used to link external stylesheets:

<link rel="stylesheet" href="styles.css">

Embedding JavaScript

The <script> element is used to include JavaScript files or code. You can include it either internally or link to an external file:

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

Internal Styles

Use the <style> element to include internal CSS styles:

<style>
body {
    background-color: #f4f4f4;
}
h1 {
    color: #333;
}
</style>