HTML Introduction

Introduction to HTML

What is HTML?

HTML is the standard markup language used to create and structure content on the World Wide Web.

HTML stands for HyperText Markup Language.
It’s not a programming language; it’s a markup language used to describe the structure and semantics (meaning) of web content.
HTML uses tags to define elements like headings, paragraphs, images, links, and more.
Web browsers interpret HTML tags to render the visual presentation of the content.

Basic HTML Example

Here’s a simple but complete HTML5 document:

<!DOCTYPE html>
<html lang="en">  <!-- 'lang' specifies the document language -->
<head>
  <meta charset="UTF-8"> <!-- Declares character encoding -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Configures viewport for responsiveness -->
  <title>Page Title</title> <!-- Appears in the browser tab -->
</head>
<body>

  <h1>My First Heading</h1>
  <p>My first paragraph.</p>

</body>
</html>

Example Explained

<!DOCTYPE html>: Declares the document type as HTML5 (essential for modern browsers).
<html>: The root element, wrapping all other content.
<head>: Contains meta-information about the document (not displayed on the page).
<meta charset="UTF-8">: Specifies the character encoding, allowing proper display of text characters.
<meta name="viewport" ...>: Configures how the page should be displayed on different devices, crucial for responsive design.
<title>: Sets the title shown in the browser tab or window title bar.
<body>: Contains the actual content visible to the user (text, images, links, etc.).
<h1>: Defines a top-level heading.
<p>: Defines a paragraph.

A web browser reads this HTML, understands the tags, and renders the heading and paragraph visually.

HTML Tags

HTML tags are element names enclosed in angle brackets (< and >).

`<tagname>content goes here...</tagname>`

Most HTML tags come in pairs: a start tag (e.g., <p>) and an end tag (e.g., </p>).
The end tag is identical to the start tag but includes a forward slash (/) before the tag name.
The content is placed between the start and end tags.
Some tags, called empty or void elements (like <img>, <br>, <hr>, <input>), do not enclose content and don’t require an end tag in HTML5. They might be self-closed (<hr />) for XHTML compatibility, but the slash is optional in HTML5.

Web Browsers

Web browsers (such as Chrome, Firefox, Safari, Edge) are software applications that retrieve, process, and render web pages.

The browser’s primary job related to HTML is to:

Read the HTML document.
Parse the tags to understand the structure and content.
Combine HTML structure with CSS styling and JavaScript behavior.
Render the final visual representation on the screen.

Browsers do not display the HTML tags themselves; they use the tags to determine how to display the content.

HTML Page Structure Visualization

Imagine a nested structure:

+------------------------------------+
| <html>                             |
| +--------------------------------+ |
| | <head>                         | |
| |   (Metadata: title, charset) | |
| +--------------------------------+ |
| +--------------------------------+ |
| | <body>                         | |
| |   <h1>Heading</h1>             | |
| |   <p>Paragraph.</p>            | |
| |   (Visible Content Area)       | |
| +--------------------------------+ |
+------------------------------------+

Generally, only the content inside the <body> element is directly visible in the main browser window.

The `<!DOCTYPE>` Declaration

The <!DOCTYPE html> declaration is crucial. It must be the very first thing in your HTML document.

It tells the browser to render the page in “standards mode,” ensuring it interprets the HTML and CSS according to the latest web standards (HTML5). Without it, browsers might fall back to “quirks mode,” leading to inconsistent rendering.

While older HTML versions (like HTML 4.01 or XHTML 1.0) had different, more complex DOCTYPE declarations, for modern web development, you only need to use <!DOCTYPE html>.

HTML Versions History

HTML has evolved significantly since its inception:

Version	Year
HTML	~1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2014 (Standardized)
HTML Living Standard	Ongoing

HTML5 is the current major version and the foundation for modern web development. It’s continuously updated as a “Living Standard” by the WHATWG.