A Beginner's Guide to HTML - Sanjay Pasari

Sanjay Pasari — Thu, 06 Jul 2023 05:55:18 +0000

Hello, I'm Sanjay Pasari, just want to share some information for beginners on topic HTML.

HTML (HyperText Markup Language) is the foundation of every web page you see on the internet. As a beginner, learning HTML is an essential step in becoming a web developer. In this blog, we will explore the basics of HTML and get you started on your journey to building your own web pages.

Getting Started

HTML Document Structure

Every HTML document follows a basic structure known as the HTML boilerplate. It consists of several elements, including the <!DOCTYPE>, ,

, and tags. Here is an example:

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first web page!</p>
</body>
</html>

The <!DOCTYPE html> tag declares the document type as HTML5. The tag wraps the entire HTML content, while the

tag contains meta information and the tag includes the visible content of the web page.

HTML Elements and Tags

HTML is made up of various elements, each represented by an opening and closing tag.

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<a href="https://www.example.com">Visit Example.com</a>
<img src="image.jpg" alt="Image Description">

HTML Attributes

HTML tags can have attributes that provide additional information about the element. Attributes are placed within the opening tag, and they consist of a name and a value.

<a href="https://www.example.com">Visit Example.com</a>
<img src="image.jpg" alt="Image Description">

In the above code snippet, the URL and image file name are provided as attribute values.

Building a Web Page

Now that you have a basic understanding of HTML, let's build a simple web page. Here is an example of a web page structure:

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

    <section>
        <h2>About Me</h2>
        <p>I am a beginner web developer looking to learn more about HTML and CSS.</p>
    </section>

    <footer>
        <p>© 2021 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

In this example, we have added a header, navigation bar, content section, and footer to create a more complete web page structure.

Conclusion

HTML is the building block of the web, and learning the basics is the first step towards becoming a web developer. In this blog, we covered the HTML boilerplate, essential HTML tags, attributes, and how to structure a basic web page. Now that you have a solid foundation, you can start exploring more advanced HTML concepts and continue to build upon your skills. Happy coding!

DEV Community: Sanjay Pasari

A Beginner's Guide to HTML - Sanjay Pasari