1.7k Views inResources

What is HTML and How Does it Work? An In-Depth Friendly Guide for Beginners

So you want to learn HTML? I‘m glad you asked! HTML is the fundamental building block of the web. Without HTML, there would be no websites, no web apps, and no way to share cat videos on the internet.

I know HTML can seem daunting at first, with all the pointy brackets and weird acronyms. But fear not! In this guide, I‘ll explain exactly what HTML is, why it‘s important, and everything you need to start using it today.

HTML Stands for Hypertext Markup Language

Let‘s start with what the acronym HTML actually stands for:

Hypertext – Text displayed on a computer or device that provides access to other text through links, also known as hyperlinks. This allows moving between web pages and sites by clicking on links.

Markup – Codes or tags that define the structure and presentation of text documents. HTML documents contain markup tags that describe different elements like headings, paragraphs, and links.

Language – A system of codified rules used for human communication. HTML is a markup language with predefined tags used to format and structure documents on the web.

So in summary, HTML is a standardized markup language that web developers use to structure and present content for the World Wide Web. HTML documents contain text content with markup tags that describe how elements like paragraphs, headings, lists, links, images, tables, forms, etc. should be displayed by a web browser.

HTML powers the web – without it there would be no way to consistently share and connect documents online. It provides the universal structure and presentation layer that makes the web usable.

A Brief History of HTML

To understand HTML better, it helps to know how it evolved over the years:

  • 1991 – Tim Berners-Lee, while working at CERN, drafts ENQUIRE, considered the predecessor to HTML
  • 1993 – First HTML documentation called HTML Tags published detailing 20 elements
  • 1995 – HTML 2.0 draft released and standardized by IETF. Netscape Navigator and Internet Explorer emerge as popular browsers
  • 1997 – HTML 3.2 and HTML 4.0 add capabilities like tables, frames, advanced formatting
  • 2000 – HTML 4.01 finalized under full governance of W3C standards body
  • 2004 – Web Hypertext Application Technology Working Group (WHATWG) forms to build the next HTML iteration
  • 2006 – W3C announces official work on HTML5 standard based on WHATWG draft specification
  • 2014 – HTML5 finalized as a W3C recommendation, defining the current standard version of HTML
  • 2016 – HTML 5.1 released with bug fixes but limited new features
  • 2017 – HTML 5.2 released with better Unicode support for worldwide text
  • 2022 – HTML5 remains the current standard while new features are added through a "living standard" process

As you can see, HTML has evolved a lot since its inception over 30 years ago. Today it‘s an open web standard maintained by a community process under the governance of the World Wide Web Consortium (W3C).

Now that we‘ve covered a bit of history, let‘s look at how HTML actually works under the hood.

How HTML Works: Markup Tags, Elements, and Rendering

At the most basic level, an HTML document is a plain text file ending with the .html file extension. So you can create and edit HTML files using any text editor.

For example, this simple page:

<!DOCTYPE html> 
<html>

<head>
  <title>Page title</title>
</head>

<body>



  <p>My first paragraph.</p>

</body>

</html>

This document contains markup tags that describe different HTML elements:

  • <!DOCTYPE html> – The document type declaration for HTML5
  • <html> – The root element of the document
  • <head> – Contains meta information
  • <title> – The title of the page
  • <body> – The visible content
  • <h1> – A top level heading
  • <p> – A paragraph of text

When loaded in a web browser, it renders like this:

My first paragraph.

The browser interprets the HTML markup tags and displays the result. Tags represent HTML elements that describe different content types, which browsers know how to display appropriately.

Tags usually come in opening and closing pairs like <p> and </p>, with element content in between. But some like <img> are self-closing.

HTML markup tags identify the purpose or role of content in a standardized way that all browsers can understand.

The HTML DOM: Structured Content Model

So why do browsers know how to display HTML elements correctly?

This is because browsers use the DOM (Document Object Model) to parse HTML and render content. The DOM defines the logical structure of documents and provides an interface for manipulating elements programmatically.

When a browser loads an HTML page, it:

  1. Parses the HTML to create a structured representation of the document – the DOM tree
  2. Applies styling rules from any linked CSS stylesheets
  3. Renders the styled DOM tree as the visual web page

The DOM represents documents as node trees with different element types, attributes, and relationships. Because HTML follows consistent semantics and structure rules, browsers can reliably render any standard HTML page.

Manipulating the DOM tree directly enables dynamic web pages that change and react based on user input, APIs calls, database updates, and more. This is where JavaScript comes in!

But the HTML source provides the reliable initial scaffolding. With well-structured HTML markup, websites and apps can build in depth and complexity while remaining accessible.

Common HTML Elements and Tags

Alright, enough theory – let‘s look at some commonly used HTML elements and tags!

Headings

There are six levels of headings in HTML, denoted by <h1> through <h6>:


<h2>Second largest heading</h2>
<h3>Third largest heading</h3>
<h4>Fourth largest heading</h4>
<h5>Fifth largest heading</h6>  
<h6>Smallest heading</h6>

Headings help structuring content and indicating importance.

Paragraphs

Paragraphs of text are wrapped in <p> tags:

<p>This is how you add a paragraph of text in HTML.</p>

<p>You can have multiple paragraphs.</p>

Lists

HTML supports ordered and unordered lists:

<!-- Unordered list -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>First item</li>  
  <li>Second item</li>
</ol>

Images

The <img> tag adds images:

<img src="image.jpg" alt="My image">

Note there is no closing </img> tag, and images should have an alt attribute for accessibility.

Links

Links use the <a> anchor tag:

<a href="https://website.com">Link text</a>

The href defines the destination.

Tables

Tables are useful for presenting tabular data:

<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th> 
  </tr>
  <tr>
    <td>Row 1 Cell 1</td>
    <td>Row 1 Cell 2</td>
  </tr>
  <tr>
    <td>Row 2 Cell 1</td>
    <td>Row 2 Cell 2</td>
  </tr>
</table>

These are just a sample of commonly used HTML elements. There are many more available!

Block vs Inline Elements

HTML elements fall into two categories – block or inline:

Block elements:

  • Take up the full available width
  • Start on a new line by default
  • Can contain inline and other block elements

For example: <p>, <div>, <h1>, <table>, <ul>, <form>

Inline elements:

  • Take up only the width they need
  • Do not start a new line
  • Only contain data or other inline elements

For example: <b>, <img>, <span>, <input>, <label>, <a>

Here‘s a visual depiction:

Diagram showing difference between block and inline HTML elements

Understanding block vs inline is helpful for structuring page layouts properly.

HTML Attributes

Many HTML elements support additional attributes for configuring behavior:

<a href="https://website.com" target="_blank">Link</a>

Here the target attribute opens the link in a new browser tab.

Common attributes include:

  • id – Unique identifier for an element
  • class – For styling or scripting a group of elements
  • src – Path to an embedded resource like an image
  • href – Destination for a link
  • alt – Alternative text for accessibility
  • style – Inline CSS styling
  • title – Advisory tooltip text

There are many more depending on the element. Attributes extend the functionality of HTML elements.

New Semantic Elements in HTML5

HTML5 introduced new semantic elements that provide more meaning:

<header>...</header>
<nav>...</nav>
<main>...</main>
<article>...</article>
<aside>...</aside>
<footer>...</footer>

These describe page regions and content roles rather than generic <div> tags.

HTML Validation and Accessibility

To ensure correctness and accessibility, validating HTML markup is important:

Issues like missing tags, invalid nesting, or missing image alt attributes can be caught early.

HTML Character Encoding

By default HTML uses the UTF-8 (Unicode) character encoding to support text in all languages:

<meta charset="utf-8">

You may also see character entities used like © for copyright symbols or & for ampersands.

Proper text encoding is necessary for an international web!

The Difference Between HTML and HTML5

HTML5 is the latest major version of HTML. Here are some key differences:

  • Added new multimedia elements like <audio> and <video>
  • Connectivity improvements like Web Sockets and WebRTC
  • New semantic tags like <main>, <section>, <article>
  • New form input types like email, url, date, search
  • APIs and better DOM support for interactivity
  • Performance additions like local storage and web workers
  • Better device access like geolocation and orientation
  • Styling upgrades like border-radius, gradients, shadow effects

HTML5 provides many improvements while retaining backwards compatibility with existing browsers.

The Pros and Cons of HTML

Now that we‘ve covered what HTML is and how it works, let‘s discuss some advantages and drawbacks:

Pros:

  • Universally supported by all web browsers
  • Lightweight text-based format, easy to write and edit
  • Human-readable document structure
  • Facilitates search engine optimization (SEO)
  • Allows embedding images, videos, and rich media
  • Enables hyperlinking between documents and sites
  • Provides accessibility features for disabilities
  • Strong standards focus and backwards compatibility
  • Free and open source without licensing restrictions
  • Huge amount of learning resources available
  • Integrates well with CSS for styling and JavaScript for programming behaviors

Cons:

  • Limited built-in functionality
  • Presentation and styling requires CSS
  • Behavior and interactivity relies on JavaScript
  • No native support for making web applications beyond documents
  • Not optimized for complex application development
  • Original versions had inconsistent browser support
  • Accessibility features still have room for improvement
  • Heavy focus on semantics over visual design capabilities

In summary, HTML provides a solid accessible document structure foundation. But it requires CSS and JavaScript to provide advanced styling, effects, and dynamics.

HTML Remains the Backbone of the Web

HTML has remained relevant for over 30 years because it provides a simple standardized content structure framework. Learning HTML is valuable for anyone looking to build for the web.

With some HTML fundamentals, you can:

  • Use headings, paragraphs, lists, links, tables, images, and other elements to structure content
  • Ensure accessibility through semantic markup like alt text
  • Design page layouts with block and inline elements
  • Extend functionality with attributes and HTML APIs
  • Embed multimedia content like video and audio
  • Apply CSS styling and JavaScript interactivity

I hope this beginner friendly guide provided a helpful introduction to HTML! While it may seem overwhelming at first, HTML is the backbone of the web – and with a little practice you‘ll be up and running in no time.

Let me know if you have any other HTML questions! I‘m always happy to help break things down in plain English.

Written by Jason Striegel

C/C++, Java, Python, Linux developer for 18 years, A-Tech enthusiast love to share some useful tech hacks.