Scribd
Upload
89 views

Semantic HTML Use Cases

This document discusses the use of various semantic HTML elements such as header, nav, main, aside, footer, anchor, button, figure, and image. It provides examples of when each element should be used, such as using header for introductory content, nav for navigation links, main for the primary content, and footer for the footer of a section. It also distinguishes between using anchor vs button elements and figure vs image elements.

Uploaded by

Hruday charan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
89 views

Semantic HTML Use Cases

This document discusses the use of various semantic HTML elements such as header, nav, main, aside, footer, anchor, button, figure, and image. It provides examples of when each element should be used, such as using header for introductory content, nav for navigation links, main for the primary content, and footer for the footer of a section. It also distinguishes between using anchor vs button elements and figure vs image elements.

Uploaded by

Hruday charan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

George Moller

_georgemoller

S E M A N T I C

H T M L

U S E

CASES
George Moller
_georgemoller

01 <HEADER>
<MAIN>
<ASIDE>
George Moller
_georgemoller

02 <FOOTER>
George Moller
_georgemoller

03 MORE USE CASES


<HEADER>

<NAV>
George Moller
_georgemoller

04 <HEADER>
The header element represents a group of
introductory or navigational aids.
<NAV>
Represents a section of a page that links to
other pages or to parts within the page.
<MAIN>
Main content of the page.

Has to be unique.
George Moller
_georgemoller

05 <ASIDE>
Represents a section of a page that consists of
content that is indirectly related to the content
around the aside.

<FOOTER>
Represents a footer for its nearest ancestor
sectioning. For example, the one in the
screenshot represents a footer for the <body>,
as it’s the nearest ancestor sectioning.

George Moller
_georgemoller

06 ANCHOR VS BUTTON
<ANCHOR> <BUTTON>
Contact us Sign in!
Use it to redirect the user to a destination Best suited for actions that don’t require
page or a section within a page.
redirection. Commonly used with onClick
functions.

<BUTTON>

<ANCHOR>
George Moller
_georgemoller

07 FIGURE VS IMAGE
George Moller
_georgemoller

08 FIGURE VS IMAGE

The image is literally a part of the post content, so it's not a


self-contained unit, and thus a figure tag would be inappropriate.

You might also like