HTML tutorial

Document structure

  • Doctype defines type of the HTML document
  • html is root element of the HTML document
  • head element defines a header of the HTML document
  • body element defines a body of the HTML document
<!DOCTYPE html>
<html lang="en">
    <head>
     
    </head>

    <body>
      
    </body>
</html>

Document type

Since HTML 5 only html type allowed 

<!-- HTML 5 -->
<!DOCTYPE html>

<!-- Couple old types for example -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The head element is a container for metadata of the HTML document. This part not visible for user but used by browsers, search engines and other web services. Next elements allowed inside head element:

  • base specifies a base for all relative urls and a default target for all links on a page
  • link defines a link between a document and an external resource like css
  • meta defines metadata of a document
  • title defines a title of a document
  • script defines a client-side script, usually on JavaScript language
  • style defines how HTML elements should render in a browser
<head>
  <meta charset="UTF-8">
  <meta name="description" content="some text">
  <meta name="keywords" content="HTML,CSS,JavaScript">
  <meta name="author" content="FirstName LastName">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <script src="/js/jquery-3.4.1.min.js"></script>
  <title>document title</title>
  <style>
      a mark{
          text-decoration: underline;
          text-decoration-color: #0a5ffe;
      }
  </style>
</head>

Element body

The body element is a container for the document's body. It can contain text, hyperlinks, images and other content visible to the user.