How to Set Up a Web Page with HTML5 - dummies

How to Set Up a Web Page with HTML5

By Andy Harris

Whether you’re an experienced web-page designer or not so much, you can build a basic HTML5 page quite easily. Just open up any text editor and add the following code:

<html lang = "en">
  <!-- basic.html -->
  <meta charset = "UTF-8" />
  <h1>Level One Headline</h1>
    This is a paragraph.
    Note that the text is automatically wrapped.

This code creates this page:


To build a basic HTML5 page, follow these steps:

  1. Begin with the doctype.

    Set the doctype to HTML5 with this tag: <!DOCTYPE HTML> on the first line of your website. If you leave this out, you will still probably be able to use HTML5 features, but validators will have to guess whether you’re using XHTML or HTML5. (Consult any number of science fiction movies to see what happens when computers make guesses about things.)

  2. Add the <html> tag and specify the language.

    This special tag indicates the beginning of a web page. It’s best to indicate which language the page is written in. Specify lang = en for English.

    Be sure to have a corresponding </html> tag at the bottom of the page to indicate the end of the page you began with the <html> tag at the beginning of the page.

  3. Create a <head> area.

    The head is like the engine compartment of a car. People don’t usually go there, but there’s lots of important machinery. The head is empty in this simple example, but it will fill up with JavaScript and CSS goodness soon enough.

  4. Specify the character set.

    It’s considered good form to let the browser know what kind of characters to use when displaying your page. Pages written in English should generally use UTF-8, so indicate this with: <meta charset = UTF-8 />.

  5. Indent your code.

    Although browsers don’t care if you indent, if you do it every time you open a new element that isn’t closed on the same line, you can line up your beginning and ending tags to ensure that the page is well formed and that you didn’t miss any ending tags.

  6. Add a comment.

    Comments aren’t strictly required, but they’re very good form. HTML comments begin with <!– and end with . Comments can last over several lines.

  7. Put in a title with <title></title>.

    The title typically appears in the web browser’s title bar, and will also often appear in search engine results for your page.

  8. Include the bulk of the page in the <body> tags.

    If the head area is the engine compartment, the body is the passenger space. Most of the text visible on the website is part of the body. The </body> tag is usually right before the </html> tag, as you’ll typically finish off the body and then close off the HTML.

  9. Use heading tags to describe your outline.

    Heading tags all begin with h followed by a number indicating the strength of the heading — <h1> for example. All your main topics should be denoted by level-one headings. Subtopics should be level-two headings (<h2>). The heading levels go all the way to h6, but it’s unusual to use anything smaller than level 3.

  10. Place most of the text into paragraphs.

    Place every paragraph inside a <p></p> pair. Although HTML doesn’t require use of paragraph tags, they make it much easier to manage the look and behavior of your text later.

  11. Save your file with the .html extension.

    You can then load your file into a browser to see how it looks.

Some elements (especially the headings) tend to have a particular visual style. The default styles are there just as guidelines. Avoid the temptation to pick headings based on their appearance.