checkmark

HTML

Introduction to Web and HTML

How the Web Works What is HTML Why Learn HTML

HTML Basics

HTML Structure and Syntax HTML Tags HTML Elements HTML Attributes Anatomy of an HTML Document Creating Your First HTML Page

HTML Document Structure

Document Type Declaration (<!DOCTYPE>) The `<html>` Element The `<head>` Section The `<meta>` Element The `<title>` Element The `<body>` Element HTML Comments

Text Formatting

Headings (<h1> to <h6>) Paragraphs (`<p>`) Line Breaks (`<br>`) Text Formatting Tags Preformatted Text (`<pre>`)

Lists

Unordered Lists (<ul> and <li>) Ordered Lists (<ol> and <li>) Definition Lists (<dl>, <dt>, and <dd>)

Links

Anchor Tags (<a>) Internal Links in html External Links in html Links to Email Addresses Linking to Other Resources Link Target Attributes Image Links

Images

Inserting Images (<img>) Image Attributes Image Formats (JPEG, PNG, GIF) Image Size and Alignment Image Maps

HTML Forms

HTML Form Structure Text Fields and Textareas Radio Buttons and Checkboxes Dropdowns / Select Box Text, Password, and Email Inputs in HTML Forms Date and Time Inputs in HTML Forms Submit and Reset Buttons Form Elements Attributes Form Validation Grouping Form Elements File Uploads Creating a Contact Form

Tables

Table Structure Table Rows and Columns Table Headers Table Data Table Captions Table Borders and Styling Spanning Rows and Columns

Multimedia

Embedding Audio (<audio>) Embedding Video (<video>) Video Formats (MP4, WebM, Ogg) Multimedia Attributes

HTML5 Sematic Elements

HTML5 Structural Elements Role of Semantic Elements Accessibility and SEO

HTML Entities

Special Characters and Symbols Common HTML Entities
menu Back to Edkool

The `<head>` Section

The <head> Section

The <head> section of an HTML document contains important metadata and information that doesn't directly appear on the web page but is essential for various aspects of web development. Understanding how to use the <head> section is crucial for optimizing your web pages and ensuring they function correctly. Let's explore the key components of the <head> section:

1. <meta> Tags

<meta> tags provide essential information about the document. They help browsers and search engines understand and display the content correctly. The most common <meta> tag is for specifying the character encoding of the document:

<meta charset="UTF-8">

This <meta> tag specifies that the document uses UTF-8 character encoding, which supports a wide range of characters and languages.

2. <title>

The <title> element defines the title of the web page, which is displayed in the browser's title bar or tab. It's also used as the default name when users bookmark the page or share it on social media.

<title>Page Title</title>

Choosing a clear and descriptive title is crucial for SEO and user experience.

3. External Resources

The <head> section is where you link to external resources that your web page requires. Common external resources include:

  • Stylesheets (CSS) for controlling the presentation and layout of your page.
  • JavaScript files for adding interactivity and functionality.
  • Favicon files (typically a small image) that appear in the browser's tab next to the title.

For linking to an external stylesheet:

<link rel="stylesheet" type="text/css" href="styles.css">

For linking to an external JavaScript file:

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

For adding a favicon (place this link inside the <head> section):

<link rel="icon" type="image/x-icon" href="favicon.ico">

4. Additional <meta> Tags

The <head> section can contain various other <meta> tags that provide information about the document, such as:

  • Description: <meta name="description" content="A brief description of the page">
  • Author: <meta name="author" content="Your Name">
  • Keywords: <meta name="keywords" content="keyword1, keyword2, keyword3">

These additional <meta> tags can be used for SEO and to provide more context to search engines.

5. Comments

You can include comments in the <head> section using <!-- and -->. Comments are not visible on the web page but are helpful for documentation and notes.

<head>
  <!-- This is a comment about the head section -->
  <meta charset="UTF-8">
  <!-- Another comment about the character encoding -->
</head>

6. Viewport Meta Tag

For responsive web design, it's common to include a viewport meta tag in the <head> section to control how the web page is displayed on various devices. It's particularly important for mobile-friendly design:

<meta name="viewport" content="width=device-width, initial-scale=1">

This meta tag ensures that the page's content adjusts to the width of the device, preventing it from appearing too large or too small on different screens.

In summary, the <head> section of an HTML document contains crucial metadata and information that enhances the functionality, accessibility, and search engine optimization of your web pages. Understanding how to utilize the <head> section is a key aspect of creating professional and effective websites.

Previous The `<html>` Element
Next The `<meta>` Element