About

Course URL

HTML is the programming language that powers the web. And like any language, once you master it, you can begin to create your own content, whether that's simple websites or complex web applications. This course provides an in-depth look at the essentials: the syntax of HTML and best practices for writing and editing your code. Senior staff author James Williamson reviews the structure of a typical HTML document, and shows how to section pages and format your content with HTML. Plus, learn how to create links and lists, and find out how HTML works with CSS and JavaScript to create rich, engaging user experiences. So open a text editor, watch these videos, and begin learning to author HTML the right way.

Topics include:

• Why is HTML important?
• Exploring an HTML document
• Formatting content
• Displaying images
• Using nav, article, and div elements
• Linking to pages and downloadable content
• Creating lists
• Controlling styling (fonts, colors, and more)
• Writing basic scripts

Notes

HTML, CSS, JavaScript are most important languages

HTML creates structure of page

Tag: just the <p></p> part

Element: The tag + everything between the opening and closing tag

Attributes: something that modifies an element, applies to nested elements

Value: specifies how an attribute modifies the element

HTML Now

HTML vs HTML5 vs XHTML

What the fuck is the difference?

Resources and References

• www.w3.org/TR/html5
• www.whatwg.org
• www.webplatform.org
• www.developer.mozilla,org

Code Editor

Should have line numbers, syntax highlighting, etc.

Brackets is used in this course.

What's a "boilerplate"?

HTML Document Structure

• Doc type

• html

  • attribute: lang="en"
  • head
    • meta
      • attribute: charset="utf-8" (USE THIS: don't rely on the browser to do this for you!)
      • attribute: name="description"
      • attribute: content="?"
      • title (without this, your page has nothing to display in the tab and says untitled document)
  • body

Content Models

• Flow - presentation or behavior
• Metadata - ?
• Embedded - imports other resources
• Interactive - intended for user interaction
• Heading - header of a section
• Phrasing - paragraph level structures
• Sectioning - scope of heading and footer

Formatting

<pre> tag is good for retaining formatting.

<em>  tag renders in text to speech as emphasized while <i> is ignored, but these both look the same visually.

think of headings as hierarchy indicators, not size indicators. Bigger = more important.

Don't skip heading levels.

Sectioning Elements

• <h1> ... <h6>
• <article>
• <aside>
• <nav>
• <section>

Semantic Elements

• <header>
• <main>
• <footer>

These sections make the web more readable for people AND machines.

Document Structure

Structure content like an outline

Menus and other navigational items should be wrapped in <nav> tags

Section tag should be used to group sections in a document, including heading.

Aside tag should be used for content that is not necessarily part of the rest of the doc

Article vs section tags

Articles are individual elements that can stand on their own, away from the rest of the content

Section is a thematic grouping of content, heading included. Not a generic container element.

Asides can be used for block-quotes. Where you place the aside element indicates which content it relates to.

Div tag is used when it is not necessary to explicitly pass along semantic meaning. Used for grouping content, not sectioning. Anonymous tag. For last resort, when another element is not suitable.

ID attribute can only be used once. Class attribute can be used as many times as needed.

Headers are not just to be used once. Any section of a page that warrants having a header can have one.

Footer is not just for the end of the doc. It can be for the end of a section where extra info about the section can go.