HTML gives you many tags to label the different parts of your content. Choosing the right tag is called using semantic HTML, and it helps browsers, search engines and screen readers understand your page.
Headings and paragraphs
Headings run from <h1> down to <h6>. Use <h1> for the main title of the page and smaller numbers for less important headings. Normal blocks of text go inside <p> (paragraph) tags.
<h1>My Blog</h1>
<h2>First Post</h2>
<p>Today I learned HTML.</p>Making text stand out
Use <strong> to mark text as important; browsers show it in bold. Use <em> to add emphasis; browsers show it in italics. The older tags <b> and <i> also produce bold and italic but carry no meaning.
Line breaks and rules
Some tags are empty, meaning they have no closing tag and no content. <br> forces a line break inside text, and <hr> draws a horizontal line to separate sections.
Grouping content
The <div> tag is a block-level container used to group larger sections together. The <span> tag is an inline container used to wrap a small part of text, for example to colour one word. Neither adds meaning on its own; they are mainly for styling with CSS.
<div>
<p>Price: <span>RM 20</span></p>
</div>Comments
You can leave notes in your code that the browser ignores. A comment starts with <!-- and ends with -->. Comments help you and your teammates remember what a section does.
Remember
- Use one <h1> for the main title, then <h2> and below.
- <strong> and <em> carry meaning; <b> and <i> only change looks.
- <br> and <hr> are empty tags with no closing tag.
- <div> groups blocks; <span> wraps inline text.