Differences

This shows you the differences between two versions of the page.

--- eg-146:lecture13 [2012/03/08 18:23] – [Marking navigation] eechris
+++ eg-146:lecture13 [2012/03/08 23:38] – [Basic HTML Structure] eechris
@@ Line 21: / Line 21: @@
   * [[#naming_elements|Naming Elements with class, id and title attributes]]
   * [[#Commenting your code]]
+===== Session Example =====
+This is the example that we will use throughout this session: [[/eg-146/basic-html/gaudi.html]]
 ===== The document template =====
@@ Line 216: / Line 220: @@
 [[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/marking-navigation.html|Example]]
 ===== Creating an article =====
+> The ''article'' element represents a self-contained composition in a document, page, application,
+> or site and that is, in principle, independently distributable or reusable, e.g. in syndication.
+> This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted
+> comment, an interactive widget or gadget, or any other independent item of content.
+[[http://dev.w3.org/html5/spec/Overview.html#the-article-element|W3C, //Section 4.4.4 The Article Element//, HTML5 Spec.]]
+[[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/creating-an-article.html|Example]]
 ===== Defining a section =====
+> The ''section'' element represents a generic section of a document or application. A section, in
+> this  context, is a thematic grouping of content, typically with a heading.
+>
+> Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the
+> numbered sections of a thesis. A Web site's home page could be split into sections for an
+> introduction, news items, and contact information.
+[[http://dev.w3.org/html5/spec/Overview.html#the-section-element|W3C, //Section 4.4.2 The Section Element//, HTML5 Spec.]]
+[[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/defining-a-section.html|Example]]
+===== When to use? =====
+Is your content an independent piece of content or a widget that would be appropriate for syndication?
+  * **Yes** -- Use  ''article''
+  * **No** -- use ''section'' (but see [[#Generic containers]] later)
 ===== Specifying an aside =====
+For tangentially related sections of content that could stand on its own is marked up using the ''aside'' element.
+  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/specifying-an-aside.html|Example]]
+----
+<note>
+''aside''s are often rendered by CSS by removing them from the amin body and moving them to a side column.
+</note>
 ===== Creating a footer =====
+<code html>
+<footer>
+  <p><small>&copy; Copyright 2011</small></p>
+</footer>
+</code>
 ===== 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 ''div'' element can be used for this purpose.
+Examples:
+  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/no-divs.html|Use of a div to demarcate the content]]
+  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/divs-with-ids.html|divs with ids]]
+----
+<note>
+Before HTML5 ''<div id="container-name">...</div>'' was the only way to create the sectioning features that we have just described. In fact it was a survey of the common ways that divs where used by web designers that led the designers of HTML5 to the collection of sectioning elements that we now have. For example ''<div id="header">'', ''<div id="footer">'', ''<div id="nav">'', etc can still be observed in many "legacy" web sites that are not marked up in HTMl5.
+</note>
 ===== Improving Accessibility with ARIA =====
+[[http://www.w3.org/WAI/intro/aria|WAI-ARIA]] (Web Accessibility Initiative's Accessible Rich Internet Applications), or ARIA for short, adds additional attributes to elements that can help further improve the accessibility of web pages.
+Examples:
+  * ''role="application"'', ''role="banner"'', ''role="complementary"''
+  * ''role="contentinfo"'', ''role="form"'', ''role="main"'',
+  * ''role="navigation"'', ''role="search"''
+[[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/improving-accessibility-aria.html|Example]]
 ===== Naming elements =====
+Use ''class'' or ''id''.
+  * id is unique in the document: ''id="document-unique-name"''
+  * class can apply to a number of document elements: ''class="name"''
+  * There can be multiple class names in a single class attribute: ''classs="name anothername"''
+[[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/naming-with-class-id.html|Example]]
+----
+<note>
+  * 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.
+</note>
+===== Adding the Title Element to Your Code =====
+<code html>
+<element ... title="A sentence or two describing the element's content. Usually shown in a tooltip">
+ ...
+</element>
+</code>
+[[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/adding-title-attribute.html|Example]]
 ===== Commenting your code =====
+<code html>
+<!-- anything between these symbols is ignored by the browser -->
+</code>
+[[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/adding-comments.html|Example]]