Learn HTML Text Editors

The basic tool you need to learn HTML is the simple text editor and that is all you need in addition to a web browser to view your web page.

In professional settings especially when working on large projects, more advanced HTML text editors will be needed. For all the examples used in this HTML tutorial series, a simple Text Editor will suffice.

Each operating system comes with a default text editor. That will determine which one you can use for the examples. There are also several free online text editors that you can use in your web browser to test your examples. For beginners, we recommend using the default text editors that come with your platform.

In the entirety of this tutorial series, we will let you choose the most convenient one.

Create Your First Web Page

Step 1: Open Notepad (Windows)

Open the Start Screen by clicking the Start button, the window symbol at the bottom left on your screen. Type “Notepad“. Older Windows version you need to click on Start > Programs > Accessories > Notepad.

Notepad is available on all versions of Windows.

Step 1: Open TextEdit (Mac)

Open Finder > Applications > TextEdit

Go to Preferences > Format > choose “Plain Text” in order to get TextEdit to save files correctly.

Next, under “Open and Save“, check the box that says “Display HTML files as HTML code instead of formatted text“.

The rest of this guide will use Notepad in the examples and screenshots.

Step 2: Write Some HTML Code

Type the code below or you can copy-paste this snippet into your text editor.

<!DOCTYPE html>
<html>
   <head>
      <title>This is document title</title>
   </head>	
   <body>
      <h1>A Simple heading</h1>
      <p>Hello World paragraph!</p>
   </body>	
</html>

Step 3: Save the HTML Page

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

Name the file “index.html” and set the encoding to UTF-8. This is recommended encoding for HTML files.

Note: By convension you can use either .htm or .html as file extension for HTML files.

Under Save as type: select All Files (*.*) then save the file.

Step 4: Open the HTML page in Your Web Browser

Open the saved HTML file in your favorite web browser by double-clicking on the file icon, or right-click then choose “Open with” to select the web browser if you have multiple on your system.

The should see a web page that looks like this:

HTML – Text Editors