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> <body><head><title> Ø html tags normally come in pairs o <p> .... </p> o exception is “empty tags” § <a href><br><img> html5 § 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</title> </head> <body> Hello World! </body> </html> html example explained: <!doctype html> = specifies html5 rule set <html> = html document <head> = instructions for the browser o meta, title, css, javascript <meta charset=”utf-8” > = specifies character encoding <title> = 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 xhtml) Ø 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- rdfa-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) <span> (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 <p>This is a paragraph.</p> <p>This is another paragraph.<p> 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</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> </head> <body> <p>… Your HTML content here …</p> </body> </html> .

HTML5 Structure

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support