HTML – OVERVIEW
Easy Learning with HTML "Try it Yourself"
HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
| Tag | Description |
|---|---|
| <!DOCTYPE...> | This tag defines the document type and HTML version. |
| <html> | The root tag for an HTML document is the <html> tag. It serves as the container for all content within an HTML document, ensuring that the browser understands the document's structure. Everything in the HTML document is nested inside the <html> tag. |
| <head> | Contains <metadata>, <like> the document <title>, <scripts>, and <styles> |
| <title> | Specifies the page title displayed in the browser tab. |
| <body> | The <body>tag in HTML is used to enclose the visible content of a web page. This includes all the text, images, videos, links, and other elements that are displayed in the browser. |
Text Formatting Tags
| Tag | Description |
|---|---|
| <h1> to <h6> | Do you want to know about HTML heading tags (<h1> to <h6>) and their use in web design? |
| <P> | Are you asking about how to write effective paragraphs for essays, articles, or stories |
| <a> | link Do you want to learn how to create links in HTML or web pages?; |
| <img> | In HTML, self-closing tags are tags that do not require a closing tag because they do not enclose any content. The <img> tag is a classic example of a self-closing tag used to embed images into a webpage. |
Example of Complete HTML Document
A typical HTML document will have the following structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<main>
<section>
<h2>Section Title</h2>
<p>This is a paragraph of text.</p>
</section>
</main>
<footer>
<p>© 2024 Your Name. All rights reserved.</p>
</footer>
</body>
</html>
The <!DOCTYPEl> declaration is an essential part of an HTML document. It tells the browser which version of HTML the document is written in, ensuring proper rendering and compatibility.
Key Points About <!DOCTYPE>
1.Purpose:
(i) Informs the browser of the HTML version being used.
(ii) Ensures the browser renders the page in standards mode rather than quirks mode (a backward-compatibility mode).
2.Placement:
It must be the very first line in an HTML document, before any other tags or content.
3.HTML5 <!DOCTYPE> Declaration:
<!DOCTYPE html>
(i) Case-insensitive: <!DOCTYPE HTML> works the same.
(ii) Simplified: Unlike earlier versions, HTML5 doesn't require a reference to a DTD (Document Type Definition).
Older Versions:
HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
>
These declarations reference DTDs and are much more complex than the HTML5 version.
Why is <!DOCTYPE> Important?
Standards Mode:
(i) Ensures modern browser features are used.
(ii) Provides consistent layout and behavior.
Quirks Mode:
If the <!DOCTYPE> is missing or incorrect, browsers may interpret the page in quirks mode, leading to inconsistent behavior, especially for older designs.