What is HTML : Complete guide to HTML Basics

Basic Components of HTML

Everyone is using websites and the internet is flooded with tons of them. In fact, we come across newer ones every day on the web.

“According to the Tilburg University Research Project, Indexed Web contains at least 4.26 billion pages” Click To Tweet

That’s a whopping number, isn’t it? 

Realizing such a huge impact of the web on our life, we shall know the very basic framework which goes into the development of each webpage. 

Do you know, What is HTML? Let’s jump in to find out what is the meaning of HTML.

What is HTML?

HTML is the standard markup language used to create the structure of a webpage.

A page written in HTML comes up as a document that can be efficiently shared on the web. 

HTML is capable of performing tasks like :

  • Designing web page structure
  • Adding images, videos, and hyperlinks into the page
  • Defining different sections of a website like paragraphs and headings
  • Adding data in a List or Table format
  • And, a lot of other things

The full form of HTML is “HyperText Markup Language”.

To understand why HTML is called a markup language, carefully read in the image below.        

what does HTML stand for

You see, HTML stands for “Hyper text markup language” for a reason.

In simple terms, HTML is the set of codes and rules used to create files intended to be displayed on the internet.

What is an HTML Document ?

HTML documents can be created by simply writing required information in a format specified by its syntax.

You can write the code in an HTML editor, or simply in a Windows Notepad.

You can find free online HTML editors very easily.

Don’t forget to add an extension “ .html ” at the end of the file name to process it as an HTML file. This,“.html” is an HTML file extension.

You can also use “ .htm ” as the extension.

Just save the text file as “ file-name.htm ”.

A simple HTML document looks like this in a Windows Notepad :

Example for a simple HTMl program

You must have got an idea what does HTML look like.

The output of above HTML file resembles : 

Output of a simple HTML program

Note : You can only build static web pages with HTML. You need to use CSS and JAVASCRIPT languages to enhance your page. These languages act as assistants !

What is CSS used for : To control presentation, formatting, and layout.

What is JAVASCRIPT used for : To control the behavior of different elements on a page.

You will be glad to know that we at Technical Counter, use all the three languages to enhance the reading experience.

Pro Tip : CSS stands for Cascading Style Sheets. Read more about this programming language here.

Looking at how a powerful concept developed over time seems interesting, isn’t it?

Let’s look into what all went into the development of HTML over the decades.

History of HTML

A Brief Timeline of HTML Versions

Version NameYear of ReleaseDescription
HTML 1.01993First release, very limiting features, just used to drop some simple text.
HTML 2.01995Defined many-core HTML features, was a standard for website creation.
HTML 3.01995Powerful designing abilities, a highly improved module.Caused implementation failure and was later abandoned.
HTML 3.21997W3C standardized the language.It had toned-down capabilities and browsers supported it fully.
HTML 4.011999Large evolution of HTML standards, it became the last iteration of classic HTML. Focused on Internationalisation and had support for CSS.
XHTML2000An entirely new branch of HTML, incorporating XML. A new set of coding rules improved accessibility and functionality.
HTML52014Developed by WHATWG.Plenty of new elements, attributes, and abilities were introduced. It is specifically designed for the web.

If you use the original World Wide Web program, you never see URL or have to deal with HTML. That was a surprise to me that people were prepared to painstakingly write HTML.

Tim Berners Lee

Pro TIP : To find out which version of HTML any website uses, you need to see the DOCTYPE declaration in the source code.

Presently we are concerned with the version that is in use widely ie. HTML5.

HTML5 Features

The advent of HTML5 opened a lot of unimaginable possibilities with the dynamic functionality of :

  • Semantic Header and Footer
  • Audio Support
  • Graphics: Illustrations, Diagrams, Videos, Charts and Animations
  • Organizable Navigation

It opened a whole lot of participation and involvement into building web content.

If someone had protected the HTML language for making web pages, then we wouldn’t have the world wide web.

Feng Zhang

Looks amazing, right? I will take you through many more interesting things, keep reading.

What is HTML used for?

Currently, HTML is being used for the following : 

  1. Developing Web Pages
  2. Building Web Applications
  3. Internet Navigation
  4. Data Entry work
  5. Client-Side Storage of Data

At the webpage level, HTML is being used for the following:

  1. To format text as titles and headings
  2. To arrange graphics on a webpage
  3. To link to different pages on a website
  4. To link to different websites

Don’t worry if you are not able to understand these terms, you will surely get the idea of HTML as you proceed.

Much to your astonishment, there are a wide array of domains where you can see the usage of HTML. Some examples are:

  1. Web Development
  2. Graphic Designing
  3. Typography
  4. And a lot more..

HTML seems very powerful.

But wait, let me tell you something:

As with every other technology, Html has its own set of pros and cons. 

Advantages of HTML

The major advantages of HTML are listed below: 

  • It is easy to learn and use.
  • It is supported by all browsers.
  • The HTML syntax is very similar to XML Syntax.
  • It is free.
  • It is supported by most web development tools.
  • HTML is the most Search Engine friendly Language.

Disadvantages of HTML

The major disadvantages of HTML are listed below:

  • Overall complexity and long-form code.
  • Inability to render content in the form of pleasing visuals on standalone.
  • Static nature, insufficient for dynamic pages.
  • Unpredictable behavior across Browsers.
  • It does not allow users to implement logic. 

You may feel what I exactly did when I read about HTML for the first time :

“ Okay, sounds cool, But how is HTML actually put to use in real webpages? ” 

To answer this, you first need to understand the basic process that accompanies building the web with HTML.

How does HTML work ?

The main steps involved in working with HTML are as follows :

  1. A digital document is saved in the HTML format.
  2. The HTML file is then uploaded to the World Wide Web.
  3. Whenever a user requests data on a Search Engine, the WWW delivers the coded information to the Browser.
  4. The Browser uses HTML elements to interpret the content of the page.
  5. The Browser renders the page content in a well-formatted, clean, and appealing way to the readers.

You may ask the question, why can’t there be other languages used in this place? Why only HTML?

Allow me to elaborate the importance of HTML right now.

Why is HTML important?

HTML instructs the browser how to format and display information on any webpage via the internet or WWW.

Without it, the internet wouldn’t have a way to encode information into the machines.

HTML is used by 90.2% of all the websites whose markup language is known. Click To Tweet

It is needed for the browser to understand what to do with the text on a webpage while delivering it to the reader. 

Do look at the following image to understand the significance of HTML.

Basic Features of HTML

By this time, you must be wondering as to what really is written in an HTML document.

And the Good news ?

I am going to lend you some information around basic code used in this language.

Structure of an HTML document

A web document consists of two main sections :

  1. HEAD Section : It includes the metadata of the document. It is used to define the document title, character set, styles, scripts, and other meta information. 

All this data is not shown directly on the resulting page, it just provides technical information to browsers and Search Engines.

  1. BODY Section : It defines the document body. It contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

Everything that is to be actually displayed needs to be embedded in this section.

Also there is a parent element, the <html> element which encloses the whole page.

This parent element requires a doctype declaration along with it.

In case you might be asking yourself, Doctype declaration helps the browser to understand the nature of the document.

Pro Tip : The <html>, the <body> and the <head> elements can be used only once in a HTML document !

What are HTML Elements ?

Each individual component of the document is an HTML element.

It comprises a pair of tags enclosing essential information about the respective entity (paragraphs, hyperlinks, audio files, videos etc.) 

An element in HTML is often confused with a tag. 

A tag is just something enclosed in angular brackets like this: < tag-name >.

Whereas, an element is a pair of two tags, one opening tag < tag-name > and one closing tag < /tag-name >. Related information is written between these tags.

Everything between < tag-name > and </tag-name > is called the element content.

Pro Tip: Some HTML elements have no content (like the <br> element used to insert a line-break). These elements are called empty elements. Empty elements do not have an end tag!

Note: HTML elements can also be nested (elements can contain other elements).

The start tag for every element is “<…>” and the end tag for every element is “</…>”.

There are two types of HTML elements:

  1. Block Elements : They always start on a new line and can take up the full width available. Ex :- <div> element.
  1. Inline Elements : They don’t start on a new line and take up only as much width as necessary. Ex :- <span> element.

Look at the example below :

<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>

Here, the <body> , <h1> and <p> are elements and each of them have a pair of tags enclosing some content.

Pro Tip : HTML tags are not Case Sensitive.

What are HTML Tags? 

HTML tag is a code that defines objects and their properties in a webpage. These are enclosed within the angle brackets.

Tags in HTML can be classified as :

  1. Container Tags:They always work in pairs,with 1 starting tag and ending tag. Examples :- <title> tag, <body> tag.
  1. Empty Tags: They have only 1 starting tag. Examples :- <br> tag, <link> tag.

Look at the HTML Tags example below.

Here I have demonstrated the use of multiple tags.

<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

Try it out yourself using an online HTML editor.

HTML has an amazing way of classifying headings.

The <h1> to <h6> are tags of heading levels used for structuring text format.

Note: Only the content inside the <body> section is displayed in a browser.

Top 10 most used HTML tags

TAGDESCRIPTION
<title>To display Page Title
<h1>To mark some Text as level 1 Heading
<b>To make some Text Bold
<br>For Line Break
<div>To mark a division of a document
<a>To define a Hyperlink
<i>To make some Text Italic
<img>To Insert an Image
<ol>To create an Ordered List
<li>To create a List Item in an Ordered List

Don’t forget to try these HTML tags with examples.

For the complete list of HTML tags in use, we have attached a downloadable PDF at the end of this article.

HTML has the capability to define additional properties for any object/element as and when required using attributes.

What are HTML Attributes? 

HTML Attributes are characteristics that amplify a page element. They give additional information about the Element.

  • Always written with the start tag
  • Come with a Name/value pair
  • Defines a property for an element
  • An element may contain any number of attributes suitable for use with it

Look at the HTML example below : 

<html>
<body>
<h2>The href Attribute</h2>
<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>
<a href="https://www.technicalcounter.com">Visit Technical Counter</a>
</body>
</html>

Here, the href attribute has been used to define the URL address ( property ) of the <a> tag for hyperlinks.

If you carefully observe this example, you will see the web address of our website, Technical Counter.

Pro Tip : Values put into HTML Attributes is Case Sensitive.

HTML attributes are generally classified as required attributes, optional attributes, standard attributes, and event attributes:

  • Usually the required and optional attributes modify specific HTML elements
  • The standard attributes can be applied to most HTML elements
  • Event attributes, added in HTML version 4, allow an element to specify scripts to be run under specific circumstances

For your reference, the Top 5 Most commonly used HTML Attributes are listed below:

  1. href Attribute for <a> Tag : To specify the URL of a Hyperlink
  2. src Attribute for <img> Tag : To specify path of an embedded Image
  3. alt Attribute for <img> Tag : To specify the Alt Text of an Image
  4. lang Attribute for <html> Tag : To declare the Language of the webpage
  5. style Attribute : To define color, font, size etc. of an Element

For the complete list of HTML Attributes in use, we have attached a downloadable PDF at the end of this article.

Pro Tip : HTML Attributes should always be written in lowercase and values be enclosed in single or double quotes, for improved readability !

Functionalities of HTML

In HTML, we have many functions. To start with, you need to be thorough with some of the basic features we have shared here:

1. HTML Links : Used to jump to another document.

It can be text, image, or any other HTML Element.

The Syntax of Links in HTML is :

<a href="url">link text</a>

where “link text” is visible to the reader and when he clicks on it, he gets directed to the specified “URL”.

2. HTML Buttons : Used to embed clickable Buttons.

We can put Text or Image inside a button. This tag supports the Global Attributes and Event Attributes.

The Syntax of Button in HTML is :

<button type="button">Click Me!</button>

where type Attribute defines the type of button.

3. HTML Images : Used to embed an image in a webpage.

Images are not inserted, they are just linked in the webpage.

The <img> tag used here is an empty element.

The Syntax of Images in HTML is :

<img src="img_TC.jpg" alt="Technical Counter"> 

where “img_TC.jpg” is the file name of the image and “Technical Counter” is the Alt Text associated with it.

If you want to know what the Alt Text of an image is, read here.

4. HTML Lists : Used to group a set of related items into Lists.

Unordered List starts with <ul> tag and the items are marked with bullets.

Ordered List starts with an <ol> tag and the items are marked with numbers.

The Syntax of an unordered list in HTML is :

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

where 3 items “Coffee”, “Tea”, and ” Milk” have been listed separately.

Pro Tip : Ordered list uses numbers, whereas unordered lists use bulleted points.

5. HTML Forms : Used to Create Forms to receive User Input.

The received data can be then sent to the server for processing.

It can contain various input elements like Text Fields, Text Boxes etc.

The Syntax of Forms in HTML is :

<form>
...
form elements
...
</form>

where “form elements” refers to all the desired input elements. 

Pro Tip : The form itself is not visible. Also note that the default width of an input field is 20 characters.

Q&A

Now let us answer some basic queries regarding HTML, that you may have after reading this article.

Q.1 Is HTML easy to learn ?

Ans. You can easily learn HTML on your own. It has easy code and you don’t need any programming experience. There is a lot of efficient learning material available online.

For a Beginner’s reference, read Learn HTML with CodeAcademy.

Within a month of practice, you could be thorough with it, and remember, it’s worth the efforts.

Happy Learning 🙂

Q.2 Is HTML a Programming Language ? 

Ans. No, HTML is not a programming Language. As the name suggests, HTML is a “Markup” Language. Though it has code, it can’t implement Programming logic.

Technically, it gives declarative instructions to a computer and so, it can be considered as an instructing language without logic. 

Q.3 Which Organisation controls HTML ?

Ans. HTML is controlled by the World wide web consortium (W3C), and the WHATWG (Web Hypertext Application Technology Working Group). 

It was first standardized by W3C (1997) and brought into its current form by WHATWG in 2014.

Q.4 Does HTML work on Linux ?

Ans. HTML works on all platforms like Windows, MACOS, Linux. Just use a text editor that allows you to save a page in UTF-8 encoding.

Q.5 Are HTML Attachments/Files safe ?

Ans. HTML files are non-executable and thus technically safe. They can’t access system settings or files.

But HTML attachments do have security concerns as it can be used to deliver obfuscated web pages, and to evade URL reputation checks. This can lead to malicious links going undetected.

Q.6 Can HTML be used for hacking ?

Ans. Since you can very conveniently access the HTML source code of any webpage, chances of them getting hacked is high.

I know you have a lot of unaddressed queries related to the fundamentals of HTML.

To fulfill this, we have put up a separate post – Top 15 FAQs that every Html Beginner should know.

We have dedicated this post entirely to your queries, do give it a check.

I know a lot of you may be wondering whether it’s even worth it to learn HTML.

Read the following section, where we have addressed your concern.

Is HTML worth learning in 2020 ? 

Okay HTML seems cool, learning is easy, syntax is interesting.

But what does this mean for you? 

Web Development as a career is fragmenting into more specific domains and so you need to decide and master one.

Everyone should know how to programme a computer, because it teaches you how to think

Steve Jobs

HTML, DEFINITELY, isn’t dying and will keep growing with the number of websites and web application requirements across the internet.

We may ,eventually, also see HTML being put to use in other domains.

Learning HTML is totally worth it in 2020 !

Also, if you’re a tech-savvy person, you would be interested in having a look at the amazing complexity that has been built on top of HTML.

There are many programming languages. But if you don't know HTML, it's like learning maths without numbers."Team Technical Counter" Click To Tweet

We have shared simple ways to view the source code of any webpage.

How to View the Source Code of any Webpage?

A page may contain other CSS and Javascript snippets and that’s why dont get overwhelmed by the visible difficulty of code.

For Desktop users, you may follow these steps :

  • Right-click anywhere on the webpage.
  • Click on “ VIEW PAGE SOURCE “ option
  • Alternatively, CTRL+U is the Windows shortcut key for the task.

And, For mobile devices use this method.

Conclusion

I expect that by now, you must be having the complete knowledge required to kickstart your journey of learning HTML.

If you wanted to learn the basics of HTML, you would have found this post useful.

If you want to build your own webpage, view this html tutorial for beginners by Computer Cave Youtube Channel. Only then you will know how to create a website using HTML.

I have some additional tips for you, that will make your learning smooth :

  1. You can check syntax errors in HTML using an HTML Validator to assure quality of a web document. Many free tools are available online, including the HTML Validator from W3C.
  2. To write symbols and special characters (not available on your keyboard) to an HTML file. For reference, see HTML entity codes.
  3. If you want to see the amazing abilities of web designing using HTML, and how visually appealing it can look, visit HTML Templates

Additional Resources :

Answers to 15 Most Asked Queries about HTML

HTML Tricks and Tips for its efficient use

I hope you learned a lot with this complete guide on “What is HTML” 🙂

Do share your honest feedback with us in the comments below.

Print Friendly, PDF & Email

Show Some LOVE :)

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *