contact - 2025

binh

design & dev

Semantic HTML for SEO – SEO Notebook

Date posted: September 14, 2025

Image Source: https://ahrefs.com/blog/semantic-search/#semantic-html

When I first started my web design journey and building websites, I focused more on design and functionalities without thinking about using the correct HTML tags. Everything was in random <h> tags, and every container was wrapped with <div>. I’ve since learned that using semantic HTML tags and structuring sections of the website correctly helps search engines (like Google) crawl and understand the site better, signifies to them that this is high-quality content, and benefits people with disabilities who use screen readers to identify and read content on your webpage.

Here is a very useful short guide on semantic HTML written by Semrush with a list of commonly used HTML tags along with their functionalities. Please read through the article before your web design project: https://www.semrush.com/blog/semantic-html5-guide/.

Notes:

  • Every webpage must include three main sections: <header>, <main>, and <footer>, all wrapped within the <body> tag.
  • The header menu must be a <nav> wrapped around a <ul> (unordered list) with menu items inside <li>. Use the native “WordPress Menu” widget in your page builder for the best results.
  • Use the <main> tag to indicate the primary content of the webpage. Inside the content, divide it into <section>s—for example, Hero section, Product Listing section, Features section, Testimonial section, etc. Use <article> for blog posts, news articles, etc.
  • Utilize tags for images such as <figure> for an image with an explanation instead of just an <img> tag (remember to add an alt property to describe the content of the image for screen readers), and <figcaption> to describe that <figure> image.
  • For other content: use <blockquote> for testimonials and citations, <cite> for references to book titles, authors, movie names, etc., and <time> for machine-readability such as uploaded time, event dates, or last updated times. (Use <time datetime=”YYYY-MM-DD”> format to ensure both readability and machine parsing.), <address> tag for business location.

This note is written based on my understanding, along with further research after learning the lessons from Jeffrey’s SEO for WordPress course by Lytbox Academy. There’s a great visual guide/cheatsheet for HTML semantic tags for webpages inside his course.

Please check out the course and buy it if you’re interested: https://lytboxacademy.com/seo-for-wordpress-course/.

tag:
SEO Notebook
share via
related posts

design & dev • build in public, thoughts

Navigating Challenges in My GSAP Learning JourneyOctober 23, 2025

design & dev • build in public

Intro to GSAP’s ScrollSmoother and ScrollTriggerOctober 16, 2025

design & dev • technology

Have you tried Comet Browser by Perplexity AIOctober 11, 2025
contact
please feel free to share what you think, any feedback is appreciated, kindly leave your message and email through the form and I'll get back to you as soon as possible.you can also email me directly at hello@binhnguyen.me
Semantic HTML for SEO – SEO Notebook

Image Source: https://ahrefs.com/blog/semantic-search/#semantic-html

When I first started my web design journey and building websites, I focused more on design and functionalities without thinking about using the correct HTML tags. Everything was in random <h> tags, and every container was wrapped with <div>. I’ve since learned that using semantic HTML tags and structuring sections of the website correctly helps search engines (like Google) crawl and understand the site better, signifies to them that this is high-quality content, and benefits people with disabilities who use screen readers to identify and read content on your webpage.

Here is a very useful short guide on semantic HTML written by Semrush with a list of commonly used HTML tags along with their functionalities. Please read through the article before your web design project: https://www.semrush.com/blog/semantic-html5-guide/.

Notes:

  • Every webpage must include three main sections: <header>, <main>, and <footer>, all wrapped within the <body> tag.
  • The header menu must be a <nav> wrapped around a <ul> (unordered list) with menu items inside <li>. Use the native “WordPress Menu” widget in your page builder for the best results.
  • Use the <main> tag to indicate the primary content of the webpage. Inside the content, divide it into <section>s—for example, Hero section, Product Listing section, Features section, Testimonial section, etc. Use <article> for blog posts, news articles, etc.
  • Utilize tags for images such as <figure> for an image with an explanation instead of just an <img> tag (remember to add an alt property to describe the content of the image for screen readers), and <figcaption> to describe that <figure> image.
  • For other content: use <blockquote> for testimonials and citations, <cite> for references to book titles, authors, movie names, etc., and <time> for machine-readability such as uploaded time, event dates, or last updated times. (Use <time datetime=”YYYY-MM-DD”> format to ensure both readability and machine parsing.), <address> tag for business location.

This note is written based on my understanding, along with further research after learning the lessons from Jeffrey’s SEO for WordPress course by Lytbox Academy. There’s a great visual guide/cheatsheet for HTML semantic tags for webpages inside his course.

Please check out the course and buy it if you’re interested: https://lytboxacademy.com/seo-for-wordpress-course/.

go backview source
Semantic HTML for SEO – SEO Notebook

Image Source: https://ahrefs.com/blog/semantic-search/#semantic-html

When I first started my web design journey and building websites, I focused more on design and functionalities without thinking about using the correct HTML tags. Everything was in random <h> tags, and every container was wrapped with <div>. I’ve since learned that using semantic HTML tags and structuring sections of the website correctly helps search engines (like Google) crawl and understand the site better, signifies to them that this is high-quality content, and benefits people with disabilities who use screen readers to identify and read content on your webpage.

Here is a very useful short guide on semantic HTML written by Semrush with a list of commonly used HTML tags along with their functionalities. Please read through the article before your web design project: https://www.semrush.com/blog/semantic-html5-guide/.

Notes:

  • Every webpage must include three main sections: <header>, <main>, and <footer>, all wrapped within the <body> tag.
  • The header menu must be a <nav> wrapped around a <ul> (unordered list) with menu items inside <li>. Use the native “WordPress Menu” widget in your page builder for the best results.
  • Use the <main> tag to indicate the primary content of the webpage. Inside the content, divide it into <section>s—for example, Hero section, Product Listing section, Features section, Testimonial section, etc. Use <article> for blog posts, news articles, etc.
  • Utilize tags for images such as <figure> for an image with an explanation instead of just an <img> tag (remember to add an alt property to describe the content of the image for screen readers), and <figcaption> to describe that <figure> image.
  • For other content: use <blockquote> for testimonials and citations, <cite> for references to book titles, authors, movie names, etc., and <time> for machine-readability such as uploaded time, event dates, or last updated times. (Use <time datetime=”YYYY-MM-DD”> format to ensure both readability and machine parsing.), <address> tag for business location.

This note is written based on my understanding, along with further research after learning the lessons from Jeffrey’s SEO for WordPress course by Lytbox Academy. There’s a great visual guide/cheatsheet for HTML semantic tags for webpages inside his course.

Please check out the course and buy it if you’re interested: https://lytboxacademy.com/seo-for-wordpress-course/.

go back