HTML · Quick Reference

Lesson 5 — HTML Elements Cheat Sheet

HTML

In one line: Beginners often use the words "tag" and "element" interchangeably — but they mean different things. A tag is just the angle-bracket notation: <p> or </p>. An element...

Key Ideas

1What is an HTML Element?. Beginners often use the words "tag" and "element" interchangeably — but they mean different things. A tag is just the angle-bracket notation: <p> or </p>. ...

2Block vs Inline Elements. Every HTML element has a default display behaviour. The two most important categories are block-level and inline.

3Void (Self-Closing) Elements. Some elements have no content and no closing tag. These are called void elements (or self-closing elements). They cannot wrap text or child elements — they represent a...

4Nesting Rules. HTML elements can be placed inside other elements — this creates parent, child, and sibling relationships. The element that contains another is the parent. The element...

5The Most Common HTML Elements. HTML has over 100 elements, but you'll use about 30 of them for 95% of all web pages. Here's a quick reference:

Code Examples

<!-- This is a TAG (opening) -->
<p>

<!-- This is a complete ELEMENT -->
<p>Hello, world!</p>

<!-- HTML5 syntax — no closing slash needed -->
<img src="photo.jpg" alt="A scenic view">
<br>
<hr>
<input type="text" name="email">

<!-- XHTML style (trailing slash) — valid but unnecessary in HTML5 -->
<img s...

<!-- WRONG — block inside inline -->
<p>
  <div>This is invalid HTML.</div>
</p>

<!-- CORRECT — inline inside block -->
<p>
  This paragraph has <strong>important text</strong> inside it.
</p...