HTML Basics

HTML is the skeleton of every webpage. Learn how elements, tags, and attributes work together to build a page from scratch.

01_what_is_html

1. What Is HTML?

HTML stands for HyperText Markup Language. It is not a programming language — it is a markup language, meaning you use it to label and structure content so the browser knows what to display and how.

Think of HTML as the blueprint of a house. It defines where the walls, doors, and windows go — but it does not paint them or furnish the rooms. That is CSS's job.

02_elements_and_tags

2. Elements & Tags

An HTML element is made up of an opening tag, content, and a closing tag:

<p>This is a paragraph.</p>
  • <p> is the opening tag — it turns the element on.
  • This is a paragraph. is the content.
  • </p> is the closing tag — the forward slash turns it off.

Some elements are self-closing and have no content or closing tag, such as <img> and <br>.

03_common_elements

3. Common Elements You Will Use Every Day

Tag What It Does
<h1> – <h6>Headings, largest to smallest
<p>Paragraph of text
<a href="">Hyperlink to another page or URL
<img src="" alt="">Embeds an image
<ul> / <ol>Unordered (bulleted) or ordered (numbered) list
<li>A single list item (goes inside ul or ol)
<div>A generic container for grouping content
<nav>Navigation links section
<header>Introductory content at the top of a page or section
<main>The primary content of the page
<footer>Closing information at the bottom of a page
04_attributes

4. Attributes

Attributes give extra information to an element. They always go inside the opening tag and follow a name="value" pattern.

<a href="about.html">About Me</a>
<img src="images/dog.jpg" alt="A golden retriever sitting in the park">
  • href tells a link where to go.
  • src tells an image where the file is located.
  • alt provides a text description of an image for screen readers and broken-image fallback.
05_document_structure

5. The Standard Document Structure

Every HTML page must follow this skeleton. Missing any piece will cause browser display issues.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title | LIS 458</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <!-- Your visible content goes here -->

</body>
</html>
  • <!DOCTYPE html> — Tells the browser this is a modern HTML5 document.
  • <html lang="en"> — The root element; lang helps screen readers and search engines.
  • <head> — Invisible settings: character set, viewport, title, and stylesheet links.
  • <title> — The text that appears in the browser tab.
  • <body> — Everything visible on the page lives here.
06_nesting

6. Nesting Elements Correctly

Elements can be placed inside one another — this is called nesting. The rule is: always close the innermost element before closing the outer one.

Good ✅
<ul>
    <li>First item</li>
    <li>Second item</li>
</ul>

Bad ❌
<ul>
    <li>First item</ul>
</li>

Improper nesting is one of the most common causes of pages that look fine in one browser but broken in another.