How to Use XHTML for Layout and Design
XHTML is a more robust version of the Web markup language than previous variants of hyper text markup language (HTML). This makes Web pages built in XHTML more reliable and accessible to a wider variety of users browsing the Web. To use XHTML, ensure that the markup is valid and well-formed, as the specifications are strict and less forgiving than what you may be used to. Rather than just building Web pages that work and look the way you want, using XHTML means a commitment to maintaining a high standard within your page structures.
Other People Are Reading
Instructions
-
-
1
Separate the content of the website from its formatting. Work out what the content of the website pages is going to be. This may include text, data and different media such as images and video, but should not include how you want these items to appear. When you build pages in XHTML, the structures used will be there to hold content and so you need to have a clear idea of the content. List the content items you intend including on the website and prepare it to go online.
-
2
Create a design for the website. Using software or sketching on paper, come up with a design for your website, however rough or detailed you like. This should reflect the appearance that you want the site to conform to when people view it in a Web browser. Make sure all of the content you want to be displayed can be contained effectively within the design. Bear in mind what you want users to be able to do using your site pages and ensure that this will be possible within your interface design.
-
-
3
Create one or more ".html" files in a text editor to hold XHTML structures and display the content of your site. One at a time, create the structures within your XHTML pages, according to the following outline:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My Page Title</title>
</head>
<body>
<div>Here is my page content.</div>
</body>
</html>
There are certain rules that are required by XHTML and your documents must have a valid Document Type Definition (DTD) included. Ensure the page's markup contains only valid elements and that these are all closed correctly, using only lower case quoted attributes as in this example:
<p class="main">Some text in a paragraph.</p>
-
4
Validate the XHTML. Using the online validation tools, check to ensure markup is valid XHTML. Don't worry if there are a lot of errors when you first check, as this is perfectly normal. Look through the error listing and correct each mistake in turn. Each time you correct one error, validate your document again, since a single error can often cause multiple subsequent errors, making the markup appear much worse than it is (see Resources).
-
5
Implement the layout using style rules. Use Cascading Style Sheet (CSS) rules to reflect the desired layout and appearance for XHTML pages, as in the following example:
div
{width:50%;}
p.main
{color:#FF0000;}
It is preferable to keep CSS declarations separate from the main XHTML markup, in a file saved with ".css" extension and linked to in the head of your page using the following syntax:
<link rel="stylesheet" type="text/css" href="mystyle.css" />
Try to include all of design and layout rules within the CSS rather than in the XHTML, as this is the key to creating accessible Web content.
-
1
Tips & Warnings
Test your XHTML in as many browsers as you can, as it will likely appear differently in some of them. Start by developing in one of the more standards-compliant browsers and build in support for others afterwards.
Resist the temptation to include style and layout settings within your XHTML. Choosing to use XHTML is committing yourself to creating pages that are built to a high standard.
References
Resources
- Photo Credit website layout image by 6922Designer from Fotolia.com
