HTML Basic Syntax & Elements
An HTML element is defined by a start tag, some content, and an end tag. In this chapter, you will master the syntax of HTML elements, empty elements, headings, paragraphs, comments, and line breaks.
Click Try it Yourself » to edit and test HTML elements live in the playground.
Example: Nested HTML Elements
2.1 Anatomy of an HTML Element
An HTML Element is everything from the start tag to the end tag:
| Start Tag | Element Content | End Tag |
|---|---|---|
<h1> |
My First Heading | </h1> |
<p> |
My first paragraph text. | </p> |
<br> |
None (Empty Element) | None |
HTML Element Structure Diagram
2.2 HTML Headings (<h1> to <h6>)
Headings are defined with the <h1> to <h6> tags. Headings are important for accessibility and Search Engine Optimization (SEO).
<h1>should be used for main titles (only one<h1>per page).<h2>to<h6>represent sub-sections in hierarchical order. Never skip heading levels (e.g. going from<h1>straight to<h4>).
Example: Heading Hierarchy
2.3 Paragraphs, Line Breaks (<br>) & Horizontal Rules (<hr>)
The <p> element defines a block of text paragraph.
HTML offers two special empty elements for layout formatting inside text:
<br>— Inserts a single line break without starting a new paragraph block.<hr>— Inserts a horizontal rule (thematic break) to separate content sections visually.
Example: Paragraphs with <br> and <hr>
2.4 HTML Comments
HTML comments are written as <!-- comment text -->. Comments are ignored by the browser and will not be displayed on the web page.
Comments are essential for documenting your code, making complex layouts understandable, or temporarily hiding elements during debugging.
Example: HTML Comments
💻 Chapter 2 Hands-On Code Challenge
Build a structured blog post layout applying element syntax, proper heading hierarchy, line breaks, horizontal dividers, and comments:
- Add an
<!-- Article Header -->comment before the main title. - Add an
<h1>for the blog post title and an<h2>for Section 1. - Write a paragraph with a
<br>line break separating two sentences. - Add an
<hr>horizontal rule divider. - Add an
<h2>for Section 2 and a second paragraph.
Starter Challenge Code
Chapter 2 Key Takeaways
- An HTML element consists of a start tag, content, and an end tag (e.g.
<p>text</p>). - Empty elements like
<br>and<hr>have no closing tag. - Headings range from
<h1>(most important) to<h6>(least important); use them hierarchically. - HTML comments are written as
<!-- comment -->and are not rendered on the web page.