Skeleton Code
There is certain code that should be in every HTML document to establish a basic structure and let the browser know some important information about the page.
Overview
First, let's look at a broad overview of typical skeleton code. Then we'll break it down into the individual elements.
Doctype
The doctype simply lets the browser know which version of HTML the document uses. For most modern uses, a simple value of "html" is most appropriate.
This tag is self-closing.
HTML
The html element is a container for everything in an HTML document. The only thing that should be outside of this tag is the doctype.
The lang attribute lets the browser and search engine know the language (human, not code) of the website's contents. For our purposes, we use "en", for English. After the dash, we put "us" to indicate that the site uses the United States dialect of English.
Head
The head element exists to hold a variety of content that is not for display on the page itself. Mostly, the content in the head exists to tell the browser, search engines, and other robots important information about the page.
Meta
The meta element may contain a variety of different attributes to communicate important information to the browser.
This tag is self-closing.
Charset Meta
Every page should include the meta tag with the charset attribute, which indicates which style of keyboard was used to code the page. American keyboards use "UTF-8" encoding, so this is the appropriate value for our purposes. The code should always be exactly the same.
Viewport Meta
Every page should also include the meta tag with the shown attributes for the viewport. This code indicates that the browser should not zoom in on the page and should respect any responsive CSS code. The code should always be exactly the same.
Title
The title element should contain a unique title indicating the content or purpose of the page. While this title is not displayed on the page itself, it is what shows in the browser tab and in search listings on Google and other search engines.
Body
The body element holds all content that is for display on the page itself. Anything a user is intended to see or interact with should go inside the body.
Video Lesson
The following video demo is fully interactive. You can pause it at any time to directly edit the code, and resume playback to pickup where you left off.