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

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">
    <meta charset="utf-8" http-equiv="Content-Type" content="text/html">
    <title>My First Webpage</title>
    <!-- Comments look like this -->
    <!-- Content goes here! -->

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!

Build modern and responsive webpages

Responsive Typography

Build modern and responsive webpages Try Front-end

Responsive web design helps your site maintain its design integrity on a variety of screen sizes, but how does it affect your typography? With this practical book, graphic designers, web designers, and front-end developers alike will learn the nuts and bolts of how to get the best appearance from type without sacrificing performance on any device.

$ Check price
24.9924.99Amazon 4.5 logo(3+ reviews)

More Front-end resources

Aching back from coding all day?

Acupressure Mat & Pillow

Aching back from coding all day? Try Back Problems

Relieve your stress, back, neck and sciatic pain through 1,782 acupuncture points for immediate neck pain relief. Made for lower, upper and mid chronic back pain treatment, and improves circulation, sleep, digestion and quality of life.

$$ Check price
144.87144.87Amazon 4.5 logo(1,890+ reviews)

More Back Problems resources