Scribd
Upload
38 views6 pages

Proposed Web Page Content Structure & Presentation Standard: General

The document proposes standards for structuring web page content and presenting it using XHTML and CSS. Some key points: 1. Web pages should use XHTML 1.0 Strict for structure and avoid presentational tags. CSS should be used for layout and presentation. 2. Pages must validate against W3C standards and be tested cross-browser using Firefox. Browser-specific CSS may be used if needed. 3. XHTML should clearly define structure using appropriate tags like headings, paragraphs, and containers. 4. CSS styles should be in external files and organized. Common fonts, resets, and preferred techniques like image replacement and columns are recommended.

Uploaded by

chief7_gmail
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
38 views6 pages

Proposed Web Page Content Structure & Presentation Standard: General

The document proposes standards for structuring web page content and presenting it using XHTML and CSS. Some key points: 1. Web pages should use XHTML 1.0 Strict for structure and avoid presentational tags. CSS should be used for layout and presentation. 2. Pages must validate against W3C standards and be tested cross-browser using Firefox. Browser-specific CSS may be used if needed. 3. XHTML should clearly define structure using appropriate tags like headings, paragraphs, and containers. 4. CSS styles should be in external files and organized. Common fonts, resets, and preferred techniques like image replacement and columns are recommended.

Uploaded by

chief7_gmail
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

PROPOSED

Web Page Content Structure & Presentation Standard


Robb Schiefer
4/7/2008
Version 1

General

1. Use XHTML 1.0 Strict to structure web page content


 All tags in lowercase
 Close all tags
 Don’t use any presentation tags
2. Successfully validate the final web page markup with the W3C Markup Validation Service
 http://validator.w3.org/check
3. The following XHTML validation errors may be ignored, if necessary:
 ‘there is no attribute "target"’ – when using the target attribute on a link
4. Use CSS to layout and present web page content
5. Successfully validate CSS with the W3C CSS Validation Service using the “CSS level 2.1” profile
 http://jigsaw.w3.org/css-validator/
6. XHTML and CSS should be developed and tested using the current version of Firefox and refactored to
display correctly on the other browsers you must support
 http://anthonyshort.com.au/blog/comments/how-to-get-cross-browser-compatibility-
everytime/
7. If your XHTML and CSS cannot be refactored to display correctly on the browsers you must support, you
may use JavaScript to identify the user’s browser and import an additional external CSS file with the
minimal styles needed to display the content correctly (NOTE: Your main CSS file should contain the
majority of your styles. You should not duplicate unnecessary styles on your browser specific CSS.)

XHTML Standard

1. Clearly define the structure of web page content with XHTML


2. Have exactly one valid Heading 1 tag (<h1>) on each web page
3. Use valid heading tags (<h2>, <h3>, <h4>, etc.) to sub-group page content at their appropriate levels
4. Place all page content in appropriate XHTML tags (ie. placing any loose text in a paragraph tag <p>)
5. Do not use tables for page layout or presentation’
6. Use tables for organizing tabular data, if you like
7. Use containers (<div>, <span>, etc.) to organize content
8. Use ‘&amp;’ instead of ‘&’ to avoid confusion of another character code
9. You may use extra containers/markup to meet your presentation requirements but they should only be
used minimally and should not affect the structure of the content

CSS Standard

1. CSS styles should be placed in an external CSS file to promote the reuse and organization of styles
2. Use multiple CSS files, instead of one large CSS file (> ~30Kb), if you can organize the CSS styles by areas
of the site thereby avoiding download of unused styles (ie. adminSection.css, publicSection.css)
3. CSS files should be stored in the “css” folder in the root directory of the site/app or section
4. Images used in the presentation of the web page should be stored in the same folder (typically called
“images”) in the root directory of the site/app or section
5. External CSS files should be reference in the <head> section as follows:
<link rel="stylesheet" type="text/css" href="css/main.css" />
6. Reset styles with a reset.css to remove browser rendering differences. See Appendix A – reset.css
7. Do not use CSS hacks (See General Standard #7)
8. Use CSS classes where ever possible to promote style reuse/consolidation
9. Refrain from using element ids to avoid naming conflicts; use CSS classes instead
10. Use descendant selectors whenever possible to avoid verbose XHTML markup:
#navigation ul li { ... }
11. Avoid using absolute positioning without a relatively positioned parent, as it doesn’t promote free
flowing designs
12. Prefer to use multiple CSS classes on an element as opposed to using an id:
<div class="red smallText"></div>
13. Use CSS shorthand where possible/logical to shorten CSS length

margin: 0px;
padding: 0px 10px;
border-right: solid 1px #000;
14. Only use common fonts to ensure similar presentation across browsers/operating systems. Such as
Arial, Georgia, Verdana, etc.
15. Specify a general font-size as a percentage in the body style and use em units to specify font size for
child styles.

body { font-size: 85%; }


p { font-size: 1.2em; }
16. Check CSS selector compatibility before using advanced selectors. See Appendix B – CSS Selector
Support
17.

Preferred CSS Presentation Techniques

1. Heading Image Replacement - The text within heading tags can be hidden and replaced with an image,
within CSS, as follows:

HTML:
<h1>
<a href="">
<span class="text">Page Header 1</span>
<span class="image"></span>
</a>
</h1>

CSS:
h1
{
position: relative;
width: 123px;
height: 49px;
}
h1 span.text
{
display: none;
}
h1 span.image
{
position: absolute;
width: 100%;
height: 100%;
background-image: url("../images/logo.gif");
background-position: top left;
background-repeat: no-repeat;
}

2. Horizontal Navigation - Links can be placed in a list and styled to look like a menu

HTML:
<div id="navigation">
<ul>
<li>Home</li><li>Link 1</li><li>Link 2</li><li class="lastItem">Contact
Us</li>
</ul>
</div>

CSS:
#navigation ul
{
margin: 0px;
padding: 0px;
border: solid 1px #000;
width: 500px;
}
#navigation ul li
{
display: inline;
margin: 0px;
padding: 0px 10px;
list-style-type: none;
border-right: solid 1px #000;
}
#navigation ul li.lastItem
{
border: none;
}

3. Centering Content – You can center content across browsers by using the following styling

HTML:
<div class="parentToCenteredContent">
<div class="centeredContent">
<p>This paragraph should be centered.</p>
</div>
</div>

CSS:
.parentToCenteredContent
{
text-align: center;
}
.centeredContent
{
margin: 0px auto;
}

4. Columns – You can use the float property to create columns of content. Use display inline to avoid
double margins in IE.

HTML:
<div class="columnContainer">
<div class="contentColumn">
<h2>Column 1</h2>
<p>This is the content for column 1.</p>
</div>
<div class="contentColumn">
<h2>Column 2</h2>
<p>This is the content for column 2.</p>
</div>
<div class="contentColumn">
<h2>Column 3</h2>
<p>This is the content for column 3.</p>
</div>
</div>

CSS:
.columnContainer
{
position: relative;
width: 500px;
display: inline;
}
.contentColumn
{
width: 30%;
float: left;
display: inline;
}

5. Fixed Positioning in IE6 – You can use the “fixed” position in modern browsers but it doesn’t work in IE6.
This is a work around for the same styling.

position: absolute;
top: (145+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
right: expression(20+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');}
Appendix A – reset.css

html, body, div, span, applet, object, iframe,


h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}

/* remember to define focus styles! */


:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */


ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */


table {
border-collapse: collapse;
border-spacing: 0;
}
Appendix B – CCS Selector Support

http://www.evotech.net/blog/2008/05/browser-css-selector-support/

You might also like