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, and it’s the standard language used to create and structure the content on a webpage.

Think of HTML as the skeleton of a webpage. It gives the content its basic shape and structure, just like your skeleton supports your body.

Web browsers like Chrome, Firefox, and Safari read HTML files to understand how to display text, images, and other media. Without HTML, a browser wouldn't know the difference between a main headline and a simple paragraph. It provides the meaning and organization for everything you see online.

Tags and Elements

HTML works by using tags to mark up content. Tags are keywords surrounded by angle brackets, like <p>. They usually come in pairs: an opening tag and a closing tag. The closing tag is the same as the opening one, but with a forward slash before the keyword, like </p>.

<p>This is a paragraph.</p>
<h1>This is a main heading.</h1>

The combination of the opening tag, the content in between, and the closing tag is called an element. In the example above, <p>This is a paragraph.</p> is a paragraph element.

Putting It All Together

A complete HTML document has a specific structure. It’s like a formal letter with a header and a body. This structure tells the browser everything it needs to know to render the page correctly.

Tag	Purpose
`<!DOCTYPE html>`	Declares that the document is an HTML5 file. It's always the very first line.
`<html>`	The root element that wraps all the content on the entire page.
`<head>`	Contains meta-information about the page, like the title that appears in the browser tab. This content isn't displayed on the page itself.
`<body>`	Contains all the visible content of the webpage, such as headings, paragraphs, and images.

Notice how the <head> and <body> elements are placed inside, or nested, within the <html> element. Proper nesting is crucial. Think of it like stacking boxes: you have to close the inner box before you can close the outer one. Whatever tag you open last, you must close first.

<!-- This is a basic HTML document -->

<!DOCTYPE html>
<html>

<head>
  <title>My First Webpage</title>
</head>

<body>
  <h1>Hello, World!</h1>
  <p>This is my first paragraph.</p>
</body>

</html>

Adding More Detail with Attributes

Sometimes, you need to give an element a bit more information. This is where attributes come in. Attributes are added to the opening tag and provide extra details about the element. They always come in name/value pairs, like name="value".

For example, to create a link, you use the <a> (anchor) tag. But just having <a>Click here</a> isn't enough. The browser needs to know where to go when the link is clicked. You provide this destination using the href attribute.

<a href="https://www.wikipedia.org">Go to Wikipedia</a>

Here, href is the attribute name, and "https://www.wikipedia.org" is the attribute value. Attributes are essential for many HTML tags, allowing you to add images, create forms, and much more.

Let's check your understanding of these core concepts.

Quiz Questions 1/5

What does the acronym HTML stand for?

Quiz Questions 2/5

What is the primary role of HTML?

That's the basic rundown of HTML. It's a simple but powerful language that provides the fundamental structure for the entire web.

HTML Essentials