An Ultimate HTML Tutorial for Beginners and Advanced Learners

What is HTML?

Before proceeding to HTML tutorials, its tags or elements and HTML exercises let us first go through what is HTML and its history.

The HTML (Hypertext Markup Language) is used to define web pages created for the web. The HTML is a web standard that browser manufacturer follows. The standards are developed and maintained by W3C (World Wide Web Consortium).

A (document) markup language is a modern system for annotating a document in a way that is syntactically distinguishable from the text.

Any website that you see online, its content like the headings, paragraphs, images, menus, links to other pages etc. are done in HTML (whether it is a static web page or generated dynamically).

A document written in HTML is called a web page.

You may write information or content of web pages without using the HTML tags, however, it looks quite boring, rough and ugly.

As a visitors types a URL in a browser, it loads the web page, if the internet is available. The browser reads the code and presents the information in front of you. Having a uniformed standard is very important; as such there are different kind of browsers manufactured by different companies. For example Internet Explorer by Microsoft (replaced by MS Edge), Firefox, Chrome by Google inc. and many others are also available.

While developing the browsers, it must have ways to read a web page that is requested from a web server. The page that is requested from the web server is developed by a web developer or HTML coder or may be a novice programmer or non-IT person who just learned how to write a web page for his / her website. Now as that person or a business or company has uploaded/placed the page to a webserver, this should be readable by any browser and should be in such format that any user should be able to read it properly, irrespective of the platform or machine/devices.

Just think, if you are a web developer and learned HTML coding, developed and uploaded a website, tested in the Chrome by Google. The visitors from Firefox or IE or Apple’s Safari start complaining or leaving without looking at your page as it is not properly/neatly displayed while Chrome has no issues. So you have to learn each browser’s specification separately in order to present your web page properly or, otherwise, compromise visitors/customers from other browsers.

That is why a single, uniformed standard was required and well recognized by W3C who decided to define a standard for the web. HTML, HTML5, CSS, CSS3, XML etc. are standards that are defined by a central consortium. All browser manufacturers follow their guidelines or standards to read the web pages so that the web developers has least issues of compatibility or do not need to write different pages for different browsers.

History of HTML

The first version of the HTML was released in 1993.  The next version of the HTML 2.0 was completed in 1995. This was considered to be treated as the standard for what any future development should be based at. From 1996, the specification for HTML was maintained by W3C (World Wide Web Consortium) and commercial vendors. The W3C standard based version of HTML 3.2 was released in 1996.

HTML 4.0.1 was released in 1999 while HTML 5 development began at 2004.

Static written or Dynamic generated HTML

In early days, the web pages were written for information purpose in static HTML pages. As the web became more and more popular and websites became more complex with saving profile information to presenting catalogues of products to enabling visitors making the transactions (e-commerce) and then web 2.0 came in.

The Scripting languages were used in order to enable website performing complex things including database driven sites. However, in the end, these scripting languages like PHP, asp, asp.net, JSP etc. will produce or generate HTML to be presented to visitors that is readable by web browsers. In short, it is HTML whether static pages are written or HTML generated by dynamic pages.

A few examples of HTML online

Just to give you a basic idea of how HTML documents are written, before you proceed to HTML tutorials, look at a few examples below with HTML code.

HTML example with different type of headings

The example below shows how to write different types of headings in HTML. HTML gives <h1> to <h6> heading tags that vary in size. The example below used all six type of heading tags.

Experience this online

HTML example with heading and paragraph

This example uses two headings and two paragraphs by using <h1>, <h2> and <p> tags.

Experience this online

The HTML tags

To write web pages, you have to learn the HTML tags. The HTML tags are basically keywords that define the content of the document. For example, your page contains headings, text paragraphs, images etc. To make some text as heading you can use heading tag of HTML:

<h1> heading here </h1>

Experience this online

Similarly a paragraph can be given inside <p> HTML tag.

For example:

<p>some paragraph text.</p>

Experience this online

A few important points about HTML Tags:

  • HTML documents consist of the tags.
  • Most of HTML tags comes in pair i.e. starting tag and closing tag.
  • The tag names are enclosed in the angled brackets <>.
  • Starting tag e.g. <p> and closing tag e.g. </p>
  • Not all tags are the pairs, a few like <img> tag, are unpaired.

In this tutorial, we have covered many HTML tags that you can see on the left navigation. All of the HTML tag chapters also come up with examples that you can see online. Just click on the “Experience this online” link below or above each example to view this in action along with the HTML code snippet.

What you will learn in tutorial

The HTML tutorial includes following main chapters:

Headings tags

Table tag

Div tag

Span tag

The link tag

image tag

iframe

and others.