Why do we need different elements?

Written Language

Written text, in any language, includes rules and conventions for constructing documents so that they effectively present their content

In the English language, our documents can include articles, sections, asides, headings, lists, tables, images, and so on that are used to arrange the document's information in a logical fashion that conveys meaning to the reader

We can drill down further with paragraphs, each of which consists of one or more sentences

Sentences, in turn, have their own rules, conventions, and punctuation

Relationship between structural elements

We can use this figure to visualize how elements are nested in HTML

Inline Elements

Elements we can apply at the 'sentence level'

We call these 'sentence level' elements Inline Elements

These elements modify content within a sentence (or sentences) without breaking it up

Inline Elements - <b> / <strong>

Modifies text, making it appear bold

This is bold text
    or
This is bold text

Will display like this:

Inline Elements - <i> / <em>

Modifies text, making it appear italic

This is italic text
    or
This is italic text

Like this:

The Flow

We'll see, when we start with CSS, that we can modify the default appearance of each of these to suit our needs

These elements, however, provide us with a way to modify the structure of a document as well as the appearance of the display

The big takeaway here is that they are structural elements that don't break the flow of the document

When the document is rendered by a browser, it starts in the upper left corner and 'flows' across the display until it reaches its right edge

It then starts at the beginning of the next line and so on, rendering the document line-by-line

This is the document flow

Inline elements do not interrupt this

Block Elements

It stands to reason, if we have elements that don't break up the document's flow, we must also have elements that do

We call these elements Block Elements

You can think of these elements as working at the 'paragraph' (and above) level

Paragraph - <p>

The first of these we're going to talk about, appropriately enough, is the paragraph element - <p>

Just as in writing, a paragraph consists of one or more sentences

Using HTML, other elements can be included inside the paragraph element, but it usually consists of text (and inline elements) only

They 'break the flow' of the document's rendering, reset the cursor at the beginning of the next line, add whitespace, display, add more whitespace, and resume the document flow

Paragraph - <p>

This is some content
This is a paragraph
This is some other content

Line Break - <br>

Another structural element is the Line Break

This is like a paragraph, except it doesn't add whitespace

This is some content

This is a line break

This is some other content

Horizontal Rule - <hr>

The Horizontal Rule breaks the flow and adds a horizontal line between elements

This is some content, followed by a horizontal rule

This is more content, followed by another horizontal rule

This is some other content

What's with the slash / ?

Sometimes, you'll see a standalone element in the code that looks like this:

    <br />
      or
    <hr />

This is an old convention that's still valid

It dates back to the old xHTML standard

Either is OK, but I prefer the elements without the slash

Headings

Headings are used to logically group related content

Similar to newspaper headlines

Very important for the user experience

By default, text is displayed bold

Headings

There are six headings: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>

Headings range in size from <h1> (largest) to <h6> (smallest)

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Blockquote - <blockquote>

Sets quoted text apart indenting it left and right

Same as with print text

Blockquote - <blockquote>

This is a paragraph

    This is quoted text. Usually,
    blockquotes are used for 
    longer quotations

This is a paragraph

Blockquote - <blockquote>

Going Bigger

Thinking back on our pyramid, paragraphs (and related elements) are usually contained by larger elements

Primary among these is the <div> element

<div> is the 'workhorse' of HTML document structure

There are others - derivatives of <div> - that we'll talk about later

<div>

    

        This is a paragraph that is
        contained by a <div>
    
    

        Another paragraph
    
    

        Divs often also contain other 
        elements like images, figures,
        tables, lists, and so on
    

<div>

We can see from this screenshot that the <div> element doesn't alter the display by itself

Later, we'll see how we can style it to make it display the way we want

Thinking about document structure, <div>s can be styled to perform different functions, like headers, asides, footers, and so on

Lists

We love our lists!

Shopping lists, to-do lists, ingredients lists, pros/cons - many data types are best presented in this format

Lists have been around in HTML since Day 1

From a design perspective, it's better to use a list, when possible, instead of a long paragraph

Remember: Users typically scan web pages for information, rather than reading start to finish

List Items

Every list consists of one or more list items

A list with one item wouldn't be much use, though, I think

The HTML element for list items is <li>...</li>

this is an item
this is another item
this is another item
this is another item

Types of Lists

There are three types:

Ordered Lists

    
this is another item
    
this is another item
    
this is another item

The browser handles the numbering (you don't type it yourself!)

Indented by default

Notice that each list item is in its own <li>...</li> element

Ordered Lists

This is a paragraph
   

    
Java
    
JavaScript
    
PHP

This is a paragraph

Types of Ordered Lists

We can specify what type of numbering we want to use with an attribute - type

1 == numbered

A == uppercase letters

a == lowercase letters

I == uppercase Roman Numerals (this is a capital letter 'I')

i == lowercase Roman Numerals

Types of Ordered Lists

This is a paragraph

    
Java
    
JavaScript
    
PHP

This is a paragraph

Types of Ordered Lists

This is a paragraph

    
Java
    
JavaScript
    
PHP

This is a paragraph

Ordered Lists - Where to start?

Another useful attribute is start

Will begin the list at the current numerical value

Types of Ordered Lists - Where to start?

This is a paragraph

    
Java
    
JavaScript
    
PHP

This is a paragraph

Unordered Lists

Often, the order of the list items doesn't matter

In this case, we usually use a bulleted list

In HTML-speak, we call this an Unordered List

These lists are defined with the <ul> ... </ul> element

Unordered Lists

This is a paragraph

    
Java
    
JavaScript
    
PHP

This is a paragraph

Unordered Lists

We can specify what kind of bullet we want using the type attribute

• disc (default)
• circle
• square

Unordered Lists

This is a paragraph

    
Java
    
JavaScript
    
PHP

This is a paragraph

Description Lists

Description Lists are a little bit different

Each list item has two entries

<dt> == Data Term

<dd> == Data Description

Used for glossaries, etc., where list items are paired

Description Lists

This is a paragraph

    
Java
    
Programming language developed by Sun Microsystems
    
JavaScript
    
Programming language of the Web

This is a paragraph

Nesting Lists

We can nest one list inside another - the 'inside' list will be contained within one of the 'outside' list's list items

Operating Systems
   

    
Linux
    
Windows
        

            
Win7
            
Win8
            
Win8.1
            
Win10
        
    
    
Macintosh

Nesting Lists

Motivation

Successful web sites don't just happen

A website can make - or break! - an organization

Careful planning and design are required to create a site that meets both the clients' and users'

Some 'best practices' have been developed over the years to help

Remember, while we're working small this semester, the knowledge and skills you'll learn in this class are applicable to enterprise-grade websites

Rationale

Website design, like software design, is driven by certain realities

A web site should be useful and usable

A web site should meet the needs of the client

A web site is not static

Changes in target population

Changes in content

Changes in technology

Rationale

Any commercial project should be divided into a series of steps

Each step involves a set of inputs and a set of expected outputs/outcomes

This methodology

Generates accurate customer requirements

Provides a reasonably accurate timeline for project completion

Helps identify necessary technology and manpower for the project

Identifies necessary and relevant testing that the project will require

Creates a budget for the project (kind of important)

Getting started right

Every well-designed web site has

A well-defined mission

A set of targeted site users

Designers cannot proceed without them

Designers generally don't determine, but can assist

Question client for needed information

Often necessary to educate the client - best way to proceed and why

If there's no mutual understanding, the project will fail or, at best, require a lot of later rework

Site Mission Statement

What is the owner of the site wanting the web site to accomplish? Why is it being created?

Synthesize into a short paragraph--Site Mission Statement

The mission statement should capture the organization's mission and how the website facilitates it

Many companies have established company mission statements

What we are seeking is different from that, although related

We want to know the mission of this site not the overall company

Other Examples

SuperDog.com is the online home of the Super Dog comic character. It is a place for fun-loving people to share in the ongoing adventures of the Super Dog character, comment on events happening in the Super Dog universe, and buy Super Dog merchandise

BuyANewHouse.com helps people wanting to buy or sell a house without a realtor, to exchange information, and negotiate a purchase

Other Examples

Microsoft: Our mission is to empower every person and every organization on the planet to achieve more

Nordstrom: To give customers the most compelling shopping experience possible

Southwest Airlines: The mission of Southwest Airlines is dedication to the highest quality of customer service delivered with a sense of warmth, friendliness, individual pride, and company spirit

Uber: We ignite opportunity by setting the world in motion

Google: To organize the world's information and make it universally accessible and useful

Tesla: To accelerate the world’s transition to sustainable energy

The Coca-Cola Company: To refresh the world in mind, body and spirit. To inspire moments of optimism and happiness through our brands and actions

Importance of a Site Mission Statement

Site Mission Statement defines the target we're trying to hit as designers

Site created must fit the mission

Designer and customer must have unified understanding of what is to be accomplished

Protects from 'mission-creep,' also known as 'requirements creep'

I know we agreed on this, but wouldn't it be nice if it also...

Importance of a Site Mission Statement

Again, we're looking at commercial website design

As with any other serious activity, the rule is C-Y-A

If it ain't wrote down, it didn't happen ~ Every cop, lawyer, and judge who ever lived