
The Web is more a social creation than a technical one. I designed it for the people. Itβs an open platform that allows anyone to express themselves.
Tim Burners-Lee, creator of the world wide web
HTML (Hypertext Markup Language) is to the world wide web as English is to Americans; it is not only the language with which we communicate, but also a very part of the culture. Mozilla defines HTML as the most basic building block of the web. All user-facing content in the world wide web is written in HTML, from games to web applications to videoconferencing.
In this article, we'll be exploring how we can make web content from HTML.
What is HTML all about?
HTML is the code of the people. Itβs a simple and human language that enables you to express your ideas with few restrictions.
Jeffrey Zeldman, web design pioneer and author
HTML is the skeleton of the web. Without it, there would be no form, no structure, and no content to convey to the user.
Eric Meyer, web standards advocate and author
HTML is a language for writing web pages. The web pages written in HTML can be displayed by web browsers. The content that you are viewing on this page right now was written in HTML. That is why the browser can render it and you can view it.
The web pages you write with HTML model how documents are written in the real world.
We'll come back to this later.
Let's write code!
Now, I know what you are thinking: "I am not a coder. I have never even read a line of code in my life." Fear not lad β the title of this article was not clickbait! Just follow my instructions.
Let's start with a program that displays the text "Hello, World". In the editor on the left below, type the text Hello, World and watch it appear on the right:
If you see Hello, world appear on the right, then congratulations, you have just written your first line of code π!
Let's spice things up a little bit. In the editor on the left below, change the text from Hello, world to <h1>Hello, world</h1>:
If everything was done right, you should see Hello, world displayed in large font on the right. Good job ππ!
What just happened?
You wrote HTML code! Hello, world is not standard HTML code, but it's understood by the browser. Why? Because HTML is a markup language. Markup languages are coding systems that use symbols to control structure and formatting. In other words, they are used to enhance text. If no symbols are added, the text is displayed unaltered.
However, in the second code drill, you wrapped Hello, world with h1 tags, which are <h1>, the opening tag, and </h1>, the closing tag. These symbols signal to the browser that the wrapped text is a heading, specifically the topmost heading. This is why the text grew in size, as you would expect of any heading in any document.
HTML as a document model
HTML was created to model documents: it has headings, paragraphs, navigation (which mirrors "table of contents" of a document), lists, sections, headers, footers and all the stuff you'd usually see in a document. In fact, I would go as far as saying the web is just a network of documents. When you visit a website, you receive a document. When you send an email, you send a document. And so on and so forth.
This document model is what makes HTML simpler than most languages. If you understand how to write documents, you are already halfway familiar with writing HTML.
For instance, look at this document:
The equivalent in HTML:
<html>
<head>
<title>The Impact of Technology on Society</title>
</head>
<body>
<header>
<h1>The Impact of Technology on Society</h1>
<p>Exploring how technological advances shape our daily lives, economy, and future.</p>
</header>
<nav>
<ul>
<li><a href="#intro">Introduction</a></li>
<li><a href="#impact">Impact on Society</a></li>
<li><a href="#future">Future Trends</a></li>
</ul>
</nav>
<section id="intro">
<h2>Introduction</h2>
<p>Technology has drastically transformed the way we live, work, and interact. From the rise of the internet to the proliferation of smartphones, its influence is pervasive in every facet of modern life.</p>
</section>
<section id="impact">
<h2>Impact on Society</h2>
<p>Technological advancements have affected various sectors of society, from communication to healthcare, education, and business.</p>
<div class="content-section">
<h3>Communication</h3>
<p>With the advent of social media and instant messaging apps, communication has become faster and more accessible, bridging gaps across the world.</p>
</div>
<div class="content-section">
<h3>Healthcare</h3>
<p>Medical technology has improved diagnostic accuracy, treatment options, and patient care. Wearable devices now track health data, providing real-time information to both doctors and patients.</p>
</div>
<div class="content-section">
<h3>Business</h3>
<p>Technology has streamlined business operations, making processes more efficient and cost-effective. E-commerce, digital marketing, and cloud computing are just a few examples of how tech influences business today.</p>
</div>
</section>
<section id="future">
<h2>Future Trends</h2>
<p>The future of technology holds exciting possibilities, from artificial intelligence to quantum computing. Innovations are expected to continue reshaping industries and creating new opportunities for growth and change.</p>
<ol>
<li>Artificial Intelligence (AI)</li>
<li>Virtual Reality (VR)</li>
<li>Blockchain Technology</li>
<li>Internet of Things (IoT)</li>
</ol>
</section>
<footer>
<p>© 2025 Technology Insights, All rights reserved.</p>
</footer>
</body>
</html>
As you can see, HTML models real-life documents.
Bottom line
Congratulations, you are a web coder πΈοΈ β welcome to the club! Now if you were thrilled with the lesson, you may have a secret passion for writing websites. You can feed your desire at multiple sites that offer free tutorials: