Class 2 – Common XHTML Elements
By now, you have no doubt been perusing the various XHTML elements and trying to understand how they all fit together to make a web page. Be warned that until we cover CSS, you won’t be able to make anything especially pretty out of them. But you should still understand what the elements are, what they do, how to code them, and what they look like without style sheets applied. Here are examples of the most commonly used elements out of the full list of XHTML elements available on http://w3schools.com. You should get to know these elements well:
<a>
This is the tag to use to make a link. “a” stands for “anchor”. The designers of HTML thought of hypertext links as having two anchors (as in ships dropping anchors): one at the origin, and one at the destination. So a link ties two anchors together. A link in one document can point to another document, but it can also point to another part of the same document.
The following example shows a link from one document to another. It belongs inside of the <body> tag of an XHTML document, of course. When a user clicks this link, the browser will load the web page specified in the “href” attribute:
<a href="http://wd.onepotcooking.com">Click to go to the best web development blog around</a>
This code would display as:
anchor "a" tag example
And this example shows how to link from one part of a document to another part of the same document. In this case, the destination for the anchor is an “a” element with an attribute “name” that is set to “second_part”. If a user clicks this link, the browser window will automatically scroll to the destination anchor:
<a href="#second_part">Jump to the second part</a> <!-- some other content on the web page --> <a name="second_part"> This anchor does not appear as what you would normally think of as a link. Notice it has no href attribute. But if the user clicks the link above, the browser will automatically scroll to this part of the page. </a>
Anchors are “inline elements” (see the “div” and “span” section below for an explanation of inline vs. block elements).
<body>
You already know this tag. It is one of two (and only two) direct descendants of the “html” tag (the other being the “head” element). Content within the “body” tag generally represents content that is visible to end-users on the web page.
<br />
The “br” tag represents a line-break on the web page. Normal text line breaks do not show up in the browser, so you must use the “br” tag instead whenever you intend to show a line break to the user. Note to you old-school HTMLers, <br> (without the ” />” at the end) does not exist in our vocabulary – al XHTML elements must have both openings and closings.
<div> and <span>
Behind the scenes, browsers lump elements into two basic categories: “block elements” and “inline elements“. The “div” and “span” tags are identical except that “div” is a block element, while “span” is an inline element.
Block elements take a rectangular shape, and by default, they have implicit line breaks both before and after them on the page. For example, an “h1″ element is a block element. If you create an “h1″ tag in the “body” section of your code, it will display in the browser as a rectangular shape that takes up the whole width of the page, even if the width of the content within them is very small. You may not notice this behavior unless you put a background color or border around the “h1″. When we get familiar with style sheets, we will do just that, and you will see clearly that the “h1″ element is a rectangle that takes up the full width of the browser window. By default, it will be separated from the content above and below it by line breaks.
"h1" and "p" tags with borders applied, showing their default "block" shape
Unlike block elements, inline elements do not have implicit line breaks before or after them, and they only take up as much width as is necessary to display them on the page. Anchor tags are an example of an inline element. They appear in line with whatever elements precede and follow them, hence their name “inline”.
"a" tag with border applied to show its default "inline" shape
So “div” is a generic block element, and “span” is a generic inline element. The “div” stands for “division”. If you want to create a rectangular shaped division on your page, or a big rectangular area that contains other elements inside of it, then “div” is for you. If you want to create an element or a grouping of other elements that does not require a rectangular shape and separation from the content above and below it in the code, then “span” is best.
<form>, <input>, <option>, <select>, <label>, <textarea>
These are elements related to forms that users can fill out on a page.
The “form” element must be the parent element of all the other form elements, meaning that the other form elements go inside of the “form” tag in your code. For example:
<form action="some_script.php">
<label for="first_name">Enter your first name:</label>
<input type="text" id="first_name" name="first_name" />
<br />
<label for="state">Select your home state:</label>
<select id="state" name="state">
<option value="NY">New York</option>
<option value="NY">New Jersey</option>
<option value="NY">Connecticut</option>
</select>
<br />
<input type="submit" value="Submit Form" />
</form>
This code would display like this in the browser:
Default look of form elements
This code creates a form with a text box where users could fill in their first name, as well as a drop-down list of states that the users could select from. As you can see, the “select” tag indicates that we want to present the user with a chioce of several “options”. So the “option” tags are child tags, nested inside of the “select” tag.
Also notice that we are using the “input” tag twice: once for the text box where users can enter their first name, and again for the submit button. The input tag has several different types, indicated by the “type” attribute. The available types are “button”, “checkbox”, “file”, “hidden”, “image”, “password”, “radio”, “reset”, “submit”, and “text”. We will cover each of these in more detail when we start dealing with PHP.
Note that the “form” tag itself is a block element, while the other tags that go inside of it are all “inline” elements, which is why we have put “br” tags around them to put them each on a new line.
<h1> to <h6>
These are elements used to display headings. “h1″ is the largest, highest-level, heading. “h6″ is the smallest, lowest-level heading.
<head>
The “head” tag is one of two children of the “html” tag. And it is required to have one “title” tag as a child. As you no-doubt understand well by now, it is the place where you will put instructions to the browser that are invisible to the user, such as style sheets, javascripts, metadata, and other such elements that are invisible to the user.
<html>
The “html” tag is the “root element” of all the other XHTML elements in a web page. It indicates to the web browser that this is an HTML document.
<iframe>
The “iframe” element is used to include one web page within another. The word “iframe” stands for “inline frame”. If you think of a browser windows as a “frame”, you’ll understand that this element puts one window inside another. As the name suggests, the contents of the embedded web page are displayed inline with the contents preceding and following it. So a page you create can, for example, show a box with the contents of another site.
An example of an iframe showing part of the NYU homepage
<img>
As you know, the “img” element is used to display images. It has one required attribute, “src”, which specifies the path to the location of the actual image file.
<link>
The “link” element goes inside the “head” element, and is used to create a reference to an external document. It is an empty element (which means it must close with ” />”), and is used almost exclusively for loading external CSS stylesheets into the current document. The usual syntax for “link” tags is as follows:
<link rel="stylesheet" type="text/css" href="main.css" />
<object>, <param>, and <embed>
The “object” and “embed” tags are used to load objects from external files into the current page. Common objects loaded in such a way are Flash applications, Java Applets, videos, and ActiveX controls. When you see a video on a web page, most likely it was put there using an “object” tag. We will use this object primarily for Flash applications, including Flash video players.
The “object” tag is a proper XHTML element, while the “embed” tag is not officially supported. However, for historical browser compatibility reasons, you will generally see these tags used in tandem, where the “object” tag has a nested “embed” tag within it. Browsers that support the “object” tag will ignore the “embed” tag, and vice-versa.
Here is an example of the “object” ad “embed” tags from YouTube. You can copy and paste this code into your own page in order to display this video:
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/VVXtawJXcbg&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed
src="http://www.youtube.com/v/VVXtawJXcbg&hl=en&fs=1"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
width="425"
height="344">
</embed>
</object>
Notice that the “object” tag has nested “param” tags that allow you to pass variables from the current page to the external object file. The “embed” tag uses attributes to the same end.
<ol>, <ul>, and <li>
The “ol” and “ul” tags are used to create “ordered lists” and “unordered lists” respectively. “li” tags are used to create a “list item” within either kind of list. For example, the following code:
<ol> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ol>
wil display something like the following:
An ordered list
While using an “ul” to display an unordered list instead of an “ol”, will change the numbers to bullet points:
An unordered list
<p>, <pre>, and <strong>
The “p”, “pre”, and “strong” tags are all used to mark up text.
“p” stands for “paragraph”, and is used to indicate a paragraph of text. It is a block element.
“pre” stands for “preformatted text”, and is used to display text where each space and line break is meant to be displayed. Remember that spaces and line breaks in plain text are usually ignored by the web browser. Wrapping your text inside of a “pre” tag overrides this behavior. All the code snippets in this document are written inside “pre” tags.
This is some preformatted text This new line did not require a <br /> tag Spaces are all displayed inside pre tags !
“strong” is used to emphasize certain parts of text. By default, the browser will display any text within a “strong” tag as bold.
Note to old-school HTML programmers: there is no such thing as a <b> tag in XHTML. Neither is there an <i> tag. So do not use them ever.
<script>
The script tag is used to load JavaScript into the current document. It can either be used to load an external javascript file into the current document, or to declare JavaScript that is defined within the same document. The syntax for using a “script” tag to load an external script file should be placed within the “head” element, and is as follows:
<script type="text/javascript" src="something.js"></script>
If you have been following along, you may wonder why this code ends in a “</script>” tag when it is clearly an empty element. Shouldn’t it end in a ” />”? The answer is “yes”, but because some browsers are buggy in this regard, you should for now use a “</script>” tag instead.
To use a “script” tag to declare JavaScript that is written within the same document, you would do something like the following:
<script type="text/javascript"> //put your javascript code here </script>
This tells the browser that everything between the “<script>” and “</script>” tags is going to be Javascript code, so the browser knows not to try to interpret it as XHTML.
This code should usually go within the “head” of the document, unless you know what you’re doing. This is because the “head” is the first part of the document to be interpreted by the browser. So by putting your Javascript code (and style sheet code too) within the “head” section, you can be sure that the browser has loaded it before the rest of the page is loaded.
<style>
Whereas the “link” element allows you to load an external style sheet, the “style” element allows you to define internal CSS style sheets within the same document.
<style type="text/css"> /* some CSS code here */ </style>
This code should usually go within the “head” tag of the document, unless you know what you’re doing for the same reason the “script” tags should usually go within the “head”.
<table>, <tr>, <th>, and <td>
The “table”, “tr”, “th”, and “td” tags are all used to display tables of data. Think of tabular data as being like data in Excel: rows and columns. The “table” tag is used to indicate that what follows is a table. The other elements are nested inside of it.
“tr” stands for “table row” and “tr” tags indicate the start of a new row of data. “th” tags stand for “table heading”, and they used to display a heading for a column of data. “td” tags are used for “table data” cells.
A typical table has the following structure:
<table>
<tr>
<th>Heading for Column 1</th>
<th>Heading for Column 2</th>
</tr>
<tr>
<td>First Cell in Column 1</td>
<td>First Cell in Column 2</td>
</tr>
<tr>
<td>Second Cell in Column 1</td>
<td>Second Cell in Column 2</td>
</tr>
</table>
This code, with a border applied to make its structure obvious, would display as follows:
A table with border applied to show its structure
Notice that the text in the “th” tags is centered and bold by default, while the text in the “td” tags is left-justified and not bold.
Only use “table” tags for tabular data, meaning data that you would likely find in an Excel sheet. You old-school HTML programmers are hereby forbidden from using “table” tags for layout of any other kind of data.
<title>
You know this tag. It must always be placed within the “head” element of an XHTML document, and it contains the title of the page that is usually displayed at the top of the web browser.
The result of the "title" tag
Related posts:
- Class 2 – Usage of the Most Common XHTML Elements
- Class 2 – The Bare Minimum Elements of an XHTML Page
- Class 2 – XHTML Syntax
- Class 2 – Special vs. Arbitrary XHTML Attributes
Tags: class 2
Loading ...