HTML5 Tutorial

HTML Introduction

What is HTML?

First of all, understand what is HTML?

HTML Stands for “Hyper Text Markup Language”. HTML is a markup language used to create web pages and web-based apps. When a web page is opened by a web browser, it receives a document from its web server as HTML, which is converted into a web browser multimedia web page.
It can also use CSS and JavaScript, which makes it even more useful. It can show or use any program written in JavaScript in web pages and CSS can also decide its appearance and size. The World Wide Web Consortium (W3C), which maintains the standard of HTML and CSS, is encouraging the use of CSS since 1997.
HTML Markup.

There are many essential things in the HTML markup, in which the tags (and their properties) are the main. Tags are mostly in groups of two. Such as <h1> and </ h1> header tags. In this, the first one is called an open tag and the second one is a closed tag. These are open tags initially, and then there are no text or other tags, and in the end, there is a tag closing the tag.

There are always open and closed tags not always open. There are several tags that are written in the form of just a tag and its properties are written in it. A similar tag is also <img>. Such tags do not have open and closed tags. They are used only by typing its properties in a tag. An example of a general HTML markup is given below.

Example of Simple HTML Document:

<!DOCTYPE html>
<html>
<head>
<title>This is a Title</title>
</head>
<body>

<h1>This is First Heading</h1>
<p>This is first paragraph.</p>

</body>
</html>

Example Explained:
  • The <!DOCTYPE html> defines this documents to be HTML5.
  • Everything coming between <html> and </ html>shows a web page.
  • The part between <body> and </ body> appears on the page itself.
  • The <h1> element defines a first heading.
  • The <p> element defines a paragraph.

HTML Tags:

HTML tag normally write in pairs like <h1> and </h1>
Here <h1> tag is start tag, while </h1> is end tag.
The end tag is written like the start tag, but difference is only that we insert forward salahbefore the tag name.
How to show HTML in Web Browser?
You can use any web browser to show your HTML code. First write HTML code in Notepad or Notepad++ or in HTML editor. Here I will show how to write HTML code in Notepad and show on Web browser.
Step 1: First write HTML code in your Notepad.
Step 2: Save this HTML code with extension name (.html) .
Step 3: Now open this save file in any browse which do you have.

HTML Version

HTML Versions

VersionYear
HTML1991
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML2000
HTML52014

Since the early days of the Web, there have been many versions of HTML.


HTML Editors

Write HTML Using Notepad

You can write HTML by using professional HTML editors as well as notepad or notepad++ but here I am showing simple way to write. So, I will use Notepad for write HTML.
Step 1: Open notepad.
Step 2: Write some HTML code on your notepad or copy below code and paste on your notepad.
<!DOCTYPE html>
<html>
<head>
<title>This is a Title</title>
</head>
<body>

<h1>This is First Heading</h1>
<p>This is first paragraph.</p>

</body>
</html>

Step 3: Save the HTML Pages

Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file “anyname.html” and select Save as type All Files.

Step 4: View HTML page on your web browser.

HTML Basic examples

HTML Documents:

  • The HTML documents must start with a document type declaration- <!DOCTYPE html>
  • The HTML documents start with <head> and ends with </head>
  • This visible part of the HTML document written between <body> and </body>
Example of HTML Documents:

<!DOCTYPE html>
<html>
<head>
<title>This is a Title</title>
</head>
<body>
<h1>This is First Heading</h1>
<p>This is first paragraph.</p>
</body>
</html>

HTML Headings

HTML heading are defined with the <h1> to <h6> tags. Where <h1> defines most important heading and <h6> defines the least important heading.

Example of HTML heading

<h1>First Heading</h1>
<h2>Second Heading</h2>
<h3>Third Heading</h3>
<h4>Fourth Heading</h4>
<h5>Fifth Heading</h5>
<h6>Sixth Heading</h6>

HTML Paragraphs

HTML paragraphs are defined with <p> tag. <p> is start tag and </p> is end tag.

Example of HTML paragraphs
  • <p> This is first paragraph</p>
  • <p> This is another paragraph</p>. So, you can write many paragraphs like that.

HTML Links.

HTML link are defined with <a> tag.

Example of HTML Link

<a href=”https://www.everythingingoogle.com”> This is a link </a>

Here, the link destination is specified with href attribute. Attribute are used to provide additional information about HTML elements. 

HTML Image

HTML Image are defined with <img> tag.
The source file (src), alternative text (alt), width and height are provides as attributes.

Example of HTML Image.
<img src=”image.jpg” alt=”everythingingoogle.com” width=”100” height=”50”>

HTML Buttons

HTML Button defined with <button> tag.

Example of HTML Button

<button> Click Here </button>

HTML Lists

HTML lists are defined with <ul> (unordered or bullet list) or <ol> (ordered or numbered list) tags, followed by <li> tag (list items).

Example of HTML Lists

<ul>
  <li>Blogger</li>
  <li>WordPress</li>
  <li>YouTube</li>
</ul>

HTML Elements

The HTML element usually consist of a start tag and end tag, with the element content inserted in between start tag and end tag. Let’s understand in the below figure.
Empty HTML Elements

HTML elements with no content called empty HTML element.
Here, <br> is an empty element without closing tag i.e. no need to write end tad </br>