Читать книгу HTML5, JavaScript, and jQuery 24-Hour Trainer - Cameron Dane - Страница 14
Part I
HTML and CSS
Lesson 1
Introduction to HTML5
Understanding Elements and Attributes
ОглавлениеEven though the examples you have created are very simple, you can already see that elements can be nested inside one another, and as a result, create a tree-like structure.
Every HTML document has a single top-level element, which is always the html element (the document type element is not part of the document as such).
In addition, every element in the document can have zero or more children. The html element has two children: head and body. The head element in turn has a child of its own: the meta element.
Every element in the document (except the html element) has one (and only one) parent. The parent of the head element is the html element. The parent of the meta element is the head element.
As you will see, the structure of pages will become considerably more complex, and the degrees of nesting will increase enormously. No matter how complex the pages become, however, all the elements will follow these simple rules.
You have examined how elements consist of an opening and closing tag; for instance the opening of the head tag is <head> while the closing is an identically named tag preceded by a forward slash </head>.
Some elements do not require any content: The tag and its attributes provide all the information that is required. In this case, the start and the end tag can be combined into the following construct:
The forward slash before the end of the tag indicates that the tag is being closed. This is the direct equivalent of the following:
You should always ensure that all tags are closed in the reverse order they are opened. For example, you should never write markup as follows:
In this case, the strong element is supposed to be the child of the p element, but the p element ends before the strong element.
Note
The
strongtag is used to indicate that a piece of text is important. Although this is often confused with the now deprecatedboldtag, it is, in fact, still a valid HTML5 tag. This tag is not considered a presentation tag because it indicates that text is important, not how this text should be styled. You may decide thatstrongelements are colored red rather than with a bold font.
If you add this to your template.html file before the ending body tag, and then view the normalized structure in Chrome, you will notice that the browser has rearranged these tags, as you can see in Figure 1.5.
Although the HTML5 specification does have rules for fixing up your mistakes, it is generally best not to make mistakes in the first place because the rules of the HTML5 specification may not be what you intended.
I generally find it best to write tags in lowercase. As it turns out, tag names are entirely case insensitive because they are automatically converted to lowercase in the DOM. The following is therefore valid, but should be avoided for obvious readability reasons:
The final feature I will cover in this lesson is attributes. You have already seen two examples of attributes, on the html tag and on the meta tag. Many other tags also support attributes, and you will examine these throughout the book.
Attributes often consist of a name/value pair. When an attribute has a value, the value can either be included in single or double quotes. The following are equivalent:
A tag can contain more than one attribute, in which case they are simply separated by white space:
Additionally, some attributes do not have a value. These are referred to as Boolean attributes. The presence of the attribute is all that is required. For instance:
In this case, the attribute is called read-only, but the presence of the attribute is enough to indicate that the element is read-only. It is still possible to add a value to a Boolean attribute, but it has no meaning. For instance, the following input field is still read-only:
Attribute names should also be written in lowercase (because this is how they will be represented in the DOM). Generally attribute names will also use hyphens if they contain more than one word.
