HTML5 Template

The Basic Template

Use this template when you create an HTML5 webpage. It is loosely based upon a template found in "HTML5 & CSS3 for the Real World", by Alexis Goldstein, Louis Lazaris and Estelle Weyl.

As your needs evolve, you should modify this template to be appropriate for the specific needs of your specifc project or users.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Basic HTML5 Template</title>
    <meta name="description" content="Basic HTML5 Template">
    <meta name="author" content="C SCI 202 Student">

    <!-- link to external CSS file -->
    <link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
    <!-- Content of the page goes here. -->
    
    
    <!-- link to external JS file -->
    <script src="js/scripts.js"></script>
</body>
</html>

Breakdown

Line 1

The "DOCTYPE" line tells the browser what kind of "Standard Generalized Markup Language (SGML)" the file is using. SGML is a way to markup documents to add presentational, procedual, or description information. We are marking up our documents with HTML, so we specify the "html" doctype. There should be NO blank lines or other characters before the DOCTYPE.

<!DOCTYPE html>

Line 2

All HTML must be enclosed within an HTML element. Everything that is between the opening and closing html tags is parsed by the browser as HTML. The only thing that should be before html tag is the "DOCTYPE" tag. There should be nothing after you close the html tag.

We also have to specify the language of the page's content. We'll typically use "en" to specify "English."

<html lang="en">

If we are coding a page in Japanese, we'd use "ja" as the value. If the page were in Spanish we use "es" for the value.

If you are coding a specific version of the language you can also add in a two-character country code. For example "en-US" would say that this page is written in English, and uses the version of English used in the United States. This isn't usually used or needed.

Here is a reference: ISO-3166 Country Codes and ISO-639 Language Codes

Line 3

<head>

Line 4

Than set the character set for the page:

<meta charset="utf-8">

Line 1

Set the viewport to help make the page more responsive to different devices:

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

demo

Line 1

Examine the HTML elements that you used. If you've used any <div> tags, convert them to tags that have more meaning (are more semantic): <article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time>