HTML 5 Semantics | All HTML 5 Tags, uses and explaination

pParagraphs tagp

You can use paragraphs for any type of text other than heading. Body font size is set to 16px


            p
            This is a paragraph text @ 16px size.
            p

This is a paragraph text @ 16px size.

h1Headingsh6

Headings tell what the page is about. Dont use it unintentionally. Make proper use of heading tags marking clearly what the different areas on the website are about. Do not pick a heading level type based on how it is supposed to look, choose a heading tag based on what it is supposed to mean to the user.


            h1
            This is h1 heading @ 2rem i.e 32px size
            h1

This is h1 heading @ 2rem i.e 32px size


            h2
            This is h2 heading @ 1.8rem i.e 28px size
            h2

This is h2 heading @ 1.8rem i.e 28px size


            h3
            This is h3 heading @ 1.6rem i.e 26px size
            h3

This is h3 heading @ 1.6rem i.e 26px size


            h4
            This is h4 heading @ 1.5rem i.e 24px size
            h4

This is h4 heading @ 1.5rem i.e 24px size


            h5
            This is h5 heading @ 1.4rem i.e 22px size
            h5

This is h5 heading @ 1.4rem i.e 22px size


            h6
            This is h6 heading @ 1.2rem i.e 19px size
            h6

This is h6 heading @ 1.2rem i.e 19px size

<Block> & <inline elements />

A list of block and inline elements

p
h1
section
article
header
footer
div

emItalicsi

Verbal emphasis vs visually distinguished. Use em for words that needs to be emphasised verbally and use i for decorative purpose.

em : Emplasis Italics
i : Visual-only italics


            p
            My
            em
            favourite
            /em
            character from
            i
            Marvels avengers
            /i
            is Iron Man.
            /p

My favourite character from Marvels avengers is Iron Man.

strongBoldb

Usage of bold tags strong and b

strong : Importance, seriousness, urgency
b : just bold, dont want to convery any meaning to screen readers.. instead use css with span.


            p
            strong
            Warning!
            /strong
            Do not be late.
            /p

Warning! Do not be late.


            p
            strong
            Chocolate and coffee
            /strong
            and other things I crave.
            /p

Chocolate and coffee and other things I crave.


            p
            This is some paragraph and we want to
            b
            make some things bold
            /b
            just to show the use of b tags.
            /p

This is some paragraph and we want to make some things bold just to show the use of b tags.

ulListsli

Ordered List, Unordered list and definition list

ul
liIngredient 1/li
liIngredient 2/li
liIngredient 3/li
/ul

Menu item 1 Menu item 2 Menu item 3

ol
liFirst do step 1/li
liThen follow step 2/li
liAfter step 2 do step 3/li
/ol

First do step 1 Then follow step 2 After step 2 do step 3

dl
  dtDefinition Term/dt
    ddDefinition description comes here.dd
    ddThere can be a second or upto n description too for each dt./dd
  dtAnother heading/dt
    ddDescription for another heading comes here./dd
/dl

Definition Term Definition description comes here. There can be a second or upto n description too for each dt. Another heading Description for another heading comes here.

blockquoteQuoteq

Blockquote and inline quote.

pThis is an inline quote,br / Albert einstein once said q cite="https://linktothequote"The best design is the simplest one that works./q/p

This is an inline quote, Albert einstein once said The best design is the simplest onethat works.

blockquote cite="https://linktothequote"
pThe best design is the simplest one that works/p
citeAlbert Einstein/cite
blockquote

This is a block quote The best design is the simplest one that works - Albert Einstein

timeDate & Time/time

Add an attribute called YYYY-MM-DD and hh-mm-ss.ddd+-hh:mm


            time datetime="2025-05-08"May
            8, 2025/time

May 8, 2025


            time datetime="15:45-05:00"3:45pm in Newyork/time


            time datetime="2020-11-04T19:00"Wednesday, Nov 4th at 7pm/time


            time datetime="2020-11-04 19:00-05:00"Wednesday, Nov 4th at 7pm/time

code Code pre line breaks br /

br is to give a line break.
code tags are used to show a piece of code on the webpage
pre tags are used to retain format, spacing etc, example show some poem in format that has multiple line breaks, or show code line by line.


            This is a single line
            br / broken into secong line
            and br / then the third line.

This is a single line broken into secong line and then the third line.

supSup, Sub, Smallsmall

Subscript, superscript and small text(text of low prominance, copyright info etc).


            hsub2subo

h₂o


            10supthsup, conditionsup1sup

10^th, condition¹, condition²


            small
            This is low importance text.
            /small

This is low importance text.

Images

alt attribute: descriptive.. avoid image name or irrelavant text.
current image is showing at this size because of a class called "img{width: 100%}. You can specify width and height on image via class or as attribute"


            img src="images/zebra.jpg" alt="Zebra in a Jungle" /

Image with dimensions. The image zebra is 1280x853 pixels. If we try 1/4 of it, ie. width = 1280/4


            img src="images/zebra.jpg" alt="Zebra in a Jungle" width="320"
              /

Size : 500 X 500, 70Kb
Island at size 500

Size : 1500 x 1500, 547Kb
Island at size 1500

Size 3000 x 3000, 1.8Mb
Island at size 3000

Responsive Images
Island

Picture elements Island

Figure and figcaption

Zebra — This is the picture of a zebra in a junle. Use descriptive text. Concept etc

heading

Description

Code comes here Output comes here

heading

Description

Code comes here Output comes here