03. Building your first HTML playground

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!

Declaring a DOCTYPE

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.

<!DOCTYPE html>

Opening the HTML Tag

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 en.

For spanish, we have <html lang="es">, for French <html lang="fr">.

<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.

The head section

Content that are in the <head> tags describe the "head" of your page. Elements that go in here include the title of the page, meta information about your page for search engines, and links to external documents such as style sheets (CSS), and JavaScript files.

Inserting a meta tag

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:

  • Who created the page.
  • When the page was last updated.
  • A brief description of the page.

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">

Our page title

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>

The importance of a page 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 section

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>

Commenting an on HTML document

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 -->

Running your first HTML code

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!

Aching back from coding all day?

Prism Glasses

Aching back from coding all day? Try Back Problems

Ever feel achy from sitting crunched up on your computer table? Try lying down with these optical glasses that allow you to work on your laptop while lying flat on your back. This is the perfect solution with those with limited mobility or those who wish to prevent neck cramps and back strains.

$ Check price
4.454.45Amazon 4 logo(128+ reviews)

More Back Problems resources

Build modern and responsive webpages

High Performance Web Sites

Build modern and responsive webpages Try Front-end

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
29.9929.99Amazon 4.5 logo(63+ reviews)

More Front-end resources

Ad