Introduction to HTML5

Ethan Higham2021-02-27

What is HTML5

Hyper-Text-Markup-Language is a markup language that is used for creating websites and web documents. It contains elements that can tell a specific browser how to display certain content such as images, text, shapes or logos. An HTML document has a certain structure with certain elements describing what the browser should display.

How can I write HTML code?

You can write HTML is pretty much any sort of text editor such as Notepad on Windows, or a IDE such as Atom or Sublime, or on linux you can use Nano, Vim or Emacs. The list goes on and on and pretty much comes down to personal preference.
(Keep and eye out my upcoming post about different IDE's and text editors coming soon.)

Below is an example of a basic HTML5 template and an explanation of what each element does.

<!DOCTYPE html>
<html>
  <head>
    <title>This is the Title of the WebPage</title>
  </head>
  <body>
    <h1>This is a big heading</h1>
    <p>This is a paragraph</p>
  </body>
</html>
  • The "!DOCTYPE html" element means that we are defining that this document is a HTML5 document.
  • The "html" element is the beginning of the HTML page.
  • The "head" element contains all the information about the webpage such as the Title, Author or a Description about the webpage.
  • The "title" element is what tells the browser to display the title of our webpage in the page tab at the top.
  • The "body" element is the body/main section of our HTML document where all the content is placed.
  • The "h1" element is a type of heading (More on that just now).
  • The "p" element is what defines a paragraph of text.

Important note about closing off HTML tags

Whenever you use a HTML tag, it is important to close it off by putting in a </>. This tells the browser that it is the end of the tag we used. Below are examples of closing off HTML tags.

<p>I closed off the p tag</p>
<h1>I closed off the h5 tag</h1>
<b>I closed off the bold tag</b>
<i>I closed off the Italics tag</i>
<--! The List goes on and on --!>

Here are some of the basic elements used in HTML5

The heading (h) tag

The heading tag goes from h1-h6. Below is an example of the different heading sizes. The bigger the heading the smaller it actually is (h1 being the largest heading).

h1

h2

h3

h4

h5
h6

The paragraph (p) tag

The paragraph tag is used to define a certain piece of text as a paragraph. Below is an example.

<p>This is a paragraph.</p>

Output:

This is a paragraph.

How to make text bold

To make text bold, use the b tag. Example below.

<p>I want to make this <b>bold</b></p>

Output:

I want to make this bold

How to make text italic

To make a piece of text italic, use the i tag. Example below.

<p>I want this to be <i>Italic</i></p>

Output:

I want this to be Italic

How to change the colour of text

To change the colour of a piece of text, use the color tag. Example below.

<p>I want this to be <font color="red">red</font></p>

Output:

I want this to be red

You can also change the entire paragraph colour by using an attribute. Example below.

<p style="color: blue">This sentence is blue</p>
<p style="color: red">This sentence is red</p>
<p style="color: yellow">This sentence is yellow</p>

Output:

This sentence is blue

This sentence is red

This sentence is yellow

The link (a) tag

The link tag is specified by a href attribute. An attribute is used to describe information about an HTML element. Below is an example of a link.

<a href="https://google.com">Click me to go to Google.com</a>

Output:

Click me to go to Google.com

The image (img) tag

To define/insert an image into an HTML document, you can use the img tag. Inside of the img tag you can define a source file which is where the file is located. You can also change some other attributes of the image such as its size. Below is an example of using to img tag to insert images.

<img src="https://www.imagesource.com/wp-content/uploads/2019/06/Rio.jpg" />

Output:

If you want to change the size of the image you inserted, you can add the following to the img tag.

<img
  src="https://www.imagesource.com/wp-content/uploads/2019/06/Rio.jpg"
  width="300px"
  height="250px"
/>

Output:

Combining everything we have learnt into one

<!DOCTYPE html>
<html>
  <head>
    <title>This is the Title of the WebPage</title>
  </head>
  <body>
    <h1>This is a big heading</h1>
    <h2>This is a smaller heading</h2>
    <p>This is a paragraph</p>
    <p style="color: red">
      This is a red sentence with <b>bold</b> and <i>Italic</i> words.
      <a href="https://ethansmegawebsite.co.za"
        >Here is a link to a place where you can find tutorials like this one</a
      >
    </p>

    <p>Below is an image of Rio</p>
    <img src="https://www.imagesource.com/wp-content/uploads/2019/06/Rio.jpg" />
    <p>Below is a smaller image of Rio</p>
    <img
      src="https://www.imagesource.com/wp-content/uploads/2019/06/Rio.jpg"
      width="300px"
      height="250px"
    />
  </body>
</html>

Conclusion:

So that about wraps up the basics of HTML5. In one of my next posts I will be going over the basics of CSS3 and how you can use it style your HTML and make it look a bit more "stylish".