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 `<html>` Element

The <html> Element

The <html> element is the fundamental building block of every HTML document. It serves as the root element, encapsulating all the content on a web page. Understanding how to use the <html> element is essential for creating well-structured and valid HTML documents. Let's dive into the details of the <html> element:

The Root of the Document

The <html> element marks the beginning of an HTML document and acts as the root or container for all other HTML elements. Everything within your web page, from text and images to links and scripts, must be enclosed within the <html> element.

<!DOCTYPE html>
<html>
  <!-- Content goes here -->
</html>

Specifying the Document Language

The <html> element allows you to specify the language of your document using the lang attribute. This attribute is particularly important for accessibility and search engine optimization (SEO). By declaring the language, you help assistive technologies understand the content and improve search engine rankings.

<html lang="en">
  <!-- English language content -->
</html>

Organizing the Document Structure

Within the <html> element, your document is divided into two main sections: the <head> section and the <body> section.

1. <head> Section

The <head> section contains metadata and other non-visible information about the document. It typically includes:

  • <meta> tags for character encoding and other document information.
  • <title> for specifying the title of the web page, which appears in the browser's title bar or tab.
  • Links to external resources like stylesheets and JavaScript files.
  • Various <link>, <meta>, and <script> elements.
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

2. <body> Section

The <body> section contains the main content of the web page that is visible to users. It includes headings, paragraphs, images, links, and other elements that form the core of your web page.

<body>
  <h1>Welcome to My Website</h1>
  <p>Explore our content here.</p>
</body>

Comments and Whitespace

You can include comments in your HTML code within the <html> element using <!-- and -->. Comments are not visible on the web page and can be useful for documentation or notes.

<html>
  <!-- This is a comment -->
  <head>
    <!-- More comments here -->
  </head>
  <body>
    <!-- And more comments here -->
  </body>
</html>

HTML also ignores extra whitespace and line breaks within the <html> element, which you can use for formatting and code readability.

The <html> element is the foundation of an HTML document, organizing and containing all the content. Understanding how to structure and utilize this element is the first step in creating well-organized and readable web pages.

Previous Document Type Declaration (<!DOCTYPE>)
Next The `<head>` Section