Welcome to the world of web development!
If you’re just starting your journey, there’s no better place to begin than with HTML, or HyperText Markup Language.
Or at least, that’s how I got started. LOL All Hail MySpace Days!
HTML is the backbone of all web pages. It’s not just a technology but the very language that has shaped the Internet as we know it today.
What is HTML?
HTML stands for HyperText Markup Language. It is the standard markup language used to create and design web pages. By defining the structure and layout of a web page, HTML allows us to place content such as text, images, and videos on the Internet.
Understanding HTML Tags
HTML documents are comprised of HTML elements, and these elements are defined by tags. Tags are enclosed in angle brackets. For example, <html>, <div>, <span>, and <img> are all HTML tags. Most elements have an opening tag and a closing tag (<tag></tag>), but some, known as self-closing tags, do not require a closing tag (like <img> and <br>).
Here are a few common tags and their purposes:
<h1>to<h6>: These are heading tags, with<h1>being the most important, and<h6>the least. They represent different levels of headings on a web page.<p>: Defines a paragraph. This tag is one of the most frequently used to display text.<a>: The anchor tag is used to create links to other web pages (both within your site and to external sites).<ul>,<ol>, and<li>: Unordered (bulleted) and ordered (numbered) list tags, with list item tags nested inside.
Pssst. If you are curious as to how Medium is structured, you can right click your mouse, and select inspect. 😝
The Evolution and Importance of HTML5
HTML has evolved significantly since its inception. The latest version, HTML5, was a major leap forward, introducing many new features that made HTML more powerful and efficient.
HTML5 includes new multimedia elements such as <video> and <audio>, as well as structural elements like <header>, <footer>, <article>, and <section> that help define the parts of a web page.
HTML5 is designed to be device-independent―meaning websites can look good on all devices, from desktops to smartphones!
Practical Uses of HTML
Every web page you view is built with HTML. It lays out the basic structure of the page before CSS (Cascading Style Sheets) adds styling and JavaScript adds interactivity.
Learning HTML is the first step in creating web content, whether it’s a simple personal blog or a complex commercial website.
Conclusion
HTML is essential for anyone looking to become a web developer. While it’s just the beginning of what you can learn in web development, mastering HTML is crucial as it forms the foundation upon which more complex technologies are built.
P.S. I know there are many paid bootcamps out there. But if you are just starting and would like to know if this is something for you, check out The Odin Project. It is free (well, when I wrote this article, it is. Date stamp: January 2025)! It is also structured and will guide you with the set up.
-
We Outsourced Our Brains To AI…Now What?
The article discusses the cognitive costs associated with increased reliance on AI tools and the internet, raising concerns about diminishing memory and critical thinking skills. It highlights the “Google Effect” and cognitive offloading, showing a correlation between AI dependence and decreased analytical abilities, particularly among younger users, while emphasizing the importance of maintaining cognitive engagement.
-
I Tried to Build an App…Now I’m in a Full Existential Spiral
Choosing My Old App…and Accidentally Rebuilding a Whole Product So, I graduated in April 2025 with a glowing average of 95.8% (yes, mom, I know, why not A++? Just kidding) from UofT Continuing Studies – Software Development BootCamp, and instead of coding immediately like I probably should have, I sat there like: Hmm… what is…
-
Implementing Dark Mode in React
We have previously talked about useState before. A great way to create CSS classes on the fly is to use state variable! Here is an example of how to create Dark Mode in React by using string interpolation to construct the individual classes based on the state variable mode. index.html index.jsx App.jsx App.css So, if…
-
Understanding Props in React: A Comprehensive Guide
This content explains the concept of props in React, which allow data to be passed to components, making them dynamic. It covers how to access props as objects, pass multiple properties, and handle different data types. The importance of correctly rendering non-string values and using props in JSX is emphasized.
-
The Power of JSX: Combining HTML and JavaScript
JSX is a syntax extension for JavaScript that resembles HTML, used primarily in React to create components. It allows developers to write HTML-like code within JavaScript, enhancing readability and enabling dynamic web applications. With JSX, one can embed JavaScript expressions, making the integration of logic and UI layout seamless.
-
Organizing React Components for Better Code
The content discusses best practices for organizing React components in separate files for maintainability. It details the process of importing React, creating functional components, and exporting them. Additionally, it covers returning multiple elements and using named vs. default exports, emphasizing strategic organization for better code management.
-
Step-by-Step Guide to Rendering React Components
The content provides a step-by-step guide on rendering components in React. It emphasizes creating and linking HTML and JavaScript files, setting up the main component, and utilizing the createRoot function to manage rendering. The author injects humor while guiding readers through the essential concepts of React component rendering.