No history yet

HTML Basics

The Skeleton of the Web

Every website you visit, from a simple blog to a massive online store, is built on a foundation of HTML. Think of HTML as the skeleton of a webpage. It doesn't control the colors, fonts, or animations—that's a job for CSS—but it gives the page its fundamental structure and meaning.

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

HTML uses a system of tags to define different types of content. These tags tell the web browser how to display text, where to place images, and how to link to other pages. Let's look at the basic anatomy of an HTML document.

Anatomy of an HTML Page

Every HTML page follows a standard structure. It starts with a declaration that tells the browser it's an HTML document. Then, the entire page is wrapped in an <html> tag. Inside, there are two main sections: the <head> and the <body>.

The <head> contains meta-information about the page, like the title that appears in your browser tab. The <body> contains all the visible content—the text, images, and links you actually see and interact with.

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

In this structure, <html>, <head>, <title>, and <body> are all examples of tags. Most tags come in pairs: an opening tag like <body> and a closing tag like </body>. Everything between the opening and closing tag is the content of that element.

Adding Content

Now for the fun part: adding content. The most basic building blocks for text are headings and paragraphs.

Heading

noun

Used to create titles and subtitles for sections of a page. HTML provides six levels, from <h1> (the most important) to <h6> (the least important).

Paragraphs are created with the <p> tag. Web browsers automatically add some space before and after each paragraph, which helps break up long blocks of text and makes your content easier to read.

Another common way to organize information is with lists. You can create an unordered (bulleted) list with the <ul> tag or an ordered (numbered) list with the <ol> tag. Each item within the list is then wrapped in an <li> tag.

<h1>This is the Main Title</h1>
<p>This is a paragraph of text. It introduces the topic.</p>

<h2>A Subheading for a New Section</h2>
<p>Here's another paragraph with more details.</p>

<h3>Groceries to Buy</h3>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Cheese</li>
</ul>

Links and Images

The web wouldn't be a web without links. Hyperlinks connect pages together and are created with the <a> tag, which stands for anchor. To tell the browser where the link should go, you use an attribute.

Attributes provide extra information about an element. They are always placed inside the opening tag and usually come in name/value pairs, like name="value".

For a link, the href attribute specifies the destination URL. For example:

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

Images work in a similar way, using the <img> tag. This is a self-closing tag, meaning it doesn't need a separate closing tag.

It requires two key attributes:

  • src: The source attribute, which is the URL or file path of the image.
  • alt: The alternative text attribute, which describes the image. This 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="cute-puppy.jpg" alt="A golden retriever puppy playing in the grass.">

And with that, you have the fundamental building blocks of a webpage. You've learned how to structure a document, add text and lists, and include links and images. This is the solid foundation you'll build upon when you start adding style and interactivity.

Ready to test your knowledge?

Quiz Questions 1/6

What is the primary role of HTML in web development?

Quiz Questions 2/6

In a standard HTML document, which two main sections are nested directly inside the <html> tag?