Learning the Building Blocks of the Web: My HTML Learning Takeaways

# Learning the Building Blocks of the Web: My HTML Learning Takeaways My journey into softwares development at Blockfuse Labs began with an introduction to HTML. It has been an exciting learning process. All the instructors who taught me different HTML topics did a great job of explaining the concepts as clearly as possible. As an aspiring developer, one of the first things you'll learn is how to structure your HTML. Think of HTML like, the skeleton of a webpage. Without a skeleton, you wouldn't see the defined output or all the nice things you see on a webpage. HTML lays the foundation for everything else. Many people feel overwhelmed by learning HTML, but it's important to remember that skipping the basics and jumping to what you think is more advanced will only lead you back to them again and again. In HTML, you don't need to memorize every single element. There are some tags you might only use once or twice while learning, and you may never use them again in your programming journey. However, it's crucial to understand these tags. That way, when you encounter them later, you won't be confused. In this article, I will share my key learnings and hope that anyone who reads it will not only be inspired but also learn a thing or two about HTML. **Getting Started with Coding** You need a place to write your code. * A good choice is Visual Studio Code, which is a free program that helps you write code easily. * You can also use Notepad (if you're using Windows) or TextEdit (if you're using a Mac). **Understanding HTML Elements** In HTML, everything is built using elements. An element consists of an opening tag, some content (which can be text, other elements, or even nothing), and a closing tag. For example: ``` <p> This is a paragraph. It is the content within the paragraph element. </p>  ``` **Basic Structure of HTML** * Create an HTML File: Start by creating a new file. You can name it anything you like, but make sure it ends with ".html". This tells the browser that it's an HTML file. * The `<!DOCTYPE html>` Declaration: This is the very first thing in your HTML file. It tells the browser that you're using the latest version of HTML and about to write html documment. * The `<html>` element: This acts as the container for all the content of your webpage. * The `<head>`: The `<head> `section contains information about the webpage that isn't directly visible to users. This includes things like, the `<title>`. Title defines the title that appears in the browser tab. * Meta tags: These tags provide extra information about the webpage, such as keywords for search engines and how the page should be displayed on different devices. * The `<body>`: The <body> section contains all the content that users will see on the webpage, such as text, images, and links. This is what HTML looks like ```html= <!DOCTYPE html> <html> <head> <meta name="author" content="chinemerem"> <meta name = "keywords" content="developer, blog, web-design"/> <meta name="copyright" content ="2025 company.com" /> <meta name="description" content = "HTML Crash Course" /> <meta charset = "utf-8" /> <meta name ="viewport" content = "width=device-width, initial- scale=1.0" /> <title>My Learning Takeaways</title> </head> <body> </body> </html> ``` **Headings** Think of headings as the titles and maybe subtitles of your webpage. They help organize your content and make it easier for both readers and the browser. We use heading tags like` <h1>`, `<h2>`, `<h3>`, and so on. `<h1>` is the largest and most important heading, usually for the main title of the page. The heading size decreases as the number increases, with `<h6>` being the smallest. Using headings properly improves the readability of your page and also helps search engines understand the structure of your content. **Paragraphs** Paragraphs are used to break up your text into smaller, more easily digestible chunks. The `<p>` tag is used to create a new paragraph. Simply place the text you want to appear in a new paragraph within the opening and closing tags ``` <p>This is a paragraph</a> ``` **Links** ```ht= <a href="google.com" target=""_blank>Google Me</a> ``` Links allow you to connect your webpage to other pages on the internet. You can also create an internal links that links to other part of your web page. The `<a>` tag is used to create links.The href attribute within the `<a> `tag specifies the URL of the page you want to link to. Attributes are additional information in an element that adds more functionality to the element. It is normally a key-value pair. In the `<a>` there is another attribute known as “target”. This is used to specific whether the link should open on the same tab or in another tab. **Images** The `<img>` tag is used to insert images into your webpage. Key Attributes * src: Specifies the URL of the image file. * alt: Provides an alternative text description for the image. This is important for screen readers and SEO. The alt is also displayed when your image fails to load. * width and height: Specify the dimensions of the image in pixels. ``` <img src= "data:image/jpeg;base64,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" alt="photgrapher" width="200" height="200"> ``` **Lists** The `<ul>` and `<ol>` are used to create unordered and ordered lists respectively. The `<li>` tag is nested within these tags, containing the content for each list item. We also have another kind of list known as a description list. It contains the description term within` <dt>` tags and the corresponding definition within `<dd>` tags. ``` <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> </ul> <ol> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> </ol> ``` **Tables** Tables are used to display tabular data. They make data more presentable and organized. ``` <table> <thead> <tr> <th>Name</th> <th>Email</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>Olive</td> <td>olive.com</td> <td>12</td> </tr> <tr> <td>mike</td> <td>mike.com</td> <td>10</td> </tr> <tr> <td>chinemerem</td> <td>chi.com</td> <td>19</td> </tr> </tbody> </table> ``` **Forms** Forms are used to collect inputs from users. They typically consist of labels and input fields with various attributes. Let's create a very simple form: <form action="process.com" method="POST"> <div> <label>First Name<label> <input type="text" name="firstName" > </div> <br> <div> <label>Last Name<label> <input type="text" name="lastName" > </div> <br> <div> <label>Email<label> <input type="email" name="email" > </div> <br> <div> <label>Message<label> <textarea name="message"></textarea> </div> <br> <div> <label>Gender<label> <select name="gender"> <option value ="male">male</option> <option value ="female">female</option> <option value ="other">other</option> </select> </div> <br> <div> <label>Age<label> <input type="number" name="age" value="30"> </div> <br> <div> <label>Birthday<label> <input type="date" name="birthday" > </div> <br> <input type="submit" name="submit" value="Submit"> </form> **What is Semantic HTML?** Semantic HTML is all about using HTML tags that describe the meaning and purpose of the content within them. Instead of just using tags like `<div>`, Semantic HTML uses a tag that is descriptive. This makes your code more readable, maintainable, and accessible for both humans and search engines. Examples of Semantic HTML Elements: `<header>`: For the header section of a page (logo, navigation, etc.). `<nav>`: For navigation links. `<main>`: For the main content area of the page. `<article>`: For a self-contained block of content (like a blog post). `<aside>`: For sidebars or related content. `<footer>`: For the footer section of a page (copyright, contact info, etc.). `<section>`: For a generic section or block of content. ``` <!DOCTYPE html> <html> <head> <meta name="author" content="chinemerem"> <meta name = "keywords" content="developer, blog, web-design"/> <meta name="copyright" content ="2025 company.com" /> <meta name="description" content = "HTML Crash Course" /> <meta charset = "utf-8" /> <meta name ="viewport" content = "width=device-width, initial- scale=1.0" /> <title>My Learning Takeaways</title> </head> <body> <header> <h1>My Goals for the Year</h1> <nav> <ul> <li><a href="learning.html">Learning HTML</a></li> <li><a href="#vacation.html">Planning a Vacation</a></li> <li><a href="#contact.html">Contact Me</a></li> </ul> </nav> </header> <main> <ol> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> </ol> </main> <section> <table> <thead> <tr> <th>Name</th> <th>Email</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>Olive</td> <td>olive.com</td> <td>12</td> </tr> <tr> <td>mike</td> <td>mike.com</td> <td>10</td> </tr> <tr> <td>chinemerem</td> <td>chi.com</td> <td>19</td> </tr> </tbody> </table> </section> <footer> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> </ul> </footer> </body> </html> ``` **My Key Takeaways** **Practice makes perfect**: You don't get good by just looking at the code, you get good by doing it. Make sure to practice what you learned over and over again. **Build different projects**: If you feel like you've learned enough elements, find a web page and try replicating it using what you learned. There's no such thing as learning enough, learning is a continuous process. But don't forget the 80/20 rule, which states that you only need 20% of the effort to achieve 80% of the results. Believe me, this is very much applicable to HTML learning. **Try teaching others what you know**: By doing so, you build muscle memory. For instance, as I am writing this, I am learning more and solidifying my knowledge. Don't forget, this is just like a summary and foundation of HTML. Research more, utilize the resources to broaden your knowledge and get ready for the next step of learning, which is adding colors to your HTML (that's where CSS comes in!). **Resources** HTML: HyperText Markup Language https://developer.mozilla.org/en-US/docs/Web/HTML Learn HTML – Full Tutorial for Beginners https://www.youtube.com/watch?v=kUMe1FH4CHE&t=12316s