HTML Basics for Beginners π§± β Learn to Create Your First Web Page
Welcome to the world of HTML (HyperText Markup Language) β the basic building block of every website. In this HTML tutorial for beginners, youβll learn what HTML is, how to write HTML code, and how to make your first webpage step by step.
Choosing the Right HTML Editor π οΈ
To start writing HTML, you just need a simple text editor. But for comfort and speed, use a code editor that highlights syntax and gives auto-suggestions.
Best Editors for HTML:
- VS Code (Visual Studio Code): Free, fast, and the most popular editor for web development.
- Sublime Text: Lightweight and customizable editor.
- Atom: Open-source and beginner-friendly.
- Notepad++ (Windows) / TextEdit (Mac): Simple text editors for quick HTML practice.
Pro Tip: Always save your file with the .html extension, for example index.html. This tells the browser that your file is a web page.
The Structure of an HTML Document π
Every HTML page follows a specific structure made up of five main parts. Once you understand this, writing HTML will feel super easy!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Web Page</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is my first web page using HTML.</p> </body> </html>
1οΈβ£ Doctype Declaration β <!DOCTYPE html>
This tells the browser that you are using HTML5 β the latest version of HTML.
2οΈβ£ HTML Root Tag β <html>
It is the container for your entire web page. Use the lang="en" attribute to define your language.
3οΈβ£ Head Section β <head>
This section contains metadata (information about your page). It is not shown on the page but helps the browser and search engines understand your site.
<title>β Page title shown on browser tab.<meta>β Helps define character set and screen settings.<link>β Used to connect CSS files.
4οΈβ£ Body Section β <body>
This is where you write all the content that users see β text, images, links, and more.
Common HTML Tags You Must Know β¨
Letβs look at the 3 most used tags in HTML for beginners:
<h1>to<h6>β Headings for titles and subtitles.<p>β Paragraph tag for normal text.<br>β Line break for a new line without starting a new paragraph.
Once you understand these, youβre ready to move to the next topic β HTML Elements and Attributes! π