Choosing a Code Editor

Understanding Code Editors

A code editor is software designed for writing and editing source code, including the HTML and CSS used to create webpages.

You do not need expensive or complicated software to start learning HTML. A simple text editor can create an HTML document, but a good code editor provides features that make writing, organizing, and troubleshooting markup easier while still allowing you to work directly with the source code.

Text Editors & Code Editors

HTML documents are plain-text files, which means you can create them using a basic text editor. However, software designed specifically for editing source code usually provides additional features that make working with HTML and CSS easier.

A basic text editor allows you to type and save plain text. A code editor does the same thing but typically adds tools designed to help programmers and web developers work with source code.

Regardless of which editor you choose, the HTML saved in the document is still plain text that a web browser can read and interpret.

Working with Source Code

When learning HTML, working directly with the source code helps you understand how a webpage is constructed. You can see the elements, attributes, nesting, indentation, and other parts of the markup rather than having the software generate them without your involvement.

For example, creating a heading and paragraph directly in HTML lets you see exactly how the document is structured:

<h1>My First Webpage</h1>

<p>This is my first paragraph.</p>

As you write more HTML, working directly with the markup also makes it easier to recognize errors and understand how different parts of a document relate to one another.

WYSIWYG Editors

A WYSIWYG editor, short for What You See Is What You Get, provides a visual interface that allows webpages or other content to be created without requiring the author to write all of the underlying markup directly.

Visual editors can be useful for certain types of website work, but they are not always the best choice when your goal is to learn HTML. When software creates much of the markup for you, it can be harder to understand which HTML elements are being used, how they are nested, and why the webpage behaves the way it does.

For learning HTML and CSS, these tutorials encourage working directly with the source code. Writing the markup yourself helps you develop an understanding of webpage structure instead of relying on software to create that structure for you.

Useful Code Editor Features

Code editors range from very simple programs to full development environments containing many advanced tools. Beginners do not need every available feature, but several features can make learning and writing HTML easier.

• Syntax highlighting — displays different parts of the code using visual formatting, making markup easier to read.
• Line numbers — make it easier to locate a particular line when troubleshooting code.
• Automatic indentation — helps maintain a readable document structure.
• Find and replace — quickly locates or changes text throughout a document.
• Multiple file support — allows several HTML, CSS, or other files to remain open while you work.
• Code completion — can suggest elements, attributes, properties, or values while you type.
• Error indicators — some editors can identify possible syntax problems or other mistakes.
• File and directory management — provides access to the files that make up a website from within the editor.

These features should help you write code rather than prevent you from learning what the code actually does.

Choosing the Right Editor

There is no single code editor that is best for everyone. The right editor is one that works well with your computer, is comfortable to use, and provides the features you need without making the process unnecessarily complicated.

For a beginner learning HTML, look for an editor that makes the source code easy to read and edit. You can always move to another editor later as your experience grows and your needs change.

Most importantly, do not spend too much time trying to find the perfect editor before you begin. HTML does not require a particular editor, and the skills you learn by writing HTML can be used with many different code-editing programs.

Saving HTML Files

An HTML document must be saved as a plain-text file with an appropriate HTML filename extension. The most commonly used extension is .html.

For example:

index.html

Be careful when using general-purpose text editors because some programs may automatically add another filename extension. A file intended to be named index.html should not accidentally be saved as:

index.html.txt

You should also avoid creating HTML documents with word-processing software that saves formatted document files instead of plain-text source code.

When possible, save HTML documents using UTF-8 character encoding. UTF-8 is the standard encoding used for modern webpages and supports a very large range of characters and symbols.

Code Editors & Web Browsers

A code editor and a web browser perform different jobs. The editor is where you write and modify the HTML source code, while the browser interprets that code and displays the resulting webpage.

Code Editor
     │
     │  create and edit
     ▼
index.html
     │
     │  open and interpret
     ▼
Web Browser
     │
     ▼
Displayed Webpage

A common workflow is to edit the HTML document, save the file, open or refresh it in a browser, review the result, and then return to the editor to make additional changes.

As you learn HTML, you will repeat this process frequently. Seeing how changes to the source code affect the displayed webpage is one of the most effective ways to understand how HTML works.

HTML Indentation & Formatting

HTML indentation is the practice of adding consistent spaces at the beginning of lines to make the structure and nesting of the markup easier to see. Although indentation usually does not affect how a browser displays a webpage, properly formatted HTML is much easier for people to read, understand, edit, and maintain.

Good indentation becomes especially important when several people work on the same website. Consistent formatting allows another developer or designer to quickly understand where elements begin, where they end, and how they are nested within one another.

Indent Nested Elements

When an element is placed inside another element, indent the nested element one level. Elements at the same nesting level should normally have the same indentation.

Correct:

<body>
  <header>
    <h1>My Website</h1>
    <p>Welcome to my website.</p>
  </header>

  <main>
    <h2>About Us</h2>
    <p>Learn more about our company.</p>
  </main>
</body>

The header and main elements are both children of body, so they are indented to the same level. The elements contained inside them are indented another level.

Incorrect:

<body>
<header>
    <h1>My Website</h1>
 <p>Welcome to my website.</p>
       </header>
  <main>
<h2>About Us</h2>
      <p>Learn more about our company.</p>
</main>
</body>

A browser may still display this HTML correctly, but the inconsistent indentation makes the document structure unnecessarily difficult for a person to follow.

Keep Elements at the Same Level Aligned

Sibling elements share the same parent element and should normally begin at the same indentation level.

Correct:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Incorrect:

<ul>
  <li>HTML</li>
      <li>CSS</li>
 <li>JavaScript</li>
</ul>

All three li elements are children of the same ul element, so their indentation should match.

Indent Each Level of Nesting

For more deeply nested markup, add another level of indentation each time an element is nested inside another element.

<nav>
  <ul>
    <li>
      <a href="index.html">Home</a>
    </li>
    <li>
      <a href="about.html">About</a>
    </li>
  </ul>
</nav>

The indentation creates a visual representation of the HTML hierarchy. You can quickly see that the ul is inside nav, each li is inside the ul, and each link is inside an li.

Use Consistent Indentation

There is no requirement that every HTML author use exactly the same indentation width. Two spaces and four spaces are both commonly used. What matters most is choosing a style and using it consistently throughout the website or project.

These tutorials use two spaces for each level of indentation in HTML examples:

<section>
  <h2>Section Heading</h2>
  <p>Section content.</p>
</section>

If you are working with other people, follow the formatting conventions established for the project rather than changing the markup to your personal preference.

Why Good Formatting Matters

HTML formatting is not only about making code look neat. Readable markup makes it easier to understand the document structure, locate misplaced closing tags, identify incorrect nesting, make changes safely, review another person's work, and maintain a website over time.

A webpage may look perfectly correct in a browser while its underlying markup is difficult to understand. Developing good formatting habits from the beginning makes your HTML easier for both you and other people to work with.

Getting Ready for the Next Tutorial

In the next tutorial, you will create and save your first HTML webpage. Before continuing, make sure you have a plain-text or code editor available on your computer.

If you are using Windows, Notepad is already included with Windows and is all you need to create your first HTML document. If you are using macOS, TextEdit is included with your Mac and can be used after switching it to plain-text mode. If you would like an editor with additional features for working with source code, Notepad++ is another good choice for Windows users.

You do not need advanced web development software to complete the next tutorial. Starting with a simple editor allows you to concentrate on learning the HTML markup and understanding what each part of the document does.

Whichever editor you choose, make sure you can create and save a plain-text file with the .html filename extension. You will use your editor in the next tutorial to create your first webpage.

Code Editor Best Practices

Developing a few good habits when you begin writing HTML can make your documents easier to understand and maintain as they become larger.

• Work directly with the HTML source code while learning.
• Save HTML documents as plain-text .html files.
• Use UTF-8 character encoding.
• Indent nested HTML consistently.
• Use meaningful lowercase filenames.
• Organize related website files into appropriate directories.
• Save your work frequently.
• Test your webpages in a web browser as you work.

The editor is a tool for helping you create webpages, but understanding the HTML itself is more important than learning the features of any particular editor.

Summary

A code editor provides an environment for creating and editing HTML, CSS, and other source files. Although HTML can be written with a basic text editor, a code editor can provide useful features such as syntax highlighting, line numbers, indentation, code completion, and file management.

When learning HTML, working directly with the source code helps you understand webpage structure and how HTML elements work together. Choose an editor that is comfortable to use, save your documents as plain-text .html files, and regularly test your work in a web browser.

With a text or code editor ready, you can continue to the next tutorial and create your first HTML webpage.