dcsimg
Graphic Design Resources Directory: Directory of Graphics Software Tutorials and All Your Graphics and Graphic Design Needs
SEARCH SITE / SITE MAP : BOOKMARK US! : GRAPHIC DESIGNER JOBS : GRAPHICS SOFTWARE TUTORIALS : GRAPHICS SOFTWARE : : GRAPHIC DESIGN BLOG : DESIGN EDUCATION
 


 

Creative Public - Creative Graphic Design Business Resources - Graphic Design Business Resources

 All Graphic Design Resources Directory now includes Original Graphic Design Articles, Links to Hand-Picked Graphics Software Resources, Desktop Publishing (DTP) Tools, & Links to Tutorials for Image Editing Graphics Software like Adobe Photoshop or QuarXpress. And visit our most popular pages - Printing Layout Templates, Graphics Software Information, Online Design Classes, Design Schools, Graphic Design Jobs, Design & Layout Articles. If you get lost, visit our Site Map.
 

AddThis Social Bookmark Button

Search Design Schools

Zip Code:

Subject:

Degree:

Online Campus Both

home > Web Design Tutorials > Programming Tutorials > XHTML Coding Tutorials > XHTML TAGS TUTORIALS

GUIDE TO USING & CODING with XHTML TAGS : Links to Articles, Reference Sites, and Tutorials for XHTML Tags, including Tags such as the Address, Area, Base, BlockQuote, BR, Button, Caption, Col, ColGroup, DD, Div, DL Tags ...

The a Tag
The a tag is used to display links. A link is always required if you are working with WebPages. You can link in two ways with that tag. For example you can link to another page, or you can link to the same page but to another section.

The abbr and acronym Tag
The abbr (abbreviated) and acronym tag fulfils both the same task. They can be used to define full forms of words like www, ftp, CD. These words are called acronyms.

The address Tag
As the tag says, it defines the address. However you can also use it to define copyrights, signatures, ownerships, emails or whatever you think it is useful. This tag actually doesn’t do very much. It automatically renders the content to Italic. If you want the address to appear in bold or with line breaks then you will have to do this manually on your own.

The area Tag
The area tag is used to define a specific area in an image. The main usage of an area is to define one image with many areas. Each area can then have his own link to another page. Usually you can define only one link for the complete image, but the area tag is especially meant to divide an image in several parts so that you can use many links in one image. Just imagine that you have a map imagine from your country and would like to divide the image in several parts, so that the user can click on each city to get information. The area tag is always nested in a map tag and is never used standalone.

The base Tag
The base tag can be used to define an absolute URL. Once you have defined the base tag you don’t need to enter the full path whenever you reference to a file. Let’s cover this in a short example.

The bdo (bidirectional overwrite) Tag
The bdo tag is used to change the direction of the text. This is useful if you are working with websites which supports multiple languages like “Arabic”. This tag allows you to change the direction so that it can be read from right to left as normally in the “Arabic” language.

The blockquote Tag
The blockquote is used to create a quotation. It can be very useful if you want to quote somebody from your webpage. Many forums do have that feature. Of course we could also use simple “” to quote somebody, but that doesn’t look really nice. The blockquote tag increases the indent of the quotation text so that the reader directly recognizes that this is a quotation. It uses spaces on both sides of the quotation text.

The body Tag
The body tag is the main part of the page. It contains all text or tags, which are important for the viewer. If you are creating your first page, then this tag will be the place where you will insert your images, create your tables or write down your articles. The body tag is not visible like the b or the i tag. It is a block, which contains the main content of the page.

The br/ tag
The br / tag is used to add line breaks between the lines. You will find this useful if you writing text for example articles and need a linebreak at a certain point. It is easy to use and doesn’t require any attributes or elements.

The button Tag
The button tag is used to implement a button in the page. Usually these buttons are placed to perform a task whenever the user presses them. For example you could place the button in a form and whenever it is pressed you could send the data to another page or you can call a JavaScript method when the button is pressed to show a Message.

The caption Tag
As the name already says the caption tag is used to create a caption or headline for a table. You can not use the caption tag somewhere else. It is especially meant only for the table tag. The caption tag must be inserted directly after the table tag, before any rows or columns starts and you can only insert one caption for one table.

The col (column) Tag
The col tag is used define the values of columns in a table. The col tag can be only used nested in a colgroup tag, which again can be only used in a table tag. You can use the col tag to pre-define the size of all columns or you can set the size for each individual column. If you use the col tag in your tables, then the table is processed much faster, because the column size is pre-defined.

The ColGroup Tag
The colgroup tag is used to define a group of col tags within a table.

The !-- … --Tag
In XHTML you have the possibility to use comments. The web browser ignores comments. That means that the comments aren’t shown to the user if the page is shown in any Internet browser. Comments are very important if you write code, even if it is a simple HTML page. Sometimes comments can save you many hours. For example you can write down the author of the code or the creation date of the file.

The dd Tag
The dd (definition) tag is mainly used in a Glossary. A Glossary contains a Technical Term and a definition to that term. The dd tag is used for the definition.

The div Tag
The div (division) tag can be used to create a block with elements like table, text, image or whatever you want. Everything enclosed in the block will be part of that division. You can include as many div tags into a page as you like.

The dl Tag
The dl (definition list) tag is used to create a list of definitions. Usually it is used in conjunction with the dd (definition) and dt tag to create a glossary which contains of a technical term and a definition.

The !DocType Tag
A document type contains a set of rules for the XHTML file. A XHTML file can be only valid if you specify the document type to use. The XHTML file need then to follow the rules, which are defined in the document type, otherwise it won’t be valid.

The dt Tag
The dt (definition term) tag is used to define the term in a definition list (dl). It is used in conjunction with the dl and dd tag to form a list of definitions.

The FieldSet Tag
The fieldset tag can visually group together a list of elements, like a textbox, image or text. It draws a box around all elements which are between the fieldset…/fieldset block.

 

The Font Tag
The font tag is one of the most used tags to format texts in web pages. However the font element is deprecated and instead it is recommend using CSS styles.

The bitt and other tags which change the font style of a text
Several tags are available to change the font style of a text. They can be very useful, if you want to achieve a better look. For example it’s looks better if important words are in bold and italic or if the code appears in Teletype format or if the authors name is in italic. That way the user can differentiate the one text from other.

The Form Tag
The form tag creates a form into the webpage. In the form block the user can fill any textfields, select any data from the drop down list control etc. Once the user has selected/entered the data he wants, he can press the submit button and the data in the form is send. Many things can be done with the data now...

The frame Tag
With the help of the frame tag you can divide your browser in sub windows. The frame tag can be only used inside a frameset tag.

The FrameSet Tag
The frameset tag is used to create a frameset. A frameset defines a set of frames. The frameset is just the body of the frames tag. The frameset tag cannot be use as a stand-alone; you have to specify some frames tags in it. The frameset only defines the size and how many cols or rows are necessary. You have to use either the cols or the rows attribute.

The h1-h6 Tags
The h1…h6 (header) tags are used to create a headline or a title for a section. It comes in 6 sizes; h1 is the largest size and h6 is the smallest size. The title “The h1-h6 Tags” in this document uses the h1 tag.

The head Tag
The head can be used to store information about the document, which isn’t displayed to the user. This tag is usually inserted right after the html tag. It can contain useful information like the author, creation date or the copyright statement. Furthermore you can store keywords in that section so that search engines like google or yahoo will find the document faster. Following tags can be used in the head tag: base, link, meta, script, style, and title.

The hr Tag
The hr tag creates a visual horizontal line. It can be used to separate paragraphs or sections. You can also use it under a title or headline that will visually separate the header from the rest content, like navigation bar or article body. A hr line creates its own paragraph.

The html Tag
The html tag is the root element of any XHTML web page. It must include the XHTML namespace…

The iFrame tag
The iframe tag allows you to implement an embedded frame into a page. An embedded frame does not work like a normal frame, and it does not divide the frame like normal frames do. Instead it works like an embedded object where you can load any source you like. You can use the iframe wherever you want in your page.

The img Tag
The only and main purpose of the img tag is to display and embed images and graphics. Recommend extensions for images for the web are GIF, JPEF and PNG. If you are using graphics in your web pages, you should take care of the size, though there isn’t any limitation. However you should know that larger images take more time and smaller images takes less time. If you choose to embed a large image then you can be sure that a dialup user will not see your page very fast – it will take time and the user will look for another website. Therefore make always the right choice of size of the image. If necessary you can set the height and the width of the image.

The input Tag
The input tag can be used for several purposes. However the main usage was to provide a textbox for the user so that he can enter some data, which is then send to the server. But it is also possible to define buttons and images with buttons. All you have to change is the value of the type attribute.

The ins Tag
The ins (insert) tag can be used to insert some text. It is mostly used with the del tag. The del tag strikes out some text and the ins tag inserts the new text.

The label Tag
In a real world a label is something on a t-shirt. You will never find a label alone; it is always attached to something. The same can be said if you use the label tag in web pages. A label is usually bound to a control….

The legend Tag
In my view the legend tag has a completely wrong name and would just lead to misunderstanding. Usually a legend is something on a map or on a plan to explain some figures, icons or colors. However in this context it is used as a caption for the fieldset tag. It creates a kind of title for the fieldset tag. The following example and screenshot shows you what I mean.

The li Tag
The li (list) tag is used to create lists. It is a start element to define a list block and its mostly used with the ol (ordered list) tag or with the ul (unordered list) tag.

The link Tag
Note that the link tag is not the same as the clickable a link tag! The link tag defines a relationship between documents. For example you can include a css style sheet with the help of the link tag or you can logically create a navigation menu for the “next”, “previous” pages. The link tag is usually included in the head section and you can include as many as link tags you like.

The map Tag
With the map tag you are defining a link-sensitive area in an image and is always used in conjunction with the image tag. Usually you can only bind one link to an image; however with the map tag you can define different areas in one image with different links...

The menu Tag
This is again on of the tags, which in my view really are bad titled. A menu is for me something at the top of an application, which scrolls down when the user clicks on it, and it displays some sub menus. I am sure that you know that I mean. However the menu tag does not create such a menu for you, instead it is basically a list like the ul or dir tag. Visually there isn’t any difference between them. And if you take a look at the structure then you will recognize that there isn’t also any difference.

The meta Tag
The meta tag is one of the important tags if you want your website to be quickly findable in search engines. It can also include information about the author and the content of the page. However they can also process http commands, for example a redirection to another webpage. Note that this tag is not meant to create any comments about the page or something like that. If you need to write down comments on your page, take a look at the !-- -- comment tag. You can use many meta tags as you like in one page and it is usually defined in the head tag.

The noframes Tag
The noframes tag is mainly used in conjunction with the frame tag. This tag is always nested in the frameset tag and you will not see it as a standalone tag. The main usage of this tag is to display a message or provide the content when a browser does not support frames. If your browser supports frames then you won’t see the message.

The noscript Tag
The noscript tag can be used define an area which will only be displayed when the script cannot be run. This can happen when the browser does not recognize the scripting language or when scripting is disabled in the browser. Some users disable the javascript option in the IE and in that case you could show a message in the noscript tag. Note that if you want to disable javascript on your local system you have to apply the following settings...

The object Tag
An object is a common word for any data source, which resides out of the html page. It could be a excel table, a word document, a music file, a flash movie, java applet or anything else. Therefore the object tag is used to embed any of these mentioned objects in your page. If you have worked before with flash and you may know that whenever you create a web flash file, it will automatically create an object tag for you – which just need to paste in your html file.

The ol Tag
The ol (ordered list) tag is used to create lists. It is a start element to define a list block and it is mostly used with the li (list) tag.

The optgroup Tag
The optgroup tag is used in conjunction with the select tag and it always resides nested in it. The main purpose of this tag is to create a drop down list with titles. If you don’t use this tag, then you will see a list without any headlines.

The option Tag
The option tag is always used as a nested tag in the select tag. You will never see this tag as a standalone. A select tag usually defines a list of options, which are displayed in a drop down list.

The p Tag
The main purpose of the p tag is to write paragraphs. The p tag block cannot contain any other block like a headline (h1...h6), lists (ol), addresses (address) or anything else.

The param Tag
The param tag is always used nested in an object tag and defines the parameters for a specific object. For example if the object requires you to pass 5 parameters, then you will have to create 5 param tags which define the values and names of the parameter. A parameter can be an URL, speed, msg or whatever the object accepts.

The pre Tag
If you written code then you know how important formatting can be. It makes the code easy to read. The pre (preformatted) tag can be used to publish the code with all his spaces and tabs in a page. All spaces and tabs you used will be shown to the user. The only thing that changes is the font. It will show you a wider font, so that you recognize that this is a pre-formatted text.

The q Tag
The q tag is used to display quotations. However this tag doesn’t have any visual effect on the screen. A user will never recognize whether this is a quotation or not. It is recommended to you styles to format the text.

The s and strike Tag
The s and strike tags are both used to strikethrough some text. Another tag, which does the same, is the del tag, which is normally used with the ins tag.

The table Tag
The table tag is used to create a table with rows and cells. The table contains a body tbody, header thead, a table row tr, a table data td and a table footer tfoot. A table can be very useful if you want to show a report with a header and some data...

The tbody Tag
The tbody tag is used to define the body of a table. In that part you can declare the table data part. The tbody tag is not necessary; if you do not use it your table body will still appear. The tbody is only an indication that the table body has started. The body can include th rows and td data. If you decide to use the tbody tag then you have to use also the thead and tfoot tags.

The td Tag
The td tag is used to create a cell in a table. The data can be written between the tags. Usually this tag is nested in a tr row tag.

The textarea Tag
As the name of the tag already says, this is a tag, which defines a textarea. It basically just a single input text control with a multiple lines. With the attribute cols you can define how many columns it should contain. The row attribute defines the amount of available rows of the textarea. With defining this attribute you are basically defining the height of the textarea...

The tfoot Tag
This tag tfoot is used to define table footer in the table. If you are using this tag you will also have to use the thead for the header and tbody for the body tag. This can be very useful if you want to print long tables, because the header and footer will be shown on each page.

The th Tag
The th tag is used to define a table header. You should include this tag nested in a tr row tag. It can be useful to show some header information about the current row. The th tag just displays the text as bold.

The tr Tag
The tr tag is used in a table to create a new row. In a tr tag you can define the data with the td tag.

The u Tag
The u tag is used to underline a text. This can be sometimes very useful if you want to highlight some text.

The ul Tag
The ul (unordered list) tag is used to create lists. It is a start element to define a list block and it is mostly used in conjunction with the li (list) tag.

Types of Tags
Tags can be categorized various ways. They can be categorized by their function within the document, or by whether they have content or not, or by their location in a document.

The Document Header
The header of the document is where you put information about the document.

 

XHTML Block Elements
The basic building blocks of an XHTML document are the elements that form the primary content of the document. These elements are usually referred to as block elements since they take the form of discrete blacks of text on the screen. Block elements always begin on a new line when displayed.

Styling Elements
Most inline elements in XHTML are elements used to style content. This means that they allow the author to alter how content looks. These elements are called styling elements and exist only to alter the appearance of the text. Many styling elements have been deprecated in favor of style sheets, but they are still largely in use.

Comments
The comment tag is used to hide things in the body of the document that you do not want displayed. These can be notes to yourself so you can find things in the document, or they can be used to comment out sections of the document you don't want people to see, but also don't want to delete (people will still be able to look at these sections if they view the source code though).

Lists
One useful feature of XHTML is the ability to create lists. Lists are useful in most any circumstance where you want to itemize or categorize things. Since HTML was originally designed for academic documents, particularly scientific research documents, lists proved useful for organizing information.

XHTML and White Space
Since markup languages rely on markup tags to delimit and format content, you would hope that the markup tags override any actual structure of the content behind scenes. Otherwise, the content would appear as it was typed, as opposed to how it was supposed to be presented.XHTML has a simple solution for this...

XHTML Entities and Character Values
Some characters will not be display by a Web browser because the browser will assume that they are part of a command. For instance, if I just wrote p with a p between angled brackets, the browser would not show the string p, rather it would insert a paragraph break at that point in the document.

XHTML Tags
One of the major changes to HTML which was introduced to XHTML is that tags must always be properly formed. With the old HTML specification you could be very sloppy in your coding, with missing tags and incorrect formation without many problems but in XHTML this is very important.

XHTML Tag List
The list of XHTML tags.

Tags in XHTML
As you know, XML is case sensitive: A tag defined in all uppercase letters needs to be written in all uppercase letters; a tag defined all in lowercase needs to be written all in lowercase. In XHTML, all tags are defined in lowercase. When writing XHTML 1.0 documents refer to the HTML 4.01 specification for information about specific tags and arguments, specificaly the "Index of Elements" and the "Index of Attributes." Any examples you see will remain nearly the same when converted to XHTML, except that you will need convert everything to lowercase.

Header elements
This element comes immediately after the html opening tag. This is where all the hidden information about a page is kept. There are many elements that are kept within the head section of a web page, such as: the title element, style sheets, meta tags and some others.

The body section
The body section is where all the information that you want to appear on the page belongs. It was also the traditional place for setting the colors of the links and text, but now these are now set using Cascading Stylesheets…

Paragraphs and lines
Paragraphs are defined using the paragraph element. This is a block level element, which means that it contains a chunk or block of text. The below example illustrates how paragraphs are used…

Placing an emphasis
Sometimes it is necessary to highlight text in your documents by placing more of an emphasis on it than the rest of the words in the same paragraph. This can be done in two ways…

Bold and italic
Although it is still valid to make text bold or italic, it is generally not a good idea to do it in this way. It is however not valid to make text underlined anymore.

Making a quote
There are two different ways of quoting text within your document. One way is for quoting blocks of text and the other is for smaller, inline quotes.

Superscript and subscript
Making text superscript or subscript can be useful when, for example, using chemical formulae or mathematical equations. They can also be useful in some foreign language scripts…

Bigger or smaller
Text can be made bigger or smaller using XHTML, although it is recommended that this effect be achieved through Cascading Stylesheets. The examples below illustrate how this effect can be achieved…

Headings
Headings are an important part of any document, not only because they make a page easier to read but also because they split a page up into sections with varying degrees of importance…

Text That Says Something
Congratulations! What for? For getting to here, you've got past the hardest part. Whether you understood everything you read so far or just absorbed as much as you could, the next few sections should be a lot easier going as we look at the different elements in your XHTML arsenal and the meaning that they have.

Advanced XHTML Building Blocks
In this section we will be looking at the topics listed below, don't worry if the topic titles look a bit scary, they'll make sense when you get to them, but the titles will make it easier to check back for later.

Text That Says Something 2
In this section we will be looking at more of the elements (and a couple of entity references) in the XHTML arsenal that relate to text, further to those covered in the section "Text That Says Something".

XHTML Tags
Tags specify structural elements in a document, such as headings…

Text
The list of XHTML text tags.

XHTML Rules for tags
There are a number of rules with which tags must comply in XHTML, which allows XHTML to be XML compliant, whereas HTML is much more tolerant.

Basic XHTML Elements
The HTML/XHTML elements that are the primary parts of a Web page…

Form Tags
The HTML/XHTML elements that create Web forms…

Frames Tags
The HTML/XHTML elements that create frames…

List Tags/Elements
The HTML/XHTML elements that create lists…

Script Elements
Tags for creating Web scripts, including JavaScript and VB Script…

Multimedia Elements
Multimedia tags support multimedia objects, such as sound, images, and java.

Using the link Element
The second mechanism for associating style sheets with media types is to use the link element's media attribute, which specifies the intended destination media for the external style information. This allows user agents to load and apply external style sheets based on the characteristics of the media where the document is being rendered.

Tags and Special Characters
Tags come in two varieties: block-level elements, which mark up larger sections, or blocks, within your document, and in-line elements, which are for smaller bits, usually contained within one line.

TAG: a
The a tag is called the anchor tag and it is most commonly used with the href attribute to create a hypertext link (usually referred to as just a link). By simply clicking on the link with a mouse or using a keyboard command, you can travel from one page to another page on the same web site or a different one. By default, the new page is normally displayed in the same window or frame, unless you specify otherwise using the target attribute.

TAG: abbr
The abbr tag is used to signify that the enclosed text is an abbreviation of a longer word or phrase.

TAG: acronym
The acronym tag is used to signify that the enclosed text is an acronym which is a special type of abbreviation formed by using the first letter in each word of a phrase.

TAG: address
The address tag is used to signify that the enclosed text is an address. Most browsers display the address in a special manner, such as in italics. However, you can use style sheets to alter the appearance as you see fit. The text between the address tags can contain any HTML tag.

TAG: applet
The applet tag is used to download and execute a Java applet. The applet is treated like an image and is rendered into the flow of the text without a line break. You can define the size of the region (the applet window) in which the applet will appear. By using the attributes for applet, style sheets code, and other HTML tags, you can create a presentation and appearance for the applet in the text flow to suit your needs.

TAG: area
The area tag is used (along with the map tag) to create a client-side image map which is divided into two or more mouse-sensitive regions. When you click on a region in the map, an attribute contained in the area tag can direct an action to occur. For example, a hyperlink can be created in each region using the href attribute. When you click onto a region, the hyperlink will send you to a target page just like any link. Also, since the map is mouse-sensitive, the various onmouse cursor events can be very useful.

TAG: b
The b tag causes the designated text to be displayed in a bold weight. If bold is not available for a particular font, the browser may impose some other physical change to the text, such as underline.

TAG: base
The base tag is used to define the base URL for the HTML document. This allows the use of relative URL addresses elsewhere in the document. Interestingly, this base URL does not have to be an absolute URL, but rather, it can be a relative URL.

TAG: bdo
The bdo tag is used to change the direction that the text reads, from left to right (the default) over to right to left, or vice versa. The purpose of this tag is to allow HTML to correctly display a great variety of languages, such as Chinese and Hebrew (which are read right to left), in the same document.

TAG: big
The big tag causes the designated text to be displayed in a larger font size. The actual amount of change will be determined by the browser. If the text is already at maximum size, this attribute will have no effect.

TAG: blockquote
The blockquote tag is used to offset a block of text (a citation) from the rest of the document. The exact appearance will be browser dependent. However, the citation is usually indented on both the right and left margins, may be in italics, and is preceded and followed by paragraph breaks. You will still need to use the br, p, and possibly other HTML tags to effect the textual display and appearance that you desire. In fact, you can use any other HTML tag inside a blockquote, including cite and q.

TAG: body
The body tag is used to signify the start and stop of the contents of your HTML document. A well-formed XHTML document must contain properly nested and closed html, head, title, and body tags.

TAG: br
The br tag is used to create a line break and is analogous to a carriage return. The flow of the display of the text and any images is halted on the current line, and the flow resumes on the next line starting at the left margin.

TAG: button
The button tag is used to create a button form control (field). Control is a technical term that refers to the various elements (buttons, check boxes, radio buttons, text areas) that can be used inside a form to gather information.

TAG: caption
The caption tag allows you to place a comment (caption) with a table. The caption does not appear inside the table, but rather it appears outside the table on either the top (default) or bottom. By default, the caption will be centered on the table. The caption tag must occur immediately after the table tag. You can only have one caption per table. The text that composes the caption can contain HTML tags and style sheet properties.

 

TAG: cite
The cite tag takes the selected block of text (a citation) and displays it in italics. Unlike the blockquote tag, the citation is not preceded or followed by paragraph breaks. So the citation remain inline. You may need to use other HTML tags and style sheets to effect the textual display and appearance that you desire.

TAG: code
The code tag is designed to display computer code in a special font, usually in a mono spaced font style. However, the exact appearance will be browser dependent. You may still need to use various HTML tags, such as br and p, to create a presentation and appearance to suit your needs.

TAG: col
The col tag is used to assign attribute values to the individual columns within the colgroup elements.

TAG: colgroup
The colgroup tag allows you to create a column-centric table as compared to the standard HTML table which is row-centric. The columns in the table are assigned to column groups using this tag. You can have one or more groups of columns.

TAG: dd
The dd tag is used to create a definition list which is a type of listing where a term or phrase is followed by a definition or explanation. The dd tag presents the definition. It must be used with the dt tag which presents the term and the dl tag which delimits the start and stop of the definition list.

TAG: del
The del tag is used with the ins tag to display editorial changes involving additions and deletions to the text of a document. The del tag marks the text to be deleted by striking a horizontal line through the characters. The ins tag designates the text to be added with an underline. This can also be accomplished using style sheets.

TAG: dfn
The dfn tag applies an oblique font style to the enclosed word or phrase. It is common practice in engineering, scientific, and technical articles to specially mark the first occurrence of a term.

TAG: div
The div tag is used to designate a block-line portion of an HTML document as a div element and to apply any of the core attributes of this tag against the contents of that element. The behavior of this tag is block-line, because this tag causes a line break (the equivalent of a br tag) to occur both before and after the div element. div tags, which can be nested, allow a significant degree of control and manipulation of each individual block section of your web page.

TAG: dl
The dl tag delimits the start and stop of a definition list. This is a type of list where a term or phrase is followed by a definition or explanation.

TAG: dt
The dt tag is used to create a a definition list. This is a type of list where a term or phrase is followed by a definition or explanation. The dt tag presents the term to be defined. It must be used with the dd tag which presents the definition and the dl tag which delimits the start and stop of the definition list.

TAG: em
The em tag is used to provide emphasis when displaying the enclosed word or phrase. Most browsers do this by rendering the selected text in italics.

TAG: fieldset
The fieldset tag is used to group related form elements together with a caption and labels. The caption is created using the legend tag. One or more labels are created using the label tag. The browser is supposed to render the appearance of the caption and labels in a special manner.

TAG: form
The form tag is used to delimit the start and stop of a form element and serves as a container for form controls (fields). Control is a technical term which refers to the various elements that can be used inside a form to gather information. The information gathered is referred to as the contents or parameters of the form and is a collection of name/value pairs.

TAG: frame
The frame tag is used to create one frame, which is simply a window within another window. As an example, if you want three frames (windows) to appear on an HTML page, you must have three frame tags and the frameset element must set the spacing for three frames.

TAG: frameset
The frameset tag serves as a container element to hold a collection of frames. This tag determines the number of frames, whether the frames are to be of a column or of a row configuration, and sets the spacing for either case. In fact, you must specify either a column or row configuration using either the rows or cols attribute (but not both).

TAG: h1, h2, h3, h4, h5, h6
The h1, h2, h3, h4, h5, h6 tags are used to create text headers for a document. They can display the header text in one of six different sizes. h1 is the largest size and, as the integer number increases to h6, the text size becomes progressively smaller. The exact display appearance of the header text is browser dependent.

TAG: head
The head tag is the HTML document header. It serves as a container for other tags that control the contents and appearance of the main body of the document.

TAG: hr
The hr tag is used to render a horizontal rule (line). This is a very useful and commonly used tag.

TAG: html
The html tag informs the browser that this is an HTML encoded program. The html opening and closing tags delimit the start and stop of the document.

TAG: i
The i tag causes the designated text to be displayed as an italic or oblique font style. If italic or oblique is not available for a particular font, the browser may impose some other physical change to the text, such as underline.

TAG: iframe
The iframe tag is used to insert an inline frame into the body of an HTML document. This is a very convenient method for inserting an HTML page inside another HTML page. Unlike the frameset, frame, and noframes tags, the iframe tag can only be used inside a body element. You must not place the iframe tag inside a frameset element.

TAG: img
The img tag is used to insert a graphic or photographic image directly into the flow of text and other images. No line breaks or carriage returns are automatically inserted before or after the image. You can use attributes and style sheets to effect an appearance and presentation of images and text that suits your needs.

TAG: input
The input tag is used to create individual form controls (fields). Control is a technical term that refers to the various elements (buttons, check boxes, radio buttons, text areas) that can be used inside a form to gather information.

TAG: ins
The ins tag is used with the del tag to display editorial changes involving additions and deletions to the text of a document. The del tag marks the text to be deleted by striking a horizontal line through the characters. The ins tag designates the text to be added with an underline. This can also be accomplished using style sheets.

TAG: kbd
The kbd tag is used to signify that the indicated text is to be typed by the user on the keyboard. For example, this can be used in training manuals.

TAG: label
The label tag is used to associate text labels with a specific element (control) inside a form (such as an input element). This is done by having the values of the for attribute of the label tag and the id attribute of the form element be the same. Note that you can attach more than one label to the same element. The browser is supposed to render the labels in a special manner to accentuate their appearance.

TAG: legend
The legend tag is used to create a caption for the form elements associated with a fieldset group. Therefore, this tag can only be used inside the fieldset element. The browser is supposed to render the legend caption in a special manner to accentuate the appearance.

TAG: li
The li tag is used to list an item in a list. This tag is required for both the ordered list ol tag and the unordered list ul tag.

TAG: link
The link tag is used to establish a relationship between the current document and one or more other related documents. For example, if you have a Cascading Style Sheets .css file that defines the style for an entire web site, then each file in the site would be linked to the .css file using the link tag.

TAG: map
The map tag is used to create a client-side image map which is divided into two or more mouse-sensitive regions. For example, when you click onto a specific region of the image map, a hyperlink could send you to a target page or a pop-up window could display some information.

TAG: meta
The meta tag is primarily used to list information (meta data) about the current HTML document. This information can be anything you want users to know about your site including author names, keywords, subject matter, and topics of interest. This meta data is used extensively by the various Internet search engines.

TAG: noframes
The noframes tag is used to display an alternative message on browsers that do not recognize frames. Usually, this message advises the user that frames are needed to see the contents of this HTML document. If the browser does recognize frames, then the contents of the noframes element are not displayed.

TAG: noscript
The noscript tag is used to display alternative content for browsers that do not recognize the script tag, or for those occasions where the user has purposely disabled script.

TAG: object
The object tag is used to insert an object (such as ActiveX components, applets, image maps, media players, and plug-ins) into an HTML document and to provide all of the neccessary information to implement and run the object. For example, you can give the location and type of the executable code of the object, and the location and type of any associated data files. You have the option to declare and instantiate the object at the same time, or declare the object and instantiate it, one or more times, elsewhere in the program.

TAG: ol
The ol tag is used to delimit the start and stop of an ordered list. An ordered list is a collection of items (typically related somehow) that need to be listed in particular order. For example, an ordered list could be an index, table of contents, or a set of instructions.

TAG: optgroup
The optgroup tag is used to group together related items in a pull-down form control. An item can only be added to the group by using the option tag. Both the optgroup and option tags must be used inside the opening and closing select tags.

TAG: option
The option tag is used to insert one item in a pull-down form control. You may repeat this tag an unlimited number of times in a pull-down list. (For example, you could list all fifty states.) By default, when an item is chosen, the value that is added to the contents of the form is the text that appears immediately after the opening option tag. However, you can specify a different value by using the value attribute.

TAG: p
The p tag is used to signify the beginning of a paragraph and is analogous to having both a line break and a carriage return occur. The flow of the display of the text and any images is halted on the current line, an entire line is skipped (or a certain amount of white vertical space), and then the flow resumes starting at the left margin (by default).

TAG: param
The param tag is used to set the name/value pair that provides a parameter required by a Java object in an applet tag or by some object in an object tag. Each param tag can provide only one parameter. However, there can be any number of parameters (from zero to many). These parameters, including the name and acceptable range of values (defaults, etc.), are established by the author of the applet or object. For example, they could set the color of the applet.

TAG: pre
The pre tag is used to display pre-formatted text. The output will mimic exactly how the text is rendered inside the pre element including white space, tabs, and line breaks. This allows you to maintain the appearance of data in rows and columns, or have extra white spaces in text such as poems. Perhaps one of the most common uses of this tag is to display computer code and output.

TAG: q
The q tag takes the selected block of text and displays it as a quote which is enclosed by a pair of double quotes. Unlike the blockquote tag, the q quote is not preceded or followed by paragraph breaks. So the quote remains inline. You may still need to use other HTML tags to effect the textual display and appearance that you desire.

TAG: samp
The samp tag is designed to place emphasis on a short string of special characters. The designated text is displayed in a teletype or mono space font face. The actual appearance will be determined by the browser.

TAG: script
The script tag is used to place script code inside the head and body elements of an HTML code document. For all practical purposes, this tag is primarily used to allow the execution of JavaScript code inside HTML code (and, to a lesser extent, VBScript).

TAG: select
The select tag is used to create a pull-down list form control (field). Control is a technical term that refers to the various elements (buttons, check boxes, radio buttons, text areas) that can be used inside a form to gather information.

TAG: small
The small tag causes the designated text to be displayed in a smaller font size. The actual amount of change will be determined by the browser. If the text is already at the minimum size, this attribute will have no effect.

TAG: span
The span tag is used to designate an inline portion of an HTML document as a span element and to apply any of the core attributes of this tag against the contents of that element. The behavior of this tag is inline because the effects occur in the normal flow of the text and images (without the tag inserting any additional linefeeds or carriage returns). span tags, which can be nested, allow a significant degree of control and manipulation of a localized part of your web page.

TAG: strong
The strong tag is is used to provide a strong emphasis when displaying the enclosed word or phrase. Most browsers do this by rendering the selected text in bold which makes the characters thicker and slightly bigger in appearance than the surrounding text. Of course, you can also do this using the b tag.

TAG: style
The style tag is used to create document-level style sheet rules. It is referred to as document-level because the style rules will apply to the entire HTML page. In contrast, the style core attribute behaves as an inline style rule and only effects a small portion the HTML document.

TAG: sub
The sub tag is used to insert subscript into a text. This allows the correct display of chemical equations, footnotes, math formulas, and scientific notation on a web page.

TAG: sup
The sup tag is used to insert superscript into a text. This allows the correct display of footnotes, math formulas, and scientific notation on a web page. Most browsers reduce the text size by half for the superscript (and subscript), but use the same font face as used for the rest of the text.

TAG: table
The table tag is used to designate that this element is a table. A table is a structural presentation of data or information using rows and columns.

TAG: tbody
The tbody tag is one of three tags that divide a table into three distinct sections.

TAG: td
The td tag is used to create cells that contain the data, information, or text that you wish to display in the table. You may place as many data cells in a row as you desire.

TAG: textarea
The textarea tag is used to create a multi-line text input window form control (field). Control is a technical term that refers to the various elements (buttons, check boxes, radio buttons, text areas) that can be used inside a form to gather information.

TAG: tfoot
The tfoot tag is one of three tags that divide a table into three distinct sections.

TAG: th
The th tag is used to create a header cell for the cells in a row in a table element. The purpose of the header is to provide a caption, name, or information about the column of cells. The header text will be displayed in a bold font style.

TAG: thead
The thead tag is one of three tags that divide a table into three distinct sections.

TAG: title
The title tag is used to provide a name or a title for your HTML document. There can only be one title element per document. The title is usually displayed as a text header by the browser in a special title or status window. If you do not provide a title, many browsers will display a default title. However, it is to your advantage to provide a meaningful and descriptive title for your site. For example, titles are sometimes used as the default text for links.

TAG: tr
The tr tag is used to create a row in a table element. You can create as many rows as you wish.

TAG: tt
The tt tag causes the designated text to be displayed in a teletype or mono space font face. The actual appearance will be determined by the browser.

TAG: var
The var tag is used to signify that the designated word is a variable name in a listing of computer code. This tag is used inside code and pre tag elements. On most browsers, the word or text is rendered in an italic or oblique font style.

TAG: ul
The ul tag is used to delimit the start and stop of an unordered list. An unordered list is a collection of items (typically related somehow) that are in no particular order. Each item in the list is preceded by a bullet with the default being a round disc.

XHTML Tags Types
XHTML formatting codes, or tags, surround the material to be formatted and are enclosed inside angled brackets ("" and "") to identify them as markup instructions. On the basis of these markup tags the browser displays the page in the specified layout and style. Each Web page is described by its own separate XHTML document containing whatever tags are necessary to structure and style the page according to the design envisioned by the page author.

Font Tags
Text characters can take on styles such as bold, italic, underscore, and others to highlight or emphasize letters and words. Although these styles can be achieved with style sheet settings, there are stand-alone tags that can be used to directly format text characters.

General Form Control Attributes
The many form control tags contain common attributes that, like most other tags, generally serve to label, set up the display, extend the text language, and make the tag extensible programmatically.

The Document Header
The document header describes the various properties of the document, including its title, position within the Web, and relationship with other documents. Most of the data contained within the document header is never actually rendered as content visible to the user.

The Document Body
The document body is the meat of the matter; it's where you put the contents of your document. The body tag delimits the document body.

Editorial Markup
HTML 4.0 introduced two new tags that can help groups of authors collaborate in the development of documents and maintain some semblance of editorial and version control. The insert (ins) and delete (del) tags let you designate portions of your document's body as either new or added content, or designate old stuff that should be replaced. And with special attributes, you may indicate when you made the change (datetime) and a reference to a document that may explain the change (cite).

The bdo Tag
As we've mentioned earlier, the authors of the HTML 4 standard have made a concerted effort to include standard ways web agents (browsers) are supposed to treat and display the many different human languages and dialects. Accordingly, the HTML 4 standard and its progeny XHTML contain the universal dir and lang attributes that let you explicitly advise the browser that the whole document or specific tagged segments within it are in a particular language...

Headings
Users have a hard enough time reading what's displayed on a screen. A long flow of text, unbroken by title, subtitles, and other headers, crosses the eyes and numbs the mind, not to mention the fact that it makes it nearly impossible to scan the text for a specific topic.

Changing Text Appearance
A number of tags change the appearance of and associate hidden meaning with text. In general, these tags can be grouped into two flavors: content-based styles and physical styles.

Content-Based Style Tags
It takes discipline to use the content-based styles, since it is easier to simply think of how your text should look, not necessarily what it may also mean. Once you get started using content-based styles, your documents will be more consistent and better lend themselves to automated searching and content compilation.

Physical Style Tags
There are nine physical styles provided by the current HTML and XHTML standards, including bold, italic, monospaced, underlined, strike-through, larger, smaller, superscripted, and subscripted text. In addition, to our dismay, Netscape still supports "blinking" text. All physical style tags require an ending tag.

Addresses
Addresses are a very common element in text documents, so there is a special tag that sets addresses apart from the rest of a document's text. While this may seem a bit extravagant -- addresses have few formatting peculiarities that would require a special tag -- it is an example of content, not format, which is the intent and purpose of HTML and XHTML markup.

Special Character Encoding
For the most part, characters within documents that are not part of a tag are rendered as is by the browser. However, some characters have special meaning and are not directly rendered, while other characters can't be typed into the source document from a conventional keyboard. Special characters need either a special name or a numeric character encoding for inclusion in a document.

Newest Table Tags
While it is possible to build a simple table quickly, complex tables with varying border styles, running headers and footers, and column-based layout were not easily constructed from the old HTML 3.2 table model. Microsoft had rectified this inadequacy somewhat by adding a number of table layout controls into Internet Explorer Version 3.0. These very useful extensions found their way into the HTML 4 standard and subsequently into XHTML 1.0. They provide row-based grouping and running headers and footers, along with column-based layout features.

Text That Says Something
Congratulations! What for? For getting to here, you've got past the hardest part. Whether you understood everything you read so far or just absorbed as much as you could, the next few sections should be a lot easier going as we look at the different elements in your XHTML arsenal and the meaning that they have.

Text That Says Something 2
In this section we will be looking at more of the elements (and a couple of entity references) in the XHTML arsenal that relate to text, further to those covered in the section "Text That Says Something".

AddThis Social Bookmark Button


[CaRP] php_network_getaddresses: getaddrinfo failed: Name or service not known (0)

DESIGN DIRECTORY : PORTFOLIO FREE : GRAPHIC DESIGNER JOBS : GRAPHICS SOFTWARE TUTORIALS : GRAPHICS SOFTWARE

WRITE ARTICLES FOR US & FREE PROMOTION OF YOUR GRAPHIC DESIGN BUSINESS

We are looking for submissions of Graphic Design Tutorials and Articles from Knowledgeable Graphic Designers and Publishing Professionals. We will add a paragraph about your graphic design services (or other services as long as it is not offensive) along with your published article. We will add your contact information, including your graphic design business' website link, within this paragraph. AllGraphicDesign.com gets around 16,000 Unique Visitors every day and this could mean a nice amount of traffic being sent to your graphics business' web site (or your graphic design portfolio). Find Out More Here

 

 

Please click here to visit our sponsor

Graphic Design Menu


[CaRP] php_network_getaddresses: getaddrinfo failed: Name or service not known (0)

BOOKMARK THIS PAGE! :: MAKE US YOUR HOMEPAGE  :: SIGN UP FOR NEWSLETTER :: ADD YOUR PORTFOLIO FREE :: DESIGNER JOBS :: FREELANCER JOBS

OUR FRIENDS -- Adobe Photoshop Tutorials -- Photoshop, Flash, 3D Studio Max Tutorials -- Web Designers & Developers --Photoshop Tutorial Man -- Tutorial Guide -- Free Webmaster Tutorials -- Web Designers -- Web Design Portfolio --AllFreelanceWork--AllFreelance--Artists Helping Children --All Creative Portfolios -- All Work at Home Ideas

All Graphic Design Resources Center is always looking for more information & resources to put into our graphics directory portal. If you have any design or dtp resources that you think would fit in well, such as graphics software links, graphics and clipart foundries, objects, filters, fonts, desktop publishing or other graphic design resources articles, templates, etc...Please email us and let us know. All Graphic Design Resources Center has been around since 1998 (originally as deezin dot com), offering desktop publishing information and graphic design resources to make your web search for graphics stuff easier. Let us know how we can make All Graphic Design site more helpful for you! All informational links are hand added by an editor. Thank you for visiting our site and don't forget to bookmark this site.

R E L A T E D . L I N K S

About Us | FAQs | Contact Us | Terms of Use | Privacy Policy

All website design, text, graphics, selection and arrangement thereof, and software are the copyrighted works of Allfreelance, © 2003 - 2016 QuinStreet, Inc.