Catalog: HTML

HTML is the first thing you need to learn to be a web developer. Learn how HTML integrates into other skills here:
What are the most important skills for a Web Developer?
What is a full-stack developer?

Our catalog of quick HTML shots is ever-evolving. Our current selection of shots is organized by:

1. Constructs, where we look at the core constructs of the language
2. Good to know, where we go over material that provides context and may improve your productivity
3. Application, where we list popular applications with HTML (and CSS)

Disclaimer: A catalog shot links together all the shots on a particular topic and outlines how they fit together. A catalog does not attempt to cover the scope of a topic. It is only a catalog of the shots we have on the topic thus far.

Constructs

HTML documents are treated as logical tree structures in what is known as the Document Object Model (DOM). The DOM is a jargony way to describe how elements are accessed and managed, usually using JavaScript. Unless you’re an expert, you only need to be aware that the technical term exists.
What is DOM?

An HTML document is simple in how it is constructed with tags. A tag usually has a starting tag and an ending tag. In the following example, you can observe how we can display text on a webpage using the h1 tag. The h1 tag is the heading tag – it opens with # and closes with ``.
How to write “Hello World” in HTML

The other two tags, Html and body, are necessary tags that provide context to the browser to let it know it’s looking at an HTML document’s body.

You can add style to an HTML document using a CSS or Cascading Style Sheet. We will cover CSS in another catalog.
What is CSS?

Common tags (or elements)

In this section, we will go over some commonly searched for tags.

<span>

We can use the span tag to group and style in-line elements.
How to use the HTML span tag

<img>

In HTML, we can add images in a webpage using the img tag. The img is an empty tag, which means it does not have a closing tag.
What is an HTML image?

<table>

An HTML table is defined with the <table> tag. Below are some basic tags used for specifying the features of a table:

• <tr> tag is used to define each row in a table
• <th> tag is used to define the headers of a table
• <td> tag is used to define a table data or a cell

By default, table headings are bold and centered while data is non-bold and left-aligned.
What is an HTML table?

<p> and <font>

The p tag is used to indicate a paragraph. If you’d like to alter the font size you can do so in two ways. Before HTML5 (the latest version of HTML), the syntax was:

<p><font size="10">Font size is 10</font></p>

However, now, the syntax is as follows:

<p>Font size is 10px</p>

Ideally, you should not change font size inline as it is best practice to use consistent font sizes in your CSS document.
How to change the font size in HTML

<mark>

The mark tag allows you to highlight text and is usually used for emphasis. By default, browsers display text within the mark tag as black with a yellow background.
How to use the HTML mark tag
What is the HTML mark Tag?

See more tags from HTML5 in this shot:
Semantic HTML

Entities and Symbols

HTML character codes, entity codes, and entity names are used in HTML for displaying entities or symbols that are not normally available on the keyboard.
What are HTML character codes?
What are HTML entities?

You can check out some of the more popular symbols and how to display them here:
How to create the ampersand symbol in HTML
How to create the copyright symbol in HTML
How to create the apostrophe symbol in HTML
How to create the arrow symbol in HTML
How to create the bullet symbol in HTML
How to add a space in HTML

Forms

Users can input information on your website using the form functionality of HTML documents. No matter if you need the user to fill in their username and password or type in a comment, the basic structure is the same.
HTML forms

The key components of an HTML form are:

1. Input field, using the <input type="text" > tag
2. Select menu, using the <select> and then <option> tags
3. Check-boxes, using the <input type="checkbox"> tag
4. Radio buttons, using the <input type="radio"> tag
5. Text-area, using the <textarea> tag
6. Submit button, using the <input type="submit"> tag
7. Reset button, using the <input type="reset"> tag

Learn more about key components here:
Key components in HTML form

Learn how to add a checkbox and insert buttons with these shots:
How to insert a checkbox in HTML?
How to insert a button in HTML

Color Picker

Color Pickers in HTML allow the user to select and input a color. To add a color picker in an HTML page, use the <input> tag with type = ‘color’.
How to add a Color Picker in HTML

Good to know

In this section, we have miscellaneous topics that might provide context or improve your productivity.

HTML versions

HTML has evolved over the years, and now HTML5 (the latest version) is the most supported version. However, you might want to look at XHTML to understand the problems HTML5 resolves.
XHTML vs HTML5

Google icons

You can import icons from Google library using the Google icons API.
How to use Google icons in HTML

Mail

The mailto keyword allows you to create a link that launches the user’s default mail client to send an email to the address specified after the mailto keyword.
What are html mailto links?

PUG Syntax

PUG syntax was designed to not need closing tags. Instead, PUG uses indentation, which often results in a more readable syntax.
HTML to PUG

Application

In this section, we list our applications of HTML. To create the following, you’ll nee some knowledge of CSS. You should go over the CSS catalog (out soon!) before looking at these.
How to create columns in HTML
Dropdown menu with HTML and CSS
How to make a dropdown with searchable text
How to make a breadcrumb in HTML / CSS
How to create tabs in HTML