HTML5 Semantic Elements Learn Now!
We use the semantic elements for code readability to the screen reader and devs . The semantic elements helps in clean code and SEO too.
Observer the below code snippet what all it contains, its all connected to the semantic tags
- Here we have <html lang=”en”>it will tell the HTML language
- Next we put <head>tag in which we have meta tags [learn more about meta here]
- Now we put the body tag which will contain all the page contents [Learn more here]
What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser and the developer.
Lets take some examples
- Non-semantic elements: <div> & <span>- tells nothing about its content
- semantic elements: <header>,<aside>&<section>-clearly defines its contents.
Here you can see the layout of a semantic page
The direct children of the body must be wrapped in semantic tags to indicate users about the various purposes of different parts of a webpage.
HTML <header>Element:
The <header>element represents a container for introductory content or a set of navigational links.
1 one or more heading elements (<h1> - <h6>)
2 logo or icon
3 authorship informationA header for an <article>:
A Image Tag
Image tags (<img>) must contain alternative text (alt=" ") for a screen reader to read out loud to the user.
For example,
<img src="images/flower.jpg" alt="Pink flower">
However, images with no semantic meaning — such as those which are solely decorative — or of limited informational value, should have their alt attributes set to the empty string (“”). [Learn More Here]
Author : [Naveen Gumaste]
