HTML5 and Schema.org

Check the markup, leave comments, and share the results.

Checking the Website Header

  • It is a child element of BODY Not nested inside main, article, section, aside, nav, blockquote, details, dialog, fieldset, figure, or td.
  • The whole block is wrapped in <header role="banner"> role banner mostly contains site-oriented content, not content specific to a single page.
  • Mark up the logo
    • SRC is a large JPG/PNG, while SRCSET uses SVG If there is no SVG for SRCSET, use a raster version in sizes appropriate for the logo area.
    • Schema.org — Organization You can add the company/site name, slogan, URL, logo, name, and slogan to the markup.
  • Primary site-wide navigation There is a good guide with examples, but without markup.
    • The whole section is wrapped in <nav aria-label="Main Menu">
    • There is a hidden "Main Menu" heading For example: <h2 class="visuallyhidden">Main Menu</h2>
    • Prefer an unordered UL list: <ul role="menubar"> with <li role="menuitem"> It does not have to be a UL list, but it definitely should not be OL if the order of links is not meaningful.
    • Schema.org — SiteNavigationElement
  • Site-wide search form There is a good guide with examples, but without markup.
    • role search on the form: <form role="search">
    • type search on the input: <input type="search" placeholder="search for...
    • Placeholder matches the site topic, such as "Find ..."
    • Label "Site search" can be visually hidden
    • Button text "Run search" can be visually hidden
    • Implement Schema.org — SearchAction

Checking the Website Footer

  • It is a child element of BODY Not nested inside main, article, section, aside, nav, blockquote, details, dialog, fieldset, figure, or td.
  • The whole block is wrapped in <footer role="contentinfo"> role contentinfo is ideal for landmarks, copyright, privacy-policy links, and contacts for the site itself, not the article author.
  • Mark up the copyright
    • Use the <small> tag for copyright and other legal notes
    • Schema.org — WPFooter You can add the year and owner to the markup: copyrightYear, copyrightHolder.
  • Lower site-wide navigation There may be several separate navigation sections or columns.
    • Each section is wrapped in <nav>
    • H2-H6 headings exist for all sections they can be visually hidden
    • This does not have to be a UL list, but it definitely should not be OL if link order is not meaningful.
  • Contact information
    • The <address> tag is used for contacts
    • Schema.org — PostalAddress Mark up name, telephone, email, and similar contact fields.
    • Links to legal pages are inside <small> I have heard recommendations to set nofollow on such links, but I have also heard that search algorithms like privacy policies and similar pages.

Checking Breadcrumbs

  • The whole section is wrapped in <nav aria-label="breadcrumbs">
  • There is a hidden "Breadcrumbs" heading
  • It is an ordered OL list <ol>
  • Schema.org is present — BreadcrumbList

Checking Pagination Elements

A page can contain several pagination elements for different sections.
There is a good guide with examples.
  • The whole section is wrapped in <nav aria-label="pagination">
  • The pagination section is inside the section whose items it belongs to.
  • There is a hidden heading, for example "Pagination"
  • It is an ordered OL list <ol>
  • The link to the current page has aria-current="page": <a aria-current="page" href="...">
  • Add aria-disabled="true" to inactive Next and Prev controls

Checking the Main Content Template

A site can have several different page templates. Check each one separately: product template, category template, blog article template, homepage, and so on.
  • It is a child element of BODY Not nested inside article, section, aside, nav, blockquote, details, dialog, fieldset, figure, or td.
  • The whole block is wrapped in <main> Prefer placing it first in the code after body, above all article, section, aside, nav, blockquote, details, dialog, fieldset, figure, and td elements.
  • Prefer making h1 the first element inside main It can be nested in header, but should still be above all article, section, aside, nav, blockquote, details, dialog, fieldset, figure, and td elements.
  • Schema.org markup
    • Implement Schema.org markup depending on the content Product/service, Article, Contact page, How-to guide, Event, Book, Movie, Series, Recipe, and more…
    • Use mainEntityOfPage or mainEntity in Schema.org markup To point to the most important element on the page.
  • Publication date and modification date
    • Use the time tag with the datetime attribute For example: <time datetime="2022-01-25 19:00">January 25</time>
    • Place it in Header or Footer, depending on how important the date is for the content Footer is better if the information remains relevant for a long time.
  • Content author
    • Place it in Header or Footer, depending on how important the author is for the content Use Header only when the content is personal, such as the author's own opinion or a case from their life.
    • Mark up Schema.org — Person Prefer adding links to social profiles, the author's personal blog, and other proof that the person is real. This can be done in hidden markup with <link itemprop="sameAs" href="author-link">. If the author has a personal website or page, specify it with <link itemprop="url" href="site-or-page-link">.
  • Rating
  • Reviews This list can also be used to check comments, but only with the corresponding Schema.org markup — Comment.
    • Wrap the whole section in <section> Of course it should be nested in main and be a direct section of it.
    • h2 heading Make the visible title a heading, or add a hidden one if the design does not need a heading.
    • The review submission form is inside this section Sometimes the form is outside the section with the reviews themselves, and that is incorrect.
    • Each individual review
      • Wrap the review in <article>
      • h3 heading The heading number is not critical, but I recommend hierarchical order for compatibility. Code is interpreted by more than Google.
      • Mark up Schema.org — Review Prefer using Person markup again inside it for the review author.
      • Use the time tag with datetime for the review date For example: <time datetime="2022-01-25 19:00">Jan 25, 2022</time>
      • A reply to a review is nested with <section> and has an h4 heading
  • Related / Recommended / Bought together / Promotions / Popular section
    • Wrap the whole section in <section> It should be a child section of main if the selection depends on the current content; otherwise it should be outside main and inside footer.
    • h2 heading Make the visible title a heading, or add a hidden one if the design does not need a heading.
    • Each entity: article, product, service, and so on
      • Wrap the entity section in <article>
      • h3 heading
      • Add Schema.org markup depending on the entity type You can specify <link itemprop="mainEntityOfPage" href="entity-page-link"> in the markup.
  • Questions and answers: FAQ
    • Wrap the whole section in <section> It should be a child section of main, but if these are general site questions, it can be outside main and inside footer.
    • h2 heading
    • Mark up Schema.org — FAQPage
    • Each question and answer
      • Wrap it in <section> or <article>
      • Format the question as an h3 heading

Checking Semantic Markup of Other Page Elements

Site-wide element, template element, or element inside the main content: these are general checking rules.
  • Sectioning elements are marked up correctly
    • <section> is part of the parent section and contains a heading.
    • <article> belongs to the parent section, but also stands on its own. It contains a heading.
    • <nav> is any navigation section. It contains a heading.
    • <aside> is indirectly related or unrelated information. It can contain a heading.
    • <header> is important extra information about the content.
    • <footer> is less important extra information about the content.
    • <address> is contact information related to an article ancestor or to body.
  • Grouping elements are used correctly
    • <p> is a paragraph. You can skip it and write directly inside a <div>, but it is better to choose the tag that best matches the meaning of the text.
    • <hr> indicates a transition to another topic inside a sectioning element.
    • <pre> is used when original formatting and indentation must be preserved. For displaying a code block, use <pre><code>.
    • <ul> + <li> is a list where order is not important.
    • <ol> + <li> is a list where item order matters.
    • <menu> + <li> is a list of actions, such as like, compare, add to cart.
    • <dl> + <dt> and <dd> is a list of values, such as color: white; size: XXL.
    • <blockquote> is a quote. * It is part of the parent block, but the quote content does not affect it.
    • <figure> and <figcaption> are an attachment or illustration. * It is part of the parent block, but its content does not affect it.
  • Check phrasing and text-level elements
    • <strong> is an important meaningful phrase in a larger text.
    • <b> is for page or site keywords.
    • <i> is for terms, foreign words, and allegories. Do not use it to insert font icons.
    • <br> is NOT for separating thematic groups in a paragraph and NOT for moving individual lines. It is for multiline display of a single piece of information, such as a poem or postal address.
    • <time> is for dates and/or times.
    • <data> + <value> is not for dates; it is for specifying a value expressed as text: <data value="7">Seven</data>
    • ... and many others >>>

Talk Video

Useful Links

Comments


You can leave a comment, ask a question, or share your opinion. Feedback helps us improve these materials.