Skip to content

2.2 HTML Boilerplate

(Basic Structure) - Always start the homepage of a website with index.html - It is worth noting that we named our HTML file index. We should always name the HTML file that will contain the homepage of our websites index.html. This is because web servers will by default look for an index.html page when users land on our websites - and not having one will cause big problems.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My First Webpage</title>
  </head>

  <body>
    <h1>Hello World!</h1>
  </body>
</html>

The DOCTYPE

  • Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document.

  • The latest version of HTML is HTML 5. Doctype: <!DOCTYPE html>

HTML Element

  • After doctype we must provide an <html> element. This is the root element of the document, every other element in the doc is a descendant of the <html> element.

    • Included in every document
<!DOCTYPE html>
<html lang="en">
</html>

lang attribute

  • Specifies the language of the text content in the element

    • Since this element encompasses the whole page, it specifies the language for the whole document

  • Helps with assistive technologies (screen readers)

Head Element

  • The <head> element is where we put important meta-info about our webpages, and stuff required for our webpages to render correctly in the browser

  • There should not be any elements that display content on the webpage

Charset Meta Element

  • Always have the meta tag for the charset encoding of the webpage in the head element:

    • <meta charset= "utf-8">

  • Very important because it ensures that the webpage will display special symbols and characters correctly in the browser

Title Element

  • Always in the head element

    • Ex: <title>My First Webpage</title>

  • Gives the browser tab a name

  • If no title is given, it will just say index.html

Body Element

  • The final element needed to complete the HTML boilerplate is the <body> element.

  • This is where all the content displayed to the users will go

    • text, images, lists, links, etc

  • The body element is also within the HTML element and is always below the head element

Viewing HTML Files in the browser

  • Terminal: google-chrome index.html

VSCode Shortcut

  • Built-in shortcut for generating boilerplate in one go

  • Needs .html extension on file

  • Empty HTML doc, press !