Tag Usage | CSE 154 Unofficial Style Guide

Choosing Semantic Tags

Choose appropriate tags which represent the semantic meaning of the content. For example:

Do not use a <p> tag around something that is not a paragraph
Do not use a <h4> unless you have already previously used h1-h3 for three other more important levels of headings.
Do not use a blockquote just because you want some non-quote content to be indented to the right. Similarly, if you want quote content, you should use a blockquote as opposed to a <p> with quote-like CSS styles applied to it.
Use an <hr /> when you want to have a horizontal line that separates sections within a page rather than a border style applied to either top or bottom of a <div> (the <hr /> tag was designed for this use, but the border CSS style is designed more for borders on content)

<p>first paragraph
<p>second paragraph
<ul>
    <li>first item
    <li>second item
    <li>third item
</ul>

<p>first paragraph</p>
<p>second paragraph</p>
<ul>
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
</ul>

Presentational Tags

Do not ever use deprecated tags whose meaning is entirely based on their appearance, such as b, i, u, big, small, center, or font. (Use CSS instead to achieve such an appearance.)

Inline CSS

Inline CSS should never be used. Always link to an external CSS file at the <head> of your HTML file.

<p style="font-size: 42pt; font-weight: bold;">42 is the answer</p>

<img src="../cuttlefish.jpg" style="float: left; width: 90%;;"alt="A baby cuttlefish"/>

<p>42 is the answer</p>

<img src="../cuttlefish.jpg" style="width: 90%; float: left;"alt="A baby cuttlefish"/>

/* If appropriate, you may use an ID on tags with unique styles */
p {
  font-size: 42pt;
  font-weight: bold;
}

img {
  float: left;
  width: 90%;
}

Tag Attributes

Spacing Rules For Attributes

Do not place a space between an attribute's name, the equals sign, and its value. Enclose the value in " " quotes, not bare, and not in ' ' apostrophes.

<a href = 'foo.html'>

<a href="foo.html">

Boolean Attributes

For attributes that are essentially boolean flags, set them equal to themselves.

<input type="text" disabled />

<input type="text" disabled="disabled" />

`<img />` Tag `alt` Attributes

Every img tag must have a descriptive alt attribute so that it can be understood by visually impaired users.

                
<img src="cuttlefish.jpg" />

                
<img src="cuttlefish.jpg" alt="an adorable baby cuttlefish" />

Do Not Use Tables Just For Layout Purposes

Do not use HTML table tags to lay out the contents of a web page. For example, it is inappropriate to use a table to divide the page's main content sections into columns, or to get a sidebar or navigation bar, etc.

Instead, use div and other related tags along with the CSS box model and the float or flexbox properties as appropriate. See Chapter 4 of the Web Programming Step by Step textbook for examples.

Home Tag Usage