DEV Community

Lewis Thagichu
Lewis Thagichu

Posted on • Updated on

Getting Started with HTML

Welcome to the world of web development! If you've ever been curious about the process behind creating websites you've come to the right place. In this beginners guide we'll take a journey together to uncover the mysteries of HTML (HyperText Markup Language) and equip you with the necessary knowledge to build your own webpages. Don't worry if you're new to this – we'll start from scratch and make the learning process both informative and enjoyable.

Understanding the Basics
Before we delve into coding lets grasp what HTML really is. Think of HTML as the backbone of any webpage. It provides structure and content allowing your web browser, to showcase text, images, links and much more. HTML uses tags enclosed in angle brackets (< >) to define elements on a webpage.

The Essential Structure
Every HTML document follows a structure. Think of it like a sandwich, where the html tag acts as the bread, the head tag represents the slice (containing meta information about the document) and the body tag serves as the bottom slice (containing content visible, to users). Here's how it looks:

<!DOCTYPE html>
<html>
<head>
    <title>Your Page Title</title>
</head>
<body>
    <!-- Your content goes here -->
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Basic HTML Tags
Headings:

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<!-- ...and so on until h6 -->
Enter fullscreen mode Exit fullscreen mode

Paragraphs:

<p>This is a paragraph. Your text goes here.</p>
Enter fullscreen mode Exit fullscreen mode

Lists:
Ordered List:

<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

Unordered List:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Links:

<a href="https://www.example.com">Visit Example.com</a>
Enter fullscreen mode Exit fullscreen mode

Images:

<img src="image.jpg" alt="Description of the image">
Enter fullscreen mode Exit fullscreen mode

Creating Your First Webpage
Let's put our knowledge into action and create a simple webpage:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Awesome Website!</h1>
    <p>This is my first webpage. I'm learning HTML!</p>
    <img src="smiley-face.jpg" alt="Smiley face">
    <a href="https://www.example.com">Learn more</a>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Congratulations! You've just created your first webpage. Open this file in your web browser, and voilà – you've made your mark on the digital landscape.
Conclusion
HTML might seem intimidating at first...just remember that experienced developers started as beginners. By grasping the fundamentals of HTML tags and structure you've already embarked on your journey to becoming a web developer. Keep practicing experimenting and above all enjoy the process as you progress in your coding endeavors.

Top comments (0)