HTML Basics

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 on a web page. Think of it as the skeleton of a building. It provides the essential structure and framework that holds everything together.

HTML, or HyperText Markup Language, provides the skeleton for your web content.

HTML isn't a programming language. It's a markup language. This means it uses a system of tags to define the different parts of a document. You use these tags to tell a web browser, "This is a heading," "This is a paragraph," or "This is an image."

An HTML document is just a plain text file with a .html extension. The basic structure looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my very first web page.</p>
  </body>
</html>

Let's break that down:

<!DOCTYPE html>: This declaration tells the browser that the document is an HTML5 page.
<html>: This is the root element that wraps all the content on the page.
<head>: This contains meta-information about the page, like its title, that isn't displayed directly on the page itself.
<title>: This sets the title of the page, which appears in the browser tab.
<body>: This contains all the visible content of the page, like headings, paragraphs, and images.

Building with Content Blocks

The core of HTML is its elements, which are created using tags. Most tags come in pairs: an opening tag like <p> and a closing tag like </p>. The content goes between them.

Two of the most common elements are headings and paragraphs.

Headings are created with <h1> through <h6> tags. <h1> is the most important heading, usually for the main page title, while <h6> is the least important. Paragraphs are created with the <p> tag.

Here’s how you'd structure some simple text:

<h1>The Life of a Star</h1>
<p>Stars are born from massive clouds of gas and dust.</p>
<h2>Formation</h2>
<p>Gravity pulls the gas and dust together into a protostar.</p>

HTML also makes it easy to create lists. You can make an unordered (bulleted) list with the <ul> tag or an ordered (numbered) list with <ol>. Each item within the list is marked with an <li> tag.

<h3>Grocery List</h3>
<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Milk</li>
</ul>

<h3>Morning Routine</h3>
<ol>
  <li>Wake up</li>
  <li>Brush teeth</li>
  <li>Make coffee</li>
</ol>

Connections and Images

The web is all about connections. The "HyperText" in HTML refers to its ability to create links, or hyperlinks. We do this with the anchor tag, <a>. The destination of the link is specified in the href attribute.

<p>Visit <a href="https://www.wikipedia.org">Wikipedia</a> for more information.</p>

To embed an image, we use the <img> tag. This is a self-closing tag, meaning it doesn't need a separate closing tag. It has two essential attributes:

src: The source, which is the URL or path to the image file.
alt: Alternative text, which describes the image. This is crucial for accessibility (screen readers use it) and will be displayed if the image fails to load.

<img src="images/cat.jpg" alt="A fluffy orange cat sleeping on a chair.">

Always include descriptive alt text for your images. It makes the web more accessible for everyone.

Gathering Information with Forms

Forms are a key way to get input from users. The <form> element acts as a container for different types of input fields. The <input> element is the most versatile, with its type attribute determining what kind of input it accepts.

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password"><br><br>
  
  <input type="submit" value="Log In">
</form>

Notice the <label> element. It's associated with an input field via the for attribute, which matches the id of the input. This improves usability—clicking the label focuses the input field—and is another important accessibility feature.

Writing with Meaning

In the early days of the web, developers often used generic <div> tags to structure their pages. While this works visually, it doesn't describe the meaning of the content. This is where semantic HTML comes in.

Semantic HTML uses tags that clearly describe their purpose. For example, instead of <div id="header">, we use <header>. This makes the code easier for developers, search engines, and assistive technologies to understand.

Semantic HTML elements, such as
,
, and
, give your content meaning.

Here's a comparison of a generic layout versus a semantic one.

Other useful semantic tags include <article> for self-contained content, <section> for grouping related content, and <aside> for sidebars. Using these tags creates a more robust, accessible, and future-proof web page.

Now, let's test what you've learned about the building blocks of the web.

Quiz Questions 1/5

What is the primary purpose of HTML?

Quiz Questions 2/5

Which tag is used to create the most important heading on a page?

Mastering these fundamentals is the first and most important step in web development. With a solid understanding of HTML, you can structure any content you can imagine.

Full Stack Web Development Mastery