Skillversitas

HTML Editors

An HTML editor is an application for writing HTML code. Choosing the right editor improves a developer's productivity.

Types of Editors

1. Simple Text Editors

  • Notepad (Windows)
  • TextEdit (macOS)
  • gedit (Linux)

2. Code Editors

  • Visual Studio Code
  • Sublime Text
  • Atom
  • Notepad++

3. IDE (Integrated Development Environment)

  • WebStorm
  • Visual Studio
  • Eclipse

Visual Studio Code

VS Code is the most popular code editor for web development.

Install VS Code

  1. Visit https://code.visualstudio.com
  2. Download it for your OS
  3. Install and run it

Extensions for HTML

  • Live Server: Auto-reloads when files change
  • Emmet: Shortcuts for HTML
  • HTML CSS Support: CSS autocomplete
  • Auto Rename Tag: Automatically renames tags

Emmet Shortcuts

<!-- Type then press Tab -->
!           → Basic HTML structure
div         → <div></div>
p*3         → 3 paragraphs
ul>li*5     → UL with 5 LI
a           → <a href=""></a>
img         → <img src="" alt="">

Case Study: Setting Up a Development Environment

# Install VS Code on macOS
brew install --cask visual-studio-code

# Install HTML extensions
code --install-extension formulahendry.auto-rename-tag
code --install-extension formulahendry.code-runner
code --install-extension ritwickdey.LiveServer

Everyday Case Study

Case: A student needs to set up an environment for a web development practicum.

# 1. Install VS Code
# Download from https://code.visualstudio.com

# 2. Install the Live Server extension
# Open VS Code → Extensions → search for "Live Server" → Install

# 3. Create an index.html file
# Right-click → New File → index.html

# 4. Open it with Live Server
# Right-click the file → Open with Live Server

Online Editors

CodePen

  • https://codepen.io
  • Instant live preview
  • Easily share your code

JSFiddle

  • https://jsfiddle.net
  • Supports HTML, CSS, JavaScript
  • Collaboration features

W3Schools Try It

  • https://www.w3schools.com/html/tryit.asp
  • Simple editor
  • Perfect for learning

Best Practices

  1. Use VS Code: The most popular editor
  2. Install Live Server: For auto-reloading
  3. Use Emmet: For productivity
  4. Folder structure: Keep your files well organized
  5. Version control: Use Git

Case Study: Project Folder Structure

campus-website/
├── index.html
├── css/
│   ├── style.css
│   └── responsive.css
├── js/
│   ├── script.js
│   └── api.js
├── images/
│   ├── logo.png
│   └── banner.jpg
└── pages/
    ├── beranda.html
    ├── student.html
    └── faculty.html

Summary

Choose an editor that fits your needs. VS Code with the Live Server extension is the best choice for modern web development.