& Menu ( )
' HTML CSS JAVASCRIPT SQL PYT
HTML Editors
‹ Previous Next ›
A simple text editor is all you need to
learn HTML.
Learn HTML Using Notepad or
TextEdit
Web pages can be created and modified by
using professional HTML editors.
However, for learning HTML we recommend
a simple text editor like Notepad (PC) or
TextEdit (Mac).
We believe that using a simple text editor is
a good way to learn HTML.
Follow the steps below to create your first
web page with Notepad or TextEdit.
Step 1: Open Notepad (PC)
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 (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 "Display HTML files as HTML code
instead of formatted text".
Then open a new document to place the
code.
Step 2: Write Some HTML
Write or copy the following HTML code into
Notepad:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
ADVERTISEMENT
Step 3: Save the 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).
Tip: You can use either .htm or .html as file
extension. There is no difference; it is up to
you.
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:
W3Schools Online Editor -
"Try it Yourself"
With our free online editor, you can edit the
HTML code and view the result in your
browser.
It is the perfect tool when you want to test
code fast. It also has color coding and the
ability to save and share code with others:
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
Click on the "Try it Yourself" button to
see how it works.
W3Schools Spaces
If you want to create your own website and
save your code online, try our free website
builder, called W3schools Spaces:
W3Schools
Spaces
Everything you need right in the
browser.
Get Started Now
Video: HTML Editors
‹ Previous Next ›
ADVERTISEMENT
COLOR PICKER
!"#$%
ADVERTISEMENT
&
SPACES
UPGRADE
AD-FREE
NEWSLETTER
GET CERTIFIED
CONTACT US
Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial
Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples
Get Certified
HTML Certificate
CSS Certificate
JavaScript Certificate
Front End Certificate
SQL Certificate
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
XML Certificate
! " # $ %
FORUM ABOUT
CLASSROOM
W3Schools is optimized for
learning and training. Examples
might be simplified to improve
reading and learning. Tutorials,
references, and examples are
constantly reviewed to avoid
errors, but we cannot warrant full
correctness of all content. While
using W3Schools, you agree to
have read and accepted our terms
of use, cookie and privacy policy.
Copyright 1999-2024 by Refsnes
Data. All Rights Reserved.
W3Schools is Powered by W3.CSS.
