Bare Minimums

To get started on your webpage, you must use a basic skeleton framework. This skeleton declares which specific version of HTML you are using, defines some biographical data about the webpage, and establishes the requisite structural categories of the webpage.

The skeleton framework below can be copied directly as a starting template – only be sure to update the content of the title tag to reflect your webpage.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="UTF-8" />
        <title>Your title goes here.</title>
    </head>
	
    <body>
        <!-- The content of your webpage goes here. -->
    </body>
	
</html>

DOCTYPE Declaration and HTML Tag

The document type declaration (or DOCTYPE), although surrounded by angle brackets, is not technically an HTML tag; it is a special instruction that warns the web browser that all following text should be interpreted as HTML. The first real tag, the html tag, contains an attribute which says which version of HTML we will be using. The html tag is not closed until the very last line of the document.

  • The head section of the webpage is used to define biographical data about the webpage. Nothing in this section is directly visible to the end user; rather, it contains mostly information that a search engine might use to label your website.
  • The meta tag in the <head> section is used to define metadata about the webpage, such as the character encoding, author, and description.
    • In this case, it is being used to define which characters are permitted to be used on your website. For example, some character sets include only basic Latin letters, while others include Japanese Kanji or Arabic characters. The UTF-8 character set is a good middle ground and is recommended for use on the web.
    • The meta tag does NOT cover styling (color, text font, text alignment, etc.). That is done with CSS!
  • The head section also includes the title tag, which specifies a title for your website. Search engines will use this title to categorize your website, and the browser will use this title to label the browser tab.

Body Section

Anything that will be visible on the final webpage should be somewhere inside of the body section. This includes (but is not limited to) text, images, links, videos, etc. Elements which have a direct visual representation on the webpage should never go in the head section.

Good Coding Style

HTML code is easiest to read, write, and edit when it is neatly spaced out and nested. There is no right or wrong way to space out your code, but there are a few generally agreed upon guidelines which will help make your code more readable.

  • Avoid putting multiple tags on one line.
  • If a tag has a significant amount of content, put the opening and closing tags on their own lines, separate from the content.
  • If something (either a content or another tag) is nested inside of a tag, and it is on its own line, use a tab or spaces to indent the inner content