HTML5 Structure

html5

What is html?

Ø acronym for hypertext markup language Ø hypertext means ability jump to another document (links) Ø markup is a language for describing web pages Ø markup tags define the structure of content in web pages Ø “view source” in any browser to see the html markup of a webpage

html document = web page

Ø html documents contain html tags and plain text to describe web pages Ø Web browsers (Chrome, Safari, Firefox, IE, Opera) read html documents and display them as web pages Ø Browsers use tags to interpret the structure (outline) of web page to create the DOM (document object model)

html tags

Ø html markup is called “tags” Ø tags are special keywords surrounded by angle brackets o Ø html tags normally come in pairs o .... o exception is “empty tags” § <a href> <img> <a href="/tags/HTML5/" rel="tag">html5</a> § no closing tag because they don’t enclose anything; they are “empty” o First tag = start or open tag o Second tag= end or close tag Example of bare minimum html document: <!doctype html> <html> <head> <meta charset=”utf-8”> <title>Hello World Hello World! html example explained:

= specifies html5 rule set = html document = instructions for the browser o meta, title, css, javascript = specifies character encoding = title of document <body> = visible page content file extensions: Ø .html or html Ø .html more popular à better html5 cAsE SenSiTIvitY Ø html5 is no longer case sensitive (however) Ø most developers keep their tags in lowercase for consistency (and as a nod to predecessor <a href="/tags/XHTML/" rel="tag">xhtml</a>) Ø good writing style (convention) Document Declaration Ø you MUST specify the doctype in all of your html documents o tells the browser what type of document to expect and what rules to follow o consistent rendering across browsers o otherwise you get “quirks” mode § browser emulates 1990’s era browser § not good Ø the doctype declaration MUST be on the first line in your html document before the <html> tag Ø doctype declaration for html <!doctype html> Ø simplified version of previous doctypes <!doctype html PUBLIC “-//W3C//DTD XHTML+RDFa 1.0//EN” “http://www.w3.org/MarkUp/DTD/xhtml- <a href="/tags/RDFa/" rel="tag">rdfa</a>-1.dtd”> html Structure Ø goal: to convey information as efficiently and clearly as possible html5 o what’s the most important feature of webpage? Ø Webpages are structured in outline form o headings o paragraphs o lists o figures (informational images) Ø parent-child relationships o most html elements can be “nested” (can contain other html elements) Ø good structure (conventional agreements) o accessibility o SEO (search engine optimization) o DOM (document object model) html Structural Markup tags <head> <body> <main> <header> <nav> <section> <article> <aside> <footer> Generic Structure tags html5 <div> (block level) (inline, used with CSS for design html Headings Ø think outline – use html headings for the purpose of headings only o DO NOT use headings to make text big or bold (presentational) Ø Search engines use headings to index your pages (SEO) Ø Use headings in order of hierarchy <h1>This is a heading</h1> <h2>This is a sub heading</h2> <h3>This is a sub sub heading</h3> html paragraphs This is a paragraph. This is another paragraph. html links Ø absolute link o full http address o link to external website <a href=”http://www.w3schools.com/”>link name</a> <a href=”http://www.w3schools.com/” target=”_blank”>link name</a> Ø relative link o local .html address o link to internal web page html5 o internal site navigation <a href=”index.html”>home</a> html attributes Ø html elements can have attributes Ø provide additional information about an element Ø always specified in the start of the tag <tag attribute=”value”></tag> Ø attributes must have values Ø values should be in quotes (writing style) html images (informational) Ø informational imagery uses the img tag Ø should be in nested in <figure> tags to convey informational images <figure> <img src=”images/w3schools.jpg” width=”104” height=”142” alt=”accurate description of image”> </figure> Ø img tag creates a placeholder for images Ø src attribute fills placeholder with image o common for images to reside in an images folder o you will be putting your img src files onto the Creative server (SFTP connection) Ø width and height attribute defines image size to be displayed Ø alt attribute specifies an alternate text for an image o required for validation o displayed when image cannot be displayed (broken link) o useful for people with disabilities (accessibility) html5 o also useful as keywords for search engines (SEO) Ø design (non-informational) imagery is handled by CSS o placed in background of elements o displayed visibility but hidden semantically o html comments Ø inserted into the HTML code as programmer’s notes Ø makes code more readable or understandable Ø ignored when rendered by the browser and are not displayed  html lists Ø Ordered <ol> <li>Data 1</li> <li>Data 2</li> <li>Data 3</li> </ol> Ø Unordered <ul> <li>Data 1</li> <li>Data 2</li> <li>Data 3</li> </ul> html special characters Ø sometimes special codes are used to signify uncommon character types < is the same as < html5 > is the same as > © is the same as © non-breaking space Recommend html declaration <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>An XHTML 1.0 Strict standard template

… Your HTML content here …