Toll Free: 1-877-695-7388

GTA: (647) 699-2838

Search Engine People
  • SEO
  • SEM
  • CRO
  • Display
  • Blog
  • Why Us
  • Contact
  • Join Our Team
  • Get A Quote

Toll Free: 1-877-695-7388

GTA: (647) 699-2838

Basic web page layout in HTML5

Laura Peragallo | July 10th, 2012
Tweet
Share
Share
Pin
0 Shares

html5

There is a lot of buzz about HTML5 being a breakthrough which will improve websites from a design view point and SEO. Even though HTML5 won't be completely supported until 2022, there is no reason not to become familiar with some of the basics.

HTML5 uses new semantically rich elements that convey the purpose of the element to both developers and browsers. Tags like <header>, <footer>, <aside>, <nav> make it easier to structure pages and enables browsers to have more control regarding how the web pages are displayed. The hope is that once big named browsers are compatible with HTML5 loading times will be faster, sites will be easier to navigate and there will be richer content.

Here list a list of some the basic elements:
<header> - The header element is intended as a container for introductory information about a section or the entire webpage. It could contain the website name, a tag line or slogan and/or the company logo.<nav> " This element is rather self-explanatory. It creates the navigation or menu bar. Keep in mind that not all the links in a web page have to be inside a <nav> element; only those that are part of the main navigation should be container here.

<section> - Represents a thematic grouping of content, typically with its own heading. Ideal for grouping content that share a specific theme like news articles and to break up a document into topical sections. It is not intended to contain the main body of a document since this is what the article element is for (see below).

<aside> - This element represents content that is related to the main content but is not really part of it. Quotations, a sidebar of related links, advertising, etc. would be contained within the aside element.

<footer> - This element contains additional information related to its parent element. A footer placed at the end of the body will provide additional information about the document. Some examples could be an authors bio, links to related articles or copyright information. This element can also be used inside different sections within the body, giving additional information about specific sections.

<article> - This element represents a self-contained section of relevant information. This can be in the form of newspaper articles or blog entries. The <article> element can be nested to show a list within a list of related items; for example, users comments in a blog entry.

<hgroup> - This element is used to group headings. Its ideal for when the heading of a section or document has multiple levels of sub-heading. It should only contain a group of <h1>"<h6> element(s), and be used for subtitles, tag lines, or alternative titles.

HTML5 can be an amazing design tool. With the addition of new elements unique to HTML5 the mark-up of a document easier and more intuitive. The page is effectively divided into sections and as websites get more and more complex, these tags make it easier to identify, style, and shape the layout of a website.

(If you liked this, you might also enjoy What SEOs Ought to Know About HTML 5 )

Tweet
Share
Share
Pin
0 Shares
Posted in Web DesignTagged html5, Web Design

About the Author: Laura Peragallo

I take design very seriously, sometimes dreaming in HTML. The rest of life...not so much. See more of my design-related thoughts at http://www.lpdesignhelp.com.

Recent Posts

  • Maximizing Your E-Commerce Sales:
    A CRO Audit Guide
  • Movin’ On Up! Why Migrating to Google Analytics 4 (GA4) Should be a Priority
  • A Year in Review: The Digital Marketing Trends That Defined 2021
  • The Basics of Video Marketing
  • Just How Much Do Google Reviews Impact Your SEO Ranking?

Categories

  • Analytics & ROI Analysis
  • Company News
  • Content
  • Conversion Optimization
  • CRO
  • Display Advertising/RTB
  • Email Marketing
  • En Español
  • En Français
  • Inbound Marketing
  • Lead Nurture & Marketing Automation
  • Local Search
  • Marketing
  • Mobile
  • Partnership Marketing
  • PPC
  • PR
  • SEO
  • Social Media Marketing
  • Web Design

Additional Posts

The 5 Worst Ways You Can Link Build (And Some Better Alternatives)

July 10th, 2012 | by Jason Habing

What the Panda and Penguin Updates Mean for the Future of SEO

July 9th, 2012 | by Don Campbell

How to Build a Community of Commenters At Your blog

July 9th, 2012 | by Rick LaPoint

LET'S TALK

Need more information or want to get in touch?

Get in touch!
  • SEO
  • SEM
  • Display
  • Blog
  • Why Us
  • Join Our Team
  • Contact Us
  • Local SEO
  • Small Business SEO
  • Enterprise SEO
  • International SEO

LOCATION

1305 Pickering Parkway,
5th Floor Pickering, L1V 3P2

PHONE

Toll Free: 1-877-695-7388
Greater Toronto Area: (647) 699-2838

Social

© Search Engine People Inc. 2023 – Canada’s Top Digital Agency
© SEP 2023 – A Search Engine People Company | Privacy Policy

Search Engine People