Step 12

There are best practices and coding conventions when it comes to authoring HTML documents. A good starting point is given on W3School's HTML Style Guide. You can search online for more resources. (You will find many).

We've already followed many of the points made in W3School's HTML Style Guide. We will polish our work by incorporating a few which we've left out.

HTML <!DOCTYPE> Declaration

  • Add to the very top of index.html
<!DOCTYPE html>

The <!DOCTYPE> declaration is not an HTML tag. It is "information" to the browser about what document type to expect.

Add the lang Attribute and Character Encoding

  • Add to lang attribute to the <html> tag:
<html lang="en-us">
  • Use the <meta> tag to declare the character encoding used in your HTML document. (Place it right after the <head> opening tag.)
<meta charset="UTF-8">

To ensure proper interpretation and correct search engine indexing, both the language and the character encoding should be defined as early as possible in an HTML document.

Setting The Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The viewport gives the browser instructions on how to control the page's dimensions and to scale. It is needed for responsive web design, which aims to make your web page look good on all devices.

Separate the "style" from "content"

It is considered a good practice to separate style from content. This means using <style> element instead of inline style attributes. It is considered a better practice to take this a level further and move all the styling into a separate file.

  • Create a style.css file (in the same folder where index.html is).

  • Move everything inside the <style></style> tag to style.css.

  • Delete the style element from index.html

  • Add the following where <style> element used to be:

<link rel="stylesheet" href="style.css">

Separate JavaScript from HTML

We can make a similar argument to that made earlier about separating style from the content, for separating "scripts" from the content.

  • Create a script.js file (in the same folder where index.html is).

  • Move everything inside the <script></script> tag to script.js.

  • Update the <script> element 

<script src="script.js"></script>