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

noun

Stands for HyperText Markup Language. It's the standard language used to create and structure the content of web pages.

HTML isn't a programming language in the way that Python or Java are. You don't write logic or perform calculations with it. Instead, you use it to describe and organise your content. You tell the web browser, "This is a heading," "This is a paragraph," or "This is an image," and the browser displays it accordingly.

Tags, Elements, and Attributes

HTML works using a system of tags. These are keywords surrounded by angle brackets, like <p>. 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 </p>.

<p>This is a paragraph of text.</p>

The combination of an opening tag, the content inside, and a closing tag is called an element. The <p> element you see above defines a paragraph.

Some elements need extra information to work correctly. This is where attributes come in. Attributes are added to the opening tag and provide details about the element. They usually come in name/value pairs, like name="value".

A great example is the anchor tag, <a>, which creates hyperlinks. By itself, <a> doesn't know where to link. It needs an href attribute to tell it the destination URL.

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

In this example:

The element is the whole line.
The tags are <a> and </a>.
href is the attribute name, and "https://www.example.com" is the attribute value.
"Visit Example.com" is the content that will be displayed on the page as the clickable link.

A Basic Web Page

Every HTML document follows a standard structure. It's like a formal letter that has a specific layout. This structure helps the browser understand and display the page correctly.

<!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 is a declaration, not a tag. It's always the very first line and tells the browser, "Hey, this document is written in modern HTML."
<html>: This is the root element. Every other element on the page is nested inside <html> and </html>.
<head>: This element contains meta-information about the page. This is stuff the user doesn't typically see directly, like the page title that appears in the browser tab, character set information, and links to stylesheets (which we'll cover later).
<body>: This is where the party is. The <body> element contains all the visible content of the webpage—the headings, paragraphs, images, links, and everything else you see on the screen.

The way these elements are nested inside each other creates a hierarchy, or a tree-like structure. The <html> tag is the trunk, and <head> and <body> are the main branches.

This structure is fundamental. By describing your content with these simple, logical building blocks, you're creating a solid foundation for any website.

Quiz Questions 1/5

What is the primary role of HTML?

Quiz Questions 2/5

Which part of the following HTML line is the 'attribute'?

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