How important is Semantic HTML?
❯ <div> or, <header>
❯ <div> or, <nav>
❯ <div> or, <section>
❯ <div> or, <article>
❯ <div> or, <aside>
❯ <div> or, <main>
❯ <div> or, <summary>
❯ <div> or, <footer>
✘ or, ✔
⇩
❯ <div> or, <header>
❯ <div> or, <nav>
❯ <div> or, <section>
❯ <div> or, <article>
❯ <div> or, <aside>
❯ <div> or, <main>
❯ <div> or, <summary>
❯ <div> or, <footer>
✘ or, ✔
⇩
➊ What is Semantic HTML?
⬘ HTML is used to structure and create a layout on a web page. Semantic HTML is a part of HTML that adds important meaning to these structures.
⬙ It lets web browsers, search engines, screen readers, RSS readers, and developers better understand it.
⬘ HTML is used to structure and create a layout on a web page. Semantic HTML is a part of HTML that adds important meaning to these structures.
⬙ It lets web browsers, search engines, screen readers, RSS readers, and developers better understand it.
➋ Benefits of using Semantic HTML
The most important benefits are,
❯ Improve the site's SEO positioning
❯ Help your site be more accessible
❯ Easier to maintain
Let's discuss these individually.
The most important benefits are,
❯ Improve the site's SEO positioning
❯ Help your site be more accessible
❯ Easier to maintain
Let's discuss these individually.
➋.➀ Improve the site's SEO positioning
⬘ Search engine crawlers need to distinguish between different types of data. Semantic tags tell what type of information is on a web page.
⬙ Meaningful content in a logical hierarchy can easily rank your page higher.
⬘ Search engine crawlers need to distinguish between different types of data. Semantic tags tell what type of information is on a web page.
⬙ Meaningful content in a logical hierarchy can easily rank your page higher.
➋.➁ Help your site be more accessible
⬘ There are many users who depend upon screen reader software to access the internet.
⬗ Using proper semantic tags would help them navigate through these screen readers more easily.
⬙ This way, our site would be more accessible.
⬘ There are many users who depend upon screen reader software to access the internet.
⬗ Using proper semantic tags would help them navigate through these screen readers more easily.
⬙ This way, our site would be more accessible.
➋.➂ Easier to maintain
⬘ Though semantic elements won't change the way text is displayed, they are closer to natural language.
⬙ When a project grows, more code is added. With semantic elements, it's easier to maintain and orient new developers.
⬘ Though semantic elements won't change the way text is displayed, they are closer to natural language.
⬙ When a project grows, more code is added. With semantic elements, it's easier to maintain and orient new developers.
➌ Examples of Semantic Elements
⬘ There are about 100 HTML elements that are semantic.
⬙ Below you can find some examples of semantic elements with a context in which an element could be used.
⬘ There are about 100 HTML elements that are semantic.
⬙ Below you can find some examples of semantic elements with a context in which an element could be used.
➀ Structural
❯ h1 to h6
❯ header
❯ nav
❯ main
❯ article
❯ section
❯ aside
❯ details
❯ summary
❯ footer
➁ Textual
❯ p
❯ ul
❯ ol
❯ li
❯ blockquote
➂ Inline Elements
❯ a
❯ strong
❯ em
❯ q
❯ abbr
❯ small
❯ h1 to h6
❯ header
❯ nav
❯ main
❯ article
❯ section
❯ aside
❯ details
❯ summary
❯ footer
➁ Textual
❯ p
❯ ul
❯ ol
❯ li
❯ blockquote
➂ Inline Elements
❯ a
❯ strong
❯ em
❯ q
❯ abbr
❯ small
➍ All HTML Elements
➎ Question: Should we stop using div or span?
No.
⬘ These two elements are essential in defining structures in HTML. Use it when the content is generic.
⬙ We should avoid any deep-level hierarchy of these elements.
No.
⬘ These two elements are essential in defining structures in HTML. Use it when the content is generic.
⬙ We should avoid any deep-level hierarchy of these elements.
🏁 Final Words
⬘ Using semantics, we can design "meaningful structures."
⬗ Semantic HTML helps websites carry more meaning and become more accessible.
⬙ Websites can be quickly developed and are easier to maintain.
⬘ Using semantics, we can design "meaningful structures."
⬗ Semantic HTML helps websites carry more meaning and become more accessible.
⬙ Websites can be quickly developed and are easier to maintain.
Hey 👋
I am a Tech Writer, Educator, and Mentor from India 🇮🇳, here sharing
✰ Tutorials
✰ Tricks
✰ Career Tips
✰ Cheat Sheets
✰ Practice Questions
✰ Project Ideas
on
➠ Web Development
➠ Data Structures and Algorithms
➠ Databases
Thanks for reading. 🙏
I am a Tech Writer, Educator, and Mentor from India 🇮🇳, here sharing
✰ Tutorials
✰ Tricks
✰ Career Tips
✰ Cheat Sheets
✰ Practice Questions
✰ Project Ideas
on
➠ Web Development
➠ Data Structures and Algorithms
➠ Databases
Thanks for reading. 🙏
Loading suggestions...