Before we dive into writing content on an HTML page, we must place a few elements. Let's now make the most basic layout of an HTML page, and call it our playground.
You can open your "playground" in any browser of choice, and see your page come to life!
The very first element to place is the DOCTYPE. This tells the browser which version of HTML we are using. If we just write <DOCTYPE html>, the browser will know that we are using HTML5.
Next, we open an
<html> tag to get started with our HTML. It's good practice to specify the language of our document within this tag with the
lang attribute. The value for English will be
For spanish, we have
<html lang="es">, for French
<html lang="en"> </html>
Great! There are two main sections on an HTML page: the head and the body. Let's talk about the head first.
Content that are in the
Let's declare our first meta tag. A meta tag is a special HTML tag that provides information about a webpage. Unlike regular tags, meta tags don't affect how the page is displayed. Instead, we store information like:
It's extremely important to include meta tags, as this allows us to communicate with search engine bots so that they can understand what the page is about.
As our first meta tag, we'll declare what the page's character encoding as UTF-8. This gives us a library of global characters that are not limited to the Roman alphabet.
<meta charset="utf-8" http-equiv="Content-Type" content="text/html">
To display our page title, we use the
title tag. This displays the title of our page, which shows up on the browser tab. For example, if you go to www.youtube.com, the title that shows on the tab is YouTube.
<title>Building your first HTML playground | Code Snipcademy</title>
Defining the proper title is very important! Each page on your site should have its own unique title - this way, search engines can know what each page on your site is about.
The body is the meat of our page. This is where all our webpage's content goes, which includes text, forms, audio, video, etc. We'll discuss all the various types of tags you can apply here very shortly.
<body>Visible content goes here!</body>
We can add comments on our page. These comments will not run as code, but will show up on the browser's "view source code" panel.
Comments are used to keep track of elements, and allow other developers to see your coding thought process.
<!-- If you want to add any comments, use this structure -->
Phew! That was a lot of work. Now your HTML playground should look like this:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" http-equiv="Content-Type" content="text/html"> <title>My First Webpage</title> </head> <body> <!-- Comments look like this --> <!-- Content goes here! --> </body> </html>
Save this file as an .html document, and try opening it in your browser of choice. Note that nothing will show, as we have no content...as of yet!
Want your web site to display more quickly? This book presents 14 specific rules that will cut 25% to 50% off response time when users request a page. Author Steve Souders, in his job as Chief Performance Yahoo!, collected these best practices while optimizing some of the most-visited pages on the Web.$ Check price
Relieve spasms, tight muscles, trigger points and pressure points with the Body Back Buddy! This trigger point massage is designed to help you self-message any area of your body - especially those that are hard to reach. Keeping your muscles relaxes and out of contraction is importan in helping to reduce pain and prevent muscle injury.$ Check price