HTML Semantics
Information Architecture
CSS Pseudo-classes
Making a Nav Bar
The study of the meanings of words and phrases in language
'Semantic Elements' are elements that have meaning
Clearly describes meaning to both the browser and the developer
Non-semantic: <div> & <span> tell nothing about what they contain
Semantic: <form>, <table>, & <img> clearly define their content
HTML 5 includes semantic elements, which define different parts of a web page
<header>
<nav>
<section>
<article>
<aside>
<footer>
The <header> element creates a header for a document, section, or article
Should be used as a container for introductory content
A page may (or may not) have several <header> elements
The <nav> element creates a set of navigation links
The <nav> is typically used for nav links internal to the site
Not all links in a document will be placed inside a <nav> element!
<nav> is specifically for intra-site links; absolute links (to resources outside of a site) should be styled differently
The <section> element creates a section (division) in a document
According to W3C's HTML5 documentation: "A section is a thematic grouping of content, typically with a heading"
A Web site's home page could be split into sections for introduction, content, and contact information
A page may be divided into a number of sections, each with a logical theme
Alternatively, a page may have one section with a number of headers that divide them logically
The <article> element specified independent, self-contained content
An article should make sense on its own, and it should be possible to read it independently from the rest of the web site
Examples of where an <article> element can be used:
Forum post
Blog post
Newspaper article
An <article> can be used in a similar fashion as a section, with similar properties
The <aside> element defines some content that is related to, but not directly, the site's overall content
This is typically a sidebar-kind of element
May be a set of <nav> elements, a calendar, an RSS feed, or anything else that may be of interest to a user
Well, a <footer> element is located at the end, or bottom, of a document or section
Should contain information about its containing element
Author, copyright © information, links to terms of use and/or privacy information, etc.
A document may (or may not) have several footer elements
In the HTML 5 standard, the <article> element defines a complete, self-contained block of related elements
The <section> element is also defined as a block of related elements
So, can we use these definitions to decide how to nest elements?
NO! We cannot!
On the Internet, you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements
You will also find pages with <section> elements containing <section> elements, and <article> elements containing <article> elements
As a designer, you should pick what structure / nesting scheme best fits your content and be consistent in using it
However, it may be decided by the organization you're employed by
Newspaper vs Academic Journal
Newspaper - Several sections (i.e., Headline News, Sports, Local, Entertainment, etc)
Each 'section' has one or more articles about its topic
Articles typically include content such as headings/headers, text, images, tables, an even (sometimes) asides
Newspaper vs Academic Journal
Academic Journal: A single publication with a number of articles about a topic of interest
Each article (tends to) be rather lengthy
Often divided into sections: Abstract, Introduction, Literature Review, Hypothesis, Methodology, Results, Conclusion, Bibliography
Each section includes text (content), images, tables, figures, lists, etc
With HTML 4, developers tended to use their own, custom, favorite, attribute names to style page elements
header, top, bottom, footer, menu, container, content, article, sidebar, topnav, ...
This practice made it impossible for search engines to identify the web content
With HTML 5, elements like <header>, <footer>, <nav>, <section>, & <article>, this becomes easier for search engines to better index web sites
Addording to the W3C, a Semantic Web
Allows data to be shared and reused across applications, enterprises, and communities
IE8 (and below) does not 'play nice' with the new HTML 5 elements. In order to use them, you need to
Download the html5shiv.js JavaScript file
Add the following lines of code to the <head> element
From Bootstrap framework head element. Allows use of the shiv without having to download it
- cdn == Content Delivery Network
Older browsers may not recognize the new elements as block level container elements. Will need to add the following to your CSS:
header, section, footer, aside, nav, article, {
display: block;
}
Science of figuring out what site should contain & how it can best be organized and presented
Two primary elements
Organizing and labeling site content
Designing navigation through information
The more work done early, less rework to do
Challenging to take a large amount of data and make it easy to understand and navigate
Organize information - structure
Information grows and changes over time - good structure enables this
You have to plan ahead to make a site maintainable
Users make a quick assessment of a site when they land on it to understand how it is organized and what it contains
If too much is presented, or it is poorly organized, the user will feel overwhelmed and/or confused
Overwhelmed/confused users typically bounce
If too little is presented, the user may feel bored and decide that little value is present
If the user doesn't feel 'in control' or have understanding of site structure, will tend to leave
We must think about navigation and organization of site like the user does
'Putting yourself in the user's shoes' is a critical skill for a developer
Decide what information elements and functional content site must provide
Decide how above can best be grouped and organized
Plan connecting navigation among elements
Create succcinct, descriptive terms that can be used to guide navigation
Think like a user, not a developer
Evaluate and improve resulting proposed structure
How we organize content is just as important as the content itself, if not more so
Labels and naming
What are things called? Be consistent to avoid confusion
Clarity & simplicity
Structure of content
What goes where?
What is the relationship between elements?
Navigation between pages
How to map the thought process to support navigation?
Organize the following list of items
Alphabetical list
By size:
By room:
By exact location:
Biggest Problem: Not organizing site around the way users think
Organizing site based on some inner company structure the user can't relate to
Unclear descriptions. Where will this take me?
Inconsistent link behavior
Can people find what they are looking for?
Learn how site visitors think. Structure site to match their mental model
Structural - Basic linkage between pages defining overall site structure
Categorical - breaking of content into different categories understandable to user
Relational - linkage between content related in some manner in thought process
Promotional - calls attention to special items or content
Search - direct path to items specifically identified by the user
Four critical user questions
Where am I?
Where can I go?
How will I get to my desired content?
How can I get back to where I once was?
The Web's non-linear presentation of content can be confusing and overwhelming
Be easily learned
People don't invest time learning to use a website
Remain consistent
Should be predictable. User shouldn't feel lost
Provide feedback
Let user know where they are
Offer alternatives
Don't tie user to one way of moving around
Economize action & time
People lost interest if the path is long
Use clear & understandable labels
Never use a big word when a small one will do
CSS pseudo classes are designed to allow us to add special effects to some selectors
For instance, if we wanted to change the way a hyperlink looks when someone hovers over a link, we can use the :hover pseudo class
A pseudo class is denoted with a colon, ':'
For example:
a:hover {
color: #ff00ff;
}
/* or */
nav a:hover {
color: #ff00ff;
}
| :link | a:link | unvisited links |
| :visited | a:visited | visited links |
| :active | a:active | active links |
| :hover | a:hover | moused-over links |
| :first-child | table:first-child | will affect the first row of table |
| :first-line | p:first-line | first line of the paragraph |
Using HTML and CSS, we can transform a basic unordered list into a navigation bar:
/* First, remove the bullets, margins,
and paddings from the list: */
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/* Then */
li {
float: left;
}
/* Set anchor elements' display and width */
li > a {
display: block;
width: 60px;
}
/* Let's pretty it up */
li > a:link, li > a:visited {
display: block;
float: left;
width: 100px;
margin-right: 3px;
line-height: 1.8em;
background-color: #00a;
color: #fff;
border-radius: 10px;
text-align: center;
text-decoration: none;
position: relative;
left: 50px;
top: -15px;
} /* and -> */
li > a:hover, li > a:active, .current {
background-color: #a0a;
color: #ff0;
}
