Published on

Published in: Technology, News & Politics
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Class 13
  2. 2. 10 HTML Tag Crimes You Really Shouldn’t Commit Article from: shouldnt-commit
  3. 3. 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.
  4. 4. 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=”".
  5. 5. 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!
  6. 6. 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.
  7. 7. 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.
  8. 8. 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.
  9. 9. 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.
  10. 10. 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.
  11. 11. 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.
  12. 12. 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!
  13. 13. Table • Tables are commonly used on Web pages in two ways: – To organize information – To format the layout of an entire Web page
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. XHTML Common Table Attributes • align (deprecated) • bgcolor (deprecated) • border • cellpadding • cellspacing • summary • width – Percentage or pixels? 18
  19. 19. XHTML Common Table Cell Attributes • align • bgcolor (deprecated) • colspan • rowspan • valign • height (deprecated) • width (deprecated) 19
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. <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>
  24. 24. 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
  25. 25. 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
  26. 26. 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