HTML Semantic Elements

HTML semantic elements clearly describe their meaning to browsers, search engines, and developers.
They improve readability, accessibility, and SEO.

Common Semantic Elements

<header>Site header</header>
<nav>Navigation menu</nav>
<main>Main content</main>
<section>Content section</section>
<article>Independent content</article>
<aside>Sidebar content</aside>
<footer>Page footer</footer>

Semantic vs Non-Semantic

SemanticNon-Semantic
<header><div>
<nav><span>
<article><div>

Why Use Semantic Elements

  • Clear content meaning
  • Better accessibility
  • Improved SEO
  • Cleaner code structure

Important Notes

  • Use semantic tags where possible
  • Avoid excessive <div> usage
  • One <main> per page

Focus Keyword

HTML Semantic Elements

Meta Description

Learn HTML semantic elements and how they improve structure, accessibility, and SEO with simple examples.

HTML Computer Code Elements

HTML provides elements to display computer code and technical text correctly.

Common Code Elements

<code>console.log("Hello");</code>
<pre>
function greet() {
  return "Hello";
}
</pre>
<kbd>Ctrl + S</kbd>
<samp>File saved</samp>
<var>x</var>

Elements Explained

  • <code> → inline code
  • <pre> → preformatted text
  • <kbd> → keyboard input
  • <samp> → program output
  • <var> → variables

Important Notes

  • Preserve formatting with <pre>
  • Use semantic code elements
  • Improves readability of technical content