How to build a website in HTML - introduction to elements

Autor: Codenga 02.08.2023

The most important elements of a HTML webpage

Learn about the most important elements that are used to build webpages.

HEAD and BODY

Every website consists of two main parts:

important information for the browser
content of the page accessible by humans

They are wrapped with the: <head> and <body> tags. Both parts are always wrapped with an <html> tag. Take a look at the code:


<!DOCTYPE html>
<html>
<head>
     HEAD section
</head>
<body>
     BODY section
</body>
</html>

Page Title

Every webpage needs a title. We place the title in the <head> section of the page. It should be surrounded by the <title> tags also.


<head>
    <title>HTML Course</title>
</head>

The title will be visible at the top of the browser window. It is also visible in the Google search results:

The title is a very important element for both the users of our website and the search engines bots.

Encoding

In majority of web pages, in the HEAD section, you may come across such declaration:


<meta charset="UTF-8">

It’s a <meta> tag with a charset attribute. It’s a very important element. It ensures that you can use characters from just about any language in your HTML document, and they will display reliably.

Note that this element is utilized by the browser and that’s why we place it in the <head> section.

Text elements

Paragraphs and Headings

Paragraphs are blocks of text separated visually from adjacent blocks by a blank line. To create a paragraph we use this simple code:


<p>This is a paragraph</p>

It’s simply a block of text surrounded with <p> tags. Usually it will include a few sentences of text.

In most cases you will also need some headings. You can use them to declare a title of the article or a section.

Here is an example of level 1 heading (h1):


<h1>This is a level 1 heading</h1>

Headings usually are much shorter than paragraphs - in most cases they will contain a few words.

There are six levels of headings available in the HTML:

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

<h1> is the most important heading. <h6> is the least important heading.

Emphasis

Sometimes parts of the text need to be emphasised:


This text <strong> is important</strong >
This text <em> has been emphasised </em>

You can emphasise the text by wrapping it with <strong> or <em> tags. Here are the results of the above code snippets:

This text is important.
This text has been emphasized.

Blockquotes

Sometimes a piece of text needs to be marked as a quotation or citation. Take a look at the code:


<blockquote>
    "This is a great introduction to HTML"
</blockquote>

That’s how it looks in the browser:

In most cases the text of the quotation will be indented but in practice it’s browser dependent.

More elements

Horizontal rule

We use the below tag to visually separate two distinct sections. Take a look:

<hr>

Here is the result in the browser:

“This is a paragraph

This is another paragraph”

Note that the <hr> tag is self-closing!

Lists

There are two basic kinds of lists.

An unordered list:

bread
butter
milk

And an ordered list:

go straight ahead
turn right
then turn left

The code for both kinds of lists look like this:

… an unordered list


<ul>
    <li>bread</li>
    <li>butter</li>
    <li>milk</li>
</ul>

...an ordered list


<ol>
    <li>go straight ahead</li>
    <li>turn right</li>
    <li>then turn left</li>
</ol>

Note that some elements are common for both kinds of lists - namely the <li> tag.

Hyperlinks

Let's have a hyperlink to Google webpage. Here is the code:


<a href="http://google.com">Google</a>

The hyperlink usually looks like this:

If we click on this link, we will be redirected to the Google homepage.

Images

Take a look at the code:


<img src="sunset.jpg">

img tag is self-closing. So we use only an opening tag.
src attribute is used to declare a path to the image file.

So using this simple code we can easily add the image to our webpage.

Summary

We hope that this article will help you when it comes to building a basic webpage.

If you want to learn more about HTML, and gain the skills needed to work as a Web Developer, start the journey with our Career Path. The whole process ends with an Exam, which will grant you the Certificate of Completion!