HTML 5 Programming and Web development/tags and attributes

Welcome to HTML5 tags and attributes.

This book teach learners about HTML5 tags and attributes as well as how HTML5, is used to develop static webpages.

Table of content

1.What is HTML5?

Objective : Learners will learn the meaning of HTML and it's brief history.

This will allow learners to be able to explain the meaning of HTML5 as well as to summaries it's brief history to others.

2.Where is it used?

Objective : Learners will learn more about real life applications where HTML5 is used.

This will allow learners to pin point different applications where HTML5 is used in real life.

3.What are HTML5 tags?

Objective : Learners are going to learn more about different HTML5 tags and their uses.

This will allow learners to identify different HTML5 tags and their functions.

4.How to use HTML5?

Objective : Learners will learn how to use HTML5 to develop real life applications(webpages).

This will allow learners to gain basic skills and knowledge on how to use HTML5 in real life.

What is HTML5?

HTML5 is one of HTML versions starting from HTML 1,2,3 and 4. HTML is an acronym which stands for Hyper Text Mark-up Language.

Tim Bernes Lee was the first computer scientist to develop HTML. He developed the first version of HTML in 1990.

In short HTML5 is just a version which was developed to improve all other versions. The difference between HTML5 and other versions is through changes and addition of tags.

When Tim died, someone had to take where he left of and that was the W3C. This organization is the one which is responsible for the development of other HTML versions excluding HTML1. It also issue instructions known as specifications to the public to notify them on what tags have changed and how to use HTML versions in general.

The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web. Founded in 1994 and led by Tim Berners-Lee, the consortium is made up of member organizations that maintain full-time staff working together in the development of standards for the World Wide Web.

HTML5 was released to the public on October 2014 by W3C.

Where is it used?

HTML5 is used by both simple and complex websites across the internet today.

Almost all websites you visit, are written using HTML5. Some mobile applications installed on your mobile device, are written using HTML. Some ebooks you download use HTML5 including almost all games you play online.

Bellow is illustrations of popular websites using HTML5 to present content on their webpages.

1.Google.com

Google is a website which list other websites links on its webpages. When a user click on a website listed on Google, is an HTML5 tag known as the anchor(<a href=...) tag which send a request to Google server to display the website the user clicked on.

When a user clicks on the images section on Google, they are referred to another page filled with images. These images use one of HTML5 tags known as the img(<img src=...>) tag to display.

2.facebook.com

The most popular social media uses HTML5 to present its contents on browsers. Links, images, textboxes and input fields on Facebook, use HTML5 tags and attributes.

3.Wikipedia.org

The world greatest encyclopaedia uses HTML5 as well. Wikipedia contributor's use HTML5 tags to edit Wikipedia content and they are not limited to include HTML5 tags when adding content.

What are HTML5 tags?

In simple terms HTML5 tags are instructions written on a .html document by web developers. These instructions instruct browsers(Google Chrome, Edge, Firefox, Operamini...) on how to display websites pages on our computer or mobile device screens.

This means that HTML5 tags are a means by which developers can communicate with browsers.

Browsers are software tools that interpret HTML5 tags into human readable forms such as website pages to visitors.

HTML tags are lines of text which are made up of the "<" and ">" signs with the abbreviation of the tag name as shown below :

<p>

1.< : the less than sign.

2.p : abbreviation of the "paragraph" tag, which allows for the display of text on webpages.

3.> : the greater than sign.

Some html tags have opening and closing tags.

Bellow is an opening HTML tag with a closing tag.

<p>...</p>

The closing tag of the paragraph tag is differentiated by the forward back-slash "/" sign before the abbreviation of the tag name "p".

Almost all HTML tags have attributes. Attributes are properties of tags, like names, age, gender etc are human properties. This attributes uniquely describes tags.

Bellow is an example of an HTML tag with an "id" attribute.

<p id="paragraph">...</p>

The id attribute allows the paragraph tag to be styled using CSS or JavaScript.

Once you fully understand HTML5, you will need to learn CSS and JavaScript. Note that this book does not cover CSS and JavaScript topics to avoid confusion.

Activity 1

Answer the following questions to measure your understanding.

1.What is HTML5?

2.What are HTML5 tags?

3.Name one of your favourite 
browsers.

4.Name one of your favourite 
websites.

5.Do you use a computer or 
mobile device to access the 
internet ?

6.What is a browser?

7.Write two signs that marks 
an HTML tag.

8.What is the full word of 
the abbreviation of < p >?

9.What is the difference 
between the opening and 
closing HTML tags?

10.What is an attribute ?

HTML5 tags

There more than 100 HTML5 tags in use today and all have unique functions. Bellow is a list of HTML5 tags and their meaning.

1.<!DOCTYPE html>

This is the first tag you will see on the .html document or file. It is called HTML declaration tag. It's function is to inform browsers that the version of html used on a certain webpage is HTML5. This helps the browser to load the page faster and in an appropriate manner by using correct ASCII standards in case of the presence of Unicode characters such as your &, $, #, @, 😃etc.

It is a good coding practice to open the .html document with this tag.

⭐ A .html document it is an 
electronic text file which 
allows writing, editing and 
storing of HTML5 tags. 

To create a .html document on a computer you need a software called notepad and to create a .html document on your mobile device, you need an app called ES file explorer.

2.<html>

This is the tag you will see on line number 2 on a .html document. It has a closing tag. Its main purpose is to house all other HTML tags. All other HTML tags are written between the opening and closing "html" tags.

Bellow is an example of how the "html" tag house all other HTML tags. Note line 2 and 10.

1  <!DOCTYPE html>
2  <html>
3  <head>
4  <title>HTML structure</title>
5  </head>
6  <body>
7  <h1>Hello World</h1>
8  <p>This is a basic HTML structure</p>
9  </body>
10 </html>

HTML structure

1  <!DOCTYPE html>
2  <html>
3  <head>
4  <title>HTML structure</title>
5  </head>
6  <body>
7  <h1>Hello World</h1>
8  <p>This is a basic webpage</p>
9  </body>
10 </html>

Output :

---

Hello World

This is a basic webpage

---

Above is an example of a basic HTML structure on a .html document.

An HTML structure is a combination of HTML tags working together to instruct browsers on how to display website pages on our device screens.

Browsers are software or 
apps that allows us to 
read HTML structures in form 
of websites pages.

Websites are a combination 
of webpages linked together 
by the HTML anchor tag. 

HTML structures act as a foundation that developers use to build a webpage on.

Developers are people who write websites and other related digital applications such as computer software and mobile applications.

You are reading this book 
because your main objective 
is to become a developer. 

The size of the structure in terms of lines, is influenced by the purpose of a website. Simple structures are made up of 10 to 50 lines of tags, while online game structures consist of 50 and upwards lines of tags.

HTML structures are commonly called HTML code and html tags are commonly called HTML elements. Note that in this book we hardly use the above terms to avoid confusion.