HTML structure of themes

The html structure is different on each theme

On this page we examine some valid themes to understand what it is:

The HTML structure

Each HTML page is composed of an architecture which should manage the fundamental construction grid which is composed of:

  • main WRAPPER
  • main CONTENT

Elementor's Hello theme

It's very essential because it should be extended as your needs.
Warning: natively it hasn't got a "Wrapper", but you can add it with a theme-child. READ more

This is its original structure:

  • Header (class: .site-header)
  • Content (class: .site-main)
  • Footer (class: .site-footer)

Ocean WP

The structure is composed of many useful elements and this makes it very solid.

Its structure is composed of a main-Wrapper called (# outer-wrap) and a sub-wrapper (#wrap) which combined define a perfect logic.

This is its structure:

  • Wrapper (ID: #outer-wrap)
  • Header (ID: #site-header)
  • Content (ID: #main)
  • Footer (ID: #site-footer)

Astra Theme

This theme is very well organized.
  • Wrapper (class: .site)
  • Header (class. .site-header)
  • Content (class: .site-content)
  • Footer (class: .site-footer)

Page Builder Framework

This is its structure:

  • Wrapper (ID: #container)
  • Header (ID: #header)
  • Content (ID: #content)
  • Footer (ID: #footer)

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us