Introduction To HTML

Introduction To HTML

In this article, I am going to give you a brief introduction to HTML. HTML is a very simple language to understand and easy to learn, made up of various elements which can be applied to normal words to give them special meanings. HTML is the most basic part of web application development.

What is HTML?

HTML is an abbreviation for Hypertext Markup language. In 1991, Tim Berners-Lee invented HTML. It is the most common markup language for creating web applications and web pages. HTML describes the structure of a Web page and it consists of a series of elements. The HTML elements tell the web browser how to display the content. Let’s first understand what is meant by Hypertext Markup Language, and Web Page.

What is hypertext?

In simple words, you can say hypertext is a text which contains a link to another text. The whole web is nothing but a cluster of links connected to each other. Links are the most vital aspect of the web.

YouTube            Google

Above you can see YouTube and Google these are nothing but hypertext pointing towards YouTube and Google respectively. When you click on YouTube it will redirect you to the YouTube homepage this is what hypertext is used for.

What is a markup language?

A markup language is a computer language that consists of easily readable keywords, names, or tags that contribute to the overall formatting of a page’s appearance. BBC, HTML, SGML, and XML are some examples of markup languages. In simple words, Markup language is used to specify how elements should be displayed on the screen with the use of various tags.

Welcome to <b> Dot Net Tutorials</b>

This is how it will look after applying the <b> tag to the plaintext. <b> tag basically converts everything wrapped inside it to bold.

Welcome to Dot Net Tutorials

What is a Web Page?

A web page is a document that is commonly written in HTML and translated by a web browser. A web page can be identified by entering an URL. A Web page can be of the static or dynamic type. With the help of HTML, we can create only static web pages.

What are Web Browsers?

The Web Browsers such as Chrome, Edge, Firefox, Safari are used to read the HTML documents and display them correctly. The most important point that you need to remember is a Web Browser does not display the HTML tags or Elements, but uses HTML tags or Element to determine how to display the document.

Versions of HTML:

Since the time HTML was invented, there are lots of HTML versions coming into the market. A brief introduction about the HTML version is given below:

  1. Html 1.0: The HTML basic version supports basic features such as text controls and images. This was the most basic version of HTML, with only a few HTML elements supported. It lacks advanced features such as styling, tables, and font support in the first version of Html.
  2. Html 2.0: HTML version 2.0 was introduced in 1995 with the primary goal of improving HTML version 1.0. Since then, a standard has been developed in order to maintain common rules and regulations across different browsers. In terms of markup tags, HTML 2.0 has made significant progress.
  3. Html 3.2: It was introduced in 1997. Following the release of HTML 2.0, the next version of HTML was 3.2. HTML tags were improved further in HTML version 3.2. It is worth noting that the newer version of HTML was 3.2 rather than 3.0 due to W3C standard maintenance.
  4. HTML 3.2 now has improved support for new form elements. CSS support was another important feature added by HTML 3.2.
  5. Html 4.01: It was introduced in 1999. It added support for cascading styling sheets. The concept of an external styling sheet first appeared in version 4.01. An external CSS file could be created using this concept, and this external styling file could be included in the HTML itself. HTML 4.01 added support for additional HTML tags.
  6. Html 5: Html 5 is by far the most recent version of Html. It supports more than 100 HTML tags. HTML5 added support for new form elements such as input elements of different kinds, geolocation support tags, and so on.
How to create an HTML Document?

There are many code editors used for writing Html code like notepad, notepad++, sublime text, atom but I prefer vs code (Visual Studio Code) and you can use any code editor as per your choice. To create an Html document, you need to save a file with an extension (.html). This will help the code editor to understand that this is an Html file.

How to create HTML Document

As you can see in the above image, the file created without the .html extension is treated as a normal text file. On the right-hand, the moment we added the .html extension code editor will interpret it and treat it like an Html document. In the same way, to create CSS and JavaScript files we use .css and .js extensions respectively.

HTML Document Structure:

The following image shows the structure of an HTML document.

HTML Document Structure

This is the fundamental body structure of HTML. It comprises the essential building blocks, such as the doctype declaration, Html, head, title, and body elements, upon which all web pages are built.

  1. DOCTYPE! HTML: This is the declaration of the document type. It identifies a document as an HTML document. One can declare Doctype as doctype! HTML, DOCTYPE! HTML, Doctype! HTML because doctype declarations are not case-sensitive.
  2. HTML: This is known as the HTML root element. It contains a head & body tag. The “lang=en” attribute is used to tell the browser that the document is written in the English language.
  3. head: It contains meta-information about the document. It includes various tags like title, link, script. etc. Meta tags are very useful in SEO (Search Engine Optimization). A web document can include many meta tags.
  4. title: The title tag is used to display the title on the browsers tab. If your website has multiple pages, you can add a different title to every page by using the title tag.
  5. body: The body tag is used to enclose all of a webpage’s viewable content. In other words, the body content is what displays on the front end of the browser.
  6. h1: h1 tag In Html is used to mark important heading there are a total of six heading tags in Html.

Note: The content inside the <body> section will be displayed in the web browser. The content inside the <title> element will be shown in the browser’s title bar or in the page’s tab.

Example:

Type the following HTML code in the notepad and then save it with the extension “.HTML”.

<DOCTYPE! html>
<html lang="en">

<head>
   <title>Html Introduction</title>
</head>

<body>
   <h1>Welcome to Dot Net Tutorials</h1>
</body>

</html>

Now, if you browse the above-saved HTML file, then you will get the following output in the browser. The red box is the body element that contains one h1 tag with the text “Welcome to Dot Net Tutorials”. Only elements present inside the body tag are displayed on the screen.

Introduction To HTML

Basic HTML Tags

HTML uses tags to specify what changes need to be done on the text. Tags are used to tell the browser how the content should be displayed on the screen. There are a total of more than 100 tags in Html, as we progress with this tutorial, we will learn about them in detail. It is not important to learn all HTML tags but you should have a basic understanding of what they are used for.

Some basic HTML tags include <div>, <a>, <p>, <section>, <img>, etc.

Html tags are words with special meanings wrapped inside <>. Below you can see a paragraph tag with text Dot Net Tutorials. Every Html element consists of a starting tag, closing tag, and content.

It is very important to close all tags but there are certain tags that don’t have any closing tags like <br>, <hr>, etc. These are the tags with no content; they are also called empty tags. In an element, the content is the part that gets displayed on the screen.

A horizontal rule is added to a web page using the hr tag. It comes in handy when you need to define a boundary between two elements. The <br> tag is used in the document to add line breaks.

Basic HTML Tags

Features of HTML
  1. Easy to learn and interpret.
  2. Supported by all browsers such as Chrome, Safari, Firefox, Internet Explorer, etc.
  3. It is platform-independent because it can be displayed on any platform like Windows, Linux, and Macintosh, etc.
  4. Images, videos, audios, etc can be embedded in HTML.
  5. Multiple web pages can be linked to each other in HTML.
  6. One can easily integrate HTML with other languages.
  7. HTML is a case-insensitive language, which means we can use tags either in lower-case or upper-case.
  8. It is a markup language, so it provides a flexible way to design web pages along with the text.
Why Learn HTML?

HTML is a MUST for students, beginners, and working professionals to become successful Software Engineers particularly if they are working in Web Development. Following are the reasons why one should learn HTML.

  1. HTML is supported by all latest browsers from Mozilla to Internet Explorer to Safari. So, if your website is written in HTML, you should not be concerned because it will appear in all browsers regardless of where it is accessed.
  2. One of the most notable and significant advantages of HTML is that it is completely free. HTML does not require any plugins, so there is no need to deal with them when working with the software.
  3. HTML, in comparison to other programming languages, is far easier to understand and learn. It does not require a computer science degree to understand. A basic understanding of the internet is all that is required.
  4. Because HTML is the most fundamental markup language, learning it will assist you in learning other programming languages.
  5. If you want to be more serious about your career as a web developer, you will undoubtedly need to learn various coding and programming languages, each of which serves a unique and distinct purpose.
  6. If you work in a field where these skills are not required, you can still learn HTML and do some freelance work for people who are willing to pay for your services. Not only will your income increase, but you will also be able to build a strong portfolio with your work experience.
Advantages of HTML
  1. Browser Friendly.
  2. Free to use.
  3. Fast & Lightweight.
  4. Supported by all the latest web browsers.
  5. Easy to learn & code.
  6. Easy to interpret.
Disadvantages of HTML
  1. It can create only static web pages for dynamic web pages other languages need to be used with HTML.
  2. A large line of code.
  3. Security features are not good.
  4. Doesn’t handle events or carry out dynamic tasks.

Note: Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers. Now, HTML is being widely used to format web pages with the help of different tags available in HTML language.

In the next article, I am going to discuss How to Download and Install Visual Studio Code Editor to develop HTML-based Web Applications. Here, in this article, I try to give an overview of HTML and I hope you enjoy this Introduction to HTML article.

Leave a Reply

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