The container elements are by far the most common type. They apply formatting content nested between the tags start and end. • autonomous elements do not turn On or Off. Instead, they insert something, as an image in a page. One example is the element
, which inserts a line break in a page. autonomous elements do not come as a couple, container elements do, and you can hear them called empty elements because you can not put any text inside. In this book, all autonomous elements include a slash before> closing a bit like an opening tag and closing all in one. You’ll see a line break written as
. This form, called the empty element syntax is useful because it clearly separates the components containing autonomous elements. This way, you’ll never be confused. Note: In a not so distant past, web developers were forced to use the empty element syntax, because it was an official part of the XHTML language. However, this convention is optional and allows HTML5 autonomous elements use the same syntax as the start tags (which means you can use
to insert a line break, for example). Figure 2-5 provides two types of elements in perspective. Figure 2-5: Top: This snippet of HTML shows both a container element and an autonomous element. Bottom: The browser displays the resulting Web page. Just do it.
Just say no. This container element bold a word This autonomous element inserts a line break Chapter 2: Creating your first page 29 HTML tags Elements nesting In the previous example, you apply a simple item to get bolding. You put the text you want bold and between tags. However, text is not the only thing you can put between a start and end tag. You can also nest an element in another. In fact, elements of nesting is a basic buildingblock techniques of web pages. Nesting allows you to apply more detailed instructions for formatting text (for example, it allows you to create bold, italic) by combining all the elements you need in the same instruction set. You can also nest elements to create components for more complex page, such as bulleted lists. To see a nest in action, you need something else to work with. For the following example, consider both the familiar element, which italicizes text. The question is what happens if you want a piece of text bold and italic? HTML does not include a single element to this, so you need to combine two. Here’s an example: This word italic and bold. When a browser to chew through this piece of HTML code, it produces a text that resembles what: This word was in italics and bold. Moreover, it does not matter if you reverse the order of . The Following HTML produced exactly the same result. This word italic and bold. However, you should always make sure you close the tags in reverse order which you opened them. In other words, if you apply in italics and bold formatting, you must disable bolding first, then italic formatting. Here’s an example that violates this rule: This word italic and bold. Browsers can generally resolve this issue and make a good guess on what you really want, but it’s still a dangerous habit that you write more complex HTML. As you will see in later chapters, HTML gives you more ways to elements of the nest. For example, you can nest nest an element inside another, then another element Within the latter, and so on indefinitely.