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.

To start any webpage, copy the skeleton below and edit it to make it your own!

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

DOCTYPE Declaration and HTML Tag

Note: DOCTYPE is not really an HTML tag (although surrounded by angle brackets). It’s just a special note that tells the web browser this is an HTML document. After that, the first real tag is html, which tells the browser what version of HTML the page is using. The html tag stays open until the 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 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.

HTML Comments

Although not required in the skeleton, you may like to use HTML comments to insert notes into the code. The comments are not visible in the final result in the web browser, but will be visible when editing the code. Comments are useful to leave reminders to yourself, or to explain parts of your code to other people who may need to read it.

HTML comments always begins with <!-- and ends with -->. HTML comments can contain any arbitrary string of text.

The example below shows the usage of a comment. 

<!-- Note to self: 
     include a short bio in this paragraph. -->
	 
<p>Hello, world.</p>

Note: Make sure the message you type in your comment is separated from the special sequences of characters with at least one space on each end.

Besides adding messages for future coders (or yourself) to look at, comments are useful for temporarily removing parts of your code. Would you like to see what your page looks like without one of your paragraphs, but you aren’t ready to remove the code entirely? Just comment it out!