SEO Fundamentals: HTML Syntax

Oscar de la Hera Gomez
A flower that represents SEO with the text "HTML Syntax" beneath it.

A brief guide describing the correct use of HTML syntax.

The following article addresses the fundamentals behind writing HTML that results in enhanced SEO.

This begins with using the appropriate document structure, placing metadata in the head and laying out the content within landmarks that use the appropriate syntax for the given case.

For those reading, one should always remember that HTML is written for robots and not for humans and therefore it is fundamental that HTML is written in a rich syntax that describes the content.

The global structure of a HTML Document

A screenshot of W3C showing the global HTML structure that is offered below.

According to the World Wide Web Consortium (W3C), the correct HTML structure for a document is the following:

For a more holistic understanding of how to structure pages and use landmarks, please carry out the World Wide Web Consortium (W3C) tutorial linked below.

Metadata

This image highlights how the title, description and image metadata affects the way Google displays the information of the page.

Metadata must be placed within the head of the document and should include information that's pertains to the page.

ARIA Landmarks

Examples of ARIA Landmarks as can be seen on the WCAG webpage linked below.

Rich Syntax

A screenshot of Mozilla's page that lists out all the available HTML elements.

It is important that a developer does not code a webpage using only "divs" within landmarks.

HTML has a rich syntax that allow developers to inform the robots the purpose of the contents.

For example, developers should use

  • Header tags (i.e. <h1/> - <h6/>) and paragraph tags (i.e. <p/>) for text to help robots understand how sections are broken down.
  • Lists (i.e. <ul/> or <ol/>) with individual items (i.e. <li/>) when representation that is meant to be grouped together (i.e. navigation bar links).
  • Tables (i.e. <table/>) with individual sections (i.e. <tr/> and <th/>) when arranging information into tables.
  • Code (i.e. <code/>) when demonstrating code.

Consult the World Wide Web Consortium's (W3C) Content Structure guide to learn more.

You may also want to read Mozilla's guide to learn everything that HTML has to offer.

Looking to learn more about SEO ?

Search our blog to find educational content on learning SEO and more.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details