What a web page consist of

<!DOCTYPE html>
<html lang="en">
  <head>    
    <title>HTML 5 Boilerplate</title>
    <meta name=”description” content=”This is an example of a meta description tag.”>
    <link rel=”canonical” href=”http://example.com/page/3/”>
    <meta name=”robots” content=”noindex,follow” />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
  </head>
  <body>
    <nav>
        <ul>
          <li><a href="https://example.com">Home</a></li>
          <li><a href="https://example.com/about">About us</a></li>
          <li><a href="https://example.com/contact">Contact us</a></li>
        </ul>
    </nav>
    <main>
        <h1>This is a headline!</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <h2>This is a headline!</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <h3>This is a headline!</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <h4>This is a headline!</h4>
            <a rel=”follow” href=”http://example.com/page”>Anchor Text</a>
        <h2>This is a headline!</h2>
            <img src=”http://example.com/beach-ball.jpg” alt=”beach ball”>
    </main>
    <footer>
        <p>Legal information</p>
        <p>Contact us</p>
    </footer>
    <script src="index.js"></script>
    <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "Recipe",
          "author": "John Smith",
          "cookTime": "PT1H",
          "datePublished": "2009-05-08",
          "description": "Tuna salad.",
          "image": "tunasalad.jpg",
          "recipeIngredient": [
            "1 tin of canned tuna",
            "1 egg"
          ],
          "interactionStatistic": {
            "@type": "InteractionCounter",
            "interactionType": "https://schema.org/Comment",
            "userInteractionCount": "140"
          },
          "name": "Beloved tuna salad",
          "nutrition": {
            "@type": "NutritionInformation",
            "calories": "240 calories",
            "fatContent": "9 grams fat"
          },
          "prepTime": "PT15M",
          "recipeInstructions": "Cut tuna, cut eggs.",
          "recipeYield": "4 portions",
          "suitableForDiet": "https://schema.org/LowFatDiet"
        }
    </script>
  </body>
</html>

Documentation: HTML5 specification

  • Tags head and body – main division of the page. This division is is important from technical point of view (some tags are supposed to be in head, some – in body).
  • Tags nav, aside etc. Unofficially called Semantic HTML. The importance of such semantic markup is to be better understandable by search engines.
  • title – Include the main keyword here. Make title unique on your page.
  • description – Include the main keyword here. Make description unique on your page.
  • canonical – Notify search engines where is the main page in case any duplicates occur.
  • robots – manipulate wheter search engine robots are supposed to index this page or not.
  • favicon – very important for Search Engine Results Pages (also known as “SERPs”)
  • h1 – Include the main keyword here. Make h1 unique on your page.
  • h2, h3, h4 – Include keywords here. Do not be overenghusiastic
  • Paragraphs – Include keywords here. The higher in the page the better. The higher in the paragraph the better.
  • JavaScript – just some script to be executed in the browser (animation, reacting to user’s actions etc.). Google can interpret JavaScript, but if we want to be understood by a search engine, plain HTML is more straighforward. And not necessarily other search engines index anything rendered by JavaScript
  • Microdata – very much loved by search engines and is used for showing rich snippets.

Contents

Rate article
Add a comment