HTML

Hypertext Markup Language. The structure of a webpage.

A web browser parses HTML and displays the content as a webpage. Below are examples of the HTML used to create this page.


HTML outline of this page:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang= "en">
  <head>
    <meta charset="UTF-8">
    <title>HTML</title>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    // content goes here
    <script src="javascript/main.js"></script>
  </body>
</html>

Notice the <head>, <body> and <script> tags.


Head:

1
2
3
4
5
<head>
  <meta charset="UTF-8">
  <title>HTML</title>
  <link rel="stylesheet" href="css/main.css">
</head>

The <head> contains metadata and CSS. The metadata contains information and tells the browser how to format the webpage. The CSS describes how to style the page. It is important to include the CSS in the <head> because the browser loads content top to bottom. The faster the browser processes these files, the quicker the page can load.

Body:

1
2
3
4
5
6
7
8
9
<h3>Body</h3>
<pre><code class="language-markup">
    .. code you see here ..
</code></pre>
<p>The body contains the visible elements of a webpage
made up of content such as paragraphs, headlines, menus,
lists, forms, buttons, etc. The code above was used to
display this message.</p>
<img src="img/rolleyes.gif">

The body contains the visible elements of a webpage made up of content such as paragraphs, headlines, menus, lists, forms, buttons, etc. The code above was used to display this message.


Scripts:

1
2
3
  <script src="javascript/main.js"></script>
  </body>
</html>

For the most part, scripts are best placed at the bottom of an HTML page. This is so they are loaded last, allowing the visual elements of the page and CSS to load first. Sometimes certain scripts need to load first for the webpage to work properly. But unless necessary, scripts should be placed last, joined and minified. This reduces HTTP requests and sends less data with each request which can speed up page load time.