HTML Code Structure | Which Text Editor Best for Writing HTML code

Basic HTML Code Structured

html-code-structure

This is the first basic example HTML code structure. Even for a beginner it is pretty easy to understand. Have a look at the structure of the HTML code, but don't stress too much about the unfamiliar tags. This is your first example with very basic HTML tags:

Example
<!DOCTYPE html>
<html>
    <head>
        <title>This is page title</title>
    </head>
    <body>
        <h1>This is Heading Text</h1>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus ipsum quaerat rem, aspernatur architecto quas fugiat porro
        deleniti ut voluptas accusamus voluptate obcaecati. Voluptatum earum eligendi reprehenderit enim incidunt voluptatem?</p>
    </body>
</html>

Output

html-code-structure-output

Explanation of HTML tags use in the Example

  • <!DOCTYPE html> - The doctype declaration indicates the document type and version of HTML used on the webpage. Each version has a different doctype declaration. HTML5 Doctype is used in above example.

  • <html> - It is the root tag that describe the whole webpage. It is a paired tag, i.e. it has a closing tag also, </html>. Everything will be written inside these tags.

  • <head> - Head tag contains information about the document like its title, author information, description of the webpage, and so on. It has different tags to perform these functions. It is also paired tag.

  • <title> - Title tag is used inside <head>, and it specifies the title of the document.

  • <body> - The body tag contains all the information which will be displayed on the webpage. If you want anything to be displayed on the webpage, you have to write it within these tags.

  • <h1> - Heading tag is used to define headings. <h1> is the largest heading. followed by <h2> , <h3>, to <h6>.

  • <p> - Paragraph tag is used to write paragraph on you webpage.

HTML Versions Timeline

HTML has evolved continuously with time. Each new version was better than the previous one with enhanced features. The current version is HTML5, equipped with various advanced tags. Lets have a look at the timeline of HTML Version's evolution:

Year HTML Versions
1991 HTML
1995 HTML 2.0
1997 HTML 3.2
1999 HTML 4.01
2000 XHTML
2014 HTML 5

HTML Editor

Now that we've gotten the basic theory out of the way. It's time to learn how to build our first website.

First off, we must ensure that we have the right tools. Most important, we need an HTML editor.

There are many choices on the market. Here a handful of the most popular:

  1. Sublime Text 3: It is free and also offer cross platform support for Windows, Mac, and Linux users. You can download Sublime Text 3 here

  2. Notepad++: Another common choice for HTML and other language coders is Notepad ++. It does not support cross platform. You can download Notepad ++ here

  3. Visual Studio Code: It is my favorite editor and it's also support cross platform. You can download Visual studio code here

Now at this point you can choose any HTML editor from above but my choice is Visual Studio Code. Because Visual studio code provide development operations like debugging, task running, and version control and you can add multiple types of extra extension in Visual studio code.

Microsoft Word as HTML Editor

Can you use word processors like MS Word for HTML editing? The answer is yes you can, but you shouldn't. You can write your HTML code on any application that gives you facility to write, but you should only use dedicated HTML editors or Notepad.

MS Word is not appropriate for coding because it won't be able to format code like a dedicated Editor. Formatting of code, like indentation, color scheme, etc. is very important, it results in less errors and the code looks appealing to the eyes. MS Word is not able to understand the HTML code and it will show grammatical errors.