HTML Tags Design for Template / Theme Creation

by Yang Yang on August 27, 2009

There are in total nearly a hundred HTML tags with good ones as well as bad ones in terms of XHTML. In the creation of a template or theme, after designing for the overall layout, artistic feel as well as the entire set of visual elements, the designer will be preparing the ready-to-use styles needed for common content tags such as the headings <h1>, <h2>, <h3> and <blockquote> and so forth, even though they may not have been used yet in the design. This article tries to be a rough guide on what tags to be styled before hand.

Here’s a shortened list for the most common scenario:

  1. <a>, the hyperlink, of course.
  2. <acronym>, usually for acronyms and abbreviations such as HTML. Industry standard is to style it with a dotted border at the bottom. However, <acronym> tag has fallen out of favor of HTML5, use <abbr> instead.
  3. <cite>, author, <q>, inline quotations, <blockquote>, large paragraphs of quoting which is one of the most necessary tags that need to be styled before hand.
  4. <button>, you may or may not prescribe a global visual style for all button tags across the template
  5. <caption>, table caption / title, centered and bold by default, come out with a better one in case the content contains a lot of tables. <table>, <tr>, <th>, <td>, <thead>, <tfoot>, <tbody>, … for table styles
  6. <code>, for templates dealing with code samples.
  7. <dfn>, for definition terms, frequently used with a lot of inline terms and definitions.
  8. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, content headings.
  9. <img>, content image styles.
  10. <fieldset>, form fieldsets. <legend>, form fieldset title.
  11. <form>, forms.
  12. <input type=”text”>, <input type=”checkbox”>, <input type=”radio”>, <input type=”file”>, <input type=”password”>, <textarea>, input controls of forms.
  13. <label>, form field labels.
  14. <li>, <ol>, <ul>, ordered list styles and unordered list styles.
  15. <p>, paragraph styles.
  16. <select>, <option>, <optgroup>, select list styles.

Comments on this entry are closed.

Previous post:

Next post: