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 holds all the content in place, just like your bones support your body.

HTML stands for HyperText Markup Language. It's not a programming language; it's a markup language, which means it uses tags to define and structure different pieces of content.

These tags tell the web browser—like Chrome, Firefox, or Safari—how to display the content. For example, a tag might tell the browser, "This block of text is a heading," or "This word should be a link to another page." The browser then reads these instructions and renders the visual page you see and interact with. Its job is all about structure, not style. The colors, fonts, and layout all come later from a different language called CSS.

A Basic Blueprint

Every HTML document follows the same fundamental structure. It's a simple, predictable template that acts as a container for all your content. Let's look at the essential parts.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>

Here’s what each piece does:

<!DOCTYPE html>: This declaration is always the very first line. It tells the browser that the document is an HTML5 page.
<html>: This is the root element. Everything else in the document is nested inside the opening <html> and closing </html> tags.
<head>: This section contains meta-information about the page that isn't displayed directly to the user. This includes things like the page title that appears in the browser tab, which is set using the <title> tag.
<body>: This is where the magic happens. All the visible content of your webpage—headings, paragraphs, images, and links—goes inside the <body> tags.

Adding Content with Tags

To add content, you use HTML elements, which are created with tags. Most tags come in pairs: an opening tag like <p> and a closing tag like </p>. The content goes between them. Let's cover a few of the most common ones.

A good way to remember this is: Opening tag, content, closing tag.

Paragraphs are created with the <p> tag. Any text you place between <p> and </p> will be treated as a distinct paragraph.

Headings are used to structure your content and create a hierarchy. There are six levels, from <h1> (the most important) down to <h6> (the least important). Search engines and screen readers use headings to understand the structure of your page, so it's good practice to use them correctly.

<h1>This is the main heading</h1>
<p>This is the first paragraph of text.</p>
<h2>This is a subheading</h2>
<p>Here is some more text under the subheading.</p>

To create a link, you use the <a> (anchor) tag. The destination of the link is specified in an attribute called href, which stands for "hypertext reference."

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

Finally, to add an image, you use the <img> tag. This tag is a bit different because it's self-closing; it doesn't need a closing tag. It requires two main attributes:

src (source): The URL or file path of the image you want to display.
alt (alternative text): A short description of the image. This text is displayed if the image fails to load and is also read aloud by screen readers for visually impaired users, making your site more accessible.

<img src="cute-cat.jpg" alt="A fluffy kitten sleeping on a rug">

Putting It All Together

Now let's combine these elements to create a simple but complete web page. You could save this text in a file with a .html extension (like index.html) and open it in your web browser to see it in action.

<!DOCTYPE html>
<html>
  <head>
    <title>All About My Dog</title>
  </head>
  <body>
    <h1>Meet My Dog, Sparky</h1>
    <p>Sparky is a golden retriever with a lot of energy. He loves to play fetch and go for long walks in the park. Here is a picture of him enjoying the sun.</p>
    
    <img src="sparky.jpg" alt="A golden retriever smiling in a sunny field">

    <p>If you want to learn more about the golden retriever breed, you can visit this page:</p>

    <a href="https://en.wikipedia.org/wiki/Golden_Retriever">Golden Retriever on Wikipedia</a>
  </body>
</html>

With just these few tags, you have the power to structure any document for the web. This is the first and most important step in building anything online.

Quiz Questions 1/6

What is the primary role of HTML on a website?

Quiz Questions 2/6

All the visible content of a webpage, such as headings, paragraphs, and images, must be placed inside which element?

That's the basic rundown of HTML. You've learned how it gives web pages structure and how to use the most common tags to build a simple page from scratch.

HTML and CSS Essentials