In general, HTML tags in the main content area of a site should be used without additional classes or in-line CSS styling. This provides consistent styling across an entire site. Differences in styling of the same HTML elements in different parts of the site should be provided by CSS selectors that start with structural elements of the region being targeted (usually <div> tags).
The HTML markup on library websites should follow the general Yale guidelines at YaleSites [1] that deal with HTML. In addition, HTML should meet Yale's accesibility requirements [2], especially:
Never choose an HTML tag based on how it looks, as this may confuse screen readers for the blind, and may also decrease the relevance ranking of your content to web search engines.
The main website for the library uses HTML 5, and this is the recommended version of HTML to use for new sites. However, new semantic/structural elements in the HTML 5 standard [3], should be used with caution and tested extensively on older browsers. Other elements (for media, the <canvas>, form elements, and new input types) should probably be avoided. Most new structural elements (<article>, <header>, <footer>, <section>, etc.) are not styled in our base theme, and should be considered the same as the <div> tag for layout purposes.
Header tags should be used sparingly to separate distinct parts of the document.
The Header 1 tag <h1> should only be used once on a page for the title of the main content. The phrase "Headers" at the top of this page is an example of the Header 1 tag.
The Header 2 tag <h2> is generally reserved for navigational elements. The menu options at the top of the page ("Research", "Services", etc.) and the phrase "Web Design Guidelines" at the top of the table of contents on the left are examples of Header 2 tags.
The Header 3 tag <h3> should be the first level used in the main content, after the <h1> tag at the top. The phrase "Header 3 & Header 4" at the top of this section is an example of the Header 3 tag.
The Header 4 tag <h4> should be used to further divide sections between the Header 3 tags. Many pages may not need Header 4 tags. The phrase "Header 4" above is an example of the Header 4 tag.
Currently, Header 5 <h5> and Header 6 <h6> are not styled in the library's base theme. If you find that you need this level of division on a single page, you should consider breaking up the content into separate pages.
The YUL theme supports three basic lists: ordered <ol>, unordered <ul>, and definition <dl>.
Just like tables, lists should only be used for their proper semantic meaning, not for layout. If you find that the default styling for a list is not working for what you need, contact Library IT. They will help you come up with a solution that is easy to maintain. Do not try to "force" lists to display differently using in-line CSS or WYSIWYG buttons.
Ordered lists <ol>, and unordered lists <ul> both have the same child tag, a list item <li>.
Unordered lists are also called "bullet lists":
Ordered lists are commonly referred to as "numbered lists":
Ordered lists can use other ordinals, like roman numerals and letters of the alphabet [4]. These others may, or may not, be supported by the software you are using to create your pages. As always if you need help, please contact Library IT
Definition lists <dl> have two child elements: definition terms <dt>, and definition definitions <dd>. Definition lists are good for anything where you have a short title (term) and a short description (definition), like a glossary or a list of external links:
HTML tables <table> should be used sparingly, and only for information that truly belongs in a table. Tables should not be used just for layout.
Also, you should not be hand-coding very large tables, tables that need to be updated regularly, or tables that re-create data that is stored elsewhere. If you find yourself spending a lot of time keeping tables up-to-date, or you need advanced functionality (like the ability to sort by column) you should contact library IT about creating a more sustainable solution.
Currently, tables have the default YaleSites styling, and all tags unique to tables are supported:
thead | th 1 | th 2 |
---|---|---|
tbody | td 1 | td 2 |
tr 2 | td 1 | td 2 |
tfoot | td 1 | td 2 |