Fundamentals of HTML: A Guide
Understanding HTML
HTML, or 'HyperText Markup Language', is the structural language of the web. It defines the content and meaning of a web page: headings, paragraphs, links, images, lists, sections, forms, and other document elements. In this guide, I cover what HTML is, how an HTML document is structured, how the language has evolved, and how it works alongside CSS and JavaScript in modern web development.
What is HTML?
So, first and foremost, what even is it? HTML stands for 'HyperText Markup Language'. It is the standard markup used to create and design documents on the web. Think of HTML as the skeleton of a web page; it structures content and tells the browser how to display it.
Basic Concepts
Elements and Tags
HTML uses elements (represented by tags) to structure content. Tags are enclosed in angle brackets, like <tagname>. Many HTML elements use an opening tag and a closing tag: for example, <p> starts a paragraph and </p> ends it. Some elements are void elements, such as <img>, <br>, <meta>, and <input>, and do not directly contain content or use a closing tag.
HTML and XML are related markup languages, but HTML did not come from XML. HTML came first. XHTML later tried to express HTML using XML's stricter syntax rules, which is why older HTML examples often use XML‑style habits such as self‑closing tags. Modern HTML is more forgiving than XML and has its own parsing rules.
Attributes
Attributes can be applied to tags to provide additional information or context to an element. Attributes are included in the opening tag and usually come in name‑value pairs, for example: <tagname attribute="value">.
Basic Structure of an HTML Document
To (hopefully) illustrate this concept, here's a simple example showing the basic structure of an HTML document:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <p>This is a paragraph of text in HTML.</p> <p>This is another paragraph of text in HTML.</p> </body></html>Breaking This Down
<!DOCTYPE html>: This declaration defines the document type and version of HTML being used ‑ in this case, it's an HTML5 document (more on that later).<html>: This is the root element of the document.<head>The head element isn't visible to your webpage visitor. It contains meta‑information about the document, like the title and character set ‑ all things that other computers should see and read, but that your human audience won't care much for.<body>: This section contains the document's content, including text, images, links, videos, and any other hypermedia or multimedia you can dream of.
Common HTML Elements
HTML is a very large and nuanced language, so for the sake of this article, I just want to give you a few examples of HTML elements and how they are used (or what they do):
Headings
<h1> through to <h6> define headings, where an <h1> is the highest level and an <h6> is the lowest.
Paragraphs
<p> defines a paragraph.
Links
<a> defines a hyperlink, which is used to link from one page to another. This is used in combination with the href attribute to define where the hyperlink goes.
Images
<img> is used to embed images in a web page. The src attribute specifies the image location, whilst the alt attribute provides a textual alternative for users who cannot see the image or when the image cannot be loaded.
Modern web development also commonly includes width and height attributes. These allow the browser to calculate the image's aspect ratio before the file has loaded, reserve the right amount of space, and reduce unexpected layout shifts. CSS can also control the rendered size, but the intrinsic dimensions still help the browser understand the image's proportions early.
Responsive images (where different screen sizes might warrant totally different images) can be provided using elements such as <picture> or attributes like srcset, allowing browsers to select the most appropriate image for the visitor's device and screen size.
Lists
<ul> and <ol> define unordered (bulleted) and ordered (numbered) lists, respectively, whilst <li> defines the list items.
An Example of Common HTML Elements
Here's that basic example again, this time including the elements I've described to you above:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <p>This is a paragraph of text in HTML.</p> <p> This is another paragraph of text in HTML. <a href="https://www.example.com">This is a hyperlink to example.com</a>. </p> <img src="/image.jpg" alt="An example image with alt text to describe the contents of the image" /> <ul> <li>First list item</li> <li>Second list item</li> <li>Third list item</li> </ul> </body></html>The History of HTML
HTML was created by Tim Berners‑Lee, a physicist at CERN, in 1991. The first version, HTML 1.0, was very basic and included only a handful of tags (although many of them are still valid today).
Over the years, HTML has undergone several revisions:
HTML 1.0 (1991)
This was the first version of HTML and only included basic tags like <p>, <a>, and <img>. It allowed for the creation of very simple web pages with text, links, and images, although it wasn't yet standardised.
HTML 2.0 (1995)
This was the first standardised version of the specification by the Internet Engineering Task Force (IETF). It introduced more tags and attributes, including tables and forms, which meant we could now build web pages with structure and a little more interactivity.
HTML 3.2 (1997)
Here, the World Wide Web Consortium (W3C) got involved in the standardisation process. 3.2 added new elements like <font>, <center>, and <applet>, which improved developer support for more complex web page layouts and styling.
HTML 4.01 (1999)
This was the first big one.
At last! For the first time, a significant number of tags are removed from the specification ‑ almost all of them presentational tags, which are deprecated to make way for styling via CSS instead. This major update introduced the separation of content and presentation that we are all familiar with today (and which is starting to be undone again with CSS-in-JS type frameworks). It also introduced enhanced support for scripting with JavaScript.
Coincidentally, it is during this transition period that I began to develop for the web.
XHTML (2000)
Introduced as a way to improve the consistency and interoperability of web documents by stricter standards. XHTML is simply a stricter version of HTML 4.01, written in XML. It requires well‑formed markup and enforces stricter syntax rules with paired opening and closing tags.
HTML5 (2014)
This was the really big one.
HTML5 was the major modernisation of HTML, adding native multimedia, new semantic elements, better form controls, and APIs for more capable web applications. Today, HTML is maintained through the WHATWG HTML Living Standard, updated continuously rather than published only as occasional fixed version releases. This means there will be no 'HTML6', just an ever‑evolving and improving HTML standard.
Amongst many new semantic elements introduced in HTML5 are <header>, <footer>, <article>, <section>, <main>, <nav>, and <aside>, offering clearer semantic structure to documents and helping browsers, search engines, and assistive technologies better understand page content.
For multimedia, this version added native support for multimedia elements like <video> and <audio>.
It also introduces APIs for offline storage, geolocation, drag‑and‑drop, and more, enabling more powerful web applications alongside improved <canvas> support for graphics and the introduction of native support for Scalable Vector Graphics (SVGs).
How HTML Works
I've touched on this already above, but for the sake of completeness, HTML uses a series of elements enclosed in angle brackets (e.g., <tagname>) to structure content, which is then interpreted and displayed ("rendered") by the browser.
Each HTML document starts with a <!DOCTYPE html> declaration to tell the browser which version of HTML to use. This is then followed by <html>, <head>, and <body> tags.
Using HTML
HTML is used by developers to create documents for the web (web pages). It allows for the inclusion of text, images, links, forms, and multimedia. Here's an even more detailed example of HTML elements in action, based on the previous examples above:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Hello World</title> </head> <body> <header> <h1>Hello World</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 id="home"> <h2>Home</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at commodo purus. </p> <img src="/image.jpg" alt="An example image with alt text to describe the contents of the image" /> </section> <section id="about"> <h2>About Me</h2> <p> Donec eu lectus vitae magna lobortis aliquam. Aenean venenatis sapien eget dui tincidunt pulvinar. </p> </section> <section id="contact"> <h2>Contact Information</h2> <p> Aliquam sollicitudin sapien et condimentum sollicitudin. Aliquam ut justo ex. </p> </section> </main> <footer> <p>© 2017 Copyright notice</p> </footer> </body></html>Integration with CSS and JavaScript
Whilst HTML provides the structure of a web page, CSS (Cascading Style Sheets) and JavaScript add style and interactivity, respectively.
CSS
CSS is used to style HTML elements. I write about CSS frequently, but essentially it is used to change colours, fonts, layouts, and more or less anything else visual on the page.
There are three ways to integrate CSS into HTML:
Inline CSS
CSS can be applied to an HTML element directly using the style attribute. For example, the CSS within the style tag on this paragraph will make the text blue and bold:
<p style="color: blue; font-weight: bold;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>I should note here that the styling within that style attribute will only be applied to that specific element and its descendants.
Internal CSS
Internal CSS is applied to an HTML document by placing CSS in between <style> and </style> tags within the head of the document. Revisiting a markup example from earlier, the use of CSS within the <style> tag in the example below will make all paragraphs blue and bold:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Hello World</title> <style> p { color: blue; font-weight: bold; } </style> </head> <body> <h1>Hello World</h1> <p>This is a blue, and bold, paragraph of text in HTML.</p> <p>This is another blue, and bold, paragraph of text in HTML.</p> </body></html>Unlike with inline styles, anything in the <style> block will be applied to every matching element within the document (following the rules of CSS specificity, of course).
External CSS
Perhaps the most common way of applying CSS to an HTML document (without also cluttering the markup itself), is to use an external CSS file. There are advantages and disadvantages to this approach (not least causing an additional request to the server, which could have an impact on page load times), but actually implementing this approach is easy.
Instead of writing all your CSS for the page inside the <style> tags as we discussed above, we write them all in a separate file called ‑ for example ‑ styles.css:
p { color: blue; font-weight: bold;}We then link it into our HTML document using a <link> tag in the <head> section, like this:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Hello World</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <h1>Hello World</h1> <p>This is a blue, and bold, paragraph of text in HTML.</p> <p>This is another blue, and bold, paragraph of text in HTML.</p> </body></html>As with internal CSS, anything in your styles.css file will be applied by the browser to all relevant elements in the HTML document. So, in this case, all paragraphs turn bold and blue.
JavaScript
JavaScript is traditionally used to add interactivity to HTML elements, although its scope has expanded and increased significantly since. I write about JavaScript frequently, too, but at a high level, it can handle events like clicks and form submissions, and can manage client‑side state.
Much like with CSS, there are three main routes to take when integrating JavaScript with HTML, although they are slightly different from CSS.
Inline JavaScript
You can integrate JavaScript functionality directly into an element within the markup by using event attributes like onClick. This is different to CSS, which always uses the same style attribute, in that there are a number of different event attributes available, and which can only be assigned to specific elements. Going into detail here is more than I think this article could bear, but you can see a full reference over on the MDN Web Docs here.
As an example, though, here is a console.log statement, tied to the onclick attribute of a button element:
<button onclick="console.log(event)">Click the button</button>Internal JavaScript
Much like the CSS example above, internal JavaScript is applied on a document level by using a <script> tag. Unlike CSS, however, there are no hard‑and‑fast rules over where the tag goes within the document, although convention suggests that putting it within the <head> of the HTML document is best for performance.
In the example below, we add a function called handleButtonClick internally (in the <script> tag). We then call it with the onclick function of the button in the main body of the document:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script> const handleButtonClick = () => { alert('Button clicked'); }; </script> </head> <body> <h1>Hello World</h1> <button onclick="handleButtonClick()">Click Me</button> </body></html>External JavaScript
Again, in a similar fashion to the External CSS example above, external JavaScript tends to be the most common way of integrating JavaScript into your HTML document. This removes clutter from your HTML document by extracting JavaScript to its own file, and allows us to be a little more clever about loading and performance.
Rather than writing our JavaScript into the <script> tag within the HTML document, we create a new file called ‑ for example ‑ functions.js:
const handleButtonClick = () => { alert('Button clicked');};We can then bring this into our HTML file via the src attribute of a <script> element, then calling the functions within that file as though they were directly in the file (as with the Internal JavaScript example above).
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="functions.js"></script> </head> <body> <h1>Hello World</h1> <button onclick="handleButtonClick()">Click Me</button> </body></html>Modern HTML in Practice
Modern HTML is less about chasing new tags and more about using the platform carefully: clear document structure, semantic elements, accessible content, useful metadata, responsive media, and markup that works well with CSS and JavaScript.
HTML continues to evolve through the living standard, but its core value remains stable. It gives web content structure and meaning, and that structure is what browsers, search engines, assistive technologies, and other tools use to understand a page.
Wrapping Up
HTML is the cornerstone and foundation of web development, it provides the essential structure for web pages and applications. From humble beginnings to the feature‑rich HTML5 we all get to use today, it has undergone significant evolution, continuously adapting to the needs of the modern web. Understanding the fundamentals of HTML ‑ including its elements, attributes, and basic document structure ‑ is crucial for anyone looking to create web content.
As we've discussed and seen above, HTML doesn't work in isolation; it integrates seamlessly with CSS for styling and JavaScript for interactivity, making it a powerful tool for developers.
Postscript
March 2026: This article was originally published in 2017 and has been updated several times since. Whilst the fundamentals of HTML remain largely unchanged, some historical references reflect the state of web development at the time of writing.
Notably, HTML is now maintained through the WHATWG HTML Living Standard rather than occasional versioned releases, and modern development practices place greater emphasis on semantic markup, accessibility, responsive media, and interoperability with CSS and JavaScript than they did when this article was first published.