Class13

10 HTML Tag Crimes You Really Shouldn’t Commit
Article from: http://line25.com/articles/10-html-tag-crimes-you-really-
shouldnt-commit

Crime 1: Placing Block Elements
Inside Inline Elements
HTML elements can either be
displayed in two ways, Block or
Inline. Each tag by default is
naturally either a block or inline
element. Block elements include
divs and paragraphs, that make
up the structure of the
document. Inline elements on the
other hand should sit inside block
elements and go with the flow of
the document, examples include
anchors and span tags. With this
in mind, inline elements should
always go inside block elements,
and never the other way around.

Crime 2: Not Including an ALT
Attribute on Images
The ALT attribute is a required
element on all images displayed
on a web page. It helps users
determine what the image is,
should they be browsing on a
screen reader, or simply on a slow
connection. The ALT attribute
should describe the image being
shown, so an alt=”image” is bad
practice. If the image is purely for
decorative purposes, simply add
an empty alt attribute, such as
alt=”".

Crime 3: Not Using Lists When
Necessary
The handy UL (and OL) tags have
a bunch of uses and are
extremely versatile for the display
of all kinds of page items.
Unsurprisingly the Unordered List
tag does a great job of displaying
a list of information, so don’t
even think about using a bunch of
line breaks ever again!

Crime 4: Using <b> and <i> for Bolding
and Italicizing
The <b> and <i> tags make the
text appear bold and italic
respectively, but semantically
they are classed as presentational
tags, therefore the effect would
be best replicated with the CSS
styles of font-weight and font-
style. If the passage of text
suggests areas of importance,
they should be highlighted with
the <strong> or <em> tags, which
basically do the same job as <b>
and <i>, but also make the world
a nicer place.

Crime 5: Using Too Many Line Breaks
The line break tag of <br />
should only be used to insert is
single line breaks in the flow of
paragraph text to knock a
particularly word down onto a
new line. It shouldn’t be used to
make gaps between elements,
instead, split the text into
separate paragraphs, or adjust
the margin styled by CSS.

Crime 6: Using The Wrong
Strikethrough Tags
In the olden days, <s> and
<strike> were around to allow
edits and amends to web text.
However they are now classed as
deprecated tags, which means
they still work fine (in
Transitional), but there’s a set of
new tags on the block – <del>
and <ins>. These new tags are
used together to show deleted,
and the subsequently inserted
text in a document.

Crime 7: Using Inline Styling
You’ve heard it a thousand times
– Inline styling is bad. The whole
point of semantic HTML and CSS
is to separate document structure
and styling, so it just doesn’t
make sense to go placing styling
directly in the HTML document.
Remember to always keep your
styles in your stylesheet where
they belong.

Crime 8: Adding or Removing Borders
in HTML
The border attribute is another
presentational effect, so
semantically it should be left to
the CSS, even if it’s removing a
default border from an element.

Crime 9: Not Using Header Tags
Header tags are available all the
way from <h1> to <h6>, and make
handy tags to separate your
document into titled sections. If
you have a selection of words
indicating what content is due to
appear next, chances are one of
the header tags will fit right in.
Your choice of header tag
depends on the flow of your
document, try to naturally insert
them in order of 1-6 where
appropriate.

Crime 10: The Unspeakable Use of
<blink> or <marquee>
Apart from not even being part of
the official collection of standard
HTML endorsed by the W3
Consortium, the <blink> and
<marquee> tags are just pure
ugliness. If there’s something you
need to draw attention to, I’m
sure you can think of plenty of
alternate ways to draw focus to
that area of the page than to
have it flash on and off or scroll
across the page!

Table
• Tables are commonly used
on Web pages in two ways:
– To organize information
– To format the layout of an entire Web page

XHTML
Using Tables
• Composed of rows and columns – similar to
a spreadsheet.
• Each individual table cell is at the
intersection of a specific row and column.
• Configured with <table>, <tr>, and <td>
elements
14

XHTML
Table Elements
• <table> Element
Contains the table
Common attributes: border, width, align
• <tr> Element
Contains a table row
• <td> Element
Contains a table cell
• <caption> Element
– Configures a description of the table
15

XHTML
Table Example
<table border="1">
<caption>Birthday List</caption>
<tr>
<td>Name</td>
<td>Birthday</td>
</tr>
<tr>
<td>James</td>
<td>11/08</td>
</tr>
<tr>
<td>Karen</td>
<td>4/17</td>
</tr>
<tr>
<td>Sparky</td>
<td>11/28</td>
</tr>
</table>
16
Birthday List

XHTML
Table Example 2
<table border="1">
<tr>
<th>Name</th>
<th>Birthday</th>
</tr>
<tr>
<td>James</td>
<td>11/08</td>
</tr>
<tr>
<td>Karen</td>
<td>4/17</td>
</tr>
<tr>
<td>Sparky</td>
<td>11/28</td>
</tr>
</table>
17
Using the <th> Element

XHTML
Common Table Attributes
• align (deprecated)
• bgcolor (deprecated)
• border
• cellpadding
• cellspacing
• summary
• width
– Percentage or pixels?
18

XHTML
Common Table Cell Attributes
• align
• bgcolor (deprecated)
• colspan
• rowspan
• valign
• height (deprecated)
• width (deprecated)
19

XHTML
colspan Attribute
<table border="1">
<tr>
<td colspan=“2”>
Birthday List</td>
</tr>
<tr>
<td>James</td>
<td>11/08</td>
</tr>
<tr>
<td>Karen</td>
<td>4/17</td>
</tr>
</table>
20

XHTML
rowspan Attribute
<table border="1">
<tr>
<td rowspan=“2>
<img src=“cake.gif” alt=“cake” height=“100” width=“100” /></td>
<td>James</td>
</tr>
<tr>
<td>11/08</td>
</tr>
</table>
21

Accessibility and Tables
• Use <th> elements to indicate column or
row headings.
• Table element summary attribute
– provide an overview of the table contents
• Complex tables:
Associate table cell values with their
corresponding headers
– <th> tag id attribute
– <td> tag headers attribute

<table border="1" width="75%" summary="This table lists my
educational background. Each row describes educational
experience at a specific school.">
<tr>
<th id="school">School Attended</th>
<th id="years">Years</th>
<th id="subject">Subject</th>
<th id="degree" >Degree Awarded</th>
</tr>
<tr>
<td headers="school">Schaumburg High School</td>
<td headers="years">2000 - 2005</td>
<td headers="subject">College Prep</td>
<td headers="degree">H.S. Diploma</td>
</tr>
</table>

Table Row
Groups
<table border="1" width="75%"
summary="This table lists my
educational background.">
<thead>
<tr>
<th>School Attended</th>
<th>Years</th>
</tr>
</thead>
<tbody>
<tr>
<td>Schaumburg High School</td>
<td>2005 - 2009</td>
</tr>
<tr>
<td>Harper College</td>
<td>2009 - 2010</td>
</tr>
</tbody>
</table>
• <thead>
table head rows
• <tbody >
table body rows
• <tfoot>
table footer rows

Don’t use tables for website layout
• Not a Valid XHTML
• Tables are Inflexible
• Too many tags
• Nested Tables Load More Slowly
• Tables not useful for Search Engine
• Tables Don't Always Print Well
• Tables "break" on various browsers
• Tables and accessibility problems

Using CSS to Style a Table
XHTML
Attribute
CSS Property
align
Align a table: table { width: 75%;
margin: auto; }
Align within a table cell: text-align
bgcolor background-color
cellpadding padding
cellspacing
To configure a shared common border and eliminate space
between table cells: table, td, th { border-collapse: collapse; }
height height
valign vertical-align
width width
background-image

Class13

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Class13 (20)

More from Jiyeon Lee (13)

Recently uploaded (20)

Class13