The Basics of HTML5.pdf

IN THIS CHAPTER »» Looking at the HTML5 document structure »» Identifying the basic HTML5 elements »» Formatting text...

IN THIS CHAPTER »» Looking at the HTML5 document structure »» Identifying the basic HTML5 elements »» Formatting text »» Using special characters »» Creating lists »» Working with tables Chapter 1 The Basics of HTML5 T he core of your web application is the HTML5 code you create to present the content to your site visitors. You need an understanding of how HTML5 works and how to use it to best present your information. This chapter describes the basics of HTML5 and demonstrates how to use it to create web pages. Diving into Document Structure The HTML5 standard defines a specific structure that you must follow when defining your web pages so that they appear the same way in all browsers. This structure includes not only the markups that you use to tell browsers how to dis- play your web page content, but also some overhead information you need to provide to the browser. This section explains the overall structure of an HTML5 program, and tells you what you need to include to ensure your clients’ browsers know how to work with your web pages correctly. Elements, tags, and attributes An HTML5 document consists of one or more elements. An element is any object contained within your web page. That can be headings, paragraphs of text, form CHAPTER 1 The Basics of HTML5 73  fields, or even multimedia clips. Your browser works with each element individu- ally, positioning it in the browser window and styling it as directed. You define elements in your web page by using tags. A tag identifies the type of element so the browser knows just how to handle the content it contains. The HTML5 specification defines two types of elements: »» Two-sided elements: Two-sided elements are the more common type of element. A two-sided element contains two parts: an opening tag and a closing tag. The syntax for a two-sided element looks like this: content The first element tag is the opening tag. It contains the element name, surrounded by the less-than symbol (), and defines the start of the element definition. The second tag is the closing tag; it defines the end of the element definition. It points to the same element name, but the name is preceded by a forward slash (/). The browser should handle any content between the two tags as part of the element content. For example, the HTML5 h1 element defines a heading like this: This is a heading The element instructs the browser to display the text This is a heading using the font and size appropriate for a heading on the web page. It’s up to the browser to determine just how to do that. »» One-sided elements: One-sided elements don’t contain any content and usually define some type of directive for the browser to take in the web page. For example, the line break element instructs the browser to start a new line in the web page: Because there’s no content, there’s no need for a closing tag. The older XHTML standard requires that one-sided tags include a closing forward slash character at the end of the tag, such as. This isn’t required by HTML5, but it’s supported for backward compatibility. It’s very common to still see that format used in HTML5 code. Besides the basic element definition, many elements also allow you to define attributes to apply to the element. Attributes provide further instructions to the browser on how to handle the content contained within the element. When you define an attribute for an element, you must also assign it a value. 74 BOOK 2 HTML5 and CSS3 You include attributes and their values inside the opening tag of the element, like this: content You can define more than one attribute/value pair for the element. Just separate them using a space in the opening tag: Attributes are commonly used to apply inline styles to elements: Warning!! The style attribute shown here defines additional styles the browser should apply to the content inside the element. In this example, the browser will change the font color of the text to red. Document type Every web page must follow an HTML or XHTML document standard so the browser can parse it correctly. The very first element in the web page code is the markup language standard your document follows. This element, called the document type, is crucial, because the browser has to know what standard to follow when parsing the code in your web page. You define the document type using the tag. It contains one or more attributes that define the markup language standard. Prior versions of HTML used a very complicated format for the document type definition, pointing the browser to a web page on the Internet that contained the standard definition. Fortunately, the HTML5 standard reduced that complexity. To define an HTML5 document, you just need to include the following line: The Basics of HTML5 When the browser sees this line at the start of your web page code, it knows to parse the elements using the HTML5 standard. If you omit the tag, the browser will still attempt to parse and pro- cess the markup code. However, because the browser won’t know exactly which standard to follow, it follows a practice known as quirks mode. In quirks mode, the browser follows the original version of the HTML standard, so newer elements won’t be rendered correctly. CHAPTER 1 The Basics of HTML5 75  Page definition To create an HTML5 web page, you just define the different elements that appear on the page. The elements fit together as part of a hierarchy of elements. Some ele- ments define the different sections of the web page, and other elements ­contained within those sections define content. The html element is at the top of the hierarchy. It defines the start of the entire web page. All the other elements contained within the web page should appear between the opening and closing tags: web page content Most Web pages define at least two second-level elements, the head and the body: head content body content The head element contains information about your web page for the browser. Con- tent contained within the head element doesn’t appear on the web page, but it directs things behind the scenes, such as any files the browser needs to load in order to properly display the web page or any programs the browser needs to run when it loads the web page. One element that’s commonly found in the head element content is the title, which defines the title of your web page: My First Web Page The web page title isn’t part of the actual web page, but it usually appears in the browser’s title bar at the top of the browser window or in the window tab if the browser supports tabbed browsing. The body element contains the elements that appear in the web page. This is where you define the content that you want your site visitors to see. The body element 76 BOOK 2 HTML5 and CSS3 should always appear after the head element in the page definition. It’s also important to close the body element before closing out the html element. Follow these steps to create and test your first web page: 1. Open the editor, program editor, or integrated development environ- ment (IDE) package of your choice. See Book 1, Chapter 3, for ideas on which tool to use. 2. Enter the following code into the editor window: My First Web Page This is text inside the web page. 3. Save the code to the DocumentRoot folder of your web server, naming it mytest.html. If you’re using the XAMPP server in Windows, the folder is c:\xampp\htdocs. For macOS, it’s /Applications/xampp/htdocs. 4. Start the XAMPP servers. 5. Open the browser of your choice, and enter the following URL: http://localhost:8080/mytest.html Note that you may need to change the 8080 port number specified in the URL to match your XAMPP Apache server set up (see Book 1, Chapter 2). Figure 1-1 shows the web page that this code produces. The Basics of HTML5 The head element defines the web page title, which as shown in Figure 1-1, appears in the web browser title bar. The body element contains a single line of text, which the browser renders inside the browser window area. You may notice that other than the special tag, all the other HTML tags I used are in lowercase. HTML5 ignores the case of element tags, so you can use uppercase, lowercase, or any combination of the two for the element names in the tags. The older XHTML standard requires all lowercase tags, so many web developers have gotten into the habit of using lowercase for tags, and more often than not, you’ll still see HTML5 code use all lowercase tag names. CHAPTER 1 The Basics of HTML5 77  FIGURE 1-1: The output for the sample web page. Page sections Web pages these days aren’t just long pages of content. They contain some type of formatting that lays out the content in different sections, similar to how a news- paper presents articles. In a newspaper, usually there are two or more columns of content, with each column containing one or more separate articles. In the old days, trying to create this type of layout using HTML was somewhat of a challenge. Fortunately, the HTML5 standard defines some basic elements that make it easier to break up our web pages into sections. Table 1-1 lists the HTML5 elements that you use to define sections of your web page. TABLE 1-1 HTML5 Section Elements Element Description article A subsection of text contained within a section aside Content related to the main article, but placed alongside to provide additional information div A grouping of similarly styled content within an article footer Content that appears at the bottom of the web page header Content that appears at the top of the web page nav A navigation area allowing site visitors to easily find other pages or related websites section A top-level grouping of articles 78 BOOK 2 HTML5 and CSS3  Although HTML5 defines the sections, it doesn’t define how the browser should place them in the web page. That part is left up to CSS styling, which I talk about in Chapter 2 of this minibook. When you combine the HTML5 section elements with the appropriate CSS3 styl- ing, you can create just about any look and feel for your web pages that you want. Although there’s no one standard, there are some basic rules that you can follow when positioning sections in the web page. Figure 1-2 shows one common layout that I’m sure you’ve seen used in many websites. FIGURE 1-2: A basic web page layout using HTML5 section elements. Just about every web page has a heading section at the top of the page that iden- tifies it to site visitors. After that, a middle section is divided into three separate areas. On the left side is often a navigation section, providing links to other pages in the website. On the right side is often additional information or, in some cases, advertisements. In the middle of the middle section is the meat of the content you’re presenting to your site visitors. Finally, at the bottom of the web page is a footer, often identifying the copyright information, as well as some basic contact information for the company. The div element is a holdout from previous versions of HTML. If you need to work The Basics of HTML5 with older versions of HTML, instead of using the named section elements, you need to use the tag, along with the id attribute to define a specific name for the section: content for the heading The CSS styles refer to the id attribute value to define the styles and positioning required for the section. You can still use this method in HTML5. Designers often use the div element to define subsections within articles that need special styling. CHAPTER 1 The Basics of HTML5 79  A WORD ABOUT WHITE SPACE Quite possibly the most confusing feature in HTML is how it uses white space. The term white space refers to spaces, tabs, consecutive spaces, and line breaks within the HTML code. By default, when a browser parses the HTML code, it ignores any white space between elements. So, these three formats all produce the same results: My First Web Page My First Web Page My First Web Page It's completely up to you which format to use for your programs, but I recommend choosing a format and sticking to it. That’ll make reading your code down the road easier, for you or anyone else. COMMENTING YOUR CODE Every programming language allows you to embed comments inside the code to help with documenting what’s going on. HTML is no different. HTML allows you to insert text inside the HTML document that will be ignored by the browser as it parses the text. To start a comment section in HTML, you use the following symbol: You can place anything between the opening and closing comment tags, including HTML code, and the browser will ignore it. However, be careful what you say in your comments, because they can be read by anyone who downloads your web page! 80 BOOK 2 HTML5 and CSS3  Now that you know how to define different sections of the web page, the next sec- tion discusses how to add content to them. Looking at the Basic HTML5 Elements After you define one or more sections in your web page, you’re ready to start defining content. Adding content to a web page is sort of like working on a car assembly line. You define each piece of the web page separately, element by ele- ment. It’s up to the browser to assemble the pieces to create the finished web page. This section covers the main elements that you’ll use to define content in your web page. Headings Normally, each new section of content in a web page will use some type of head- ing to make it stand out. Research shows that the first thing site visitors usually do when visiting a web page is to scan the main headings on the page. If you can’t attract their attention with your section headings, you may quickly lose them. HTML5 uses the h element to define text for a heading. It defines six different ­levels of headings. Each heading level has a separate tag: A level 1 heading A level 2 heading A level 3 heading A level 4 heading A level 5 heading A level 6 heading Although there are six levels of headings in the HTML5 standard, most sites don’t The Basics of HTML5 use more than two or three. The client browser determines the font, style, and size of the text it uses for each heading level. Figure 1-3 shows how the Chrome web browser interprets the six levels of headings. CHAPTER 1 The Basics of HTML5 81  FIGURE 1-3: Displaying all six heading levels in the Chrome web browser. The browser displays each heading level with a decreasing font size. By the time you get to the sixth heading level, it’s pretty hard to tell the difference between the heading and normal text on the web page! Text groupings There are several HTML5 elements that allow you to group text together into what are called block-level elements. The browser treats all of the content defined within the opening and closing tags of a block-level element as a single group. This allows you to use CSS to style or position the entire block of content as one piece, instead of having to style or position each element individually. You can group headings together using a new feature in the HTML5 standard called a heading group, using the hgroup element: This is the main heading. This is the subheading. The heading group doesn’t change the h1 or h2 elements, but it provides a way for the browser to interpret the two headings as a single element for styling and positioning. This allows you to use CSS styles to format them as a single block so they blend together like a main heading and a subheading. A web page consisting of sentences just strung together is boring to read and won’t attract very many site visitors (or may just put them to sleep). In print, we 82 BOOK 2 HTML5 and CSS3 group sentences of common thoughts together into paragraphs. You do the same thing in your web page content by using the p element: This is one paragraph of text. The paragraph contains two sentences of content. Notice that the p element uses an opening tag () and a closing tag () to mark the beginning and end of the grouped text. The browser treats all the text inside the p element as a single element. When you group the content together, you can apply styles and positioning to the entire block. Be careful with the p element, though. The rules of white space that apply to HTML tags also apply to text inside the p element. The browser won’t honor line breaks, tabs, or multiple spaces. So, if you have code like this: This is one line. This is another line. It will appear in the web page like this: This is one line. This is another line. All the extra spaces and the line break are removed from the content. Also, notice that the web browser adds a space between the two sentences. If you want to preserve the formatting of the text in the web page, use the pre element. The pre element allows you to group preformatted text. The idea behind preformatted text is that it appears in the web page exactly as you enter it in the code file: This is one line. The Basics of HTML5 This is another line. The browser will display the text in the web page exactly as it appears in the HTML5 code. Yet another method of grouping text is the blockquote element. The blockquote element is often used to quote references within a paragraph. The browser will CHAPTER 1 The Basics of HTML5 83  indent the text contained within the blockquote separate from the normal para- graph text: The only poem that I learned as a child was: Roses are red, violets are blue. A face like yours, belongs in the zoo. But that's probably not considered classic poetry. This feature helps you embed any type of text within content, not just quotes. Breaks Because HTML doesn’t recognize the newline character in text, there’s a way to tell the browser to start a new line in the web page when you need it. The single- sided br element forces a new line in the output: This is one line. This is a second line. Now the output in the web page will appear as: This is one line. This is a second line. Another handy break element is the hr element. It displays a horizontal line across the width of the web page section. Section 1 This is the content of section 1. Section 2 This is the content of section 2. The horizontal line spans the entire width of the web page block that contains it, as shown in Figure 1-4. Sometimes that’s a bit awkward, but you can control the width of the horizontal line a bit by enclosing it in a section and adding some CSS styling. 84 BOOK 2 HTML5 and CSS3  FIGURE 1-4: Using the hr ­element in a web page. Marking Your Text The opposite of block-level elements are text-level elements. Text-level elements allow you to apply styles to a section of content within a block. This section shows you the text-level elements you can apply to the content in your web page. Formatting text The text-level elements apply predefined formats to text without the need for CSS styling. The most popular of the text-level elements are the b and i elements, which apply the bold and italic styles, respectively: I wanted the large drink size. Text-level elements are also called inline, because they appear in the same line The Basics of HTML5 as the content. You can embed text-level elements to apply more than one to the same text: I wanted the large drink size. When applying two or more text-level elements to text, make sure you close the tags in the opposite order that you open them. HTML5 supports lots of different text-level elements for using different styles of text directly, without the help of CSS. Table 1-2 lists the text-level elements available in HTML5. CHAPTER 1 The Basics of HTML5 85 TABLE 1-2 HTML5 Text-Level Elements Element Description abbr Displays the text as an abbreviation b Displays the text as boldface cite Displays the text as a citation (often displayed as italic) code Displays the text as program code (often displayed with a fixed-width font) del Displays the text as deleted (often displayed with a strikethrough font) dfn Displays the text as a definition term (often displayed as italic) em Displays the text as emphasized (often displayed as italic) i Displays the text as italic ins Displays the text as inserted (often displayed with an underline font) kbd Displays the text as typed from a keyboard (often as a fixed-width font) mark Displays the text as marked (often using highlighting) q Displays the text as quoted (often using quotes) samp Displays the text as sample program code (often displayed with a fixed font) small Displays the text using a smaller font than normal strong Displays the text as strongly emphasized (often using boldface) sub Displays the text as subscripted sup Displays the text as superscripted time Displays the text as a date and time value var Displays the text as a program variable (often using italic) As you can see in Table 1-2, you have lots of options for formatting text without even having to write a single line of CSS code! Using hypertext In Book 1, Chapter 1, I mention that hyperlinks are the key to web pages. Hyper- links are what tie all the individual web pages in your website together, allowing site visitors to jump from one page to another. 86 BOOK 2 HTML5 and CSS3 The element that creates a hyperlink is the anchor text-level element. At first, that may sound somewhat counterintuitive — you’d think an anchor would keep you in one place instead of sending you someplace else. But think of it the other way around: The anchor element is what anchors another web page to your current web page. Following the anchor takes you to the other web page! Formatting a hyperlink Because the anchor element is a text-level element, you use it to mark text inside a block. That text then becomes the hyperlink. You add an anchor element using the tag. The anchor element is two-sided, so it has both an opening tag () and a closing tag (). The text inside the opening and closing tags becomes the hyperlink text. A few different attributes are available for the tag, but the most important one is the href attribute. The href attribute specifies where the hyperlink takes your site visitors: Click here to search. When a site visitor clicks the hyperlink, the browser automatically takes the visi- tor to the referenced web page in the same browser window. If you prefer, you can also specify the target attribute, which specifies how the browser should open the new web page. Here are your options for the target attribute: »» _blank: Opens the specified page in a new tab or window. »» _self: Opens the specified page in the current tab or window. This is the default behavior in HTML5, so it’s not necessary to add it unless you want to for clarification in your code. »» _parent: Opens the specified page in the parent window of a frame embed- ded within the window. Embedded frames aren’t popular anymore in HTML5, so this option is seldom used. The Basics of HTML5 »» _top: Opens the specified page in the main window that contains the frame embedded within other frames. This is seldom used. You use the target attribute like this: Click here to search. There’s no set rule regarding how to handle opening new web pages, but generally it’s a good idea to open other pages on your own website in the same browser tab or window, but open remote web pages in a new tab or window. That way your site visitors can easily get back to where they left off on your website if needed. CHAPTER 1 The Basics of HTML5 87  Displaying a hyperlink When you specify a hyperlink in the text, the browser tries to make it stand out from the rest of the text, as shown in Figure 1-5. FIGURE 1-5: Displaying hypertext in a document. By default, browsers will display the anchor element text using a different format than the rest of the block text: »» Unvisited links appear underlined in blue. »» Visited links appear underlined in purple. »» Active links are when you click an unvisited or visited link with your mouse. When you click your mouse, the link becomes active and appears underlined in red. You can change these formats to your own liking using CSS styles, as I explain in the next chapter. Specifying a hyperlink The href attribute defines the location of the web page that you want the browser to open for your site visitor, but there are a few different formats you can use to specify that location: 88 BOOK 2 HTML5 and CSS3  »» A different location on the same document »» A separate web page in the same website »» A web page in a remote website You can use hyperlinks to force the browser to jump to a specific location inside the same web page. This is handy for long web pages that require lots of scrolling to get to sections at the bottom of the page. To use this method, you must first identify the locations in the web page by applying the id attribute to a block-level element, such as a heading or a paragraph element: Chicago News To create an anchor element to jump to that section, you use the id attribute value, preceded by a number sign or hash mark (#): See Chicago News When the site visitor clicks the link, the browser automatically scrolls to place the section in the viewing area of the window. When jumping to another web page on the same server, you don’t need to include the full http:// address in the href attribute. Instead, you can specify a relative address. The relative address isn’t where your uncle lives; it’s shorthand for find- ing another file on the same web server. If the file is in the same folder on the same server, you can just specify the filename: Shop in our online store. You can also place files in a subfolder under the location of the current web page. To do that, specify the subfolder without a leading slash: Shop in our online store. The Basics of HTML5 In both cases, the browser will send an HTTP request to retrieve the file to the same server where it downloads the original page from. To specify a web page on a remote website, you’ll need to use an absolute address. The absolute address specifies the location using the Uniform Resource Locator (URL), which defines the exact location of a file on the Internet using the follow- ing format: protocol://host/filename CHAPTER 1 The Basics of HTML5 89  The protocol part specifies the network protocol the browser should use to download the file. For web pages, the protocol is either http (for unencrypted connections) or https (for encrypted connections). The host part specifies the host name, such as www.google.com for Google. The filename part specifies the exact folder path and filename to reach the file on the server. If you omit the file- name, the remote web server will offer the default web page in the folder (usually, index.html). You can also specify local filenames using an absolute path address. Just pre- cede the folder name with a forward slash (/). The leading forward slash tells the server to look for the specified folder at the DocumentRoot location of the web server, instead of in a subfolder from the current location. Working with Characters No, I’m not talking about Disneyland. I’m talking about the letters, numbers, and symbols that appear on your web pages. Humans prefer to see information as letters, words, and sentences, but computers prefer to work with numbers. To compensate for that, programmers developed a way to represent all characters as number codes so computers can handle them. The computer just needs a method of mapping the number codes to characters. Character sets The character-to-number mapping scheme is called a character set. A character set assigns a unique number to every character the computer needs to represent. In the early days of computing in the United States, the American Standard Code for Information Interchange (ASCII) became the standard character set for mapping the English-language characters and symbols in computers. As the computing world became global, most programs needed to support more than just the English language. The Latin-1 and ISSO 8859-1 character sets became popular, because they include characters for European languages. But that still didn’t cover everything! Because it’s supported worldwide, the HTML5 standard required more than just European-language support. The Unicode character set supports characters from all languages of the world; plus, it has room for expansion. Because of its huge size, though, a subset of Unicode, called UTF-8, became more popular. UTF-8 also supports all languages, but with a smaller footprint; it has become the standard for HTML5. 90 BOOK 2 HTML5 and CSS3 Although the HTML5 standard specifies a default character set, it’s a good idea to specify the character set in your web pages so that you’re sure the client browser is using the same character set to interpret your content. You do that using the meta element. Because the meta element provides additional information about your web page, you have to place it inside the head element section of the HTML code. The meta element uses the single-sided tag. To specify the character set in HTML5 you use the following format: If your HTML code requires a different character set, you specify it here. The tag allows you to specify other features of your web page to the browser so that it knows how to process the body of the web page, and identify the content of the web page to servers that automatically scan your web pages for search engines. I talk some more about the tag in Book 4, Chapter 4. Special characters The UTF-8 character set supports lots of fancy characters that you won’t find on your keyboard, such as the copyright symbol (©), the cent symbol (¢), and the degree symbol (°). These are commonly referred to as special characters. You can use special characters in your web page content because they’re valid UTF-8 characters. You just need to use a different way of specifying them. Instead of typing these characters using your keyboard, you use a code to specify them. HTML5 uses two types of codes to specify special characters: »» Numeric character reference: The numeric character reference uses the UTF-8 numeric code assigned to the character. Place an ampersand (&) and a hash (#) in front of the character number, and a semicolon (;) after the The Basics of HTML5 character number. For example, to display the copyright symbol, use the following: © »» Character entity reference: The character entity reference uses a short name to represent the character. Place an ampersand (&) in front of the character short name, and a semicolon (;) after the character short name: © CHAPTER 1 The Basics of HTML5 91  Both methods work equally well, so use whichever method you’re most comforta- ble with. The list of special characters available in UTF-8 is pretty long, so I won’t include them here. If you search the web for UTF-8 characters, you’ll find plenty of websites that show the mappings between the UTF-8 numbers and character short names. Making a List (And Checking It Twice) The world is full of lists — to-do lists, wish lists, grocery lists... the list just goes on and on. It’s no surprise that the HTML5 developers created a way to easily present lists in web pages. There are three basic types of lists available for you to use in HTML5: unordered lists, ordered lists, and description lists. This section covers how to use each type of list in your web pages. Unordered lists Some lists have no specific order to the items contained in them (like a grocery list). In the word-processing world, these are called bulleted lists, as each item in the list is preceded by a generic bullet icon. In HTML5, they’re referred to as unordered lists. The HTML5 standard uses the ul element to display an unordered list using bullets. The ul element is a two-sided element, so you use the tag to open the list and the tag to close the list. You must identify each item in the list using the li element. The li element is also a two-sided element, so you use the tag to open each item description and the tag to close it. The overall structure for an unordered list looks like this: item1 item2 item3 Because HTML5 doesn’t care about white space in code, it’s common to indent the list items in the definition as shown here, to help make it easier to read the code. However, indenting isn’t necessary. Figure 1-6 shows the default way most browsers display unordered lists in the web page. 92 BOOK 2 HTML5 and CSS3  FIGURE 1-6: Displaying an unordered list. The bullet marks are fairly generic, similar to what you’d see in most word- processing documents. Fortunately, you can spice things up a little using CSS by defining different types of bullets to use. Ordered lists Some lists have a specific order in which the items should appear and be processed. In word-processing, these lists are called numbered lists. In HTML5, they’re called ordered lists. The HTML5 standard uses the ol element to display an ordered list. The ordered list also uses the li element to mark the individual items contained in the list: Walk the dog. The Basics of HTML5 Eat breakfast. Read the paper. Get ready for work. By default, browsers assign each item in the list a number, starting at 1, and increasing for each list item, as shown in Figure 1-7. CHAPTER 1 The Basics of HTML5 93  FIGURE 1-7: The display default for an ordered list. If you want the list to be in reverse order, add the reversed attribute: If you’d like to start at a different number, add the start attribute, and specify the starting number as the value: If you don’t want to use numbers, there are a few other options available with the type attribute. Table 1-3 shows the different ordered list types available. TABLE 1-3 Ordered List Types Type Description 1 Numerical list (the default) A Alphabetical list, using uppercase a Alphabetical list, using lowercase I Roman numerals, using uppercase i Roman numerals, using lowercase 94 BOOK 2 HTML5 and CSS3 As you can probably guess, you can also embed lists within lists: First item Item 1, Subitem 1 Item 1, Subitem 2 Second item Item 2, Subitem 1 Item 2, Subitem 2 When using embedded lists, it’s very important to match up the opening and clos- ing tags for each item in the list, as well as the lists themselves. Any mismatches will confuse the browser and will cause unpredictable results. Description lists Another common use of lists is to provide descriptions for terms, such as a glos- sary. The HTML5 standard uses description lists to provide an easy way to do that. Description lists use the dl element to define the list but use a slightly different method of defining the items in the list than the unordered and ordered lists. The description list breaks the items into terms and descriptions. You define a term using the dt two-sided element and the associated description using the dd two- sided element. Because it’s important to match the correct term with the correct description, be careful to alternate between the two in the list definition: The Basics of HTML5 Baseball A game played with bats and balls Basketball A game played with balls and baskets Football A game played with balls and goals Figure 1-8 shows how this table is rendered in the browser. CHAPTER 1 The Basics of HTML5 95  FIGURE 1-8: Displaying a description list. The browser automatically separates the terms from the descriptions in the dis- play, making it easier to tell which is which. Building Tables No, don’t get out your hammer and saw. I’m talking about data tables. The world is filled with data, and a very common use of web pages is to present that data to the world. This section describes the data table features built into HTML5 that you can use to easily present your data. The general process for creating a table involves three steps: 1. Define the table element. 2. Define the table rows and columns. 3. Define the table headings. This section walks through each of these steps to show you how to create tables for your data. Defining a table To add a table to your web page, you start out with the HTML5 table element. The table element is a two-sided element, so it opens with a tag and closes with a tag: 96 BOOK 2 HTML5 and CSS3  That creates the table, but it’s not too exciting because there’s nothing in it yet. The next step is to define cells for the data. Prior versions of HTML added attributes to the tag to define the table appearance, such as the border type, cell spacing, and width. HTML5 has dropped all these attributes, so avoid using them if possible. You should now define those features using CSS styles instead. Defining the table’s rows and columns If you’re familiar with standard spreadsheet software, such as Microsoft Excel or Apple Numbers, you’re used to defining tables using cells, referenced by letters (for the columns) and numbers (for the columns). Unfortunately, HTML5 uses a different method for defining table cells. To build the cells in a table you must define two separate elements: »» A row in the table: You use the tr element to define the row inside the table. The tr element is a two-sided element, so you use the tag to open a row and the tag to close the row. »» The cell inside the row: Inside the row you use the td element to define individual cells. Again, the td element is two-sided, so you use the tag to open a cell and the tag to close a cell. So, with all that info, you can create your first table. Just follow these steps: 1. Open your text editor, program editor, or IDE package and type the following code: The Basics of HTML5 My First Table Bowling Scores CHAPTER 1 The Basics of HTML5 97  Bowler Game 1 Game 2 Game 3 Average Rich 100 110 95 102 Barbara 110 105 103 106 Katie 120 125 115 120 Jessica 115 120 120 118 2. Save the file in the XAMPP DocumentRoot folder as mytable.html. 3. Make sure the XAMPP servers are running. 98 BOOK 2 HTML5 and CSS3  4. Open your browser and enter the following URL: http://localhost:8080/mytable.html You may need to change the 8080 port number in the URL to match the Apache web server in your setup. When you display the web page it should look like Figure 1-9. FIGURE 1-9: Displaying the table in Chrome. By default, the table doesn’t contain any gridlines, but you can change that using CSS, as you see in the next chapter. Also, the table column headings appear just like the data rows. You fix that next. Defining the table headings The Basics of HTML5 You can apply special formatting to table headings without the use of CSS by using the th element instead of the td element for the heading cells: Bowler Game 1 Game 2 Game 3 Average CHAPTER 1 The Basics of HTML5 99  The th element causes the browser to display the heading cells using a bold font. Often, in tables, you’ll run into situations where a data cell must span two or more columns or rows. You can emulate that in your HTML5 tables using the rowspan and colspan attributes in the tag. To span two or more rows in a single data cell, just add the rowspan attribute, and specify the number of rows to span. For example, if all the bowlers had the same score in the first game, you could do this: Rich 100 110 95 102 Now the second cell will span the next four rows in the table. Remember, though, when entering data for the other three rows, you must omit the first cell of data, because the first row will take up that space, as shown in Figure 1-10. FIGURE 1-10: Using the rowspan attribute in a table. 100 BOOK 2 HTML5 and CSS3  Likewise, if one of the bowlers had the same score in all three games, you could use the colspan attribute to combine all three columns into one cell: Katie 120 Now the second cell in the row will span all three data columns for that row, as shown in Figure 1-11. FIGURE 1-11: Using the colspan attribute in a table. The Basics of HTML5 CHAPTER 1 The Basics of HTML5 101