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">
        <head></head>
        <body>
            <!-- Page content -->
        </body>
    </html>
    

    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;
    <head>
       <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>
    </head>
    
  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>);
    <p>
        <h1>Header</h1>
        <!-- Ordered list -->
        <ol>
            <li>one</li>
            <li>two</li>
        </ol>
        
        <!-- Unordered list -->
        <ul>
            <li>one</li>
            <li>two</li>
        </ul>
        
        <!-- Definition -->
        <dl>
            <dt>Term</dt>
            <dd>Definition</dd>
        </dl>
        
        <blockquote>Big cite</blockquote>
        <q>small quote</q>
        <cite>cite's author</cite>
        
        <mark>this is marked text</mark>
        
        <a title="Title" href="https://wikipedia.org">Wikipedia link</a>
        
        <img width="100" height="100" src="/images/sample-image.jpg" alt="Alternative text">
    </p>
    

    Header

    1. one
    2. two

    • one
    • two

    Term
    Definition

    Big cite

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

22.04.2018