Introduction

Back in the early days of the internet, HTML was like the blueprint that set up the whole online world. It gave websites their structure and made sure things like text and images showed up properly. But here's the fun part: to make websites cool and interactive, we need a trio of friends – HTML, CSS, and JavaScript. These three work together to create the buttons you click, the animations you see, and all the fun stuff that makes websites come alive.

In this article, our focus will be solely on HTML. We will learn HTML document, tags, attributes, contents, semantic and non-semantic HTML, and with the aid of illustrations, we will write codes that further explains what HTML is all about.

Pre-requisites

Before proceeding with this article, you must have;

a learning device; either a smartphone, tablet or desktop
be on your code environment/ editor. If you don't know what this means, read about it here. Click here.

Now that you've done that, let's jump right into this article.

Definition of HTML

Think of HTML like the building blocks of the internet – it's the language that makes websites come to life. It's short for HyperText Markup Language, and it's what web creators use to put together all the cool stuff you see on web pages. They use these neat tags and elements to arrange text, pictures, and other things in a way that makes sense and looks good. So, next time you're browsing the web, remember that it's all thanks to HTML that you can see and read everything so easily!

Simply put, HTML is the skeleton of any web application. It is impossible for any web application to stand or form without the structure of HTML.

HTML Document

Think of an HTML document like the recipe for baking a delicious webpage cake on the internet. It's like a special text file that holds all the secret instructions to make everything appear on a website. You know, the text, the pictures, and even the buttons you can click – it's all in there! And just like a chef following a recipe, web browsers read this HTML code and then show you the yummy webpage that was baked. So, whenever you're exploring the web, remember that each webpage is made from these clever HTML documents!

The basic structure of an HTML document includes several essential components:

Document Type Declaration
HTML Elements
HTML Tags (Semantic and Non-semantic tags)

HTML Attributes

Document Type Declaration:

Think of the first line of an HTML document as a special note to the browser, kind of like a "Hello, I'm an HTML document!" announcement. This note called the Document Type Declaration (DOCTYPE), helps the browser understand which version of HTML is being used in the document. It's like telling your friend what type of cake you're baking – whether it's a chocolate cake or a vanilla one. This way, the browser knows exactly how to handle the rest of the code and makes everything look just right on the web page.

See below:

<!DOCTYPE html>

HTML Tags

HTML Tags: Think of HTML tags like the magic spells that tell your computer how to arrange and display things on a webpage. They're like little commands enclosed in these angled brackets that come in pairs, just like a hug! You've got the opening tag that starts the magic, telling your computer what to do, and then the closing tag that's like a high-five, saying, "Job done!" So, when you see something like <h1> at the beginning and </h1> in the end, it's like your computer is giving a big virtual hug to the text in between, making it look just right on the webpage.

Example:

<tagname>Content goes here</tagname>

Semantic Tags In HTML

Think of semantic HTML as giving your webpage a secret code language. It's like using special words that tell not only your computer but also search engines what each part of your webpage is all about. Back when HTML5 came along, it brought along these cool new elements that act like labels – they give a clear idea of what's inside. So, it's like making your webpage speak in a way that everyone understands, sort of like putting labels on boxes so you know what's inside without even opening them. This way, both web wizards and search engines can easily figure out what your webpage is trying to say.

Example of semantic Tags:

<header>: This represents the header of a section or page.
<nav>: This defines a navigation bar.
<main>: This represents the main content of the page.
<article>: This represents a self-contained piece of content.
<section>: This defines a section of the document.
<aside>: This represents content that is tangentially related to the content around it.
<footer>: This represents the footer of a section or page.
<h1> to <h6>: This is used for headings, with <h1> being the highest level of importance.

Non-Semantic Tags In HTML

Think of non-semantic tags as invisible helpers that don't tell you much about what's inside. They're like backstage crew members working on the set, making things look nice but not revealing what the show is really about. These tags are used to make things look pretty, like changing colors or moving stuff around, but they don't say anything special about the actual content.

Examples of Non-Semantic Tags:

<div>: It is a generic container used for grouping elements or applying CSS styles.
<span>: This is an inline container used for styling smaller portions of text.
<b>: This represents bold text.
<i>: This represents italicized text.
<br>: This represents a line break.

Attributes In HTML

Attributes in HTML: Attributes are like little notes you stick on HTML elements to give them extra instructions. You know, like telling a robot "Be red" or "Go left." They're placed in the opening tag and look like "name=value."

Example:

<element attribute="value">Content goes here</element>

Examples of Attributes In HTML:

id: It provides a unique identifier for an element, often used for styling or JavaScript purposes.
class: This assigns one or more class names to an element for CSS styling or JavaScript targeting.
src: This specifies the source URL for elements like <img> or <script>.
href: This specifies the destination URL for links created with the <a> tag.
alt: It provides alternative text for elements like <img>, which is displayed if the image cannot be loaded.

Illustration

Below is a simple illustration of what an HTML structure looks like.

<!DOCTYPE html>
<html>
<head>
  <title>My Simple HTML</title>
</head>
<body>
  <header>
    <h1>Welcome to My HTML Page</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h2>About Me</h2>
      <p>I am Learning HTML.</p>
    </section>
    <article>
      <h2>My Latest Project</h2>
      <p>Check out my new website, it's an online school where you can learn any technical course!</p>
    </article>
    <aside>
      <h3>Advertisement</h3>
      <p>Get 20% off on all technical courses!</p>
    </aside>
  </main>
  <footer>
    <p>&copy; 2023 My Web Page. All rights reserved.</p>
  </footer>
</body>
</html>

In the illustration above, we've used various semantic tags like header, nav, main, article, section, aside, and footer to structure the content meaningfully. We also used non-semantic tags like h1, p, ul, li, etc., for presentation and organization. Additionally, we used attributes like href for links and alt for alternative text on the image.

Tips Where You Can Learn HTML Extensively

Conclusion

In conclusion, learning HTML easily means getting the hang of elements, tags, and attributes while knowing why semantic stuff matters. Play around with simple projects, use online help when needed, and you'll soon be a whiz at making cool web stuff. Keep it simple, take it step by step, and you'll be all set for creating awesome websites that users can easily enjoy.

#HappyCoding!

Jaytech