No history yet

HTML Basics

What is HTML?

Think of a webpage as a house. HTML, or HyperText Markup Language, is the blueprint and the wooden frame. It doesn't handle the paint color or the electricity, but it creates the fundamental structure: the walls, the floors, and the roof. Without it, there's no house to decorate.

On the web, HTML provides the structure for all the content you see. It tells the browser what is a heading, what is a paragraph, where an image should go, and which text should be a link. It's the skeleton that holds everything together.

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

Every single website, from a simple blog to a complex application, starts with HTML.

The Basic Structure

Every HTML document follows a predictable structure. It’s like a formal letter that always has a date, a salutation, a body, and a closing. This consistency is what allows any web browser on any device to understand and display the page correctly.

Let’s look at a bare-bones example. This is the simplest complete webpage you can make:

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

Looks a bit technical, but it’s straightforward once you know the pieces. Let's break it down line by line.

<!DOCTYPE html> This is the very first thing in your document. It’s a special instruction, not a tag. It simply tells the web browser, "Hey, the document you're about to read is modern HTML5." That's it.

<html>...</html> This is the root element. Every other element in the document is nested inside it. The <html> tag signals the beginning of the HTML document, and </html> signals the end.

<head>...</head> This section contains meta-information about the page. This is stuff the browser needs, but your visitors won't see directly on the page itself. The most common item you'll find here is the <title>, which sets the text that appears in the browser tab.

<body>...</body> This is where the magic happens. Everything inside the <body> tags is the content that gets displayed to the user: text, images, videos, links, and everything else you see on the page.

Lesson image

Tags, Elements, and Attributes

To build anything with HTML, you need to understand its three core components: tags, elements, and attributes.

Tag

noun

A command that tells the browser how to format and display content. Most tags come in pairs: an opening tag like <p> and a closing tag like </p>. The closing tag has a forward slash before the tag name.

An element is the complete package: the opening tag, the content in between, and the closing tag. So, <p>This is a paragraph.</p> is a paragraph element.

Think of it this way: Tags are the bread, and the content is the filling. The whole sandwich is the element.

Finally, 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". Attributes can change an element's behavior or provide more details about it.

Let's look at a link. The <a> tag creates a hyperlink, but it needs to know where to link to. That's where the href attribute comes in.

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

In this example:

  • <a> and </a> are the tags.
  • The entire line is the anchor element.
  • href="https://www.example.com" is the attribute. It tells the browser that this link should point to https://www.example.com.

We're now ready to add some content to our page and make it look presentable.