HTML: The Building Blocks of the Web - A Newbie's Guide

Hello there! ๐Ÿ‘‹๐Ÿพ

What the heck is HTML? Well, it's the magic that makes the internet work. Without HTML, we'd be stuck sending carrier pigeons to share pictures of our dog. And nobody wants that ๐Ÿซ 

What is HTML?

Basically, HTML is the code that web browsers use to display content on the internet. It's like the skeleton of a website - the framework that holds everything together. Without HTML, the web as we know it wouldn't exist. That's how important it is.

History of HTML

So, where did HTML come from? Well, it was first created back in 1990 by a man named Tim Berners-Lee. He was working at CERN, the European Organization for Nuclear Research, and was looking for a way to share information between scientists in different parts of the world. And thus, the World Wide Web was born.

Over the years, HTML has gone through many different versions and updates. Each new version brought with it new features and capabilities, making the web more and more interactive and dynamic. Nowadays, we're up to HTML5, which is the current standard for web development.

So, why is HTML so important? Well, as I mentioned earlier, it's the building block of the web. Without it, there would be no websites, no blogs, no social media - nothing. HTML allows developers to create all kinds of content, from simple text and images to complex interactive applications.

The basics of HTML

There are a few key terms you need to know :

  • Tags: You've probably heard of tags, right? Well, tags are the building blocks of HTML. They're little bits of code that tell your web browser how to display content on a webpage. There are open and closing tags (like <html> and </html>), self-closing tags (like <img>), and all sorts of other tags for different purposes.They look like this: <html>, <head>, <body>, <p>, <div>, <br/>, <input>, <link>... etc

  • Attributes: HTML also uses attributes and values to give tags more information. For example, the <a> tag is used for links, and it needs an href attribute to tell the browser where the link goes.

  • Validation: this is a process where you check your HTML code to make sure it's all correct. There are online tools you can use to do this, like the W3C Validator.

  • DocTypes: these tell your browser what version of HTML you're using. You don't need to worry too much about this, but it's good to know.

  • URL: this stands for Uniform Resource Locator, and it's just a fancy way of saying "web address." URLs start with "http://" or "https://", and they're how your browser knows where to find the page you want to view.

  • HTML Page: this is just a file that contains your HTML code. It's what your browser reads to display the website.

  • HTML Color Codes: these are special codes you can use to specify colors on your website. They look like this: #000000 (which is black), #FFFFFF(which is white)

  • HTTP: this stands for Hypertext Transfer Protocol, which is the protocol used to transfer data over the web.

  • Image Formats: there are three main formats for images on the web - SVG, PNG, and JPEG/JPG. They all have their pros and cons, but that's a topic for another day.

  • <h1> ... <h6>: these are the tags you use for headings on your page. <h1> is the biggest, and <h6> is the smallest.

  • Tables: these are used to display data in rows and columns, like a spreadsheet, <table> tag

  • Forms: these are used to collect information from users, like a contact form or a login page, <form> tag.

  • Lists: these are used to display information in a bullet-point format.

  • Links: these are used to create clickable links on your page. You use the "href" attribute to specify where the link should go. Like the <a> tag

  • Media: you can also add audio and video to your pages using HTML. They look like this: <audio> and <video>

That was a lot of information, wasn't it? But don't worry, we're done now ๐Ÿ˜. While HTML may not be the fanciest tool out there, it's highly functional and easy to learn. You don't need a degree or years of experience to get started, just a text editor, a web browser, and a desire to learn. Without HTML, we wouldn't have some of our favorite internet phenomena, such as memes or Twitter. And honestly, who wants to live in a world without those ๐Ÿ™ƒ

10
Subscribe to my newsletter

Read articles from Chinonye. M. Onuoha directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Chinonye. M. Onuoha
Chinonye. M. Onuoha

Annyeong ๐Ÿ‘‹๐Ÿพ I'm an optimized solution seeker with a passion for building better user experiences. With experience in UX design/research in FinTech & eCommerce, I bring a unique perspective to problem-solving and love finding creative solutions to difficult challenges. My goal is to shape products that have a positive impact on users, whether that means making them more user-friendly, more efficient, or more accessible to a wider audience. When I'm not buried in UX design problems, you can find me fumbling my way through coding projects. But hey, at least I never give up! ๐Ÿ˜ Bonus Fun Fact: I am a little obsessed with K-drama ๐ŸŽญ