WEB - University of Colorado Bouldercreative.colorado.edu/atlas2200/pdf/week2-tech.pdf · alt tag (required) ... html5 parent elements header nav section article aside main footer

WEBWEEK 2 TECH DEMO

Content Structure

HTML5 semantic structure tags

HTML5 Outliner

Developer tools

W3C validator

child elements (4 buckets -put your informational content

here)

heading

paragraph

list

figure

heading

h1, h2, h3, h4, h5, h6

reserve h1 for main document heading

parent elements should start at h2

sub headings should start at h3

paragraph <p>

start paragraph with <p>

end paragraph with </p>

list

ul = unordered list (bullet points)

li = list item (each bullet point)

navigation is a LIST of links

figure

informational image

figcaption = title of image (optional)

alt tag (required)

can also be used as a standalone parent element

html5 parent elements

header

nav

section

article

aside

main

footer

(figure)

<header>

contains main heading (h1) for document

can also contain logo (figure) and table of contents (nav)

can also be used in other elements (article)

<nav>

RESERVED FOR MAIN INTERNAL NAVIGATION ONLY!!!

relative urls or anchor links ONLY (no absolute urls / external links)

<section>

Group related content together (semantically, logically, thematically)

Should have a heading (<h2>)

<article>

Specialized type of section (special use)

independent, self-contained

content makes sense on it’s own even outside the context of the document its part of

syndication (like a blog post)

<aside>

supplementary info

“sidebar”

<footer>

Small print, copyright, legalese

Attribution

footer at bottom of page = site creator

footer at bottom of article = article author

<main>

the main informational content of the document

the central topic of the web page

excludes document heading, navigation, asides, footer.

Web Developer Tools

html5 outliner

chrome inspect element

w3c validator

code editor - syntax color

html5 outliner

outline summary of web page

https://gsnedders.html5.org/outliner/

HTML5 outliner (chrome plug-in)

chrome inspect elementyour best friend this semester

look under the hood of how the browser is interpreting your web page (html, css, javascript)

control-click/right-click on web page and choose “Inspect”or View > Developer > Developer Tools

W3C Validatorhttps://validator.w3.org

GOOD BAD

syntax color