Hypertext Markup Language Basic

2 min readDec 21, 2020

HTML stands for Hypertext Markup Language. It is the standard markup language for documents designed to be displayed in a web browser. How to we write a code for an HTML.

<!DOCTYPE html>  #lets a browser know it an HTML document.

The <!DOCTYPE HTML> is always required at the top of the HTML document. The next step is a html element which defines the root of an HTML document. which is a follow by a head element and a body element. Each of this elements require an opening and closing element. Example below.

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
 </body>
</html>

The head element contains metadata/information, link, and title for the document. <meta> elements always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings. The <link> tag defines the relationship between the current document and an external resource.

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, 
              initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>HTML Elements Reference</title>
</head>

The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. There can only be one <body> element in an HTML document.

<body>
  <header> 
    <nav>
      <a href="/html/">HTML</a> |
      <a href="/css/">CSS</a> |
      <a href="/js/">JavaScript</a> |
      <a href="/python/">Python</a>
    </nav>
  </header>  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>  <footer>
    <p>Author: Okechukwu Uneze</p>
    <p><a href="mailto:oke@example.com">oke@example.com</a></p>
  </footer></body>

The <header> element represents a container for introductory content or a set of navigational links.

A <header> element typically contains:

one or more heading elements (<h1> — <h6>)
logo or icon
authorship information

The <nav> tag defines a set of navigation links.

The <footer> tag defines a footer for a document or section.

A <footer> element typically contains:

authorship information
copyright information
contact information
sitemap
back to top links
related documents

The <p> tag defines a paragraph.

Now that we have all this information lets put together and is how it looks.

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <meta name="description" content="Free Web tutorials">
   <meta name="viewport" content="width=device-width, 
              initial-scale=1.0">
   <link rel="stylesheet" href="styles.css">
   <title>HTML Elements Reference</title>
 </head>
 <body>
   <header> 
    <nav>
      <a href="/html/">HTML</a> |
      <a href="/css/">CSS</a> |
      <a href="/js/">JavaScript</a> |
      <a href="/python/">Python</a>
    </nav>
   </header>   <h1>This is a heading</h1>
   <p>This is a paragraph.</p>   <footer>
    <p>Author: Okechukwu Uneze</p>
    <p><a href="mailto:oke@example.com">oke@example.com</a></p>
   </footer> </body>
</html>

Sources: W3Schools

Written by Okechukwu Uneze