Learning HTML - Understanding HTML and Its Role in the Web
This episode breaks down what HTML is, its brief history, its position in the web stack alongside CSS and JavaScript, and how the browser processes markup into the DOM and a visible page.
#Introduction
In episode 0 you set up your environment: text editor, browser, local server, and your first project. Now it's time to get to the heart of this series — understanding what HTML is and its role in the web. Before writing lots of tags, it's important to know why HTML exists and where it sits in the web technology stack.
Episode 1 covers the definition of HTML, its brief history, how the browser processes markup into a page, and the role of HTML compared to CSS and JavaScript. This is the conceptual foundation you'll use across all 22 remaining episodes.
#What Is HTML
#The Full Name and Its Meaning
HTML stands for HyperText Markup Language. It's not a programming language — HTML is a markup language, meaning a language for tagging parts of content so they carry meaning and structure. You don't write logic like loops or conditionals; you write elements that describe headings, paragraphs, links, images, and so on.
The word HyperText refers to links that connect one document to another — this is what forms the web as a network of interrelated documents. Every time you click a link, you're navigating hypertext.
#A Brief History
HTML was born in 1991 when Tim Berners-Lee released the first document describing the tags used at CERN. Since then HTML has kept evolving: HTML 4 in the late 1990s, XHTML which failed to gain popularity, then HTML5, standardized around 2014, which became the foundation of the modern web.
Today HTML is maintained by the WHATWG as the HTML Living Standard — not a version released all at once, but a specification that is continuously updated. This is why you'll often see new HTML features appear without waiting for the next "major version".
#HTML's Role in the Web Stack
#The Three Layers of the Web
A modern web page is made of three complementary layers:
- HTML structures content and semantics: headings, paragraphs, images, buttons.
- CSS handles presentation: colors, sizes, spacing, and layout.
- JavaScript handles behavior: responses to clicks, form validation, and content updates.
A common analogy: HTML is the building frame, CSS is the paint and furniture, and JavaScript is the electricity and plumbing. A solid building starts with a correct frame — that's where HTML comes in.
#Why Structure Comes First
Many beginners rush to write CSS and JavaScript before the HTML structure is right. But both work on top of the structure. CSS needs selectors that target HTML elements, and JavaScript needs nodes in the document. A messy structure will mess up the layers above it too.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Lapisan Web</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 id="judul">Selamat Datang</h1>
<p>Konten ini disusun oleh HTML.</p>
<script src="js/app.js"></script>
</body>
</html>In the example above, the link tag connects CSS and the script tag connects JavaScript — both work because the HTML structure already exists first.
#How the Browser Processes HTML
#From URL to Page
When you open an address, the browser runs several steps:
- Sends an HTTP request and receives the HTML document.
- Parses the markup into the DOM, a tree of nodes that represents the document structure.
- Downloads and processes CSS, then combines it with the DOM to compute styles.
- Runs JavaScript, then renders the page to the screen.
The DOM is the internal representation of the document that JavaScript can access and modify. Even though you don't need to dive deep into it yet, understand that the DOM is the bridge between HTML and JavaScript.
#Viewing a Site's Raw HTML
Get used to inspecting real page markup. One of the simplest ways is through the terminal:
curl -s https://example.comThe command curl -s https://example.com fetches the exact same document the browser receives, minus the rendering process. You'll see pure HTML tags — a great exercise for reading other people's markup.
To inspect the response headers, add the -I option:
curl -sI https://example.comThe headers show status codes like 200 OK, content type, and the responding server — early clues about how a page is delivered to the browser.
#Ecosystem and Learning Resources
#Standards and Validators
To make sure your markup is correct, use the W3C HTML Validator at https://validator.w3.org. The validator checks documents against the standard and reports warnings and errors. Simple issues it often catches: unclosed tags, misspelled attributes, and elements placed where they shouldn't be.
#Primary Reference Sources
Two sources whose addresses you should memorize:
- MDN Web Docs at
https://developer.mozilla.org— the most complete and accurate HTML documentation. - WHATWG HTML Standard at
https://html.spec.whatwg.org— the official specification for those who want to go deeper.
Make MDN a habit: every time you meet a new tag, open its MDN page and read the Usage notes section. This habit will accelerate your understanding far beyond memorization.
#Closing
Episode 1 lays the conceptual foundation: HTML is a markup language that structures content, distinct from CSS which handles presentation and JavaScript which handles behavior. You also understand how the browser processes markup into the DOM, and where to go for references and validation.
Key takeaways:
- HTML is a markup language, not a programming language.
- HTML, CSS, and JavaScript are three layers: structure, presentation, and behavior.
- The browser turns markup into the DOM before rendering.
- HTML5 is the foundation of the modern web and continues to be maintained as a Living Standard.
- Use MDN for references and the W3C Validator for checks.
In the next episode, episode 2, we'll cover the basic structure of an HTML document — the role of <!DOCTYPE html>, the html, head, and body elements, plus important metadata inside head. You'll build your first complete document that becomes the pattern for all following episodes.