Physical Address
Randburg
South Africa
Photo by Miguel Á. Padriñán
When you open a website, what you see on your screen—text, images, buttons, or videos—results from HTML at work. This is the backbone of the web, allowing developers to structure content and create websites. Understanding it is essential for anyone interested in web development. I’d like to share what HTML is, why it’s important, and how to get started. It’s a road trip on mostly smooth asphalt punctuated with the odd pothole, and also some a-ha moments (just in case you’ve been hunting high and low for something like that😉).
What Is HTML?
HTML stands for HyperText Markup Language, a standard language used to create the structure of web pages. A markup language is a text-encoding system that specifies the structure and formatting of a document and potentially the relationships between its parts. Contrasted with programming languages like Python or Java, HTML isn’t about computations or logic. Instead, markup defines the structure and layout of content on the web. It can control the display of a document or enrich its content to facilitate processing.
When I first encountered HTML, I thought it would be as challenging as writing code in a programming language. However, I quickly realized that it is more about organizing content than solving problems with logic. This initial realization made learning it feel approachable, and even, dare I say it, fun.
Because it is a markup language, HTML uses tags to mark up elements like text, images, and links and describe their role on a webpage. For example, the <h1> tag defines a large heading, whereas the <p> tag defines a paragraph of text.
A Brief History of HTML
HTML’s roots date back to the early days of the internet. It was created in 1991 by Sir Tim Berners-Lee, a physicist at CERN (the European Organization for Nuclear Research). Berners-Lee developed it as part of his vision to create a system allowing researchers to share documents. He also introduced the first web browser, the first web server, and the foundational protocols of the web, such as HTTP (HyperText Transfer Protocol). It’s not a stretch to say we owe Sir Tim quite a lot.
The first version was simple, with only 18 tags, such as <p> for paragraphs and <a> for links. Later, HTML evolved as the internet grew, becoming more sophisticated and capable of handling more complex web applications. Major updates, such as HTML 4 in 1997 and HTML5 in 2014, introduced support for multimedia, improved semantics, and provided better compatibility with modern devices. HTML5 is the standard now, empowering developers to create interactive and responsive websites that cater to different user needs.
As I learned about HTML’s history, I found it inspiring that such a simple language could lay the groundwork for the complexity we see with the modern web. Understanding its origins also helped me appreciate its role in connecting people and sharing knowledge globally.
Why Is HTML Important?
HTML is the foundation of the web for a few key reasons:
- Universality: Every browser understands it. If you want to create a website that anyone anywhere can access, you start with HTML.
- Simplicity: It’s easy to learn, especially for beginners. You don’t need a technical background to understand the basics.
- Integration: It works seamlessly with CSS (for styling) and JavaScript (for interactivity), enabling developers to create alluring and interactive web pages.
The more I learned about HTML, the more rewarding it was because it’s the starting point for building tangible projects. With a few tags, I could create a basic webpage. Seeing my work displayed in a browser for the first time felt like magic.
Getting Started with HTML
1. The Structure of an HTML Document
An HTML file is a plain text file that starts with a <!DOCTYPE html> declaration. This tells the browser it’s dealing with an HTML5 document. Here’s an example of a simple document:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first webpage built with HTML!</p>
</body>
</html>The structure consists of:
<html>: The root element of the page.<head>: Contains metadata about the webpage (like its title or links to stylesheets).<body>: Contains the content that is displayed on the page.
When I first built a webpage, I was confused about where to place links to stylesheets or JavaScript files. It wasn’t until I mistakenly placed content in the <head> and wondered why nothing appeared on my page that things became clearer. I realized the <body> was where the real magic happened!
2. Tags and Elements
HTML uses opening and closing tags to define most elements. For example:
<p>This is a paragraph.</p>Some tags are self-closing, such as:
<img src="image.jpg" alt="A descriptive text about the image">I struggled with some of the self-closing tags, often forgetting to add attributes like alt for images. Over time, I learned that these attributes are essential for accessibility and SEO (Search Engine Optimization), making my web pages more inclusive and user-friendly. Being embracive is a win-win on the internet. You include marginalized people and get more traffic to your website as a bonus.
3. Building My First Webpage
My first project in HTML was creating a personal portfolio. I used basic tags like <h1> for my name, <p> for a short bio, and <ul> for an unordered list of my skills. It was an inauspicious start, but seeing my name and information displayed on a browser was beyond satisfying.
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
</head>
<body>
<h1>John Doe</h1>
<p>Hello! I'm an aspiring web developer learning HTML.</p>
<h2>Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>This exercise wasn’t without hiccups. I initially forgot to close some tags, which broke the layout. Debugging the issue taught me the importance of validating my code, and tools like W3C Validator became my go-to for checking errors. This is a free service that helps check the validity of Web documents.
Pitfalls and How I Overcame Them
1. Forgetting Closing Tags
As I mentioned, one of my earliest mistakes was forgetting to close tags like <p> or <div>. This often led to layout issues. To address this, I started using an integrated development environment (IDE) called Visual Studio Code (VS Code), which has many extensions, some of which highlight errors and auto-close tags for you.
Microsoft developed VS Code for Windows, Linux, macOS, and web browsers. There are other IDE’s, but I find this one the simplest to use and the most aesthetically pleasing. One of the things I love about coding is that there are so many tools to help you, and a large percentage of them – this one included – are free to use.
2. Misusing Attributes
When I first worked with image (<img>) tags, I skipped the alt attribute, not realizing its importance for accessibility. Learning that visually impaired users rely on alt text to understand images changed how I approached HTML development. Image alt text is important for two other reasons: user experience, and image traffic.
How does alt text provide a better user experience to all users? If a visitor has a low bandwidth connection, your images don’t load. Instead of just seeing a broken link icon, the user will also see helpful alternative text explaining what the image conveys.
Finally, another excellent reason to utilize alt text is that it can help search engines like Google better understand and rank your photos in the image-based results that have become so prevalent.
3. Getting Overwhelmed by CSS and JavaScript
Initially, I wanted to explore CSS and JavaScript before mastering HTML. It’s not unusual to find the pretty pictures and moving parts more compelling than the mundane architecture. I soon realized that understanding HTML’s role as the foundation was critical. Having a solid grasp on it before layering on styles and interactivity made my learning process smoother.
This was a good lesson for future studies too. We’re often dazzled by the finished product when it comes to programming, and the learning process I went through here helped me focus on and understand what was going on under the hood.
Lessons from My HTML Journey
- Practice, practice, practice: Like any skill, HTML becomes second nature with practice. Building small projects like a personal webpage or a to-do list helped reinforce what I learned.
- Start Simple: It’s tempting to begin with complex layouts, but starting with simple, well-structured documents builds the confidence needed to keep forging ahead.
- Learn to Debug: Mistakes happen, and aids like browser developer tools and validators exist to make debugging easier.
- Collaboration Helps: Sharing my projects with others and getting feedback taught me a lot. Explaining my code to others (and my rubber duck) also clarified my understanding.
What Comes After HTML?
HTML is just the beginning of web development. Once you’re comfortable with it, you can go further up the road with:
- CSS: Style your web pages and make them more engaging.
- JavaScript: Add interactivity to your projects.
- Responsive Design: Ensure your website looks great on all devices.
- Web Frameworks: Tools like Bootstrap or Tailwind CSS can speed up development.
Conclusion
Learning HTML is like laying the foundation for a building. It might seem basic, but it’s vital for creating something bigger and more complex. My adventure with it has been a mix of ups and downs, and each mistake taught me something valuable. So, open your favorite text editor, write some code, and let the creativity flow. The web is yours to build!
Click here if you’d like to contribute content to this site. Let’s chat 😊
