XHTML Tutorials

XHTML Tags and Basic Examples

In XHTML, the tags are enclosed between the 2 angled brackets, "<" and ">". It is used for the identification of the marked up element. For every web page there will be corresponding XHTML document. Each web page will be displayed in different styles depending on these mark-up tags. The tags are not only used for the styling of web pages alone but also used for designing the layout of the page design. These basic XHTML tags when working in conjunction with CSS can be styled pretty much any way your mind can imagine. There are different types of tags which are categorized on the basis of primary use.

1. Basic Tags:
These tags are the foundation of XHTML, if you do not know these, then you may have some difficulty learning the rest. If you're a beginner, start here and work your way through. Some basic tags can be viewed as followed.

Heading Tags:


Paragraph Tag:


Line Break:


The above examples would be displayed as:


This is a h1 heading tag!

This is a h2 heading tag!

This is a h3 heading tag!

This is a h4 heading tag!

This is a h5 heading tag!
This is a h6 heading tag!


This is a paragraph tag, the place where you put all text content.



BR Drops the text within a paragraph down
to
the next line.


2. Document Layout Tags:
These tags are used for organizing the data or information in the web page into sections according to the choice of the designer who created the page. It is the most important one among all the tags as it is used for overall design structure of the whole page. Some examples of layout tags can be found below.



To take full advantage of XHTML you should style the above examples using a class or id and some CSS. This is how you get the overall structure. CSS gives you the ability to give these elements properties such as width, height, background color, etc... To better understand basic CSS read A Basic Introduction to Cascading Style Sheets and Using Classes in CSS to mark-up XHTML elements.


3. Text Formatting Tags:
These types of tags can be used to format the body text of your webpage. Some examples of text formatting tags can be found below.



The above examples would be displayed as:

This makes your text bold
This makes your text emphasized (italic)


4. Linking Tags:
There will be a number of single pages within a website, so it's required to move from one page to another by simply clicking on a piece of text or image within the page. For this purpose Linking Tags are used.



Where # is, replace it with the URL of the page you’re linking to.

The above link would be displayed as:
This text links to another webpage!


5. Graphic Formatting Tags:
As the name suggests they are used for making changes or adding graphics and pictures to the web page. It deals with inserting and resizing of the pictures.



As you can see above, we have inserted some inline CSS to take care of the image size.

The above example would be displayed as:





6. Table Tags:
If the information is to be represented in the form of tables then the Table Tag can be used. The data will be arranged in rows and columns, this tag should only be used for tabular data.




7. Form Tags:
If the site requires the use of forms for collecting the necessary data from the visitors the Form Tags are employed. Minimalist examples of form tags can be found below.