Learning HTML: A Starter's Manual for MERN Developers

The MERN Handbook Article 3: Stage 0 - Topic 1: Introduction to HTML

The MERN Handbook: Introduction to HTML

Welcome back to "The MERN Handbook." Before diving into the core MERN stack components, it's crucial to understand the foundational technologies that power web development. This is Stage 0: Prerequisites, where we will cover HTML and CSS fundamentals. In this first part, we’ll introduce HTML, focusing on tags, attributes, and document structure.

Stage 0: Prerequisites

HTML and CSS Fundamentals:

  1. Introduction to HTML: Tags, attributes, and document structure

  2. Introduction to CSS: Selectors, properties, and basic styling techniques

  3. Introduction to SASS: Variables, mixins, and nesting

  4. Comparison of CSS frameworks: Understanding Bootstrap, Tailwind CSS, and their pros and cons


Part 1: Introduction to HTML

HTML (HyperText Markup Language) is the backbone of web development. It's a standard markup language used to create web pages, providing the structure and content. In this article, we'll cover the basics of HTML, including tags, attributes, and document structure.

What is HTML?

HTML is not a programming language; it's a markup language. It uses tags to annotate text, images, and other content for display in web browsers. Each HTML document is composed of elements that represent different parts of the webpage.

Basic Structure of an HTML Document

An HTML document has a specific structure that includes various elements nested within each other. Here’s a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text on my first HTML page.</p>
</body>
</html>

Let's break down the key components:

  1. : This declaration defines the document type and version of HTML. It ensures the document is parsed correctly by the browser.

  2. : The root element that contains all other HTML elements.

  3. : The head section contains meta-information about the document, such as the title, character set, and linked resources.

  4. <title>: Sets the title of the web page, which appears in the browser tab.

  5. <body>: The body section contains the content of the web page, such as text, images, links, and other elements.

HTML Tags and Attributes

HTML elements are represented by tags, which are enclosed in angle brackets. Tags usually come in pairs: an opening tag and a closing tag. Some tags are self-closing.

Common HTML Tags
  • <h1> to <h6>: Heading tags, with <h1> being the highest (or most important) level and <h6> the lowest.

  • <p>: Paragraph tag, used to define blocks of text.

  • <a>: Anchor tag, used to create hyperlinks.

  • <img>: Image tag, used to embed images.

  • <ul>, <ol>, <li>: List tags, used to create unordered (bulleted) and ordered (numbered) lists.

Example of Tags in Use
<body>
    <h1>About Me</h1>
    <p>Hi, I'm a self-taught full-stack developer. Welcome to my website!</p>
    <a href="https://www.example.com">Visit my blog</a>
    <img src="profile.jpg" alt="My Profile Picture">
    <ul>
        <li>JavaScript</li>
        <li>Node.js</li>
        <li>React</li>
    </ul>
</body>
Attributes

Attributes provide additional information about an element and are included in the opening tag. Common attributes include:

  • href: Specifies the URL for an anchor (<a>) tag.

  • src: Specifies the source file for an image (<img>) tag.

  • alt: Provides alternative text for an image.

  • class: Assigns one or more class names to an element, used for styling with CSS.

  • id: Assigns a unique identifier to an element.

Example of Attributes in Use
<a href="https://www.example.com" class="external-link">Visit my blog</a>
<img src="profile.jpg" alt="My Profile Picture" id="profile-pic">

Structuring Your HTML Document

A well-structured HTML document is crucial for readability and maintainability. Here are some best practices:

  1. Use Semantic Elements: Elements like <header>, <nav>, <main>, <section>, <article>, and <footer> provide meaningful structure to your document.

  2. Indentation: Properly indent nested elements to improve readability.

  3. Comments: Use comments (< !-- Comment -- >) to annotate your code and explain sections where necessary.

Example of a Well-Structured HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <ul>
                <li><a href="#about">About Me</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="about">
            <h2>About Me</h2>
            <p>Hi, I'm a self-taught full-stack developer. Welcome to my website!</p>
        </section>
        <section id="projects">
            <h2>Projects</h2>
            <ul>
                <li>JavaScript</li>
                <li>Node.js</li>
                <li>React</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>

Conclusion

Understanding HTML is the first step in your journey to becoming a proficient web developer. With the knowledge of tags, attributes, and document structure, you can now start creating well-structured web pages. In the next article, we'll dive deeper into more advanced HTML elements and techniques.

💡
For those who want immediate results and tailored guidance, I offer an on-demand mentorship program. This program is perfect for learners who seek personalized advice, quicker progress, and hands-on support. You can book a session with me with this link.

Did you find this article valuable?

Support Ahammad kabeer by becoming a sponsor. Any amount is appreciated!