Mastering HTML5 Basics

HTML stands for Hyper Text Markup Language. It is the fundamental language for creating web documents (content pages). HTML is very easy to learn. I hope , that besides learning , You'll surely enjoy it.

HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 

1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the 

World Wide Web.

HTML5  is  a  cooperation  between  the  World  Wide  Web  Consortium  (W3C)  and  the  Web 

Hypertext Application Technology Working Group (WHATWG).

Loading a simple HTML page in a web browser : edit

Let's start simple.

1 - Open Notepad(Windows), Enter Some Text Inside and Save it is index.html.

2 - Now, open this file index.html in your default (may not be) browser.

3 - You'll see that all the content that you typed in Notepad and saved, is displaying exactly like on Web Browser.

Things to REMEMBER about HTML: edit

  • In HTML , in most cases data is written in tags.A opening tag and a closing tag.For Example , <h1>This is Heading Element</h1>.
  • However , there are some elements which does not require closing tags.For Example, <img>,<meta>,<br>etc.
  • There are three most important tags of an HTML Page , that are <html>,<head> and <body> tags.
  • You must declare <!DOCTYPE html> , before writing any HTML code.This tells the browser that you are using HTML of Version 5.

A Simple HTML Structured Page: edit

Here is a simple webpage written in HTML :

Don't be mess up if you find it trouble , we'll discuss each in detail soon. Infact , these are the things , you probably need to remember in mind.

<!-- This Line Tells the Browser that we are using HTML5 To structure our webpage -->
<!DOCTYPE html>
<!-- The Actual HTML Code starts from Here -->
<html>

<!--This is the head section of HTML Page. It contains information that is usually not displayed on webpage like title of page , styles CSS Applied etc.-->
<head>
    <!--This Line sets the title of our webpage-->
    <title>Welcome To Salman Iqbal Masood (SIM) Inc.</title>
</head>
<body>
    <!--This is body of HTML document. What you write here , will be displayed in the Web Browser-->
    
    
</body>
</html>

Ok! Write these lines in Notepad and save this file as index.html.

Open index.html file in your web browser and you will see that nothing happens on the page except that Title of the Page appears on the top of the browser. This is because , this is just the standard structure of any HTML5 Page. We had not add any content in it yet and therefore , it looks empty.

Standard HTML Tools edit

Here are some most important HTML Tools , you need to know about.

Headings: edit

There are six type of headings available in HTML. These includes :

<h1> Heading Level One </h1>
<h2> Heading Level Two </h2>
<h3> Heading Level Three </h3>
<h4> Heading Level Four </h4>
<h5> Heading Level Five </h5>
<h6> Heading Level Six </h6>

Type these headings one by one in body tag of HTML document and display it in browser.

Paragraphs: edit

In HTML , paragraphs are represented with <p> and </p> tags.

<p>Paragraphs are written in these tage</p>

Links: edit

To insert a link onto any page , we use anchor tags <a></a>.But instead of writing some text inside these tags , we use a special text like this,

<a href="www.salmaniqbalmasood.com">Text To Display For Link</a>