The document provides a quick guide to moving from HTML/XHTML to HTML5. It outlines the simpler doctype and meta charset tag in HTML5. It also introduces the main new structural elements - header, nav, section, article, aside, and footer - and provides examples of how to code a basic document using these elements with a top header, navigation menu, content section with articles, sidebar, and footer. The definitions and uses of each structural element are also defined.
The document provides a quick guide to moving from HTML/XHTML to HTML5. It outlines the simpler doctype and meta charset tag in HTML5. It also introduces the main new structural elements - header, nav, section, article, aside, and footer - and provides a basic example of how to mark up a document with these elements. The guide recommends starting with the W3C draft for more details on HTML5 differences from HTML4.
This document provides an overview of HTML, CSS, and JavaScript. It discusses how HTML is used to define the structure and layout of web pages using markup tags, how CSS is used to style web pages, and how JavaScript can be used to add interactive elements. It also covers common HTML tags for headings, paragraphs, lists, and other content sections. Key elements like <head> and <body> are explained along with common tags used in each section.
HTML (Hypertext Markup Language) is the standard markup language used to create web pages and web applications. It uses tags to structure and present content on the web, allowing text to be styled, images to be included, and other elements like lists, tables, and forms to be added to pages. Key HTML tags include headings, paragraphs, links, images, lists, tables, and divs for organizing and laying out content.
This document provides an introduction to HTML basics, including tags, elements, and common text formatting elements. It explains the structure of an HTML document with <html>, <head>, and <body> tags. It also covers adding a title, using paragraph <p> tags, emphasizing text with <em> and <strong> tags, inserting line breaks with <br>, headings with <h1>-<h6> tags, and lists with <ul> and <ol> tags. The goal is to learn the core components of HTML to start building basic web pages.
This document provides an introduction to basic web development concepts including HTML, CSS, and how the web works. It explains that web pages are written in HTML, which provides structure and semantics, and CSS controls formatting and appearance. Key HTML elements are defined such as paragraphs, headings, hyperlinks, and images. Examples are given for setting up a basic HTML page structure and adding different elements. References for further learning are also included.
Lee Lundrigan is giving a lecture on introducing HTML and CSS. He discusses XML, the foundation of HTML, and basic HTML tags like paragraphs, headings, lists and links. The class will cover HTML and CSS basics but not advanced topics like HTML5, CSS3 or cross-browser compatibility. Students are assigned homework to create an HTML page with images, text and links and read about well-formed XML.
This document covers HTML lists, attributes, and links. It discusses how to create ordered and unordered lists using the <ul> and <ol> tags. It explains that HTML tags can have attributes to provide additional information, and covers common attributes like "href" which specifies the hyperlink reference for <a> tags. It also differentiates between absolute, relative, and email links, and provides examples of how to properly structure each type of link.
The document provides instructions on basic HTML structure and elements. It explains how to begin an HTML document with a DOCTYPE declaration and <html> tags. It also describes how to add a <head> with <title> and <meta> tags, and a <body> with headings, paragraphs, articles, sections, headers, footers, comments and other elements. Closing tags and attributes like id and class are also covered.
The document provides a quick guide to moving from HTML/XHTML to HTML5. It outlines the simpler doctype and meta charset tag in HTML5. It also introduces the main new structural elements - header, nav, section, article, aside, and footer - and provides a basic example of how to mark up a document with these elements. The guide recommends starting with the W3C draft for more details on HTML5 differences from HTML4.
This document provides an overview of HTML, CSS, and JavaScript. It discusses how HTML is used to define the structure and layout of web pages using markup tags, how CSS is used to style web pages, and how JavaScript can be used to add interactive elements. It also covers common HTML tags for headings, paragraphs, lists, and other content sections. Key elements like <head> and <body> are explained along with common tags used in each section.
HTML (Hypertext Markup Language) is the standard markup language used to create web pages and web applications. It uses tags to structure and present content on the web, allowing text to be styled, images to be included, and other elements like lists, tables, and forms to be added to pages. Key HTML tags include headings, paragraphs, links, images, lists, tables, and divs for organizing and laying out content.
This document provides an introduction to HTML basics, including tags, elements, and common text formatting elements. It explains the structure of an HTML document with <html>, <head>, and <body> tags. It also covers adding a title, using paragraph <p> tags, emphasizing text with <em> and <strong> tags, inserting line breaks with <br>, headings with <h1>-<h6> tags, and lists with <ul> and <ol> tags. The goal is to learn the core components of HTML to start building basic web pages.
This document provides an introduction to basic web development concepts including HTML, CSS, and how the web works. It explains that web pages are written in HTML, which provides structure and semantics, and CSS controls formatting and appearance. Key HTML elements are defined such as paragraphs, headings, hyperlinks, and images. Examples are given for setting up a basic HTML page structure and adding different elements. References for further learning are also included.
Lee Lundrigan is giving a lecture on introducing HTML and CSS. He discusses XML, the foundation of HTML, and basic HTML tags like paragraphs, headings, lists and links. The class will cover HTML and CSS basics but not advanced topics like HTML5, CSS3 or cross-browser compatibility. Students are assigned homework to create an HTML page with images, text and links and read about well-formed XML.
This document covers HTML lists, attributes, and links. It discusses how to create ordered and unordered lists using the <ul> and <ol> tags. It explains that HTML tags can have attributes to provide additional information, and covers common attributes like "href" which specifies the hyperlink reference for <a> tags. It also differentiates between absolute, relative, and email links, and provides examples of how to properly structure each type of link.
The document provides instructions on basic HTML structure and elements. It explains how to begin an HTML document with a DOCTYPE declaration and <html> tags. It also describes how to add a <head> with <title> and <meta> tags, and a <body> with headings, paragraphs, articles, sections, headers, footers, comments and other elements. Closing tags and attributes like id and class are also covered.
The document discusses various aspects of HTML5 including its history, new elements, offline storage capabilities, and responsive web design. It provides information on HTML, CSS, JavaScript and how they make up the three layers of web design. It also summarizes the roles of different standards organizations and differences between HTML5 and the HTML living standard.
Introduction to HTML5 and CSS3 (revised)Joseph Lewis
Joseph R. Lewis of Sandia National Laboratories gave a presentation on HTML5 and CSS3 at Oak Ridge National Laboratory. The presentation provided an overview of the history that led to the development of HTML5, described new HTML5 semantic elements and attributes, and covered features of HTML5 like Canvas, SVG, and MathML. It also covered new CSS3 properties and exercises for attendees to experiment with the new technologies.
This document provides an introduction to converting HTML documents to XHTML, including the basic syntax changes needed like making all tags lowercase and closing all tags. It provides examples of correct XHTML markup for different tags. It also explains the new DOCTYPE declaration and shows a sample well-formed XHTML document incorporating all the discussed changes. Resources for learning more about XHTML are listed at the end.
This document provides an introduction and overview to HTML for beginners. It explains some of the basic building blocks of HTML, including tags, attributes, elements, paragraphs, headings, and lists. The document recommends using a basic text editor like Notepad to write HTML code by hand rather than relying on WYSIWYG editors, in order to better understand how HTML works. It provides examples to demonstrate how to add structure, formatting, and basic styling to HTML pages.
HTML5 is the latest version of HTML that adds new elements and attributes. It is being developed by the W3C and WHATWG to make HTML more semantic, customizable and multimedia-capable. Key features of HTML5 include less complex header code, new semantic tags like <article> and <section>, multimedia embedding with <video> and <audio> tags, canvas drawing with JavaScript, and web storage with localStorage and sessionStorage objects. HTML5 aims to provide one standard way to embed multimedia without plugins and more options for storing data on the client-side.
Intro to HTML and CSS - Class 2 SlidesHeather Rock
1. CSS stands for Cascading Style Sheets and refers to how styles are applied hierarchically to HTML elements.
2. There are three main ways to attach CSS to a webpage: inline, embedded, and linked. Linked style sheets keep the styles in a separate .css file for easy maintenance.
3. CSS selectors allow targeting specific elements by HTML tag names, classes, IDs, and other attributes. Common selectors include colors, fonts, links, and compound selectors.
Đặng Minh Tuấn presents best practices for HTML and CSS. He outlines 10 rules: make code skinable, sensible, simple, semantic, fast, standard-compliant, safe with fallbacks, well-structured, continually studied, and smart about breaking rules when needed. The presentation provides examples of good and bad code for each rule and emphasizes separating structure from style using CSS over HTML attributes.
This document provides an overview of common HTML tags that are frequently used, including tags for the document structure (<html>, <head>, <body>), page title (<title>), paragraphs (<p>), headings (<h1>-<h6>), and emphasis (<em>, <strong>). It also discusses file naming conventions and basic file structure for organizing website files and pages. The key tags covered are those needed for a basic website structure and formatting text.
The document provides information on adding images and links to HTML documents. Some key points include:
- The <a> tag is used to define links, with the "href" attribute specifying the link destination. Links can be absolute, relative, or email links.
- The <img> tag inserts images, requiring the "src" attribute to specify the image file path. Images can also have an "alt" attribute to provide alternative text.
- Accessible links use descriptive text, avoid generic text like "click here", and don't open links in new windows without indication.
- Images improve user experience and engagement. They are added using the <img> tag and can also be made into
The document outlines a full stack developer course that covers HTML topics like tags, elements, attributes, forms, lists, tables, and more. It provides code examples for each HTML feature discussed, such as headings, paragraphs, line breaks, centering content, and styling text. The course lessons cover basic HTML syntax and structure, text formatting tags, links, lists, tables, and grouping and formatting content with CSS.
This document provides instructions for converting a Wiki page to HTML using Microsoft Expressions. The steps include:
1. Opening the Wiki page and Expressions and copying the Wiki content into a new HTML page.
2. Reformatting the HTML page by adding CSS styles and footer code.
3. Demoting header levels, creating bookmarks for headers and the title, and linking the table of contents.
4. Inserting "return to top" links below section headers.
This is simple slider for web designer. If you know advance html then you can ignore this otherwise you can read. You can also knock me to get more information...
This document provides an introduction to HTML, including:
- HTML is a markup language used to describe web pages
- HTML tags are used to structure and layout content and are written with angle brackets
- The basic HTML page structure includes the <head> for metadata and <body> for visible content
- HTML elements can be styled using CSS with properties like display, position, float, and more
- Common tags include headings, paragraphs, lists, links, and div containers to group and style blocks of content
HTML5 introduces several new features that reduce the need for plugins, make error handling easier, and allow for more semantic markup. Some key features include the <canvas> element for drawing, <video> and <audio> elements for media playback, and local storage support. HTML5 also includes new form controls and content elements like <article>, <header>, <nav>, and <section>. The <figure> element specifies self-contained content like images. HTML5 aims to be device-independent and have a more visible development process.
This document discusses various HTML formatting tags including <p> for paragraphs, <h1>-<h6> for headings, <strong> for bold text, <em> for emphasized text, <br/> for line breaks, and <hr/> for horizontal rules. It provides examples of how each tag is structured and used in HTML code to format text and create structure in a web document.
The document discusses various topics related to the environment including definitions of key terms like environment, built environment, and natural environment. It also covers environmental issues like climate change and greenhouse gas levels exceeding thresholds. Other sections discuss World Environment Day, types of environmental pollution and their effects, environmental degradation, ecosystems, and environmental protection efforts by governments.
Dr. John Deen - Connecting the Dots: Animal Health, Well-Being & ProductivityJohn Blue
This document discusses various topics relating to farm animal welfare, including methods of slaughter, welfare policies, and factors that influence an animal's ability to flourish. It examines concepts such as the five freedoms, negative animal states, and mechanisms that can inhibit an animal's normal functions. Graphs and data are presented on topics like injury levels in sows, mortality risk after farrowing, and causes of sow death. The document emphasizes that improving welfare requires addressing both averages and outliers, and that caring for animals properly involves skill, patience and humility.
The document discusses various aspects of HTML5 including its history, new elements, offline storage capabilities, and responsive web design. It provides information on HTML, CSS, JavaScript and how they make up the three layers of web design. It also summarizes the roles of different standards organizations and differences between HTML5 and the HTML living standard.
Introduction to HTML5 and CSS3 (revised)Joseph Lewis
Joseph R. Lewis of Sandia National Laboratories gave a presentation on HTML5 and CSS3 at Oak Ridge National Laboratory. The presentation provided an overview of the history that led to the development of HTML5, described new HTML5 semantic elements and attributes, and covered features of HTML5 like Canvas, SVG, and MathML. It also covered new CSS3 properties and exercises for attendees to experiment with the new technologies.
This document provides an introduction to converting HTML documents to XHTML, including the basic syntax changes needed like making all tags lowercase and closing all tags. It provides examples of correct XHTML markup for different tags. It also explains the new DOCTYPE declaration and shows a sample well-formed XHTML document incorporating all the discussed changes. Resources for learning more about XHTML are listed at the end.
This document provides an introduction and overview to HTML for beginners. It explains some of the basic building blocks of HTML, including tags, attributes, elements, paragraphs, headings, and lists. The document recommends using a basic text editor like Notepad to write HTML code by hand rather than relying on WYSIWYG editors, in order to better understand how HTML works. It provides examples to demonstrate how to add structure, formatting, and basic styling to HTML pages.
HTML5 is the latest version of HTML that adds new elements and attributes. It is being developed by the W3C and WHATWG to make HTML more semantic, customizable and multimedia-capable. Key features of HTML5 include less complex header code, new semantic tags like <article> and <section>, multimedia embedding with <video> and <audio> tags, canvas drawing with JavaScript, and web storage with localStorage and sessionStorage objects. HTML5 aims to provide one standard way to embed multimedia without plugins and more options for storing data on the client-side.
Intro to HTML and CSS - Class 2 SlidesHeather Rock
1. CSS stands for Cascading Style Sheets and refers to how styles are applied hierarchically to HTML elements.
2. There are three main ways to attach CSS to a webpage: inline, embedded, and linked. Linked style sheets keep the styles in a separate .css file for easy maintenance.
3. CSS selectors allow targeting specific elements by HTML tag names, classes, IDs, and other attributes. Common selectors include colors, fonts, links, and compound selectors.
Đặng Minh Tuấn presents best practices for HTML and CSS. He outlines 10 rules: make code skinable, sensible, simple, semantic, fast, standard-compliant, safe with fallbacks, well-structured, continually studied, and smart about breaking rules when needed. The presentation provides examples of good and bad code for each rule and emphasizes separating structure from style using CSS over HTML attributes.
This document provides an overview of common HTML tags that are frequently used, including tags for the document structure (<html>, <head>, <body>), page title (<title>), paragraphs (<p>), headings (<h1>-<h6>), and emphasis (<em>, <strong>). It also discusses file naming conventions and basic file structure for organizing website files and pages. The key tags covered are those needed for a basic website structure and formatting text.
The document provides information on adding images and links to HTML documents. Some key points include:
- The <a> tag is used to define links, with the "href" attribute specifying the link destination. Links can be absolute, relative, or email links.
- The <img> tag inserts images, requiring the "src" attribute to specify the image file path. Images can also have an "alt" attribute to provide alternative text.
- Accessible links use descriptive text, avoid generic text like "click here", and don't open links in new windows without indication.
- Images improve user experience and engagement. They are added using the <img> tag and can also be made into
The document outlines a full stack developer course that covers HTML topics like tags, elements, attributes, forms, lists, tables, and more. It provides code examples for each HTML feature discussed, such as headings, paragraphs, line breaks, centering content, and styling text. The course lessons cover basic HTML syntax and structure, text formatting tags, links, lists, tables, and grouping and formatting content with CSS.
This document provides instructions for converting a Wiki page to HTML using Microsoft Expressions. The steps include:
1. Opening the Wiki page and Expressions and copying the Wiki content into a new HTML page.
2. Reformatting the HTML page by adding CSS styles and footer code.
3. Demoting header levels, creating bookmarks for headers and the title, and linking the table of contents.
4. Inserting "return to top" links below section headers.
This is simple slider for web designer. If you know advance html then you can ignore this otherwise you can read. You can also knock me to get more information...
This document provides an introduction to HTML, including:
- HTML is a markup language used to describe web pages
- HTML tags are used to structure and layout content and are written with angle brackets
- The basic HTML page structure includes the <head> for metadata and <body> for visible content
- HTML elements can be styled using CSS with properties like display, position, float, and more
- Common tags include headings, paragraphs, lists, links, and div containers to group and style blocks of content
HTML5 introduces several new features that reduce the need for plugins, make error handling easier, and allow for more semantic markup. Some key features include the <canvas> element for drawing, <video> and <audio> elements for media playback, and local storage support. HTML5 also includes new form controls and content elements like <article>, <header>, <nav>, and <section>. The <figure> element specifies self-contained content like images. HTML5 aims to be device-independent and have a more visible development process.
This document discusses various HTML formatting tags including <p> for paragraphs, <h1>-<h6> for headings, <strong> for bold text, <em> for emphasized text, <br/> for line breaks, and <hr/> for horizontal rules. It provides examples of how each tag is structured and used in HTML code to format text and create structure in a web document.
The document discusses various topics related to the environment including definitions of key terms like environment, built environment, and natural environment. It also covers environmental issues like climate change and greenhouse gas levels exceeding thresholds. Other sections discuss World Environment Day, types of environmental pollution and their effects, environmental degradation, ecosystems, and environmental protection efforts by governments.
Dr. John Deen - Connecting the Dots: Animal Health, Well-Being & ProductivityJohn Blue
This document discusses various topics relating to farm animal welfare, including methods of slaughter, welfare policies, and factors that influence an animal's ability to flourish. It examines concepts such as the five freedoms, negative animal states, and mechanisms that can inhibit an animal's normal functions. Graphs and data are presented on topics like injury levels in sows, mortality risk after farrowing, and causes of sow death. The document emphasizes that improving welfare requires addressing both averages and outliers, and that caring for animals properly involves skill, patience and humility.
Kuldeep Shishodia is an experienced emcee who is passionate about entertaining audiences. He has experience hosting a variety of events including exhibitions, school activities, corporate shows, and more. Some of the specific events he has hosted include the launch of "I Love My India" on SAB TV, a Diwali Milan event in Rohtak, and a New Year's Eve event at the Saritan Hotel with Ishk Bector. His objective is to prove himself as a valuable asset and meet the job requirements if selected. His future vision is to be the best male anchor in his profession.
Rubias organizational devt.report sir limpiadaEd Ebreo
To achieve goals in higher education among the ASEAN community by 2015, initiatives aim to increase the usage of English as a common language, promote e-learning/online learning/distance learning/open learning to improve access and equity, and work towards universal education that ensures access, equity and quality for all.
HTML is the standard markup language used to create web pages. It provides a structure and layout for text, images, and other content. The document explains the basic components of an HTML page, including the <head> and <body> tags, common text formatting tags, links, lists, and tables. It recommends learning HTML tags through online resources or by examining the source code of existing web pages, and emphasizes starting simply with tags like <head>, <title>, <h2>, and <p>.
HTML is a markup language that allows users to structure and format web pages. It uses tags like <p> and <div> to organize content into sections, paragraphs, headings, and other blocks. While HTML provides structure, CSS and JavaScript are needed to style pages and add dynamic functionality. HTML files are rendered and displayed in web browsers.
HTML5 introduces new semantic elements like <header>, <footer>, <nav>, <article> that help provide more meaning to the structure of content compared to non-semantic divisions. It allows for clearer outlines of content and separation of concerns between content, structure and presentation. While the benefits of semantic HTML5 may not be immediately visible, it can help future-proof websites and provide more accessibility for assistive technologies.
The document provides an introduction to HTML5, including its history, new structural elements like <header>, <nav>, <footer>, and <article>, redefined elements like <cite> and <ol>, and new features like geolocation, web forms, audio/video, and drag and drop. It discusses these topics over multiple pages with headings and subheadings.
The document discusses semantic HTML5 and how it differs from traditional HTML. Semantic HTML5 uses newer elements like <header>, <footer>, <nav>, <article>, and <section> that more accurately describe the content they contain. This makes the code more readable for humans and machines. It allows content to be structured into logical document outlines and hierarchies without using generic <div> elements. While browser support for all new elements may not be complete, techniques like HTML5 shiv can help older browsers recognize them. The document also covers some new form input types and attributes introduced in HTML5.
This document discusses migrating from HTML4 to HTML5. It provides examples of converting an HTML4 page to HTML5 by changing the doctype, encoding, and using HTML5 semantic elements like <header>, <nav>, <section>, and <article> instead of non-semantic <div> elements. It also discusses adding the HTML5Shiv script to support HTML5 elements in older browsers.
This document provides an overview of the basic structure and elements of an HTML5 template. It begins with a barebones template containing the doctype, html, head and body elements. The doctype has been simplified in HTML5 to just <!doctype html>. Several elements in the head like the character encoding and stylesheet link have also been simplified. The template includes an HTML5 shiv to provide support for new HTML5 elements in older browsers. The document explains each part of the template.
Contains description regarding major semantic elements <article><aside><nav><section>
HTML expands to Hyper Text Markup Language. It is NOT a styling language, you have CSS for that purpose. So stop abusing the existence of HTML.
What is HTML - An Introduction to HTML (Hypertext Markup Language)Ahsan Rahim
What is HTML?
HTML stands for "Hypertext Markup Language". A standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.
Hypertext Markup Language is the standard markup language for creating the Web pages and Web Applications. With Cascading Style Sheets (CSS) & JavaScript for creating World Wide Web pages.
HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet.
HTML is relatively easy to learn & it consists of a series of short codes typed into a text-file by the site author — these are the tags. The text is then saved as a html file, and viewed through a browser.
This document provides an introduction and overview of HTML and related web technologies. It begins with an explanation of the internet and World Wide Web, then defines key concepts like URLs, DNS, IP addresses, and HTTP. It proceeds to explain the difference between server-side and client-side coding. The document then covers the basic structure of an HTML document using tags like <html>, <head>, and <body>. It defines common text-level, structural, and media tags. Finally, it discusses relative vs. absolute links and the default styling applied by browsers.
The document discusses HTML5 and slicing templates. It introduces HTML5, explaining what it is and is not. It describes new HTML5 tags like <header>, <nav>, <section>, <article>, and <footer> that provide semantic structure. It also covers new HTML5 features like simplified tags, internationalization, multimedia, graphics, forms, and APIs. The document recommends a default slicing template for creating uniform website designs and provides contact information for the authors.
This document provides an overview of HTML by explaining what HTML is, its timeline and evolution, basic webpage structure using HTML tags, common formatting tags like bold and italics, header tags from H1 to H6, how CSS fits into webpage design, the importance of an index page, and assigns students to create their first basic webpage with paragraphs and tags.
HTML is a markup language used to define the structure and layout of web pages. HTML uses tags to mark elements like headings, paragraphs, links, images, and tables. Some key tags include:
<h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, and <table> for tables. Elements are everything between a starting and ending tag. HTML documents contain tags and plain text and are displayed in web browsers.
The document discusses HTML5 semantic and non-semantic elements. It defines semantic elements as those with inherent meaning, like <form> and <table>, while non-semantic elements like <div> and <span> do not convey meaning. New HTML5 semantic elements are introduced, including <section> for sections, <article> for independent content, <header> and <footer> for introductory and footer content, and <nav> for navigation links. Semantic elements are important for search engines and accessibility by clearly defining the meaning of different parts of a web page.
HTML5 is the latest version of HTML that focuses on web applications and includes new elements such as <video>, <audio>, and <canvas>. It also provides better support for multimedia playback and offline storage. Some key features of HTML5 include new semantic elements, form controls, and drawing capabilities. While not fully standardized, all major browsers support many HTML5 features in their latest versions. CSS3 builds on CSS2 and introduces new modules for borders, backgrounds, text effects and more to create more advanced visual styles without relying on images.
The document provides an overview of HTML5, including its history, new semantic and structural elements, why it was developed, drawbacks of HTML4, differences between HTML4 and HTML5, HTML5 features and new APIs. It discusses elements like <header>, <footer>, <nav>, <article>, <section>, <aside>, <figure>, embedded media elements, and interactivity elements. It also covers using these elements and their intended purposes in site layouts.
HTML (Hypertext Markup Language) is the standard markup language used to structure and present web pages. Key HTML elements include headings, paragraphs, links, images, lists, and tables. Elements are defined with start and end tags (e.g. <p>paragraph text</p>) or as empty elements without an end tag (e.g. <br> for a line break). Common block-level elements like <div> and <p> occupy the full width of the page, while inline elements like <a> and <b> sit within surrounding content. Attributes provide additional information about elements, such as the href attribute specifying a link URL for <a> elements.
1. HTML5 Quick Learning Guide
Just what you need to know to quickly
move from HTML / XHTML to HTML5
Brought to you by
http://freehtml5templates.com/
Licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License
2. HTML5 syntax is compatible with both HTML4 and XHTML1. Want to close
empty elements with a slash? Go for it. Rather not? Then don't. Want to use
lower case? Upper case? Take your pick. In other words, you really don't have
to change the way you handle these things, so don't worry, ok?
HTML5 doctype is much simpler:
New way:
<!doctype html>
Old ways:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Meta charset tag is much simpler:
New way:
<meta charset="UTF-8">
Old way:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-
8" />
Divs are now used for styling rather than structure; HTML5 includes several
new structural elements that help define parts of the document. Let's take a
look at the main new structural elements that you'll probably use right away.
(Note that included in the head is an HTML5 shiv that allows us to style elements in IE,
and a basic CSS style is also included so we can help browsers that aren't caught up yet to
render the new block-level elements as block-level elements. For now, it's easiest just to
automatically include them. Understanding why can come later.)
Licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License
3. Main Structural Elements You'll Use Most Often in HTML5
<header>
<nav>
<section>
<article>
<aside>
<footer>
Although these sound like “positions” in a document, and very often will be
used in that way, they really are about grouping and not positioning. You might
have 3 <sections> in a page, with each <section> having its own <header> and
<footer> for instance. (Note that these elements – like classes – can be used
more than once on a page).
But to keep things simple, for this document's purpose, let's just think of a
very basic document that contains a top header, a menu for navigation, a
content section that contains a couple of articles, a sidebar, and a footer.
In HTML4 or XHTML, you probably would have used divs, classes and ids to
group each of those areas. You can and should still use divs, classes and ids for
styling reasons, but they may no longer be as necessary as before for
structural purposes. Some documents may be able to get by without them
completely, while most will probably still need them for styling. But again, for
the purposes of learning the quick facts to create a simple HTML5 document,
let's keep this really basic.
Here's a simple way to code a very basic document that contains a top header,
a menu for navigation, a content section that contains a couple of articles, a
sidebar, and a footer in HTML5.
Licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License
4. <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Very Basic Document</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>header, footer, section, aside, nav, article {display: block;}</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<header>
<h1><a href="#">Very Basic Document</a></h1>
<h2>A tag line might go here</h2>
</header>
<section>
<article>
<h3><a href="#">First Article Title</a></h3>
<img src="images/flower.jpg" alt="flower">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. </p>
</article>
<article>
<h3><a href="#">Second Article Title</a></h3>
<img src="images/tree.jpg" alt="tree">
<p>Praesent libero. Sed cursus ante dapibus diam.</p>
</article>
</section>
<aside>
<h4>Connect With Us</h4>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</aside>
<footer>
<p>All rights reserved.</p>
</footer>
</body>
</html>
Licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License
5. As you can see, the structure is fairly simple, and you can style these new
structural elements in the CSS. However, because you may have some of these
structural elements within different groupings on a page (such as several
sections having different headers and footers), you may want to style each
differently. In that case, you can still assign ids and classes just as you would
in HTML4 or XHTML.
The point of the structural elements is to designate structure after all;
presentation is dealt with in the CSS in whatever manner works best for you,
using ids and classes.
So what are the actual definitions of these new structural elements?
<header> represents a group of introductory or navigational aids. (Things
you'd usually wrap in a H1, H2, Hx, etc)
<nav> represents a section of the document intended for navigation. (Like a
menu)
<section> represents a generic document or application section. It can be
used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the
document structure. (Just a logical grouping such as a content section)
<article> represents an independent piece of content of a document, such as
a blog entry or newspaper article. (Independent is the key word here. If the
piece of content could make sense plucked out of this document and placed
somewhere else, it's probably an article)
<aside> represents a piece of content that is only slightly related to the rest
of the page. (Usually a sidebar, but could be another type of content that
isn't directly related to the main content)
<footer> represents a footer for a section and can contain information about
the author, copyright information, et cetera. (You know, like... a footer)
Of course, HTML5 comes with other interesting elements such as the video and
audio elements, plus new and changed elements and attributes, but all of
those belong in a separate cheat sheet. This one is to get you up and running
fast, so there you have it. Just the basics that will let you quickly move from
HTML4 or XHTML to HTML5 right now!
Licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License
6. If you want to delve into the finer points, I recommend starting with the W3C
draft, entitled HTML5 differences from HTML4 located at
http://dev.w3.org/html5/html4-differences/
This document created by http://freehtml5templates.com/
We'd love to have you follow us at http://twitter.com/html5templates and
please bookmark and share our site within your social networks (twitter,
facebook, stumbleupon, delicious, etc).
Feel free to share this document with others, keeping in mind that
this document is licensed under the Creative Commons
Attribution-Noncommercial-No Derivative Works 3.0 United
States License (http://creativecommons.org/licenses/by-nc-
nd/3.0/us/).
Share it; don't sell it. Share it; don't change it.
Pretty simple, yes? :)
Licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License