Introduction to HTML

We recommend watching this LinkedIn Learning course for more information on HTML. It will explain many of the details that this chapter of the book goes into.

Summary slides of chapter

HTML (Hypertext Markup Language) is the skeleton of the web. It is a markup language (much like markdown) that defines what a page should contain. The other parts rendered by your browser are CSS, which defines how it should look like, and JavaScript, which defines what it should do (animations, interactions, and dynamic content manipulation). The modern web does not stick with these definitions. CSS3 (the latest standard for CSS) supports animations, and JavaScript can be used to turn an empty HTML page into a properly structured one dynamically. However, we will be sticking to the basics for this class!

The page you are reading this on is full of HTML/CSS/JavaScript code. You can view this code. I use F12 on my Mac to see HTML code. Ctrl+U or Cmd+U may also work.

This textbook only covers the basics of HTML. There are many aspects of the language which will not be covered here. To read more, check out Mozilla Developer Network or the official W3C technical specifications.

Learning Outcome

Create and design basic web pages

Chapter Learning Outcomes

  • Understand the purpose and application of HTML code.
  • Understand the concept of valid code and code standards.
  • Be able to read and modify an HTML document.
  • Create links, tables, and lists within an HTML document.
  • Be able to create a new HTML document from scratch.

Practical Applications

HTML can be used to create basic static webpages, and knowing HTML can also help you write templates and troubleshoot issues with standard static website generators if you choose to use one for a personal blog on GitHub.

MDN, W3C, and Accessibility

While HTML may render seamlessly in your browser without any visible errors, your web page might still have issues that become apparent when you attempt to add more features or when screen reader users access it. HTML is very fault-tolerant, to the point where moving to a different browser might render your page unusable when it worked fine before.

The World Wide Web Consortium (W3C) provides a validator tool that can help you identify and rectify any issues with your HTML markup, ensuring it adheres to the established standards.

Both humans and screen readers look at HTML pages! Ensuring that a screen reader can parse your HTML tags is essential to ensure accessibility on your page; for more information on this, consult Mozilla’s tutorial for the basics of accessibility.

MDN (Mozilla’s Developer Network) maintains a comprehensive tutorial on the modern web, starting with HTML.

Important Programs

HTML is a markup language written in plain text, meaning you need a plain-text editor to write it. Word processors, like MS Word, write a fancy format like .docx and zip files under the hood with metadata like fonts, padding, styles, and compatibility information. The go-to program to edit plain-text code like HTML is Visual Studio Code (note: not to be confused with Visual Studio!). It is free and compatible with all operating systems. Other free alternatives include: