eg-146:lecture13
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
eg-146:lecture13 [2012/03/08 18:50] – [When to use?] eechris | eg-146:lecture13 [2012/03/08 23:38] – [Basic HTML Structure] eechris | ||
---|---|---|---|
Line 21: | Line 21: | ||
* [[# | * [[# | ||
* [[# | * [[# | ||
+ | |||
+ | ===== Session Example ===== | ||
+ | |||
+ | This is the example that we will use throughout this session: [[/ | ||
===== The document template ===== | ===== The document template ===== | ||
Line 239: | Line 243: | ||
===== When to use? ===== | ===== When to use? ===== | ||
- | Is your content | + | Is your content |
* **Yes** -- Use '' | * **Yes** -- Use '' | ||
* **No** -- use '' | * **No** -- use '' | ||
===== Specifying an aside ===== | ===== Specifying an aside ===== | ||
+ | |||
+ | For tangentially related sections of content that could stand on its own is marked up using the '' | ||
+ | |||
+ | * [[http:// | ||
+ | |||
+ | ---- | ||
+ | |||
+ | < | ||
+ | '' | ||
+ | </ | ||
===== Creating a footer ===== | ===== Creating a footer ===== | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
===== Generic containers ===== | ===== Generic containers ===== | ||
+ | |||
+ | Sometimes you need a container that has no particular semantic meaning but which is useful for the purpose of styling and JavaScript. The '' | ||
+ | |||
+ | Examples: | ||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | |||
+ | ---- | ||
+ | |||
+ | < | ||
+ | Before HTML5 ''< | ||
+ | </ | ||
===== Improving Accessibility with ARIA ===== | ===== Improving Accessibility with ARIA ===== | ||
+ | |||
+ | [[http:// | ||
+ | |||
+ | Examples: | ||
+ | |||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | [[http:// | ||
===== Naming elements ===== | ===== Naming elements ===== | ||
+ | |||
+ | Use '' | ||
+ | * id is unique in the document: '' | ||
+ | * class can apply to a number of document elements: '' | ||
+ | * There can be multiple class names in a single class attribute: '' | ||
+ | [[http:// | ||
+ | ---- | ||
+ | |||
+ | < | ||
+ | * Use id to identify a single element that you later want to be able to refer to later, for example as the target of a link, for styling, or for JavaScript. | ||
+ | * Use class for elements that have a common purpose that you want to be able to style all in one go. | ||
+ | </ | ||
+ | ===== Adding the Title Element to Your Code ===== | ||
+ | |||
+ | <code html> | ||
+ | <element ... title=" | ||
+ | ... | ||
+ | </ | ||
+ | </ | ||
+ | [[http:// | ||
+ | |||
===== Commenting your code ===== | ===== Commenting your code ===== | ||
+ | |||
+ | <code html> | ||
+ | <!-- anything between these symbols is ignored by the browser --> | ||
+ | </ | ||
+ | [[http:// |
eg-146/lecture13.txt · Last modified: 2012/03/12 09:18 by eechris