HTML Basics

The Foundation of Every Web Page

Author Avatar By John Doe | Published on

Welcome to the fundamental building blocks of the internet! HyperText Markup Language, or HTML, is the standard markup language used to create web pages. It defines the structure and content of a web page, telling browsers what to display and how to organize it.

What is HTML?

At its core, HTML is a system of tags. These tags are keywords surrounded by angle brackets (<tagname>). Most tags come in pairs: an opening tag and a closing tag (</tagname>). The content between these tags is what gets rendered by the browser.

For example, a paragraph is defined using the <p> tag:

<p>This is a paragraph of text.</p>

Essential HTML Tags

Let's explore some of the most common and crucial HTML tags:

Headings

Headings are used to title sections and subsections. There are six levels, from <h1> (the most important) to <h6> (the least important).

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

Paragraphs

The <p> tag is used for text paragraphs.

<p>This is the first paragraph. It contains some introductory text.</p>
<p>This is the second paragraph. It continues the discussion.</p>

Links

Hyperlinks allow users to navigate between web pages. The anchor tag <a> is used, with the href attribute specifying the destination URL.

<a href="https://www.example.com">Visit Example.com</a>

Images

To display an image, we use the <img> tag. It's a self-closing tag and requires the src attribute for the image source and the alt attribute for alternative text (important for accessibility).

A placeholder image illustrating web content
An example of an image displayed using the <img> tag.
<img src="path/to/your/image.jpg" alt="Description of the image">

Lists

HTML supports ordered (numbered) and unordered (bulleted) lists.

Unordered Lists (<ul>) use list items (<li>):

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered Lists (<ol>) also use list items:

<ol>
  <li>First Step</li>
  <li>Second Step</li>
</ol>

The Basic Structure of an HTML Document

Every HTML document follows a standard structure:

  1. <!DOCTYPE html>: Declares the document type and version of HTML.
  2. <html>: The root element of an HTML page.
  3. <head>: Contains meta-information about the HTML document, such as character set, title, and links to stylesheets.
  4. <body>: Contains the visible page content, such as headings, paragraphs, images, and links.

Here's a minimal HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my very first HTML page.</p>
</body>
</html>

Why Learn HTML?

HTML is the bedrock of web development. Understanding it is the first step to creating websites, building web applications, and contributing to the digital world. It works hand-in-hand with CSS (for styling) and JavaScript (for interactivity) to create dynamic and engaging user experiences.

"The Web as I envisage it, we have some links of course, but it's much more than that. It's our way of interacting, collaborating, and building... That's what I hope the Web will become." - Tim Berners-Lee

Continue your learning journey by exploring CSS for styling and JavaScript for dynamic behavior!