HTML Basics

The Skeleton of the Web

Every webpage you visit, from news sites to your favorite social media feed, is built on a foundation called HTML. HTML stands for HyperText Markup Language, and it's the standard language used to create and structure content on the web. Think of it like the skeleton of a human body. It provides the essential structure and framework that holds everything together.

One of HTML's main jobs is to give text structure so that a browser can display an HTML document the way its developer intends.

When you write HTML, you're not programming in the traditional sense. You're creating a document with special instructions, called tags, that tell the browser how to display text, images, and other media. These tags define elements like headings, paragraphs, and links, turning a plain text file into a structured, readable webpage.

Anatomy of an HTML Document

An HTML document has a specific structure that browsers understand. It starts with a declaration and is then wrapped in a series of nested tags. An HTML element usually consists of a start tag, some content, and an end tag. For example, <p>This is a paragraph.</p> is a paragraph element. The <p> is the start tag and </p> is the end tag.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>This is the visible content of my page.</p>
  </body>
</html>

Let's break down this basic structure:

<!DOCTYPE html>: This is a required declaration that tells the browser the document is an HTML5 page. It's always the very first line.
<html></html>: This is the root element that wraps all the content on the entire page.
<head></head>: This container holds information about the page, not the content you see. This includes things like the page's title, which appears in the browser tab.
<body></body>: This is where the magic happens. All the visible content of the webpage, like headings, paragraphs, images, and links, goes inside the <body> tags.

Building with Content Blocks

Once you have the basic document structure, you can start adding content using different elements. The most common are headings and paragraphs, which organize your text into a readable hierarchy.

heading

noun

A title or subtitle that you want to display on a webpage. HTML provides six levels of headings.

Headings range from <h1> (the most important) to <h6> (the least important). Search engines use these headings to understand the structure and importance of your content. Paragraphs are defined with the <p> tag and are used for blocks of text.

For lists, HTML gives you two options: unordered (bulleted) lists and ordered (numbered) lists. An unordered list uses the <ul> tag, with each list item wrapped in an <li> tag. An ordered list is the same, but it starts with <ol>.

<h2>Grocery List</h2>
<ul>
  <li>Apples</li>
  <li>Milk</li>
  <li>Bread</li>
</ul>

<h2>Top 3 Movies</h2>
<ol>
  <li>The Shawshank Redemption</li>
  <li>The Godfather</li>
  <li>The Dark Knight</li>
</ol>

Connecting Pages and Adding Media

What makes the web a "web" is the ability to link documents together. This is done with the anchor tag, <a>. To create a link, you need to tell the browser where it should go. This is where attributes come in.

Attributes provide additional information about an HTML element. They are always specified in the start tag and usually come in name/value pairs like name="value".

For an anchor tag, the href attribute (short for hypertext reference) specifies the URL of the page the link goes to.

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

Images are added using the <img> tag. This is a special type of tag called an empty element because it doesn't have a closing tag. It requires two attributes to work: src and alt.

src: The source attribute, which is the path or URL to the image file.
alt: The alternative text attribute, which provides a description of the image. This text is displayed if the image fails to load and is crucial for screen readers used by visually impaired visitors.

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

Notice that the src attribute can point to a file in a local folder (images/cute-cat.jpg) or a full web address. Using attributes correctly is essential for building functional and accessible websites.

Quiz Questions 1/7

What is the primary purpose of HTML?

Quiz Questions 2/7

All visible content on a webpage, such as headings, paragraphs, and images, should be placed inside which pair of tags?

You now have the fundamental building blocks to structure any webpage. With just these simple tags and attributes, you can create a well-organized document that browsers can understand and display.

HTML CSS Website Fixes