We have our content saved in an .html document in Tutorial.3—now we’re ready to start marking it up.
An HTML element is an individual component of an HTML document. It represents semantics, or meaning. For example, the title element ( ) represents the title of the document.
Most HTML elements are written with a start tag (or opening tag) and an end tag (or closing tag), with content in between, for example start tag of paragraph is
and closing tag is
. Elements can also contain attributes that defines its additional properties. For example, a paragraph, which is represented by the p element, would be written as:
this is a first paragraph
you saw examples of HTML elements with an opening tag (
for a paragraph, for example) and closing tag (
). Before we start adding tags to our document, let’s look at the anatomy of an HTML element (its syntax) and firm up some important terminology. A generic container element is labeled in Figure 4-1.
Figure 4-1. The parts of an HTML container element.
Elements are identified by tags in the text source. A tag consists of the element name (usually an abbreviation of a longer descriptive name) within angle brackets (< >). The browser knows that any text within brackets is hidden and not displayed in the browser window.
The element name appears in the opening tag (also called a start tag) and again in the closing (or end) tag preceded by a slash (/). The closing tag works something like an “off” switch for the element. Be careful not to use the similar backslash character in end tags (see the tip below “Slash vs. Backslash”).
Slash vs. Backslash
HTML tags and URLs use the slash character (/). The slash character is found under the question mark (?) on the standard QWERTY keyboard. It is easy to confuse the slash with the backslash character (\), which is found under the bar character (|). The backslash key will not work in tags or URLs, so be careful not to use it.
Figure 4-2. The minimal structure of an HTML document.
Figure 4-2. Shows the recommended minimal skeleton of an HTML5 document. I say “recommended” because the only element that is required in HTML is the title. But I feel it is better, particularly for beginners, to explicitly organize documents with the proper structural markup. And if you are writing in the stricter XHTML, all of the following elements except meta must be included in order to be valid. Let’s take a look at what’s going on in Figure 4-2.
1 :- I don’t want to confuse things, but the first line in the example isn’t an element at all; it is a document type declaration (also called DOCTYPE declaration) that identifies this document as an HTML5 document. I have a lot more to say about DOCTYPE declarations in Chapter 7, What’s Up, HTML5?, but for this discussion, suffice it to say that including it lets modern browsers know they should interpret the document as written according to the HTML5 specification.
2 :- The entire document is contained within an html element. The html element is called the root element because it contains all the elements in the document, and it may not be contained within any other element. It is used for both HTML and XHTML documents.
3 :- Within the html element, the document is divided into a head and a body. The head element contains descriptive information about the document itself, such as its title, the style sheet(s) it uses, scripts, and other types of “meta” information.
4 :- The meta elements within the head element provide information about the document itself. A meta element can be used to provide all sorts of information, but in this case, it specifies the character encoding (the standardized collection of letters, numbers, and symbols) used in the document. I don’t want to go into too much detail on this right now, but know that there are many good reasons for specifying the charset in every document, so I have included it as part of the minimal document structure.
5 :- Also in the head is the mandatory title element. According to the HTML specification, every document must contain a descriptive title.
6 :- Finally, the body element contains everything that we want to show up in the browser window.
Are you ready to add some structure to the Black Goose Bistro home page? Open the index.html document and move on to Exercise 4.1
Exercise 4-1 | Adding basic structure
1 :- Open the newly created document, index.html, if it isn’t open already.
2 :- Start by adding the HTML5 DOCTYPE declaration: <!DOCTYPE html>
3 :- Put the entire document in an HTML root element by adding an <html> start tag at the very beginning and an end </html> tag at the end of the text.
4 :- Next, created the document head that contains the title for the page. Insert <head> and </head> tags before the content. Within the head element, add informatino about the character encoding <meta charset=”utf-8″>, and the title, “Black Goose Bistro”, surrounded by opening and closing <title> tags.
The correct terminology is to say that the title element is nested within the head element. We’ll talk about nesting more in later chapters. 5
5 :- Finally, define the body of the document by wrapping the content in <body> and </body> tags. When you are done, the source document should look like this (the markup is shown in color to make it stand out):
<!DOCTYPE html> <html>
<meta charset =”utf-8″>
<title>Black Goose Bistro</title>
Black Goose Bistro
The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients.
You have fun… we’ll do the cooking. Black Goose catering can handle events from snacks for bridge club to elegant corporate fundraisers.
Location and Hours
Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight
6 :- Save the document in the bistro directory, so that it overwrites the old version. Open the file in the browser or hit “refresh” or “reload” if it is open already. Figure 4-3 shows how it should look now
Not much has changed after structuring the document, except that the browser now displays the title of the document in the top bar or tab. If someone were to bookmark this page, that title would be added to his Bookmarks or Favorites list as well (see the below Don’t Forget a Good Title). But the content still runs together because we haven’t given the browser any indication of how it should be structured. We’ll take care of that next.
Don’t Forget a Good Title-
Not only is a title element required for every document, it is quite useful as well. The title is what is displayed in a user’s Bookmarks or Favorites list and on tabs in desktop browsers. Descriptive titles are also a key tool for improving accessibility, as they are the first thing a person hears when using a screen reader. Search engines rely heavily on document titles as well. For these reasons, it’s important to provide thoughtful and descriptive titles for all your documents and avoid vague titles, such as “Welcome” or “My Page.” You may also want to keep the length of your titles in check so they are able to display in the browser’s title area. Another best practice is to put the part of the title with more specific information first (for example, the page description ahead of the company name) so that the page title is visible when multiple tabs are lined up in the browser window.