Embed Size (px)
Citation preview
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
syntax color
