F Mohamed

An introduction to HTML

F Mohamed's photo
F Mohamed
·

4 min read

Table of contents

I recently joined a bootcamp named Pivot2Tech which is aimed at teaching students how to code (fullstack) and also how to freelance. I plan to document what I've learnt as I go along.

In our first session, we went over a few things. Namely, what a website is, how it works and the different types of HTML tags you can use in your code.

What is HTML?

HTML is short for HyperText Markup Language) and it's the code that is used to design and structure a webpage and the contents inside it. In essence, it's the "skeleton" of the website. A HTML element labels the content, it's a way of the code telling the webpage "this is a heading", "this is an image" and so on.

Html elements are defined by 3 things:

  • the opening tag - begins with <>

  • the content inside

  • the closing tag- ends in </>

<opening tag> Content inside </closing tag>
Eg:
<h1> Hello </h1>

As above, the <h1> is the opening tag. The content inside is "Hello" and </h1> is the closing tag. It's important to remember that closing tags always have a / in front of them.

HTML boilerplate

The very first line of code that you write to build your website is your boilerplate. This is something that should be included at the beginning of all of your HTML pages. Below is what the boilerplate looks like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="#">
</head>

</html>

Inside the boilerplate, there are:

  1. The <html> tag : represents the foundation of the document. Inside it is all the other HTML elements.

  2. The lang="en" tag: defines the language of your code (in this case, English) and is important for accessibility reasons.

  3. The <head> tag "contains all the metadata (i.e the title of your document, the styles, any links, and character set). This is information not shown to the user but helps assist search engines with any technical information about the webpage.

Commonly used HTML Tags

The heading tag

To insert a heading into your webpage, you would use a heading tag. There are six different heading tags you can use, depending on the importance of your heading. They are:

<h1> This is the main heading </h1>
<-- Note: Everything below this are the subheadings. -->

<h2> This is heading 2 </h2>
<h3> This is heading 3 </h3>
<h4> This is heading 4 </h4>
<h5> This is heading 5 </h5>
<h6> This is heading 6 </h6>

The <h1> to <h6> tags are from most important to least important. You should only try to use one <h1> for every page.

Paragraph tag

To write a paragraph, you would use the <p> tag

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

The link tag is one of the most commonly used tags in HTML. This is the tag which helps you to link content to each other. This can be content on your own website or from another site.

<a href="http://www.google.com/"> Click on this google link </a>

Image tag

The image tag is used to add an image to your page. It has two attributes:

  • A "source" attribute which is where you would get your image from. This source can be from anywhere on the web or locally from a saved folder.

  • An "alt" attribute which is short for "alternate text". This is useful for users to see if the image is not being displayed on the page.

<img src="smiley.jpg" alt="A baby smiling">

Note: the image tag does not have a closing tag (</>). It is referred to as a self- closing tag.

List tag

In HTML, you can create two types of lists. An "ordered list" and an "unordered list". The "ordered list" is where the order of the list is important. Here, the output would be numbered and begins with a <ol> tag. Each item in the list is wrapped around a <li> tag.

<ol>
    <li> Follow these instructions for a Lasagne recipe</li>
    <li> Heat 2 tbsp of oil in a pan </li>
    <li> Cook 500g of  beef mince for 10 minutes </li>
</ol>

Output:

  1. Follow these instructions for a Lasagne recipe

  2. Heat 2 tbsp of oil in a pan

  3. Cook 500g of beef mince for 10 minutes

The other type of list is the "Unordered list" and in contrast, the order is not taken into account. The output here is bullet points.

<ul>
    <li> Icecream </li>
    <li> Strawberries </li>
    <li> Oranges </li>
 </ul>

  • Icecream

  • Strawberries

  • Oranges

HTML introductionHTMLintroductionHTML tags