HTML Tutorial

The Words of a Web Language

When you look at a finished webpage you see a cohesive visual thing - text, images, links, sections - but a browser sees it completely differently: a structured list of labeled content pieces, each one tagged to say what kind of thing it is. This heading, that paragraph, this image, that navigation menu. HTML elements are the individual labels and their contents, and learning HTML is mostly learning what each element means and when to use it. Once that vocabulary is in your head the rest of what HTML does - attributes, nesting, how things flow on the page - follows pretty naturally.

Tags vs Elements: What's the Difference?

People use tag and element interchangeably and in most conversations that's fine, but technically they mean different things and knowing the distinction is useful when you're reading documentation or debugging.

Understanding the Distinction

  • HTML Tags - A tag is the angle-bracket syntax itself - the opening marker and the closing marker. The opening tag looks like this: p with angle brackets around it. The closing tag looks the same with a forward slash before the name. Tags are just the punctuation marks of HTML.
  • HTML Elements - An element is the complete package - the opening tag, everything between it, and the closing tag together. So the opening p tag, the sentence inside it, and the closing p tag together form one paragraph element. The element is the whole thing; the tags are just the bookends around it.

Anatomy of an HTML Element

The anchor tag - the link element - is a good one to dissect because it usually has several attributes at once, which makes all the component parts visible in one place.

html
1<a href="https://www.example.com" target="_blank" class="link">Visit Example</a>

Component Parts

  • Opening tag - The a with angle brackets - this tells the browser an anchor element is starting here.
  • Attribute names - href, target, and class - the names of the configuration options being set on this element.
  • Attribute values - The values in quotation marks after each equals sign - the URL, where the link opens, and the CSS class name.
  • Content - Visit Example - the visible text the user sees and clicks on.
  • Closing tag - The /a with angle brackets - signals where the anchor element ends.

HTML Attributes: Adding Extra Information

Attributes live inside the opening tag and configure what the element does or how it behaves - the href on an anchor says where the link goes, the src on an image says which file to load, the class on a div says which CSS styles to apply. They follow the same pattern every time: attribute name, equals sign, value in double quotes. An element can have as many attributes as it needs and the order doesn't matter, which is one of the more relaxed parts of HTML syntax.

Common Attributes

  • id - Gives an element a unique identifier on the page. No two elements should share the same id - it breaks CSS targeting and JavaScript selection if they do.
  • class - Assigns one or more style categories to an element. Multiple elements can share the same class, which is how CSS applies the same styles to many elements at once.
  • src - Specifies the file path or URL for the media to load - used on img, audio, video, and script elements.
  • href - Specifies the destination URL for links. Short for hypertext reference, which explains the naming even if it's not intuitive at first.
  • alt - Alternative text for images. Screen readers read this aloud to users who can't see the image, and it's what browsers show if the image fails to load. Skipping alt text is both an accessibility problem and an SEO miss.
  • style - Inline CSS written directly on the element. Works fine for quick testing but keeping styles in a separate CSS file is much better for maintenance.

Empty Elements (Void Elements)

Some HTML elements genuinely have nothing inside them - they're self-contained instructions rather than containers for content - and these are called void elements or empty elements. The img tag is the most common example: it embeds an image using its src attribute alone, there's nothing to put between an opening and closing tag, so there is no closing tag. Writing a closing img tag isn't just unnecessary - it's invalid HTML. The same applies to br for line breaks, hr for horizontal rules, and input for form fields.

html
1<!-- Correct: void elements with no closing tag -->
2<img src="cat.jpg" alt="A fluffy cat">
3<br>
4<hr>
5<input type="text">
6
7<!-- Wrong: adding a closing tag to a void element -->
8<img src="cat.jpg" alt="A fluffy cat"></img>

Common Void Elements

  • img - Embeds an image. Requires src and alt attributes.
  • br - Line break within text. Use sparingly - CSS margin is usually the better tool for spacing.
  • hr - Horizontal rule, represents a thematic break between sections.
  • input - Form input field. Its behavior changes completely based on the type attribute.

Nesting Elements: Putting Elements Inside Other Elements

Nesting is how you build structure - wrapping one element inside another to express a relationship between them, like a paragraph that contains a link, or a list that contains list items, or a div that groups several paragraphs together into a section. The rule that trips people up is the closing order: elements must be closed in the reverse of the order they were opened, like stacking plates and unstacking them last-in-first-out. Opening a strong tag inside a paragraph and then closing the paragraph before the strong is invalid HTML and browsers handle it inconsistently.

html
1<!-- Simple nesting -->
2<p>My favorite animal is the <strong>capybara</strong>.</p>
3
4<!-- Correct nesting order -->
5<p>This is <strong>very <em>important</em></strong> text.</p>
6
7<!-- Wrong nesting order - strong closed before em -->
8<p>This is <strong>very <em>important</strong> text</em>.</p>

Rules for Proper Nesting

  • Last opened, first closed - The innermost element must be closed before any element that contains it. Think of it as a set of nested boxes - you close the inner box before you can close the outer one.
  • Block elements don't go inside inline elements - A paragraph element inside a span or anchor tag is invalid HTML. Block elements can contain inline elements but not the other way around.

Block-Level vs Inline Elements

Every HTML element is either block-level or inline by default, and this is one of the most foundational layout concepts in HTML because it determines how elements flow on the page without any CSS. Block elements stack vertically - each one starts on its own new line and stretches the full available width. Inline elements flow horizontally within text - they sit next to each other and wrap to new lines when they run out of space, just like words in a sentence do. Div and paragraph and h1 are block elements. Anchor, strong, em, and span are inline elements. Understanding this default behavior explains why some elements always create a line break and others don't.

Element Types

  • Block-level elements - Start on a new line, take up the full available width, stack vertically. Common examples: div, p, h1 through h6, ul, ol, li, section, article, nav, header, footer.
  • Inline elements - Flow within text, only as wide as their content, don't force new lines. Common examples: a, strong, em, span, img, br, code.
  • CSS can change this - The block or inline behavior is just the default. CSS display property can make any element behave like a block, inline, or flex/grid container regardless of its HTML default.

Putting It All Together: A Practical Example

Here's a small section of a webpage that uses block and inline elements together, nested elements, and attributes - the kind of structure you'll write constantly once these concepts click into place.

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Element Example</title>
6</head>
7<body>
8    <!-- Block-level heading -->
9    <h1 id="main-title">My Pets</h1>
10    
11    <!-- Block paragraph containing inline elements -->
12    <p>I have two pets. A very <strong>lazy cat</strong> named Whiskers and a <em>hyperactive</em> dog named <a href="spot.html">Spot</a>.</p>
13    
14    <!-- Block div acting as a container -->
15    <div class="pet-profile">
16        <!-- Heading nested inside the div -->
17        <h2>Whiskers the Cat</h2>
18        
19        <!-- Void element nested inside the div -->
20        <img src="whiskers.jpg" alt="A gray tabby cat sleeping on a sofa" class="pet-photo">
21        
22        <!-- Paragraph nested inside the div -->
23        <p>Whiskers enjoys napping and ignoring everyone.</p>
24    </div>
25</body>
26</html>

You've Learned the Vocabulary

Elements, tags, attributes, nesting, void elements, block versus inline - these aren't just theoretical concepts, they're the mental model you use every time you read or write HTML. When you look at a page's source code now, you should be able to read the structure rather than just see a wall of angle brackets. The next thing to build on top of this foundation is familiarity with the specific elements you'll use most often - headings, paragraphs, links, images, lists, and the semantic elements that give sections of a page their meaning

Frequently Asked Questions

Is br the same as br with a slash?

In HTML5 the trailing slash on void elements is optional, so br and br with a forward slash before the closing bracket are both valid. The version with the slash was required in XHTML and carried over into HTML habits for a while. Most modern HTML style guides recommend just br without the slash since that's what the HTML5 spec uses, but either form works in every browser.

What is a div and a span? They seem like they don't do anything.

They're generic containers with no semantic meaning, which is actually the point. Div is a block-level container used to group elements for layout or to give CSS and JavaScript a hook to target. Span is the inline version - it wraps a piece of text or inline content without doing anything visually on its own. Both become useful when you add a class or id to them and write CSS or JavaScript that targets that identifier.

What happens if I forget to close a tag?

Browsers will try to figure out where you meant to close it and often render the page correctly anyway - this error-tolerant behavior is intentional and goes back to the early web. But the guess isn't always right and it varies between browsers, so you can end up with subtle rendering differences or elements that are technically open for the rest of the document. Always close your tags and use a code editor that highlights unclosed tags before you even save the file.

How do I know if an element is block or inline?

The rough heuristic: elements that represent major structural sections of a page are usually block-level, and elements that format or annotate text within those sections are usually inline. MDN Web Docs is the authoritative reference and worth bookmarking - the page for every HTML element lists whether it's block or inline and what content it can contain. Also worth knowing: CSS can override any element's default display behavior, so the HTML default is just the starting point.

Can I put any element inside any other element?

No, and the rules matter for valid HTML. The main constraints: block-level elements generally can't go inside inline elements (a paragraph inside a span is invalid), certain elements only accept specific children (ul and ol only take li as direct children), and void elements can't contain anything. Browsers will silently restructure invalid nesting in ways that are hard to predict, so it's worth learning what's valid rather than relying on browser forgiveness.