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. Think of it as the skeleton that gives a webpage its structure. It tells a web browser what the different parts of a page are—this is a heading, that is a paragraph, and over here is an image.

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

Without HTML, a web browser would just see a jumble of text and wouldn't know how to display it. HTML uses a system of tags to organize and format the content, creating the structure that everything else is built upon. It's the first and most essential layer of any website.

A Document's Blueprint

Every HTML document follows a basic structure. It’s like a blueprint that tells the browser how to read the file. Let's look at the essential components.

<!DOCTYPE html>
<html>
  <head>
    <!-- Meta-information goes here -->
  </head>
  <body>
    <!-- Page content goes here -->
  </body>
</html>

Here’s a breakdown of what each part does:

<!DOCTYPE html>: This is the very first thing in your document. It's not an HTML tag, but a declaration. It tells the browser, "Hey, I'm an HTML5 document," so the browser knows what rules to follow when rendering the page.
<html></html>: This is the root element that wraps everything else on the page.
<head></head>: This section contains meta-information about the page that isn't displayed directly on the page itself. This includes things like the page title (which appears in the browser tab), links to stylesheets (CSS files), and other metadata.
<body></body>: This is where the magic happens. All the visible content of your webpage—headings, paragraphs, images, links, tables—goes inside the body tags.

Elements, Tags, and Attributes

HTML is made up of elements. An element is an individual component of a webpage. Most elements are created using a pair of tags: an opening tag and a closing tag. The content of the element goes between these tags.

For example, to create a paragraph, you use the <p> element. The opening tag is <p> and the closing tag is </p>. Notice the forward slash in the closing tag. That's how you tell the browser the element has ended.

Some elements also have attributes. Attributes provide additional information about an element and are always specified in the opening tag. They usually come in name/value pairs like name="value".

For instance, the anchor tag <a> creates a hyperlink. Its href attribute specifies the URL the link should point to.

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

In this example, href is the attribute name, and "https://www.example.com" is the attribute value. The text between the tags, "Visit Example," is what the user will see and click on.

It's also important to nest elements correctly. If you open an element inside another, you must close the inner element before closing the outer one. Think of them as nested boxes. You have to close the inner box before you can close the one it's inside.

Creating Your First Page

Let's put everything together to create a simple, complete HTML document. You can create this file using any plain text editor, like Notepad on Windows or TextEdit on macOS. Just be sure to save it with an .html extension, like mypage.html.

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

Here, we've added a <title> to the head section, which sets the text for the browser tab. In the body, we've used an <h1> tag for a main heading and a <p> tag for a paragraph. When you open this file in a web browser, you'll see your content, structured and ready.

That's it! You've just created a basic webpage. It might not look fancy yet—that's where CSS comes in—but you've built the solid, structural foundation that every website needs.

Quiz Questions 1/5

What is the primary function of HTML?

Quiz Questions 2/5

Which part of an HTML document contains the visible content like headings, paragraphs, and images?

HTML Essentials