Getting to Know HTML: The Language of the Web

img

Hello, dear readers!

We're setting out on a new adventure into the fantastic, invisible world of HTML.

So, what is HTML? It stands for HyperText Markup Language. But before we delve into what these terms mean, let's take a moment to understand where HTML came from.

HTML was invented in 1990 by a man named Tim Berners-Lee, a British physicist working at a research organization in Switzerland called CERN. At that time, scientists needed a way to share and link their research documents, regardless of the computer they were using. Berners-Lee's solution to this problem was HTML, a system for creating web pages that could be viewed on any computer, and the World Wide Web, a system for navigating these pages.

Now, let's break down what HTML means:

  1. HyperText : This part of HTML refers to the system that allows web pages to link to each other. It's the digital equivalent of opening doors to different rooms or, if you will, different web pages.
  2. Markup : The 'Markup' in HTML has a history rooted in the world of publishing and typesetting. 'Markup' was used to denote instructions for how text should be formatted for printing. In the digital realm, Markup takes on a similar role, providing instructions to your web browser about how to format and display the web page. It turns a plain text file into a beautifully laid out page with different colors, sizes, and structures.
  3. Language : In terms of HTML, 'Language' doesn't mean English, Spanish, or Mandarin. It refers to the computer-based system of communication. HTML is a language because it follows a set of rules (syntax) and has its own vocabulary (tags), just like any spoken language!

So, to put it all together: HTML is a type of computer language that uses 'HyperText' to create connections between web pages and 'Markup' to organize and style those pages. It's the digital architect that draws the blueprint for how a web page should look and behave.

img

HTML is crucial in our digital age because every web page you see online is built with HTML. Whether you're checking your email, reading the news, or watching a video – HTML is working behind the scenes to make it all happen. It's the foundational language of the web, making it an excellent starting point for anyone interested in web development or coding in general.

However, I would be remiss if I didn't mention that knowing HTML, while important, is not enough to become a web developer. Knowing HTML is like knowing how to read and write. It's fundamental, but just as you wouldn't expect to become a best-selling author or a renowned journalist simply because you know how to read and write, you wouldn't become a web developer based solely on your knowledge of HTML. It's an essential starting point, but there are other languages and skills to learn along the way.

The real deal

To better understand HTML, let's peek into what it looks like. HTML code is written with a series of elements or 'tags'. These tags are enclosed in angle brackets like this: <tagname>.

Imagine a book, with its title, chapters, and paragraphs. HTML uses a similar structure to organize content. For instance, here's an example of a simple HTML line that makes text appear as a heading on a webpage:

<h1>This is a Heading</h1>

In our book analogy, this <h1> tag is akin to the title of a book - it's the main heading that gives a hint about what the content might be. The text between <h1> and </h1> is the content of the heading. The tags themselves tell the browser how to display that content. In this case, <h1> is a heading tag, which tells the browser to display the text as a top-level heading (the largest type of heading).

Just like a book isn't just a title, most web pages aren't just a single heading. They're a combination of many different elements, including smaller headings (like chapters in a book), paragraphs (the main content), links, images, and more. To keep all of this organized, HTML uses a standard structure known as a 'boilerplate'.

An HTML boilerplate looks something like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </body>
</html>

Here's what each part of the boilerplate means:

  • <!DOCTYPE html>: This tag is a preamble for the HTML page. It tells the browser that this is an HTML5 document.
  • <html>: This tag denotes the beginning of an HTML document.
  • <head>: This section contains meta-information about the HTML document that isn't displayed on the page itself. One common element inside the <head> is the <title> tag, which sets the title that appears on the browser tab.
  • <body>: This is where the content that gets displayed on the webpage itself goes. All of your headings, paragraphs, links, images, and more will go inside the <body> tags.

img

This structure forms the backbone of almost every HTML page you'll see on the web. It's flexible enough to accommodate nearly any webpage, whether it's a simple personal blog or a complex corporate site.

Learning to write HTML involves a lot more than what we've covered here today, including understanding more tags and learning how to style your HTML with CSS. But remember, every expert web developer started where you are now: at the beginning.

So as we embark on this journey together, let's remember our motto: "This is the right way to learn". Step by step, we will unravel the mysteries of HTML and, in doing so, learn to master the digital realm that is such a significant part of our everyday lives.

Until next time, happy surfing, and remember: This is the right way to learn!