Adding Structure

1
Adding Structure

• Week 4 - Presentation 2
• Veronica Noone

2
Objectives

• Lets Review
• IDs and Classes
• Naming Conventions
• Classitus
• Div and Spans

3
IDs and Classes

• There isnt a tag for everything!
• Provide extra meaning
• Add structure
• More control over styling

4
IDs

• Identify an individual element on the page
• Must be unique
• Useful for dividing your page into content area
• Use for one of a kind unique elements
• Be semantic not visual! ???

5
Classes

• Can be applied to any number of elements on the
  page
• Identifies types of content
• Examples
• classjobDescript
• classdateHeader
• classcomment

6
Naming Conventions

• Meaningful not Presentational
• Examples
• redlinks vs subNav
• leftStuff vs secondaryContent
• topStory vs mainStory
• CASE sensitive

7
Classitus

• Ids and Classes can be overused

lth1 classheadlinegtTodays Newslt/h1gt ltp
classnewsTextgtIt was a great class today!
Students seemed mildly interested and they
ACTUALLY learned something! lt/pgt ltp
classnewsTextgtOr did they?lt/pgt
Whats the difference?
ltdiv idstorygt lth1gtTodays Newslt/h1gt ltpgtIt was
a great class today! Students seemed mildly
interested and they ACTUALLY learned something!
lt/pgt ltpgtOr did they?lt/pgt lt/divgt
8
Adding more Structure

• ltdivgtlt/divgt
• Division
• Logically splits you document into meaningful
  areas
• Avoid divitus
• Useful when you want to group multiple elements
  together to create a division
• Generic Block Level Element

9
Provide Meaning to Inline?

• ltspangtlt/spangt
• Generic Inline Element
• Useful in applying classes to in the middle of an
  element.

ltpgtThis document was written by ltspan
classauthorgt Veronica Noonelt/spangtlt/pgt
10
Who Cares?

• Lets take a look at an example