HTML Basics

The Blueprint of the Web

Every website you visit, from a simple blog to a massive online store, is built on a foundation of HTML. It stands for HyperText Markup Language, and it's the standard language used to create and structure the content of a web page.

Think of HTML as the bricks that you need to build anything for the web.

HTML isn't a programming language; it's a markup language. You use it to tell the browser how to display content by wrapping it in special markers called tags. These tags define different types of content, like headings, paragraphs, images, and links. Let's look at how a basic HTML document is put together.

Anatomy of an HTML Page

Every HTML document follows a predictable structure. Think of it like a human body. There's a head, which contains important information but isn't visible, and a body, which is everything you see.

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

Let's break that down:

<!DOCTYPE html>: This is the very first thing in your document. It tells the browser, "Hey, I'm an HTML5 document," so it knows how to read the file correctly.
<html>...</html>: This is the root element that wraps everything else. All your HTML code will go between these two tags.
<head>...</head>: This section contains meta-information about the page, like the title that appears in the browser tab (<title>), character set information, and links to other files. Content in the head isn't displayed on the page itself.
<body>...</body>: This is where the magic happens. All the visible content of your webpage—text, images, links, lists—goes inside the body tags.

Building with Content Blocks

Once you have your basic structure, you can start adding content using different tags. The most common tags you'll use are for organizing text.

Tags usually come in pairs: an opening tag like <p> and a closing tag like </p>. The content goes in between them.

For text, you'll constantly use headings and paragraphs.

Headings are defined with <h1> through <h6> tags. <h1> is the most important heading, like a book title, while <h6> is the least important. They give your content a clear hierarchy.

Paragraphs are created with the <p> tag. Any text you place inside <p>...</p> will be treated as a distinct paragraph.

<h1>This is a main heading</h1>
<p>This paragraph introduces the topic.</p>
<h2>This is a sub-heading</h2>
<p>This paragraph provides more detail under the sub-heading.</p>

What if you want to create a list? HTML has you covered. For a bulleted list, you use an unordered list tag, <ul>. For a numbered list, you use an ordered list tag, <ol>. In either case, each individual list item is wrapped in a <li> tag.

<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>

<ol>
  <li>First, do this.</li>
  <li>Second, do that.</li>
  <li>Third, you're done!</li>
</ol>

Links and Images

A webpage isn't just text. You also need to link to other pages and display images. This is done with tags that use attributes, which are extra pieces of information that configure the tag's behavior.

To create a hyperlink, you use the anchor tag, <a>. The most important attribute for this tag is href, which stands for "hypertext reference." It tells the browser where the link should go.

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

The text between the opening <a> and closing </a> tags is what the user will see and click on.

To insert an image, you use the <img> tag. This is a special kind of tag called an empty element because it doesn't have a closing tag. It uses two key attributes:

src: This specifies the source, or the path to the image file.
alt: This provides alternative text for the image. This text is crucial for screen readers used by visually impaired users, and it also displays if the image fails to load.

<img src="images/cute-cat.jpg" alt="A fluffy orange cat sleeping on a blanket">

And that's the core of it. By combining these simple elements—headings, paragraphs, lists, links, and images—you can structure any webpage.

Quiz Questions 1/5

What does HTML stand for?

Quiz Questions 2/5

Which section of an HTML document contains all the visible content, like text, images, and links?

With these foundational tags, you have the power to create a well-structured document that any browser can understand and display.

Fixing Website Formatting with HTML CSS