HTML Webpage Structure

Both would indicate that the checkbox is already checked or ticked.

Characters are grouped in various Character Sets or Character Encodings such as ISO-8859-1 (Latin 1) only contains English and some European characters, JIS0201, JIS0208, JIS0212 contains Latin1 and some Japanese characters and ISO-8859-7 has Latin 1 and Greek characters, etc. Characters are indexed in these Sets or Encodings and some characters may have different indexes in different Encodings. These days it is best to use UTF-8 (8-bit Universal Character Set Transfer Format) as this Character Set or Character Encoding supports almost all characters in existence which will allow you to use a single Encoding and have English, Japanese, Greek, Cyrillic, Chinese, Arrows, circled letters and numbers amongst other characters in the same webpage document.

An Entity Character Reference (or Character Reference or Entity) is a way to reference a character that is not easily available on a keyboard or similar or may have a different index if the webpage uses one Encoding and the physical file you've saved the webpage in was saved in a different encoding. Using the Character Reference would provide the correct character of the Encoding specified by the webpage.

Character References can be written in three forms: Named (such as é), Numbered (such as é) or Hexadecimal (such as é). All three of the above examples reference the small letter e with an acute symbol above it: é, as in café.

For best practises in the text/html mode of HTML 5 here are a few notes:

1. Element and attribute names maybe written in uppercase but that is a pure waste of time and contrary to popular belief does not make your source code any clearer: the modern HTML is in lowercase;
2. All elements that can have a start and end tag (normal elements) such as p and li should have both start and end tags present;
3. All elements that only have a start tag (void elements) like img and br may be as <img>, <br> or <img/>, <br/> or <img />, <br />;
4. All attribute values should be quoted - commonly with double quotes;
5. If you use double quotes in attribute values that are surrounded by double quotes then use the " Entity Character Reference within the attribute value instead of a literal double quote (otherwise you would be ending the attribute before you intended and the HTML parser will just mess up your page without any warning);
6. If you use apostrophes or single quotes in attribute values that are surrounded by single quotes then use the ', ' or ' Entity Character References within the attribute value instead of a literal apostrophe or single quote. It is best to surround attribute values with double quotes these days;
7. As ampersands (&) are used to start Entity Character References, then if you need to use it as an ampersand use the & Entity Character Reference in attribute values and element content;
8. As less-than characters (<) are used to start elements and you need to use it as a less-than character then use the < Entity Character Reference in attribute values and element content - greater-than characters (>) do not pose a problem;
9. Any 'minimized' or boolean attributes such as checked or multiple may be expanded to have the attribute name as the value such as checked="checked" and multiple="multiple" or they can be just the attribute name;
10. The id attribute is used instead of the old name attribute for elements such as img, a and table as the name attribute has been replaced in favour of the global standard of ID type attributes like id;
11. The old language attribute in script elements has been replaced by the global standard type attribute as <script type="text/javascript"> </script>;
12. The noscript element is still available in HTML5, now in the head element too. In any case you should be writing Unobtrusive Scripts (see related article) so you do not need noscript anymore (web browsers will still support it for older webpages);
13. The document.write() and document.writeln() do exist still but they don't work in all circumstances – plus are old hat. Instead you should use the HTML Document Object Model to manipulate the existing markup including DOM 5 HTML's innerHTML property. This will work in all current web browsers (see Modelling the Document Objects article for more on the Document Object Model (DOM) and innerHTML);
14. Use the HTML 5 Doctype (<!doctype html>) instead of the obsolete HTML and XHTML Doctypes;
15. It is best to move from using character sets like ISO-8859-1 to the most supported global standard and Unicode supporting character set UTF-8;
16. Element nesting should be proper - for instance: <strong>This is an <em>invalid</strong> nesting</em> as the em element was started within the strong element then the em element should end within the strong element as <strong>This is <em>valid</em> nesting</strong>;
17. Elements script, style and pre in XHTML must have the xml:space="preserve" attribute to preserve leading and trailing spaces, tabs, newlines and other 'whitespace' characters and any multiple whitespaces within words at the XML parser level. But in HTML 5 you don't use it as all elements have whitespace preservation at the HTML 5 parser level;
18. In HTML 5 you use the lang attribute (no xml:lang attribute is needed; however a non-namespaced, non-prefixed attribute called xml:lang may be used in addition if it has the same value but xml:lang is useless in HTML Parsers);

Categories and Content Models

Metadata Content are elements that provide information about the webpage or other resource such as its title, description, an icon, presentation (such as StyleSheets), extra functionality (such as JavaScript), references to other webpages in a collection or even alternative forms of the webpage, resource or application information (such as OpenDocument Format or PDFs). Mostly these elements are contained in a head element but some may be in the body of the webpage or application.

Flow Content should have at least text or an Embedded Content within it and some can contain other Flow Content as well as most other content. But some have a more specific content model (what can be contained within it). By default some Flow Content have a presentational box model of display: block (from CSS) which pushes itself onto its own line and other elements after it onto the next line. Such Flow Content include headings, sections, paragraphs, lists, tables and form boxes.

Sectioning Content are elements that contain headings, headers and footers and so provide heading scope and contribute to the document outline. Sectioning Roots are elements that can have their own outlines. Sectioning Content is a sub-category of Flow Content. Such Sectioning Content include the body of the document or application, sections, articles, asides and such Sectioning Roots include the body of the document or application and table data cells.

Heading Content are elements that provide headings for Sectioning Content and are used in document outlines. Heading Content are a sub-category of Flow Content but can only have Phrasing, Embedded and Interactive Content within them.

Phrasing Content should have at least text or an Embedded Content within it and generally can only contain Phrasing, Embedded, Interactive Content. By default Phrasing Content have a presentational box model of display: inline (from CSS) which do not push other elements and text below or above itself and so can quite comfortably sit within a line. Such Phrasing Content include text, hyperlinks, images, objects, line breaks, emphasis and form controls.

Embedded Content are elements that replace the element with another resource (externally or not). Embedded Content are a sub-category of Phrasing Content. Such Embedded Content include images, frames, audio and / or visual multimedia and content from non-HTML languages that provide content rather than metadata (such as from MathML or SVG).

Interactive Content are elements that a user can activate via a pointing device, keyboard, voice command, touch or motion or even programatically via scripts if those features are supported by the UserAgent, Operating System and hardware (or other forms of information devices). Interactive Content are a sub-category of Phrasing Content but cannot have Interactive Content within them. Such Interactive Content includes hyperlinks and form controls.

Transparent: If an element's content model or part of its content model contains the keyword Transparent, then the scope of that part of the element's content model depends on the content model of the parent element (the element that the current element is within).
 If, for instance, the parent element's content model was Phrasing then the current element's Transparent model can only contain Phrasing level elements.
 Or if the parent element's content model was Flow then the current element's Transparent model may contain Flow Content.

DOM Tree

Modern web browsers, and other UserAgents that deal with HTML and / or XML, internally represent the HTML or XML document as a tree structure of document objects. HTML 5 is natively a Document Object Model (DOM) based language which can be written in the custom HTML syntax (text/html mode) or XML syntax (XHTML 5) or even purely as a DOM Tree in scripts and programming languages.

Document Element, Root Element: Both the Document Element and the Root Element refer to the first main element of the markup language vocabulary. For instance in HTML and XHTML the Document Element and Root Element is html.

WebCanvas Element: The WebCanvas element refers to the top most element that is rendered in the WebCanvas such as the area of a web browser that the webpage is displayed in. For instance in HTML (text/html) the WebCanvas Element is body. But in XHTML the WebCanvas Element is the same as the Document Element or Root Element which is html.

Elements may be referred in relation to other elements in a family tree perspective: ancestor, parent, sibling, child, children and descendant.

For instance, from the previous example, the html element is the parent of the head and body elements and is an ancestor element to the head, body, title, h1 and p elements. The body element is a sibling element to the head element. Plus h1 and p elements are child elements or children to the body element and along with the head and body elements are descendant elements of the html element.

Global Attributes

Global attributes can be used on pretty much any HTML 5 element. These include the style attribute which allow inline styling directly on the element with StyleSheet properties in the attribute value; a class attribute that has a space separated list of StyleSheet classes that can be used to provide multiple layered styling. Also the id attribute which provides an unique identifier that can be a target for the fragment part of a URI (or IRI) and also for singular style classes. id values must be unique throughout the document and can only start with a letter, underscore( _ ) or a colon(:) and then as many letters, underscores, colons, numbers and dashes(-). For language selection to help identify that the following text is in a particular language you can use the lang attribute:

Presents 'This is English text' in British English, 'This is French text' in French and 'This is Greek text' in Greek.

To provide advisory information about the text or other feature you can add a title attribute.

Plus the hidden boolean attribute may be used on elements that are not yet relevant or are no longer relevant. Scripting can be used to make them relevant following certain conditions such as response from a form. This attribute is not supported by any web browser yet.

 The tabindex attribute is now available on all elements to assist with AJAX and other Web Application element ordering when you tab to each of them. A number value of 1 or higher provides priority: 1 being the highest. Generally the value would be zero providing the order according to where the element is in the document structure (after tabindex="1" and higher). With a value of -1 and lower disables the ability to tab to the element.

 By default links and form controls have the equivalent of tabindex="0". All others are tabindex="-1".

You can use the role attribute and appropriate aria- prefixed attributes on elements in order to add main or extra accessible semantic (meaningful) information for web browsers, screen readers and other Assistive Technology Tools that support Accessible Rich Internet Applications (ARIA) from the Web Accessibility Initiative (WAI). ARIA is not just to make JavaScript powered Web Applications accessible but also make parts of a webpage more meaningful for those listening to a screen reader. (See the Web Accessibility article for more on accessibility and screen readers and the ARIA article for more on WAI-ARIA.)

Other global attributes include the contenteditable attribute, spellchek attribute, itemscope boolean attribute, itemref attribute, itemtype attribute, itemid attribute and itemprop attribute. These will be discussed later in appropriate subsections.

Most event attributes are also global. These will be discussed later but they include: onabort, onblur, onchange, onclick, ondblclick, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onscroll and onsubmit.

Framework

The HTML 5 Doctype for the text/html version is:

The words doctype and html in the Doctype are case insensitive (can be lowercase, uppercase or mixed case). This is purely to switch web browsers into Standards Compliance mode for text/html webpages. If you need to validate HTML 5 documents you need an actual HTML 5 validator such as http://html5.validator.nu/. Most web browsers do not validate webpages so there is no need for Document Type Definitions (DTD) that the older HTML and XHTML required.

html is still the Document Element (main element of the webpage). The XHTML namespace (xmlns="http://www.w3.org/1999/xhtml") maybe kept if you are upgrading from XHTML 1.x to ease the transition but means nothing in HTML. The lang attribute is for stating the natural language of the webpage's content such as lang="en". Plus any other typical attributes such as dir="ltr" or dir="rtl" (dictates if text goes left-to-right or right-to-left).

head and body elements are the main child containers. In the head element you have a title element to provide the descriptive webpage title and a meta element with a charset attribute to set the character set; these days it would be set to UTF-8 (8-bit Universal Character Set Transfer Format). This character set declaration must be the first child element within the head element. Plus there is an older, longer version as: <meta http-equiv="content-type" content="text/html; charset=UTF-8">. But this is old hat now.

Content Grouping and Headings

It is best to use appropriate elements to put your text in, rather than text directly within the body element. This will add more meaning or semantics to the text.

The most used Flow elements are paragraphs (the p element), old division section (the div element), the section element, the article element, the nav element and the aside element.

The p element provides paragraphs and lines and has some presentational spacing around it. p elements can only have Phrasing Content within them.