Basic HTML Editors

To write your first HTML document we recommend to use simple text editors-

  • Notepad for Windows
  • TextEdit for Mac

We are using these inbuilt text editors because they are perfect to start with and are distraction free. You will also get an idea of how to write, save, open, edit the HTML file easily.

Opening Notepad in Windows

Method 1: Right click > New > Text Document
Method 2: Press windows key and search Notepad
Method 3: Start menu > Programs > Windows Accessories > Notepad

Opening TextEdit in Mac

Method 1: Open Finder > Applications > TextEdit
In Preferences > Format > choose “Plain Text”
Then under “Open and Save”, check the box “Display HTML files as HTML code instead of formatted text”.
Then open a new document to write your code.

Ok, so now you have a new document. Now let’s write some HTML content that will be displayed in the browser.

Writing HTML code

Mention doctype: First thing is to specify the document type before doing anything.

Main html tag: Line 2 and line 0 are the opening and closing HTML tags. It is like the walls of a room. These tags will contain our whole HTML code we will be writing.

head tag: Then comes the head tag. It contains other essential information about the document like metadata. We will talk about it later. For now, we will just write the title of the document inside the head tag. This title will be displayed on the tab of the browser.

body tag: Then comes the body tag. The body tag contains rest of the HTML that we need to display on the browser’s window. Usually the main content.

footer tag: Then the footer section to display some content in the bottom section of the website.

The code altogether might look like this-

Simple Format

I am rewriting the basic markup for you to remember. It can, however, include additional markup or parent tags but we will look at it later on.

Saving HTML file

After writing this example code in your editor, try to save the file.
Goto File > Save As
Choose your location, write the file name and type .html as the extension of the file.
Now double click the file to open in the browser.

Using Advance HTML Editors

You can also download and use anyone of these professionally built editors for programming.

  1. Notepad++
  2. Sublime Text
  3. Atom Editor

Leave a comment

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