██FR█████ █INTELL███████████

Setting Up Your First HTML Document: A Beginner’s Guide


This content originally appeared on DEV Community and was authored by Sharique Siddiqui

Diving into web development can be incredibly exciting, and your first step is learning how to set up a basic HTML document. This foundational skill unlocks the doors to creating and designing your own web pages from scratch.

What is an HTML Document?

An HTML (HyperText Markup Language) document is simply a file—usually saved with a .html extension—that browsers read and display as a web page. It contains all the text, structure, and elements the browser needs to render your site.

Step-by-Step: Creating Your First HTML Document

1. Choose a Text Editor

You don’t need anything fancy to get started. Any plain-text editor will do:

  • Windows: Notepad or Notepad++
  • Mac: TextEdit (set to plain text mode)
  • Cross-platform favorites: VS Code, Sublime Text, Atom
2. Understand the Basic Structure

Here’s what every HTML document should include:

xml
<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, HTML World!</h1>
    <p>This is my very first web page.</p>
  </body>
</html>
What do these parts do?
  • <!DOCTYPE html>: Tells the browser to use the latest version of HTML.
  • <html>: Wraps all your website content.
  • <head>: Contains information about your page, such as the title.
  • <title>: The text shown in your browser’s tab.
  • <body>: Where everything visible goes—headings, text, images, and more.
3. Save and Name Your File
  • Name your file something like index.html.
  • Make sure the extension is .html (not .txt!).
4. Open Your HTML File in a Browser
  • Double-click your index.html file, or
  • Right-click and choose your preferred browser (Chrome, Firefox, Edge, etc.)

You should now see your handiwork displayed as a web page—with a big “Hello, HTML World!” as your welcoming headline.

Quick Tip: Formatting Matters

While browsers ignore extra spaces and new lines, using proper indentation and line breaks makes your HTML readable for you and anyone else working on your code.

A Real-Life Analogy

Setting up an HTML file is like sketching the blueprint for a building. You start with the outer walls (<html>), mark the rooms (<head>, <body>), and label the front door with a sign (<title>). With just a few lines, you map out the foundation for every web experience you can imagine!

What’s Next?

Once your first HTML document is up and running, you’re ready to dive deeper:

  • Add images, links, and lists
  • Learn about formatting and semantic elements
  • Start experimenting with CSS for styling

Final Thoughts

Setting up your first HTML document is simple, empowering, and sets the stage for everything you’ll build next. Happy coding!

Check out the YouTube Playlist for great HTML content for basic to advanced topics.

Please Do Subscribe Our YouTube Channel for clearing programming concept and much more …CodenCloud


This content originally appeared on DEV Community and was authored by Sharique Siddiqui