Basic HTML page elements

In this blog post we will describe basic HTML page elements.

  1. Basic HTML page structure.

    Basic HTML page elements

    <!DOCTYPE html>
    <html lang="en">
            <!-- Page content -->

    Every html page starts with DOCTYPE. This tag indicates that current document is HTML page.

    Other part of html page is located inside <html> tag. It has two parts:

    • <head> - contains information for browser (for example, page title, links to .js and .css files).
    • <body> - contains content of the page.
    • <html> tag may contain lang attribute. It describes page language.
  2. Head tag contains:

    • page title;
    • charset;
    • keywords;
    • page description;
    • links to .js ans .css files;
       <title>Page title</title>
       <meta charset="utf-8">
       <meta name="keywords" content="tag1, tag2">
       <meta name="description" content="Description of current page">
       <link href="style.css" rel="stylesheet">
       <script src="scripts.js"></script>
  3. Body tag contains:

    • paragraphs (<p>);
    • ordered/unordered lists (<ol>, <ul>, <li>);
    • terms (<dl>, <dt>, <dd>);
    • quotes (<blockquote>, <q>, <cite>);
    • marks (<mark>);
    • links (<a>);
    • images (<img>);
    • headers (<h1> ... <h6>);
      • it is recommended to have only one first-level header (<h1>) per page.
    • comments (<!-- Comment -->);
    • line breaks (<br>);
        <!-- Ordered list -->
        <!-- Unordered list -->
        <!-- Definition -->
        <blockquote>Big cite</blockquote>
        <q>small quote</q>
        <cite>cite's author</cite>
        <mark>this is marked text</mark>
        <a title="Title" href="">Wikipedia link</a>
        <img width="100" height="100" src="/images/sample-image.jpg" alt="Alternative text">


    1. one
    2. two

    • one
    • two


    Big cite

    small quote
    cite's author
    this is marked text
    Wikipedia link
    Alternative text