HTML stands for HyperText Markup Language. It is the lingua franca of the Internet. Browsers parse HTML to display a website’s structure and content.

In the late 1980s and early 1990s, Tim Berners-Lee, a computer scientist, worked at the European Organization for Nuclear Research (CERN). CERN is a physics organization known for running the Large Hadron Collider, and through Tim Berners-Lee, is also known as the birthplace of HTTP and HTML. Berners-Lee specified the first version of HTML as a method of transferring text over the Internet, something incredibly useful for physicists working at CERN who wanted to share documents online.

To start understanding HTML, we need not understand how browsers and servers work. We’ll take for granted that we have a browser that renders HTML whenever we visit a website, and that we have a server — an ever-running computer whose job it is to deliver HTML to our computer whenever we visit a website URL. We may end up exploring some of these concepts later on, but we’ll consider them as black boxes for now.

<aside> 💡 As an preface, web.dev is one of my go-to resources for web development. They are currently working on a guide to HTML. If you have the time, I would look over their guide for a more comprehensive and precise look at HTML.

</aside>

This document serves as a starting point, a heavily incomplete knowledge base to get you up to speed with HTML such that you can be productive on the team.

Accessibility

Websites are an interactive medium. You can scroll through a website, click on buttons, insert text, etc. And perhaps the most basic form of interaction is reading or viewing a website’s content. Not everyone has the ability to interact with a website to the full extent.

Someone without fine motor control may not be able to control a mouse to scroll through a website, and someone without vision may not be able to read the text or view the images on the website. Just as there are engineering considerations to make a building accessible, we, as software engineers, also have the responsibility to make websites and applications accessible.

<aside> 💡 Disability is situated. When I used to think about disability, I almost always thought of someone in a wheelchair or someone blind. Now, I always think of a mother holding their infant baby, an athlete using crutches after an accident, someone trying to look at their phone while the sun is beaming down on them. These people are disabled. Maybe not to the same extent as someone who is permanently blind, but disabled nonetheless.

</aside>

This framing, the framing that anyone and everyone is disabled at some point in time, has helped me be more empathetic when caring about issues of accessibility.

Note that accessibility is often abbreviated as a11y. The 11 comes from the fact that 11 letters are in between the a and the y in the word.

Screen reader

A screen reader is an application built into your computer or mobile device that has the ability to consume a website’s content and read it aloud. Screen readers are commonly used by people with visual impairments.

<aside> 🎒 As an exercise, figure out how to use a screen reader, both on your computer and mobile device.

  1. First, figure out how to enter and exit a screen reader.
  2. Visit a website and try to activate and then deactivate the screen reader.
  3. Next, learn some basic keyboard shortcuts for how to navigate a website. A person with visual impairments may or may not be able to use a keyboard.
  4. Try using different browsers and see if there are differences between how the screen reader reads content aloud.

In the case that you want some guidance, consider watching these videos from Google Chrome Developers on using a screen reader on macOS, iOS or Android. The default Windows screen reader is called Narrator, and Microsoft provides some guidance for usage.

Visit websites of varying complexity. A website with mostly text and images may have fewer accessibility concerns. A website with a lot of forms or sections of interactivity will have more accessibility concerns. Spend a decent amount of time on this — you should actively use a screen reader while developing to audit your website’s accessibility.

</aside>

Resources

As a general reference, I use the A11y Project checklist for some technical and general accessibility considerations. I will refer to this checklist as we explore HTML and CSS.

When relevant, I will introduce other methods of auditing accessibility.

<aside> 🎒 Let’s start our exploration of HTML by making a simple website.

  1. Change your directory to your daily folder.
  2. Create another folder called tmp inside the daily folder.
  3. Create an index.html file inside the tmp directory. Typically, we name the “root” or “main” page of a website the index page.
  4. Open tmp in Visual Studio Code by running code . in the tmp directory. If you’re in the daily directory, you can alternatively run code tmp.
  5. Open the index.html file in Visual Studio Code.
  6. Press and enter ! in the text editor. It will autocomplete the following boilerplate code: </aside>