31 March 2017

Fundamentals of HTML: A Guide

Understanding HTML

As I'm sure you know, HTML (or 'HyperText Markup Language') is the backbone of the web. It is the standard markup language used to create web pages and applications. Since its inception, HTML has evolved significantly, playing a crucial role in web development and the modern web we all know and use today. Here, I intend to explore what HTML is, its history, how it works, and how it integrates with (or supports) other web technologies like CSS and JavaScript. I will also try to provide practical examples which will help you understand its application 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>. Due to its origin in XML, most tags come in pairs: an opening tag (<tagname>), and a closing tag (</tagname>).

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 the web page.

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.

This is the latest version of HTML (at least at the time of writing). It brought more significant improvements, particularly focused around hypermedia and introducing semantic elements for new uses.

Amongst many new semantic elements introduced are <header>, <footer>, <article>, and <section>, offering clearer semantic structure to the document.

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>&copy; 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>

The Future of HTML

Whilst it is fair to say that HTML is now very well‑established and stable, the web, in general, is always in a constant state of improvement and evolution, so it is fair to say that HTML will undergo further enhancements to meet the demands of modern and future web development.

These are really not much more than educated guesses, but here are some trends and potential directions that I think HTML might take in the future:

Increased Semantics

Semantic HTML isn't only a 'good thing to do'; it also helps describe the contents of your page programmatically to search engines and to non‑visual users. I expect that we will see a continued introduction of new semantic elements to improve the accessibility and machine‑readability of our websites, alongside enhanced support for defining the structure and meaning of web documents.

W3C lists the currently proposed elements on their website: 'Proposed HTML elements and attributes'.

Web Components

Web Components have been around in one form or another for many years now. I was even involved in building an educational platform using Web Components and Google Polymer back in 2014 (and released in early 2015).

Web Components act to standardise components with encapsulated HTML, CSS, and JavaScript. This allows a more native approach to reusable and modular components. I expect that we will see these continue to grow in features and popularity in time, although arguably they are less relevant than they were a few years ago as frameworks and modern development techniques have achieved much the same encapsulation.

Progressive Web Apps (PWAs)

HTML, along with CSS and JavaScript, will continue to play a pivotal role in the development of PWAs. PWAs aim to provide a native app‑like experience directly on the web, with device‑level features like offline access, push notifications, and access to local hardware like cameras and microphones.

Enhanced Performance and Optimisation

The web is only as good as it is quick. So, I expect we will see continued efforts to improve performance and loading times via HTML. This, as I've touched upon already, will likely revolve around the introduction of new elements and attributes to allow the developer to optimise rendering and manage resource loading.

We have already seen this recently with the introduction of the loading property on HTMLImageElement.

Tighter Integration with Emerging Technologies

HTML will continue to evolve to better integrate and underlie emerging web technologies like WebAssembly, which will, in turn, enable even higher‑performance applications on the web.

I also expect to see greater support for Virtual Reality (VR) and Augmented Reality (AR) through the introduction of new APIs and elements.

Ongoing Accessibility Improvements

As assistive technology becomes more advanced, so too must the technologies and standards they access. This will likely surface as new attributes and best practices to help create even more inclusive web experiences.

Security Enhancements

As always, there will always be a continued focus on improving the security of web applications and a concerted effort to close common web vulnerabilities, and new ones as they are discovered.

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.

Looking ahead, I fully expect HTML to continue advancing and evolving in terms of semantics, performance, accessibility, and integration with emerging technologies. Keeping yourself up to date on these trends will enable you as a developer to leverage newer abilities as they become available and build even more robust, efficient, and user‑friendly web applications. Whether you're a novice starting with basic HTML tags or an experienced developer exploring the latest features of HTML5, mastering HTML is an ongoing journey.

Categories:

All articles