What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <img>, <table>, and <article> - Clearly defines its content.

HTML <section> Element:

Output:

HTML <article> Element

Output:

HTML <header> Element:

Output:

HTML <footer> Element:

Output:

HTML <nav> Element:

Output5:

HTML <aside> Element:

Output:

HTML <figure> and <figcaption> Elements

Output: