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. Think of HTML as the skeleton of a webpage. It provides the basic structure and organizes all the content, telling the browser what's a heading, what's a paragraph, and where to put an image.

HTML

noun

Stands for HyperText Markup Language. It's the standard language used to create and structure documents on the World Wide Web.

HTML uses tags to define these different pieces of content. A tag is usually a keyword wrapped in angle brackets, like <h1>. Most tags come in pairs: an opening tag and a closing tag. The closing tag looks just like the opening one but with a forward slash before the keyword, like </h1>.

Anatomy of a Page

Every HTML document has a fundamental structure. It tells the browser, "Hey, this is an HTML page," and separates the background information from the visible content.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <!-- Your content will go here -->
  </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></html>: This is the root element. Everything else in the document is nested inside it.
<head></head>: This section contains meta-information about the page, like the title or character set. This information isn't displayed on the main page itself.
<title></title>: The title of the page, which appears in the browser tab.
<body></body>: This is where the magic happens. All the visible content of your webpage—headings, paragraphs, images, links—goes inside the body.

Building with Content Blocks

Now for the fun part: adding content. HTML gives you a set of tags to structure your text and media.

Headings and Paragraphs

Headings are used to create a hierarchy for your content. There are six levels, from <h1> (the most important) to <h6> (the least important). Paragraphs are defined with the <p> tag. Using these tags correctly helps search engines and screen readers understand how your page is organized.

<body>
  <h1>This is the main heading</h1>
  <p>This is a paragraph of text. It introduces the topic.</p>
  <h2>This is a subheading</h2>
  <p>This is another paragraph, under the subheading.</p>
</body>

Lists

HTML supports two main types of lists. Unordered lists, created with <ul>, are for items where the order doesn't matter. Ordered lists, created with <ol>, are for sequential items. In both cases, each list item is wrapped in an <li> tag.

<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>

<ol>
  <li>First, open the box.</li>
  <li>Second, read the instructions.</li>
  <li>Third, assemble the product.</li>
</ol>

Links and Images

What makes the web a web? Links! You create a link (also called an anchor) with the <a> tag. Images are embedded using the <img> tag.

Notice these tags use something new: attributes. Attributes provide extra information about an element and are always specified in the opening tag. For a link, the href attribute specifies the destination URL. For an image, the src attribute specifies the path to the image file.

<!-- A link to another website -->
<a href="https://www.wikipedia.org">Go to Wikipedia</a>

<!-- An image from a URL -->
<img src="https://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" alt="The Wikipedia logo">

The <img> tag is what's known as a self-closing tag; it doesn't need a closing </img>. It also has another important attribute: alt. The alt text provides a description of the image for screen readers and is displayed if the image fails to load. It's crucial for accessibility.

Time to test what you've learned.

Quiz Questions 1/6

What is the primary purpose of the <!DOCTYPE html> declaration at the very beginning of an HTML file?

Quiz Questions 2/6

All the visible content of a webpage, like headings, paragraphs, and images, should be placed inside which pair of tags?

With these basic building blocks, you can create a well-structured webpage. You've taken your first step into web development.

Foundations of Web Development