Introduction to HTML: Basic Structure
By Danieli Emmanueli – DSN TECHNOLOGY
What is HTML?
HTML (HyperText Markup Language) is the foundation of all web pages. It provides the basic structure that web browsers use to display content. Whether you're building a simple blog or a complex web application, HTML is the starting point.
In this first lesson on HTML, I will guide you through the basic structure of an HTML document, explain how elements work, and provide examples that you can use to start building your own web pages.
Basic Structure of an HTML Document
Every HTML document follows a specific structure. Below is the simplest form of an HTML document:
<!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 First Web Page</h1>
<p>This is a simple introduction to HTML.</p>
</body>
</html>
Breaking Down the Structure
Let's analyze each part of this HTML document:
-
<!DOCTYPE html>- This declaration tells the browser that this is an HTML5 document.
- It must always be at the top of the file.
-
<html lang="en">- This is the root element of the HTML page.
- The
lang="en"attribute defines the language of the page (English).
-
<head>Section- Contains metadata about the page, such as character encoding and the title.
- The
<meta charset="UTF-8">ensures all text characters (including special ones) display correctly. <meta name="viewport" content="width=device-width, initial-scale=1.0">ensures the page adapts to different screen sizes.
-
<title>My First Web Page</title>- Sets the title of the web page (appears on the browser tab).
-
<body>Section- Contains all visible content of the webpage.
-
<h1>and<p><h1>is the main heading.<p>is a paragraph element for text.
Why Is This Important?
Understanding this basic structure is crucial for creating well-formed web pages. Every website on the internet, including complex ones like Facebook and Google, follows this foundational HTML structure.
By learning HTML, you are taking the first step towards becoming a web developer. As we continue with this series on DSN TECHNOLOGY, I will guide you through more advanced topics such as:
✅ Adding images and links
✅ Creating tables and forms
✅ Styling with CSS
✅ Making interactive pages with JavaScript
Next Steps: What You Should Do Now
- Try It Yourself: Copy and paste the above HTML code into a text editor (like Notepad++ or VS Code) and save it as
index.html. Open it in a browser to see how it looks. - Stay Tuned: This is just the beginning! Follow DSN TECHNOLOGY for more detailed lessons and hands-on tutorials.
- Leave a Comment: If you have any questions, drop them in the comment section on the blog!
🚀 This is your first step into web development. Keep learning, keep building, and see you in the next tutorial!
Written by Danieli Emmanueli – DSN TECHNOLOGY