No history yet

Introduction to HTML

The Skeleton of the Web

Every website you visit, from a simple blog to a complex news site, is built on a foundation of HTML. HTML stands for HyperText Markup Language, and it's the standard language used to create and structure the content of a webpage. Think of it as the skeleton of a building. It provides the essential framework, defining where the walls, floors, and rooms go. Without it, you’d just have a jumble of materials with no shape or purpose.

HTML works by using 'tags' to label pieces of content. These tags are keywords surrounded by angle brackets, like <p>. They tell the web browser how to display different parts of a page, such as a heading, a paragraph, or an image. Most tags come in pairs: an opening tag like <h1> and a closing tag like </h1>. Everything between them is affected by that tag.

HTML provides the structure, not the style. It's concerned with what the content is (a heading, a list), not how it looks (red, centered). Styling is handled by another language called CSS.

Anatomy of an HTML Page

Every HTML document follows a basic structure. It’s a bit like a formal letter with a header and a body. This structure tells the browser that it's reading an HTML page and where the main content is located.

<!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first webpage.</p>
</body>
</html>

Let’s break that down:

  • <!DOCTYPE html>: This is the very first thing on the page. It’s a declaration that tells the browser this document is an HTML5 page.
  • <html>: This is the root element that wraps everything else on the page.
  • <head>: This section contains meta-information about the page, like the title that appears in your browser tab. Content here isn't displayed on the page itself.
  • <title>: Sets the title of the page.
  • <body>: This is where all the visible content goes—headings, paragraphs, images, and links.

Building with Blocks

Once you have the basic structure, you can start adding content using different tags. The most common tags are for creating text elements like headings, paragraphs, and lists.

Headings give your content a clear hierarchy, making it easier for people (and search engines) to understand. There are six levels, from <h1> (the most important) to <h6> (the least important).

<h1>This is the main heading</h1>
<h2>This is a subheading</h2>
<p>This is a paragraph of text. You can write as much as you want here.</p>
<h3>Another, smaller subheading</h3>
<p>And here is another paragraph.</p>
Lesson image

For organizing items, you have two types of lists: unordered and ordered.

An unordered list, created with <ul>, is for items where the order doesn't matter. Think of a grocery list. Each item in the list is wrapped in a <li> tag.

<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Cheese</li>
</ul>

An ordered list, created with <ol>, is for items where the sequence is important, like steps in a recipe. The browser will automatically number these items for you.

<ol>
  <li>Preheat oven to 350°F.</li>
  <li>Mix ingredients.</li>
  <li>Bake for 30 minutes.</li>
</ol>

Connecting Pages and Adding Images

The web wouldn't be a web without links. To create a link, you use the anchor tag <a>. The most important part of a link is the href attribute, which specifies the destination URL.

<p>You can find more information on the <a href="https://www.wikipedia.org">Wikipedia</a> homepage.</p>

The text between the opening <a> and closing </a> tags becomes the clickable link.

To insert an image, you use the <img> tag. This tag is self-closing, meaning it doesn't need a closing tag. It requires two key attributes: src and alt.

src specifies the path to the image file, and alt provides alternative text that describes the image. The alt text is crucial for accessibility—it’s what screen readers announce to visually impaired users, and what browsers display if the image fails to load.

<img src="images/mona_lisa.jpg" alt="A portrait of the Mona Lisa.">

Ready to check your understanding? Let's see what you've learned.

Quiz Questions 1/6

What does HTML stand for?

Quiz Questions 2/6

In a standard HTML document, which tag contains all the visible content, such as headings, paragraphs, and images?

With these fundamental tags, you have the power to structure any basic webpage. You can create clear hierarchies with headings, organize text with paragraphs and lists, and connect your page to the wider web with links and images.