All about HTML5 for absolute beginners: Part 1

on

All about HTML5 for Absolute Beginners: Part 1




Overview of Web Development and Related Programming Fields

Before we put our hands on coding, let's understand theoretically this programming sector and other closely related fields. This will deepen your knowledge of programming and may help you in job interview questions.

What does programming mean?

When we talk to each other, we use a language. This language can be English, Spanish, French or any other. Similarly, when we want to talk to a computer and give it a set of instructions we have to use a language that the computer will understand. So here we need a programming language. 

The problem is that a computer can only understand binary language which is a combination of digits 0 and 1. But it is impossible for humans to write in binary language to communicate with a computer. So humans have developed programming languages that both computer and humans can understand. There are terms in a programming language that get converted into binary language for a computer to understand.

For example, setTimeout is a JavaScript function that puts a specific delay before anything else would happen. We humans can understand what it means because its self-explanatory. But when executed, it will be converted into binary for the computer.

Why are there multiple programming languages?

There are multiple programming languages for building different types of software and applications. For example:

Games

Software: video editors, web browsers, Antivirus Programs

Android and IOS apps: Rideshare apps, Social media, food ordering

Web applications: e-commerce, food ordering platforms, streaming platforms like Netflix


All of these different programs have their unique requirements. So there are multiple programming languages. Some popular examples are C++, Java, Kotlin, Ruby on Rails, JavaScript, HTML, CSS and many more.


What will I build with web development?

With web development, you can build modern web applications like Twitch, Facebook, Uber, Amazon, Netflix and much more.


HTML5: The Foundation of Every Website


HTML5 is one of the simplest things to learn in web development, yet its importance cannot be overstated. Think of HTML as the wood used to build a house—it forms the essential structure. No matter what amazing technologies you add inside your home, its core remains wood, and for web development, that core is HTML.

Now that you understand its significance, let’s dive into a brief history and get started with practical HTML coding.

A Brief History of HTML


HTML was created in 1991 by Tim Berners-Lee, a visionary scientist who also invented the World Wide Web (WWW). Before HTML, sharing information between computers was challenging. Tim’s creation of a markup language revolutionized how we share information, laying the foundation for websites as we know them today.

Getting Started with HTML Coding


To begin your journey, you’ll need a code editor. Here are some tips:

  • Start Simple: Use VS Code, a beginner-friendly editor that’s lightweight and versatile.

  • Explore Options: Once you’re comfortable, try other editors like Sublime Text, Atom, or Replit to find what works best for you.


Pro Tip: Avoid relying on auto-completion snippets while learning. Practice writing the HTML structure manually to build confidence and mastery.

A brief guide to downloading VS Code

If you're a tech-savvy person then downloading VS might sound quite easy and smooth. It might be like that, but its not the case for every beginner. Some might get overwhelmed by the interface or the different questions and options that they prompt the user. So let's together hop on the ride to downloading our first and the industry's leading code editor, Visual Studio Code.

First head over to Google and type "download vs code". You will see link to code.visualstudio.com.

Then on their website you will see 3 different options, download for Windows, Mac or linux. Just click on the one according to your operating system. 

This will just give you a very simple setup wizard and you just have to keep clicking next and press the install button. Soon you will have your Vs code ready with clear instructions to navigate and create your first index.html file.


HTML Structure: A Beginner’s Guide

Here’s the basic HTML structure:

<!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
</head>
<body>
  <h1>Welcome to my first webpage!</h1>
</body>
</html>

Breaking Down the Structure:

1. <!DOCTYPE html>

Declares the HTML version (currently HTML5).


2. <html>

The root tag that wraps the entire document.



3. <head>

Contains metadata and links to stylesheets or scripts. While it’s not visible on the webpage, it plays a vital role in the background.



4. <title>

Displays the title on the browser tab.



5. <body>

Holds all the visible content and tags for the webpage.



Writing Your First HTML Tag: The H1 Tag


The <h1> tag defines the primary heading for your webpage.
Example:

<h1>Hello World!</h1>

This tag creates the biggest, boldest heading on your page. The heading hierarchy continues with <h2> to <h6> for subheadings of decreasing importance.

Try This:

Write headings for a sample webpage using all six heading levels and see how they look.


What’s Next?


Now that you’ve learned the basics of HTML structure and tags, it’s time to practice! Try writing the HTML structure from scratch and experimenting with different tags.

In the next part of this series, we’ll dive deeper into HTML elements, attributes, and best practices.

Till then, happy coding!