Creating our first webpage in HTML5

Go back to HTML and CSS Index

In this lesson, we will mark up text to create our very first 'About' page. The code editor used in the guide is Adobe DreamWeaver, but remember that you can use any code editor - just type in the code from Example 3.1 below to create the basic template, and give the file the file extension .html when saving it.

Creating an HTML5 document with Adobe DreamWeaver

  • Open up Adobe DreamWeaver
  • Create a new file:
    • File -> New
    • Select HTML
    • Add a title, e.g. Hello World!
    • Create
  • Save the file:
    • File -> Save as...
    • Name the file about.html (you don't need to type in .html since it is already there)
    • Save the file in a project folder.

HTML5 basic template

Let's have a look at the code that Adobe DreamWeaver automatically added to the file, when you selected the HTML template. It should look something like this:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
</body>
</html>
Example 3.1 | HTML5 basic template

The !doctype html declaration tells the browser that this document is written in HTML5. It is not an HTML tag but it needs to be present at the very top of all HTML5 documents to tell the browser that it is dealing with that specific type of HTML.

As you can see, the html tag wraps around all other HTML elements and represents the root of the document.

The head element is to contain all elements that says something about the page, e.g. the character set that is used (UTF-8) or the title of the webpage (Hello World).

Meta data is information about the page that is used by browsers and search engines. The meta charset is used to let the browser know which character set is used.

The title element defines the title visible in the browser toolbar, and it is also the one listed when using search engines. The length of the title itself shouldn't be more than 60 characters. If it is, all of it may not be visible in search engine results.

The body element contains all the content visible on the page. Right now, our body element is empty, which means that our page will be blank when we open it up in a browser.

Syntax

Between the angle brackets < and > are the HTML tags. They usually go in pairs like we've seen in the examples above:

<title>Hello World!</title>
Example 3.2 | The title element

The first tag (the one without the slash) is the opening or start tag, and the other is the closing or end tag.

Combining a start tag, an end tag, and everything in between, you get an HTML element - in this case, the title element.

Some tags, however, does not have an end tag. These elements are known as empty elements, as we cannot nest anything inside them. You might have noticed that there was one in our basic html template:

<meta charset="UTF-8">
Example 3.3 | Meta elements are empty elements

Nesting

When HTML elements are placed in other HTML elements, it is called nesting.

To help yourself and others who is to work with the code you've written, it is best practice to indent nested elements either by hitting the tab key once or by hitting the space key a couple of times. Choose one, and stick to it!

<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
Example 3.4 | Nesting

The meta and title elements are nested inside the head element. We make this visible by indenting each of the two elements.

Adding content to the webpage

Ok, so now that we know the general rules, let's add some content to our page.

Setting the language

First thing you should do, is to add the lang attribute to your html start tag.

The lang attribute helps search engines return language specific results, and it is also used by screen readers.

<html lang="en">
Example 3.5 | Setting the language

In the example above, we tell search engines and screen readers that the content on the page is written in English (en). If the content on your page is not written in English, you can find out what the abbreviation for your language is at w3schools by clicking here.

Headings

We will now add a heading to our page. In HTML5 there are 6 kinds of headings: h1 is the largest, h6 is the smallest, and in between we have h2, h3, h4, and h5. The elements look like this:

<h1>My main heading</h1>
Example 3.6 | An h1 element

On this page, my "Creating our first webpage in HTML5" heading at the top is an h1 heading. For the different sections on the page I use h2 headings, and for the articles nested in those sections I use h3 headings.

The h1 heading is the main heading and should only appear once on each page. This has to do with SEO. Let's try and add it to our About page:

  • Place an h1 element (consisting of a start tag and an end tag) inside the body element. Remember to indent as you are nesting.
  • Between the start tag and the end tag, type in the word About.
  • Save the file.
  • Open the document in the browser to see the result.
  • You have succeeded with the assignment if the word About is visible on the page, the weight of it being bold.

Paragraphs

To markup paragraphs we use the p tag like this:

<p>This is a paragraph</p>
Example 3.7 | A p element

Let's add one to our page:

  • Inside the body element, just underneath the h1 element, place a p element.
  • Between the start tag and the end tag, type in a short presentation of yourself - just a couple of lines for now.
  • Add another paragraph by placing another p element just below the first one, and fill it in with more information about yourself.
  • Save the file.
  • Open the document in the browser to see the result.
  • You have succeeded with the assignment if both the h1 heading and the two paragraphs are visible on the page.

Images

To add an image to our page, we use the img tag. The img tag is different than the others we have seen, as it is considered an empty element, meaning that you cannot nest anything inside it:

<img src="img/me.jpg" alt="A picture of me">
Example 3.5 | The img element

The src attribute specifies the path to the resource. In this case, the image is place in a subfolder called img and is called me.jpg.

The alt attribute specifies an alternative text that describes the image. This text will be visible, if the image for some reason isn't found, and it will also help search engines understand what's on the image.

Be aware that images inserted like this with no style instructions applied to them will render in their original format.

Let's try and add an image to our page:

  • Find the folder in which you saved your about.html file. Add a subfolder inside it and name it img.
  • Find an image on your computer and copy it to the img folder.
  • If you need to, rename it.
  • In the about.html file, place an img element inside the body element - you decide whether to place it before or after the heading and paragraphs, or in between.
  • Specify the path to the image inside the quotation marks of the src attribute.
  • Type in an alternative text that describes the image.
  • Save the file.
  • Open the document in the browser to see the result.
  • You have succeeded with the assignment if both the h1 heading, the two paragraphs and the image you chose are visible on the page.

Next up

We've now marked up text to create our very first About page. Is it done? No, far from. But we now know how to mark up text in different ways, and if we want, we can add more headings and/or paragraphs to our page.

In the next lesson, we will take a deeper look into the img tag.

Next up: The img element