An introduction to the HyperText Markup Language with a curated list of resources that will be helpful when learning and writing it.
HyperText Markup Language (HTML) describes the structure of a web page. The structure of a page includes:
- Each and every one of the visible elements (e.g., paragraphs of text, images, videos, etc.) and invisible elements (e.g., meta information) that make up the document
- The hierarchical relationship between elements in the document
Writing semantic HTML is always preferable. HTML is semantic when the elements that are used to represent the content reinforce the meaning of that content.
Here is a list of recommended resources for learning and writing the HyperText Markup Language.
These books do an excellent job of covering both the basic and more advanced HTML topics.
Courses and Tutorials
- HTML5 and CSS Fundamentals course from the W3C
- HTML5 Coding Essentials and Best Practices from the W3C
Helpful tools for you to use as you are writing HTML.
HTML can be written in any standard text editor. Using one of these more sophisticated code editors can save you time and frustration.
- Atom – a hackable editor from GitHub
- Brackets – a modern, open source editor that understands web design
- Sublime Text – a sophisticated editor for code, markup, and prose
- Visual Studio Code – a streamlined editor with support for development operations like debugging, task running, and version control
Validation is the process of checking whether or not a given document follows the rules of a language.
Helpful materials to understand how to properly use specific HTML elements, tags, and attributes.
- HTML Element Reference – a list of all HTML elements
- HTML Attribute Reference – a list of all values that configure or adjust the behavior of HTML elements in various ways
- W3C Cheatsheet – provides quick access to useful information from a variety of specifications published by W3C
- Latest HTML Recommendation from W3C
- Latest HTML Spec from WHATWG
- HTML5 Accessibility – current accessibility support status of HTML5 features across major browsers
- HTML5 Element Flow Chart – a flow chart diagram that will help you determine which sectioning element to use in your document