The best place to start is to look at an HTML document. From this, you can see the basic structure and hierarchy that all HTML documents follow. Listing 4-1 shows the simple HTML document that I used in Chapter 2. This isn’t the first listing that I showed you in that chapter but comes a little later when I added the basic support for AngularJS. To prepare for this chapter, I saved the elements shown in the listing to the todo.html file in the angularjs directory set up in Chapter 2.
Listing4-1. The Contents of the todo.html Document
<!DOCTYPE html>
<html ng-app=”todoApp”>
<head>
<title>TO DO List</title>
<link href=”bootstrap.css” rel=”stylesheet” />
<link href=”bootstrap-theme.css” rel=”stylesheet” />
<script src=”angular.js”></script>
<script>
var todoApp = angular.module(“todoApp”, [])j
</script>
</head>
<body>
<div class=”page-header”>
<h1>Adam’s To Do List</h1>
</div>
<div class=”panel”>
<div class=”input-group”>
<input class=”form-control” />
<span class=”input-group-btn”>
<button class=”btn btn-default”>Add</button>
</span>
</div>
<table class=”table table-striped”>
<thead>
<tr>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr><td>Buy Flowers</td><td>No</td></tr>
<tr><td>Get Shoes</td><td>No</td></tr>
<tr><td>Collect Tickets</td><td>Yes</td></tr>
<tr><td>Call Joe</td><td>No</td></tr>
</tbody>
</table>
</div>
</body>
</html>
As a reminder, Figure 4-1 shows you how the browser displays the HTML elements that the document contains.
1. Understanding the Anatomy of an HTML Element
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:
…
<h1>Adam’s To Do List</h1>
…
As illustrated by Figure 4-2, 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 hi, and it tells the browser that the content between the tags should be treated as a top-level header. 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 (<).
2. Understanding Attributes
You can provide additional information to the browser by adding attributes to your elements. Listing 4-2 shows an element with an attribute from the example document.
Listing 4-2. Defining an Attribute
…
<link href=”bootstrap.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 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.css file and to treat it as a style sheet, which is a file that contains CSS styles.
Not all attributes require a value; just defining them sends a signal to the browser that you want a certain kind of behavior associated with the element. Listing 4-3 shows an example of an element with such an attribute (not from the example document; I just made up this example element).
Listing 4-3. Defining an Attribute That Requires No Value
…
<input name=”snowdrop” value=”0″ required>
…
This element has three attributes. The first two, name and value, are assigned a value like with the previous example. (This can get a little confusing. The names of these attributes are name and value. The value of the name attribute is snowdrop, and the value of the value attribute is 0.) The third attribute is just the word required. This is an example of an attribute that doesn’t need a value, although you can define one by setting the attribute value to its name (required=”required”) or by using the empty string (required=””).
3. Understanding Element Content
Elements can contain text, but they can also contain other elements. Here is an example of an element that contains other elements:
…
<thead>
<tr>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
…
The elements in an HTML document form a natural hierarchy. The html element contains the body element, which contains content elements, each of which can contain other elements, and so on. The thead element contains tr elements that, in turn, contain th elements. Nesting elements like this is a key concept in HTML because it imparts the significance of the outer element to those contained within.
4. Understanding Void Elements
The HTML specification includes elements that may not contain content. These are called void or self-closing elements, and they are written without a separate end tag. Here is an example of a void element:
…
<input class=”form-control” />
…
A void element is defined in a single tag, and you add a / character before the last angle bracket (the > character).
5. Understanding the Document Structure
There are some key elements that define the basic structure of any HTML document: the DOCTYPE, html, head, and body elements. Listing 4-4 shows the relationship between these elements with the rest of the content removed.
Listing 4-4. The Basic Structure of an HTML Document
<!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”>
…
The html element denotes the region of the document that contains the HTML content. This element always contains the other two key structural elements: head and body. As I explained at the start of the chapter, I am not going to cover the individual HTML elements. There are too many of them, and describing HTML5 completely took me more than 1,000 pages in my HTML book. That said, I will provide brief descriptions of the elements I used in the todo.html file to help you understand how elements tell the browser what kind of content they represent. Table 4-2 summarizes the elements used in the example document from Listing 4-1.
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.