HTML stands for Hyper Text Markup Language, so it uses simple tags to markup and format the content. These tags are enclosed in angular brackets like <html>. Almost all the tags have their closing tags also. The <html> tag informs the browser that a HTML document has been started similarly </html> tells the end of HTML document. which is the most widely used language on Web to develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification which was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999. Though HTML 4.01 version is widely used but currently we are having HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012.


Why to learn  HTML?


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.

HTML is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Web Development Domain. I will list down some of the key advantages of learning HTML:

·  Create Web site - You can create a website or customize an existing web template if you know HTML well.

·  Become a web designer - If you want to start a carrer as a professional web designer, HTML and CSS designing is a must skill.

·  Understand web - If you want to optimize your website, to boost its speed and performance, it is good to know HTML to yield best results.

· Learn other languages - Once you understands the basic of HTML then other related technologies like javascript, php, or angular are become easier to understand.


Advantages of HTML


1. HTML is Easy to Learn and Use

HTML is very easy to learn and understand. It has simple tags, and there is no hectic of case sensitivity in HTML. It simply has some tags that serve a specific purpose, and that’s it. One can easily understand other’s code and can make changes in it if required as there is not a lot more to understand in it. Moreover, it does not throw any error or create any problem like other programming languages if the developer forgets to close the tags or make some mistakes in code.

2. HTML is Free

One of the biggest advantages of HTML is that it is free of cost, and there is no need to purchase specific software. One should not have to deal with different plugins required to work on any software as HTML does not require any plugins. So it is very cost-effective from a per business perspective as there is no cost of purchasing the license if the whole website is developed in HTML language.

3. HTML is supported by all Browsers

HTML supports almost all browsers around the globe. So there is no need to worry about the website written in HTML for the browser support as the website would easily show up in all the browsers if the program keeps in mind to optimize the website for the different browsers. HTML provides an easy way to optimize the website in HTML according to browsers to the web developers.

4. HTML is the Most Friendly Search Engine

HTML is one of the most friendly search engines in comparison to all the programming languages available in the market (Search Engine friendly means delivering users quality websites with relevant information when searched for a particular one). It is quite easier to create SEO compliant websites using HTML than other programming languages.

5. HTML is Simple to Edit

HTML is very easy to edit as there is no need to have a special interface or platform to edit it. It is written in simple Notepad and hence can be simply edited in any text editor like Notepad, Notepad++, etc.

6. HTML can Integrate Easily with Other Languages

HTML can be easily integrated with multiple languages and does not create any issues in it. For example, in Javascript, Php, node.js, CSS and many more, we write the code of these languages between the HTML, and it mixes with them very easily.

7. HTML is Lightweight

HTML is lightweight language. It has a high signal to noise ratio as compared to other forms of communication. It is also faster to download HTML code, which means it is highly compressive also.

8. HTML is Basic of all Programming Languages

For the programmer to be either a frontend or backend developer, one must have knowledge of HTML as it is the basic language and all the other languages integrate with it while coding like JavaScript, JSP, Php, etc. Similarly, XML syntax is just like HTML and XML, which is used these days widely for data storage. If one has good knowledge of HTML, it is easy working with XML too for him.

Disadvantage of HTML

·       Making of structure of HTML documents becomes tough to understood.

·       It is the time consuming as the time it consume to maintain on the colour scheme of a page and to make lists, tables and forms.

·       It can create only static and plain pages so if we’d like dynamic pages then HTML isn’t useful.

·       Required to write a lot of code for just creating simple webpage.

·       Security features offered by HTML are limited.

·       If we need to write down long code for creating a webpage then it produces some complexity.

·       I need to write down tons of code for creating an easy webpage.

·       Security features are not good at HTML.

·       If we’d like to write down long code for creating a webpage then it produces some complexity.


A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

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

</body>
</html>

Example Explained

  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document.
  • The <html> element is the root element of an HTML page.
  • The <head> element contains meta information about the HTML page.
  • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab).
  • The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • The <h1> element defines a large heading.
  • The <p> element defines a paragraph.

     What is a HTML text editor?

    An HTML editor is a software for editing and creating HTML code that is used for websites or other web documents. With text-based HTML editors, the source code can be edited directly. We believe in that using a simple text editor is a good way to learn HTML. For example: Notepad, Visual Studio code, Subline Text, Notepad++, UltraEdit etc.

     

    Some Text Editor software download links are given below:-

     

    ·       Visual Studio code  (https://code.visualstudio.com/download)

    ·       Notepad ++             (https://notepad-plus-plus.org/downloads/v7.0/)

    ·       Subline Text            (https://www.sublimetext.com/3)

     

     Learn to use HTML Text Editor  software

    Step 1:  Open Notepad

          Method No. 1 =>     Find it by searching. Type notepad in the search box and   select Notepad in the search results.

    Method No. 2 =>    Open run command (Win + R) and then type “notepad” then            click on  OK or Enter Button.

    Step 2: Write Some HTML Code.

          -  Write or copy the following HTML code into Notepad:



    Step 3: Save the HTML Page

    -       Save the file on your computer. Select File > Save as in the Notepad menu.

    -       Write the html file name as you like but the format is “.html” and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

     

    Step 4: View the HTML Page in Your Browser

    Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").

    The result will look much like this:


     

    HTML Tags

    HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.
    When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.

    Types of HTML Tags

    1.    Open Tag / Pair Tag / Container tag

    2.    Empty tag / Singular tag / Unclosed tag

    1.    Container tag

                   Container tags are tags which have both opening as well as closing tag.for example <html>, <head>, <title>, <body>, <h1> etc.

    Some example of Container tags are given below

    Opening tags

    		Closing tagsDescriptions
    <html>           </html>Opens and closes an HTML document.
    <head></head>
    The first of two main sections of an HTML document.
     The <head> section is used to provide information about the document for use primarily by search engines and browsers.
    <title>        </title>The title of document. This element is nested inside the <head> section.
    <body></body>
    The second of two main sections of an HTML document.
    The <body> section contains all the content of the web page.
    <h1>to <h6></h1> to </h6>Heading 1 to Heading 6
    <p></p>Paragraph
    <b></b>Makes the contained text bold.
    <em></em>Gives the contained text emphasis (usually as italics).
    <span></span>A container for in-line content, such as content inside a paragraph.
    <strong></strong>Makes the contained text bold.
    <ol>    </ol>                   
    		Ordered (numbered) list
    <ul>    </ul>Unordered (bulleted) list
    <table></table>Table
    <form></form>Form

    2.    Empty Tag

                 empty tags are tags which have only opening tag .for example <br>, <hr>, <img>, <input>,           <meta> etc.

    Opening TagsDescription
    <br>It is used to break a line.
    <hr>It is used to insert  a horizontal line.
    <img>It is used to display images.
    <input>It is as Input.
    <link>efines relationships between the documents.
    <meta>changes metadata of your web page.
    <source>Inserts a media source.