HTML Basics

The Skeleton of the Web

Every website you visit 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, like headings, paragraphs, and images. Without it, a webpage would just be a jumble of text with no formatting.

HTML (Hypertext Markup Language) defines the structure and contents of a web page – where things go, how they are laid out, and what’s on the page

HTML stands for HyperText Markup Language. It's not a programming language; it's a markup language. This means it uses a system of tags to define and structure content. A web browser reads this markup to understand how to display the page to you.

A Basic HTML Document

Every HTML document follows a standard structure. It tells the browser what kind of document it is and contains all the content that will be displayed. Here’s what a bare-bones HTML page looks like:

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

Let's break that down:

<!DOCTYPE html>: This declaration defines the document type. It lets the browser know it's reading an HTML document.
<html>: This is the root element that wraps all the content on the page.
<head>: This container holds information about the page, like the 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 content you want to display to users, such as text, images, and links.

Anatomy of an Element

HTML documents are made up of elements. Most elements are written with a start tag and an end tag, with the content in between. Tags are the keywords surrounded by angle brackets that define how your content should be formatted.

The opening tag can also contain attributes, which provide additional information about an element. Attributes are always specified in the start tag and usually come in name/value pairs like name="value". In the example above, class="greeting" is an attribute.

Block vs. Inline

HTML elements generally fall into one of two categories: block-level or inline.

block-level element

noun

An element that always starts on a new line and takes up the full width available, stretching as far as it can to the left and right.

Think of block-level elements as stacking on top of each other, like boxes. Each one claims its own horizontal space.

inline element

noun

An element that does not start on a new line and only takes up as much width as necessary.

Inline elements flow within the text and sit next to each other. They don't disrupt the line they're in. For example, if you make a single word bold, it stays on the same line as the rest of the sentence.

A simple way to remember the difference: block elements stack vertically, while inline elements line up horizontally.

Understanding this distinction is key to structuring your content. You'll use block-level elements for larger pieces of content, like paragraphs or sections, and inline elements for smaller pieces within them, like a link or a highlighted word.

Quiz Questions 1/5

What is the primary role of the <body> tag in an HTML document?

Quiz Questions 2/5

Which of the following statements accurately describes the difference between block-level and inline elements?

This is just the beginning. With these foundational concepts, you can start building the structure for any webpage you can imagine.

HTML Essentials