Understanding HTML in Angular

At the heart of HTML is the element, which tells the browser what kind of content each part of an HTML document represents. Here is an element from the example HTML document:

...
<td>Buy Flowers</td>
...

As illustrated in the following picture, this element has three parts: the start tag, the end tag, and the content.

The name of this element (also referred to as the tag name or just the tag) is td, and it tells the browser that the content between the tags should be treated as a table cell. You start an element by placing the tag name in angle brackets (the < and > characters) and end an element by using the tag in a similar way, except that you also add a / character after the left-angle bracket (<). Whatever appears between the tags is the element’s content, which can be text (such as Buy Flowers in this case) or other HTML elements.

Understanding Void Elements

The HTML specification includes elements that are not permitted to contain content. These are called void or self-closing elements, and they are written without a separate end-tag, like this:

...
<input />
...

A void element is defined in a single tag, and you add a / character before the last angle bracket (the > character). The input element is the most commonly used void element, and its purpose is to allow the user to provide input, through a text field, radio button, or checkbox. You will see lots of examples of working with this element in later chapters.

Understanding Attributes

You can provide additional information to the browser by adding attributes to your elements. Here is an element with an attribute from the example document:

...
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
...

This is a link element, and it imports content into the document. There are two attributes, which I have emphasized so they are easier to see. Attributes are always defined as part of the start tag, and these attributes have a name and a value.

The names of the two attributes in this example are href and rel. For the link element, the href attribute specifies the content to import, and the rel attribute tells the browser what kind of content it is. The attributes on this link element tell the browser to import the bootstrap.min.css file and to treat it as a style sheet, which is a file that contains CSS styles.

Applying Attributes Without Values

Not all attributes are applied with a value; just adding them to an element tells the browser that you want a certain kind of behavior. Here is an example of an element with such an attribute (not from the example document; I just made up this example element):

...
<input class="form-control" required />
...

This element has two attributes. The first is class, which is assigned a value just like the previous example. The other attribute is just the word required. This is an example of an attribute that doesn’t need a value.

Quoting Literal Values in Attributes

Angular relies on HTML element attributes to apply a lot of its functionality. Most of the time, the values of attributes are evaluated as JavaScript expressions, such as with this element.

...
<td [ngSwitch]="item.done">
...

The attribute applied to the td element tells Angular to read the value of a property called done on an object that has been assigned to a variable called item. There will be occasions when you need to provide a specific value rather than have Angular read a value from the data model, and this requires additional quoting to tell Angular that it is dealing with a literal value, like this:

...
<td [ngSwitch]="'Apples'">
...

The attribute value contains the string Apples, which is quoted in both single and double-quotes. When Angular evaluates the attribute value, it will see the single quotes and process the value as a literal string.

Understanding Element Content

Elements can contain text, but they can also contain other elements, like this:

...
<thead>
 <tr>
 <th>Description</th>
 <th>Done</th>
 </tr>
</thead>
...

The elements in an HTML document form a hierarchy. The HTML element contains the body element, which contains content elements, each of which can contain other elements, and so on. In the listing, the thead element contains tr elements that, in turn, contain th elements. Arranging elements is a key concept in HTML because it imparts the significance of the outer element to those contained within.

Understanding the Document Structure

There are some key elements that define the basic structure of an HTML document: the DOCTYPE, HTML, head, and body elements. Here is the relationship between these elements with the rest of the content removed:

<!DOCTYPE html>
<html>
<head>
 ...head content...
</head>
<body>
 ...body content...
</body>
</html>

Each of these elements has a specific role to play in an HTML document. The DOCTYPE element tells the browser that this is an HTML document and, more specifically, that this is an HTML5 document. Earlier versions of HTML required additional information. For example, here is the DOCTYPE element for an HTML4 document:

...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
...