Software Needed to Start Writing HTML:
Before diving into HTML, let’s set up the right tools/softwares to make your coding journey smoother and more efficient.
1. Web Browser:
A browser is essential to view and test your HTML code.
Popular options include:
- Google Chrome
- Brave (Recommended: lightweight, ad-blocking, and privacy-friendly)
- Microsoft Edge
2. Code Editor: Visual Studio Code (VS Code):
VS Code is a free, lightweight, and powerful editor ideal for writing HTML and other programming languages.
Why it’s recommended:
- Built-in support for HTML, CSS, JavaScript
- Emmet abbreviations for faster coding
- Syntax highlighting and auto-completion
3. Useful Extensions:
Browser Extensions
- React Developer Tools – For inspecting React components (helpful later if you learn React)
- Redux DevTools – For state management inspection in React apps
- (Note: These are more relevant once you start building dynamic web apps.)
4. VS Code Extensions:
- Live Server – Automatically reloads your page as you code
- Live Preview – Gives a side-by-side preview inside VS Code
- vscode-icons – Adds file-specific icons to improve navigation
How HTML Creates the DOM Tree :
When you visit a website you see many different pages like Homepage, Aboutpage (which includes the information about that website and it’s service) and contact page(where you can directly email or find them on other social media platforms).This website structure or main block is built on HTML.
HTML(HyperText Markup Language) is a markup language which is used to structure web pages.It defines the structure of web page.Other techologies like CSS (Cascading Style Sheets) is used to enchace the appearance of the web page and make it user friendly. Javascript a programming language is used to build the user interactivity and smooth performance of the web page.
In HTML HyperText means the text which leads or connects to another content within a website or another website.A markup language is a special way of writing text using tags to tell the browser how to show things (like text/images/videos etc) on a webpage.
For example:
<h1>This is heading</h1>
<p>This is paragraph</p>
h1: is a heading tag which is usually largest in size and bold.
p: is a paragraph tag which is used to write long paragraphs usually used to explaining content in a website.
How these tags work behind the scene:
When you request a webpage in browser it sends your request to the server of that website. The server is continously listening to the requests and it detects your request and serves or sends the files which has html code in them written by developer of that website. Now those files are sent to your system your browser will parse(read) those files and goes to html page (with .html extension) and starts building DOM (Document Object Model) tree.
DOM – When a browser loads an HTML page, it reads the code and turns it into a tree-like structure called the DOM Tree.
For example :
Here’s a simple HTML code:
<html>
<body>
<h1>Hello, World!</h1>
<p>Welcome to our Website..</p>
</body>
</html>
The browser turns this into a tree like:
Explanation:
Each tag (like <html>, <body>, <h1>, <p>) becomes a node.
The term “node” comes from tree data structures in computer science.
The text inside tags (like “Hello”) becomes a text node, which is a child of the element.
This tree shows how the browser organizes everything — both structure and content — in a way it can understand and interact with.
All the parsing and structuring of html happens in milliseconds.
Thanks for reading!!
If you found this post useful ,stick around for more tips on Web Development, WordPress and freelancing tips.
Join our newsletter for fresh insights every week : Subscribe Here
Follow our articles on Medium: TheWeeklyBlog on Medium