Search for a command to run...
The MERN Handbook Article 3: Stage 0 - Topic 1: Introduction to HTML
I'm a full-stack engineer from Kerala. Helping startups turn their ideas into digital realities.I specialize in designing and building modern web solutions.
No comments yet. Be the first to comment.
This series makes industry knowledge accessible, fosters growth through practical learning, and builds a supportive community for aspiring developers.
The MERN Handbook Article 4: Stage 0 HTML and CSS Fundamentals - Topic 2: Introduction to CSS
Designing a Stateless Execution Loop to Eliminate Context Decay in AI Coding Systems
One of the most sophisticated supply chain attacks in history was discovered because of a 500-millisecond delay. A half-second lag in an SSH login—a fractional anomaly noticed by a single, curious developer—was the only thing that stood between the s...
1. Setting the Stage: A New Breed of Supply Chain Attack The Shai-Hulud campaign represents a critical evolution in supply chain threats, moving beyond isolated package compromise to a self-propagating contagion targeting the core of modern developme...
The healthcare landscape is undergoing a profound transformation. As our cities become smarter and our lives more connected, a new paradigm is emerging that promises to redefine how we approach health monitoring and care delivery. Edge AI-enabled IoT...
As a founder deeply immersed in both hardware and software, with a specialization in AI, I've spent years observing the tech industry's relentless pursuit of the "next big thing" beyond the smartphone. For a while now, the prevailing narrative has po...
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.
HTML and CSS Fundamentals:
Introduction to HTML: Tags, attributes, and document structure
Introduction to CSS: Selectors, properties, and basic styling techniques
Introduction to SASS: Variables, mixins, and nesting
Comparison of CSS frameworks: Understanding Bootstrap, Tailwind CSS, and their pros and cons
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.
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.
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:
: This declaration defines the document type and version of HTML. It ensures the document is parsed correctly by the browser.
: The root element that contains all other HTML elements.
: The head section contains meta-information about the document, such as the title, character set, and linked resources.
<title>: Sets the title of the web page, which appears in the browser tab.
<body>: The body section contains the content of the web page, such as text, images, links, and other elements.
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.
<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.
<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 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.
<a href="https://www.example.com" class="external-link">Visit my blog</a>
<img src="profile.jpg" alt="My Profile Picture" id="profile-pic">
A well-structured HTML document is crucial for readability and maintainability. Here are some best practices:
Use Semantic Elements: Elements like <header>, <nav>, <main>, <section>, <article>, and <footer> provide meaningful structure to your document.
Indentation: Properly indent nested elements to improve readability.
Comments: Use comments (< !-- Comment -- >) to annotate your code and explain sections where necessary.
<!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>© 2024 My Website</p>
</footer>
</body>
</html>
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.