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 doesn't control the colors, fonts, or animations—that's the job of other technologies. Instead, HTML provides the fundamental structure, telling the browser what each piece of content is. It specifies which text is a heading, which is a paragraph, and where an image should go.

HTML, or HyperText Markup Language, provides the skeleton for your web content.

HTML stands for HyperText Markup Language. Let's break that down:

HyperText refers to text that contains links to other texts. It's what allows you to click a link and jump from one page to another, forming the interconnected 'web' of information.
Markup Language means it's a language that uses tags to annotate a document, defining the structure and type of content. It's not a programming language because it doesn't perform logic or calculations. It simply describes what's on the page.

Elements and Tags

HTML documents are made of elements. You create these elements using tags. Most tags come in pairs: an opening tag and a closing tag. They wrap around the content they are describing.

For example, to create a paragraph, you use the paragraph tag, <p>.

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

Here, <p> is the opening tag that says, "A paragraph starts here." The text in the middle is the content. And </p> is the closing tag. The slash / is what marks it as a closing tag.

Together, the opening tag, the content, and the closing tag form a complete HTML element. There are many types of tags for different kinds of content, like headings, lists, and links.

Headings are created with tags from <h1> to <h6>. The <h1> tag is for the most important heading on the page, and <h6> is for the least important.

<h1>This is the main heading</h1>
<h2>This is a subheading</h2>
<p>And here is some paragraph text to follow.</p>

Not all tags have a closing tag. These are called empty or self-closing tags. A common example is the image tag, <img>, which we'll explore later.

Attributes Add Information

Sometimes, an element needs more information than just its type. This extra information is provided by attributes. Attributes are always included in the opening tag and usually come in name/value pairs, like name="value".

attribute

noun

A characteristic of an HTML element that provides additional information about it.

Let's look at the anchor tag, <a>, which is used to create a link. By itself, the tag doesn't know where to link to. We tell it the destination using the href attribute, which stands for "hypertext reference."

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

In this example:

<a> is the opening tag.
href="https://www.example.com" is the attribute. href is the attribute's name, and "https://www.example.com" is its value.
Visit this website! is the content that will be displayed as the clickable link.
</a> is the closing tag.

Attributes are essential for many HTML elements, giving them properties like unique IDs, sources for images, or destinations for links.

A Basic HTML Document

Now, let's put it all together. A complete HTML document has a standard structure that tells the browser it's a web page. It looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>Welcome to my page.</p>
  </body>
</html>

Here's a quick tour of the key parts:

<!DOCTYPE html>: This declaration defines that the document is an HTML5 document. It's the very first thing in your file.
<html>: This is the root element that wraps all the content on the entire page.
<head>: This element contains meta-information about the page, like its title. This information is not displayed on the page itself.
<title>: This sets the title of the page, which appears in the browser tab.
<body>: This element contains all the visible content of the webpage—headings, paragraphs, images, links, etc.

This structure is the starting point for every webpage you'll ever build. You place your content inside the <body> tags, using different HTML elements to give it meaning.

Quiz Questions 1/5

What does "HTML" stand for?

Quiz Questions 2/5

What is the primary role of HTML on a website?

Understanding these core concepts—tags, elements, and attributes—is the first step to building anything on the web. With this foundation, you can start creating structured documents for browsers to display.

HTML Fundamentals for Web Building