HTML Editors

HTML IDEs

Write HTML Code In Notepad

  • Notepad is the simplest way to write code of HTML to create Web pages
  • Professional HTML editors like Notepad++, NetBeans etc can be used to create and modify code.
  • We covered both notepad as well other IDE in this section.
  • If you are new, then ry to use a simple editor like Notepad to learn HTML.
  • Follow the four steps below to create your first web page with Notepad or TextEdit.

Step 1: Open Notepad in Windows

Windows 8 or later :

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Windows 7 or earlier :

Open Start > Programs > Accessories > Notepad


Step 1: Open TextEdit on Mac

Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text"

Then under "Open and Save", check the box that says "Ignore rich text commands in HTML files".

Then open a new document to place the code.


Step 2: Write Your First HTML Code

Do not try copy & paste. Always try to write code to learn HTML tags.

<!DOCTYPE html>
<html>
<body>

           <h1>W3Professors - My First Heading</h1> 
           <p>Hello ! Welcome to W3Professors - My first paragraph.</p>

</body>
</html>
Execute Code

Step 3 : How to Save HTML Page

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

Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

You can use either .htm or .html as file extension. There is no difference, it is up to you.

Step 4 : Run HTML Page to View Output (Use Browser for this)

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 :

Write HTML Code Using Notepad++

Notepad++ is something of a classic. It emerged when the editor, which Windows shipped with, had gotten rather long in the tooth and failed to offer important functionality.

Notepad++ offers a tab interface, autocompletion, and great code highlighting. Macro recording automates frequently-used commands. The interface can be configured to your needs, and there are plenty of plugins at your disposal to broaden the feature set.

  • Syntax Highlighting and Syntax Folding
  • Auto-completion
  • Multi-Document
  • Document Map
  • Function List
  • Multi Editing
  • Column Mode Editing
  • Ghost Typing

Write HTML Using Sublime Text

Sublime Text is a sophisticated text editor for code, markup and prose. You'll love the slick user interface, extraordinary features and amazing performance.


Some things You Will Love about Sublime Text

  • Goto Anything
  • Multiple Selections
  • Command Palette
  • Distraction Free Mode
  • Split Editing
  • Instant Project Switch
  • Plugin API
  • Customize Anything
  • Cross Platform

Write HTML Using Adobe Dreamweaver CC

Dreamweaver CC has been reimagined with a modern interface and a fast, flexible coding engine to give web designers and front-end developers easier ways to create, code, and manage websites that look amazing on any size screen.

Dreamweaver is part of Creative Cloud, so you get access to the Dreamweaver desktop app for Mac and PC on up to two devices as well as companion apps for smartphone and tablet.


Design and Develop Modern & Responsive Websites

  • Build the best sites for any browser or device.
  • Go from blank page to brilliant.
  • Make something now.
  • Work faster with an all-new coding engine that offers code hints for new users and visual aids that reduce errors and improve readability.
  • Code faster and cleaner with support for common CSS preprocessors, Emmet, and real-time error checking.
  • Preview your page edits in real time without having to refresh your browser, and preview your sites on multiple devices at the same time.
  • The modernized user interface eliminates clutter and makes Dreamweaver more intuitive and customizable.