Enchanted Code

Making Your First Page

6 minutes read

Intro

This tutorial will show you how to create your first webpage using HTML. I will also show how you can structure pages so you can get a head start at creating valid HTML5 pages.

Requirements

  • web-browser
  • plain-text editor

Setup

First we will need a HTML file, we can do this easily by creating a text file and saving the extension as .html. We can then open this in our web-browser to preview it without running any servers or needing to download any other programs. Feel free to do it in a code editor if you have one.

Tags

As HTML uses tags for defining elements. We first need to know how to use them. If you have experience using XML you may find this similar.

Types Of Tags

Most HTML tags require a start and an end. This will look something similar to what is shown below:

1

<tagname>[inner content]</tagname>

“tagname” is a placeholder for an actual element name

“[inner content]” is just a placeholder

This tag type allows you to place content inside the element (including another element). You may notice that the tag name will be required for the start and end. Pay careful notice to the end tag requiring to start with </ instead of <.

Some HTML tags do not have content and unless you are using XHTML can be written like this:

1

<tagname />

These have no inner content and must end with />.

Attributes

Both of these tag types allow for attributes to be specified, depending on the element they may have different attributes.

The HTML element shown below is a text input field. The first attribute specifies the input type, which in this case is “text”. The second is a attribute that requires no value as it is a boolean indicating “true”.

1

<input type="text" required />

If XHTML was being used it would it would instead look like this:

1

<input type="text" required="required"></input>

Structure

When creating a webpage we need a few elements at minimum to count as “valid”.

Here is what is counted as a “valid” HTML5 page:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<!DOCTYPE html>

<html lang="en">

    <head>
        <title>Welcome</title>
    </head>

    <body>
        Welcome to my cool site!
    </body>

</html>

Let’s go through what the structure is.

The initial line is required by the HTML5 spec as it indicates that we are producing a HTML5 page. It must be placed at the top and can only be used once.

The html element is where everything else will go, this is considered the root element. We have an attribute lang="en" to indicate what language the content is written for. As I am writing my content for English I have written en.

The head is used for storing mostly non-visible content like metadata. Here I have placed a title element which is what will appear in your browser tab.

The body is used to add any content that will be displayed. Here I have just written some example text to display on the page if you decide to preview it.

Adding Content

Now you know what the basic structure of a HTML5 document should look like; let’s add some body content instead of the placeholder text seen earlier.

This example will assume it has been placed inside the body.

Let’s convert the previous page into a better page with more HTML elements and example content.

I have used “Lorem Ipsum” in this example, which is placeholder text.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<h1>Welcome</h1>
<ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
</ul>
<h2>Home</h2>
<p>This is my cool site!</p>
<p>
    Sed quis magna a est ultricies mollis.
    Nulla ut gravida leo
</p>
<p>
    Maecenas ultrices, lacus vitae cursus gravida,
    odio feugiat ligula, eleifend faucibus nunc
    ipsum et mauris.
</p>
<p>This site was made by ___</p>

As you can see I have added quite a few new elements you might have not seen. I’m going to cover each of the elements shown in this example, but there are many more. A complete list of HTML elements can be found at developer.mozilla.org, or you could search for “HTML elements” in your preferred search engine.

The “h1” element is the highest header section, it defines a header. The available headers are from h1-h6.

The “ul” element allows us to create an unordered list of items, these items have to be placed within “li” elements which stands for “list item”. In this example I have made an imitation navigation bar.

Inside each list item There is a “a” tag which creates a hyperlink to another page, which can either be relative or absolute, in this example these links will do nothing but cause the current page to load. To navigate to another page you will need to set the “href” attribute.

The “p” element defines a paragraph, each paragraph will require another element to be defined. This example has 4 paragraphs.

Semantic Elements

At the moment the page is not very accessible to screen readers or search engines. This is because they will not know what each element is related to.

To help with this we can use semantic elements.

We can also use ARIA attributes, but this won’t be covered in this tutorial.

This example will assume it has been placed inside the body.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<header>
    <h1>Welcome</h1>
    <nav>
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
        </ul>
    </nav>
    <h2>Home</h2>
</header>
<main>
    <p>This is my cool site!</p>
    <p>
        Sed quis magna a est ultricies mollis.
        Nulla ut gravida leo
    </p>
    <p>
        Maecenas ultrices, lacus vitae cursus gravida,
        odio feugiat ligula, eleifend faucibus nunc
        ipsum et mauris.
    </p>
</main>
<footer>
    <p>This site was made by ___</p>
</footer>

As you can see I have split the site into header, main and footer elements. These will help a search engine or screen reader to understand what each section of the page is relating to. When previewed in the browser you shouldn’t see any style changes as these elements are purely used to provide metadata to a program.

The “header” will hold the “introductory content” and in this example will hold the “nav” which will indicate that it has a navigation role.

The “main” element will hold the main content of a page.

The footer will most likely hold info about the author, copyright and any links to related pages.

There are many more elements that are not being covered, however they can again be found at developer.mozilla.org, or you could search for “HTML semantic elements” in your preferred search engine.

Conclusion

After finishing this tutorial you should be able to create your basic webpage, using the following knowledge:

  • HTML Tags/Elements
  • Element Attributes
  • Basic Elements
  • Accessibility with “Semantic Elements”

You should also have the knowledge to understand more advanced tutorials and start to learn CSS and Javascript to build a fully interactive website that looks pretty.

See Also

Buy Me A Coffee