HTML Computer Science- Web Development Fundamentals

What HTML Actually Is (And What It Isn't)

HTML stands for HyperText Markup Language. It's the skeleton of every website you've ever visited. Without it, browsers wouldn't know how to display anything.

Here's the bitter truth: HTML isn't a programming language. It doesn't perform logic, handle calculations, or make decisions. It's purely structural. You use it to tell the browser "this is a heading," "this is a paragraph," "this is a link." That's it.

Think of a building. HTML is the concrete and steel frame. CSS is the paint and decorations. JavaScript is the plumbing and electrical work. You need all three, but HTML comes first.

The Basic HTML Document Structure

Every HTML page follows the same basic skeleton. Memorize this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
  </head>
  <body>
    <!-- Your content goes here -->
  </body>
</html>

The !DOCTYPE declaration tells the browser you're using HTML5. The html tag wraps everything. head contains metadata (stuff the browser and search engines read). body is where your visible content lives.

Most beginners waste time obsessing over the head section. You don't need to touch it for months. Focus on the body.

Essential HTML Elements You Need to Know

Headings: h1 Through h6

HTML gives you six heading levels. h1 is your main title (use only one per page). h2 is for major sections. h3 through h6 are for subsections, getting less important as the number goes up.

Search engines weight these heavily. Your h1 should contain your primary keyword. Your h2s should contain related keywords. Don't use headings just to make text bigger—that's what CSS is for.

Paragraphs and Text Formatting

The p tag creates paragraphs. Simple. The br tag creates line breaks (avoid using it for spacing—use margins in CSS instead). The strong tag makes text bold (meaning "this is important"). The em tag makes text italic (meaning "this should be emphasized").

Don't use b or i tags unless you're dealing with legacy code. strong and em carry semantic meaning that browsers and search engines understand.

Links and Images

Links use the anchor tag: a href="url". Images use img src="url" alt="description".

The alt attribute on images is not optional. It's accessibility. It's SEO. It's how screen readers understand images. Write actual descriptions, not "image1.jpg."

Lists

Unordered lists (bullets) use ul with li children. Ordered lists (numbers) use ol with li children. That's it. No fancy CSS tricks needed for the basic structure.

Semantic HTML: Why It Matters

Modern HTML pushes semantic elements. Instead of div for everything, use:

header — for page or section headers
nav — for navigation menus
main — for primary content (use once per page)
article — for self-contained content
section — for thematic groupings
aside — for sidebar content
footer — for page or section footers

Semantic HTML helps search engines understand your content structure. It also makes your code readable when you come back to it six months later.

HTML5 vs. Older HTML: What's Actually Different

HTML5 introduced new semantic elements, native video and audio support, and better form handling. It dropped the need for things like center, font, and marquee tags that controlled presentation (CSS handles that now).

Most sites you encounter today use HTML5. If you see !DOCTYPE html at the top, you're dealing with HTML5.

HTML Attributes: The Basics

Most elements accept attributes that modify their behavior. Attributes go inside the opening tag:

<a href="https://example.com" target="_blank" rel="noopener">Click me</a>
<img src="photo.jpg" alt="Description" width="800" height="600">
<input type="text" name="username" required>

Common attributes:

id — unique identifier for one element
class — identifier for multiple elements (used by CSS)
src — source file for images, scripts, etc.
href — destination URL for links
alt — alternative text for images
title — tooltip text on hover

Forms: The Interactive Foundation

HTML forms collect user input. Every form needs:

<form action="/submit" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Send</button>
</form>

The for attribute on labels must match the id on inputs. This connects them for accessibility and lets users click labels to focus inputs.

Input types matter. Use type="email" instead of type="text" and mobile browsers give users the right keyboard. Use type="password" for sensitive fields. Use type="number" for numeric input.

HTML in the Real World: What Actually Works

Element Type	When to Use	Common Mistakes
div	Layout containers when no semantic fit exists	Using div for everything instead of semantic tags
span	Inline text styling without breaking paragraphs	Using it for block-level elements
a href	Links to other pages or resources	Using buttons styled as links
button	Actions within forms or JavaScript interactions	Using links styled as buttons
ul / ol	Lists of items without specific order (ul) or with sequence (ol)	Using manual line breaks for "lists"

Getting Started: Your First HTML Page

Open a text editor. Not Word or Google Docs—a real text editor like VS Code, Sublime Text, or even Notepad. Save a file as index.html.

Type this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <header>
    <h1>Welcome to My Site</h1>
  </header>
  <main>
    <h2>About Me</h2>
    <p>This is a paragraph about me.</p>
    <h2>My Links</h2>
    <ul>
      <li><a href="https://example.com">Example Site</a></li>
      <li><a href="https://example.org">Another Site</a></li>
    </ul>
  </main>
  <footer>
    <p>© 2024</p>
  </footer>
</body>
</html>

Open that file in your browser. It works. That's your foundation.

What to Learn After HTML

HTML is useless without CSS and JavaScript. You need all three:

CSS — handles all visual presentation. Colors, fonts, spacing, layout. Without it, HTML looks like a 1995 webpage.
JavaScript — adds interactivity. Form validation, animations, dynamic content updates. This is where actual programming begins.

You don't master HTML in a week. You learn it once, then you reference documentation forever. Nobody memorizes every attribute. You learn concepts, practice syntax, and Google what you forget.

The Brutal Reality

Most people overestimate how hard HTML is. They think they need courses, certifications, expensive bootcamps. They don't. HTML is simple. You can learn the basics in an afternoon.

What takes time is CSS layout, JavaScript logic, and understanding how all three work together. That's where actual web development skill lives.

Start with HTML. Build something. Break it. Fix it. Move on to CSS when your page looks ugly. Add JavaScript when you need it to do something. That's the path. No shortcuts, no hype.