Link: canonical W3C HTML 5.2 W3C Recommendation, 14 December 2017 superseded 28 January 2021 This version: https://www.w3.org/TR/2017/REC-html52-20171214/ Latest published version: https://www.w3.org/TR/html52/ Latest published version of HTML: https://www.w3.org/TR/html/ Previous version: https://www.w3.org/TR/2017/REC-html52-20171214/ Editor's Draft: https://w3c.github.io/html/ Editors: Steve Faulkner (The Paciello Group) Arron Eicholz (Microsoft) Travis Leithead (Microsoft) Alex Danilo (Google) Sangwhan Moon (Invited Expert) Former Editors: Erika Doyle Navara (Microsoft) Theresa O'Connor (Apple Inc.) Robin Berjon (W3C) Test Suite: https://w3c-test.org/html/ Implementation Report: https://w3c.github.io/test-results/html52/implementation-report.html Participate: File an issue (open issues) Others: Single page version Errata for this document are recorded as Github issues. The English version of this specification is the only normative version. Non-normative translations may also be available. Copyright © 2017 W3C^® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and document use rules apply. ---------------------------------------------------------------------- Abstract This specification defines the 5th major version, second minor revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features continue to be introduced to help Web application authors, new elements continue to be introduced based on research into prevailing authoring practices, and special attention continues to be given to defining clear conformance criteria for user agents in an effort to improve interoperability. Status of this document This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at https://www.w3.org/TR/. This specification is a Superseded Recommendation. A newer specification exists that is recommended for new adoption in place of this specification. This document was published by the Web Platform Working Group that would obsolete the HTML 5.1 Recommendation. All interested parties are invited to provide implementation and bug reports and other comments through the Working Group's Issue tracker. These will generally be considered in the development of HTML 5.3. The implementation report produced for this version demonstrates that in almost every case changes are matched by interoperable implementation. For purposes of the W3C Patent Policy, this Superseded Recommendation has the same status as an active Recommendation; it retains licensing commitments and remains available as a reference for old -- and possibly still deployed -- implementations, but is not recommended for future implementation. New implementations should follow the latest version of the HTML 5.2 specification. This document was produced by a group operating under the W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy. This document is governed by the 1 March 2017 W3C Process Document. Table of Contents 1. 1 Introduction 1. 1.1 Background 2. 1.2 Audience 3. 1.3 Scope 4. 1.4 History 5. 1.5 Design notes 1. 1.5.1 Serializability of script execution 2. 1.5.2 Compliance with other specifications 3. 1.5.3 Extensibility 6. 1.6 HTML vs XML Syntax 7. 1.7 Structure of this specification 1. 1.7.1 How to read this specification 2. 1.7.2 Typographic conventions 8. 1.8 Privacy concerns 9. 1.9 A quick introduction to HTML 1. 1.9.1 Writing secure applications with HTML 2. 1.9.2 Common pitfalls to avoid when using the scripting APIs 3. 1.9.3 How to catch mistakes when writing HTML: validators and conformance checkers 10. 1.10 Conformance requirements for authors 1. 1.10.1 Presentational markup 2. 1.10.2 Syntax errors 3. 1.10.3 Restrictions on content models and on attribute values 11. 1.11 Suggested reading 2. 2 Common infrastructure 1. 2.1 Terminology 1. 2.1.1 Resources 2. 2.1.2 XML compatibility 3. 2.1.3 DOM trees 4. 2.1.4 Scripting 5. 2.1.5 Plugins 6. 2.1.6 Character encodings 2. 2.2 Conformance requirements 1. 2.2.1 Conformance classes 2. 2.2.2 Dependencies 3. 2.2.3 Extensibility 4. 2.2.4 Interactions with XPath and XSLT 3. 2.3 Case-sensitivity and string comparison 4. 2.4 Common microsyntaxes 1. 2.4.1 Common parser idioms 2. 2.4.2 Boolean attributes 3. 2.4.3 Keywords and enumerated attributes 4. 2.4.4 Numbers 1. 2.4.4.1 Signed integers 2. 2.4.4.2 Non-negative integers 3. 2.4.4.3 Floating-point numbers 4. 2.4.4.4 Percentages and lengths 5. 2.4.4.5 Non-zero percentages and lengths 6. 2.4.4.6 Lists of floating-point numbers 7. 2.4.4.7 Lists of dimensions 5. 2.4.5 Dates and times 1. 2.4.5.1 Months 2. 2.4.5.2 Dates 3. 2.4.5.3 Yearless dates 4. 2.4.5.4 Times 5. 2.4.5.5 Floating dates and times 6. 2.4.5.6 Time zones 7. 2.4.5.7 Global dates and times 8. 2.4.5.8 Weeks 9. 2.4.5.9 Durations 10. 2.4.5.10 Vaguer moments in time 6. 2.4.6 Colors 7. 2.4.7 Space-separated tokens 8. 2.4.8 Comma-separated tokens 9. 2.4.9 References 10. 2.4.10 Media queries 5. 2.5 URLs 1. 2.5.1 Terminology 2. 2.5.2 Parsing URLs 3. 2.5.3 Dynamic changes to base URLs 6. 2.6 Fetching resources 1. 2.6.1 Terminology 2. 2.6.2 Processing model 3. 2.6.3 Encrypted HTTP and related security concerns 4. 2.6.4 Determining the type of a resource 5. 2.6.5 Extracting character encodings from meta elements 6. 2.6.6 CORS settings attributes 7. 2.6.7 Referrer policy attributes 7. 2.7 Common DOM interfaces 1. 2.7.1 Reflecting content attributes in IDL attributes 2. 2.7.2 Collections 1. 2.7.2.1 The HTMLAllCollection interface 2. 2.7.2.2 The HTMLFormControlsCollection interface 3. 2.7.2.3 The HTMLOptionsCollection interface 3. 2.7.3 The DOMStringList interface 4. 2.7.4 Garbage collection 8. 2.8 Namespaces 9. 2.9 Safe passing of structured data 1. 2.9.1 Serializable objects 2. 2.9.2 Transferable objects 3. 2.9.3 StructuredSerializeInternal ( value, forStorage [ , memory ] ) 4. 2.9.4 StructuredSerialize ( value ) 5. 2.9.5 StructuredSerializeForStorage ( value ) 6. 2.9.6 StructuredDeserialize ( serialized, targetRealm [ , memory ] ) 7. 2.9.7 StructuredSerializeWithTransfer ( value, transferList ) 8. 2.9.8 StructuredDeserializeWithTransfer ( serializeWithTransferResult, targetRealm ) 9. 2.9.9 Performing serialization and transferring from other specifications 10. 2.9.10 Monkey patch for Blob and FileList objects 3. 3 Semantics, structure, and APIs of HTML documents 1. 3.1 Documents 1. 3.1.1 The Document object 2. 3.1.2 Resource metadata management 3. 3.1.3 DOM tree accessors 2. 3.2 Elements 1. 3.2.1 Semantics 2. 3.2.2 Elements in the DOM 3. 3.2.3 Element definitions 1. 3.2.3.1 Attributes 4. 3.2.4 Content models 1. 3.2.4.1 The "nothing" content model 2. 3.2.4.2 Kinds of content 1. 3.2.4.2.1 Metadata content 2. 3.2.4.2.2 Flow content 3. 3.2.4.2.3 Sectioning content 4. 3.2.4.2.4 Heading content 5. 3.2.4.2.5 Phrasing content 6. 3.2.4.2.6 Embedded content 7. 3.2.4.2.7 Interactive content 8. 3.2.4.2.8 Palpable content 9. 3.2.4.2.9 Script-supporting elements 3. 3.2.4.3 Transparent content models 4. 3.2.4.4 Paragraphs 5. 3.2.5 Global attributes 1. 3.2.5.1 The title attribute 2. 3.2.5.2 The lang and xml:lang attributes 3. 3.2.5.3 The translate attribute 4. 3.2.5.4 The xml:base attribute (XML only) 5. 3.2.5.5 The dir attribute 6. 3.2.5.6 The style attribute 7. 3.2.5.7 Embedding custom non-visible data with the data-* attributes 6. 3.2.6 The innerText IDL attribute 7. 3.2.7 Requirements relating to the bidirectional algorithm 1. 3.2.7.1 Authoring conformance criteria for bidirectional-algorithm formatting characters 2. 3.2.7.2 User agent conformance criteria 8. 3.2.8 WAI-ARIA and HTML Accessibility API Mappings 1. 3.2.8.1 ARIA Authoring Requirements 2. 3.2.8.2 Conformance Checker Implementation Requirements 3. 3.2.8.3 User Agent Implementation Requirements 1. 3.2.8.3.1 ARIA Role Attribute 2. 3.2.8.3.2 State and Property Attributes 4. 3.2.8.4 Allowed ARIA roles, states and properties 4. 4 The elements of HTML 1. 4.1 The document element 1. 4.1.1 The html element 2. 4.2 Document metadata 1. 4.2.1 The head element 2. 4.2.2 The title element 3. 4.2.3 The base element 4. 4.2.4 The link element 1. 4.2.4.1 Processing the media attribute 2. 4.2.4.2 Processing the type attribute 3. 4.2.4.3 Obtaining a resource from a link element 4. 4.2.4.4 Processing Link headers 5. 4.2.4.5 Providing users with a means to follow hyperlinks created using the link element 6. 4.2.4.6 The LinkStyle interface 5. 4.2.5 The meta element 1. 4.2.5.1 Standard metadata names 2. 4.2.5.2 Other metadata names 3. 4.2.5.3 Pragma directives 4. 4.2.5.4 Other pragma directives 5. 4.2.5.5 Specifying the document’s character encoding 6. 4.2.6 The style element 7. 4.2.7 Interactions of styling and scripting 3. 4.3 Sections 1. 4.3.1 The body element 2. 4.3.2 The article element 3. 4.3.3 The section element 4. 4.3.4 The nav element 5. 4.3.5 The aside element 6. 4.3.6 The h1, h2, h3, h4, h5, and h6 elements 7. 4.3.7 The header element 8. 4.3.8 The footer element 9. 4.3.9 Headings and sections 1. 4.3.9.1 Creating an outline 10. 4.3.10 Usage summary 1. 4.3.10.1 Article or section? 4. 4.4 Grouping content 1. 4.4.1 The p element 2. 4.4.2 The address element 3. 4.4.3 The hr element 4. 4.4.4 The pre element 5. 4.4.5 The blockquote element 6. 4.4.6 The ol element 7. 4.4.7 The ul element 8. 4.4.8 The li element 9. 4.4.9 The dl element 10. 4.4.10 The dt element 11. 4.4.11 The dd element 12. 4.4.12 The figure element 13. 4.4.13 The figcaption element 14. 4.4.14 The main element 15. 4.4.15 The div element 5. 4.5 Text-level semantics 1. 4.5.1 The a element 2. 4.5.2 The em element 3. 4.5.3 The strong element 4. 4.5.4 The small element 5. 4.5.5 The s element 6. 4.5.6 The cite element 7. 4.5.7 The q element 8. 4.5.8 The dfn element 9. 4.5.9 The abbr element 10. 4.5.10 The ruby element 11. 4.5.11 The rb element 12. 4.5.12 The rt element 13. 4.5.13 The rtc element 14. 4.5.14 The rp element 15. 4.5.15 The data element 16. 4.5.16 The time element 17. 4.5.17 The code element 18. 4.5.18 The var element 19. 4.5.19 The samp element 20. 4.5.20 The kbd element 21. 4.5.21 The sub and sup elements 22. 4.5.22 The i element 23. 4.5.23 The b element 24. 4.5.24 The u element 25. 4.5.25 The mark element 26. 4.5.26 The bdi element 27. 4.5.27 The bdo element 28. 4.5.28 The span element 29. 4.5.29 The br element 30. 4.5.30 The wbr element 31. 4.5.31 Usage summary 6. 4.6 Edits 1. 4.6.1 The ins element 2. 4.6.2 The del element 3. 4.6.3 Attributes common to ins and del elements 4. 4.6.4 Edits and paragraphs 5. 4.6.5 Edits and lists 6. 4.6.6 Edits and tables 7. 4.7 Embedded content 1. 4.7.1 Introduction 2. 4.7.2 Dependencies 3. 4.7.3 The picture element 4. 4.7.4 The source element 5. 4.7.5 The img element 1. 4.7.5.1 Requirements for providing text to act as an alternative for images 1. 4.7.5.1.1 Examples of scenarios where users benefit from text alternatives for images 2. 4.7.5.1.2 General guidelines 3. 4.7.5.1.3 A link or button containing nothing but an image 4. 4.7.5.1.4 Graphical Representations: Charts, diagrams, graphs, maps, illustrations 5. 4.7.5.1.5 Images of text 6. 4.7.5.1.6 Images that include text 7. 4.7.5.1.7 Images that enhance the themes or subject matter of the page content 8. 4.7.5.1.8 A graphical representation of some of the surrounding text 9. 4.7.5.1.9 A purely decorative image that doesn’t add any information 10. 4.7.5.1.10 Inline images 11. 4.7.5.1.11 A group of images that form a single larger picture with no links 12. 4.7.5.1.12 Image maps 13. 4.7.5.1.13 A group of images that form a single larger picture with links 14. 4.7.5.1.14 Images of Pictures 15. 4.7.5.1.15 Webcam images 16. 4.7.5.1.16 When a text alternative is not available at the time of publication 17. 4.7.5.1.17 An image not intended for the user 18. 4.7.5.1.18 Icon Images 19. 4.7.5.1.19 Logos, insignia, flags, or emblems 20. 4.7.5.1.20 CAPTCHA Images 21. 4.7.5.1.21 An image in a picture element 22. 4.7.5.1.22 Guidance for markup generators 23. 4.7.5.1.23 Guidance for conformance checkers 6. 4.7.6 The iframe element 7. 4.7.7 The embed element 8. 4.7.8 The object element 9. 4.7.9 The param element 10. 4.7.10 The video element 11. 4.7.11 The audio element 12. 4.7.12 The track element 13. 4.7.13 Media elements 1. 4.7.13.1 Error codes 2. 4.7.13.2 Location of the media resource 3. 4.7.13.3 MIME types 4. 4.7.13.4 Network states 5. 4.7.13.5 Loading the media resource 6. 4.7.13.6 Offsets into the media resource 7. 4.7.13.7 Ready states 8. 4.7.13.8 Playing the media resource 9. 4.7.13.9 Seeking 10. 4.7.13.10 Media resources with multiple media tracks 1. 4.7.13.10.1 AudioTrackList and VideoTrackList objects 2. 4.7.13.10.2 Selecting specific audio and video tracks declaratively 11. 4.7.13.11 Timed text tracks 1. 4.7.13.11.1 Text track model 2. 4.7.13.11.2 Sourcing in-band text tracks 3. 4.7.13.11.3 Sourcing out-of-band text tracks 4. 4.7.13.11.4 Guidelines for exposing cues in various formats as text track cues 5. 4.7.13.11.5 Text track API 6. 4.7.13.11.6 Text tracks exposing in-band metadata 7. 4.7.13.11.7 Text tracks describing chapters 8. 4.7.13.11.8 Event handlers for objects of the text track APIs 9. 4.7.13.11.9 Best practices for metadata text tracks 12. 4.7.13.12 Identifying a track kind through a URL 13. 4.7.13.13 User interface 14. 4.7.13.14 Time ranges 15. 4.7.13.15 The TrackEvent interface 16. 4.7.13.16 Event summary 17. 4.7.13.17 Security and privacy considerations 18. 4.7.13.18 Best practices for authors using media elements 19. 4.7.13.19 Best practices for implementors of media elements 14. 4.7.14 The map element 15. 4.7.15 The area element 16. 4.7.16 Image maps 1. 4.7.16.1 Authoring 2. 4.7.16.2 Processing model 17. 4.7.17 MathML 18. 4.7.18 SVG 19. 4.7.19 Dimension attributes 8. 4.8 Links 1. 4.8.1 Introduction 2. 4.8.2 Links created by a and area elements 3. 4.8.3 API for a and area elements 4. 4.8.4 Following hyperlinks 5. 4.8.5 Downloading resources 6. 4.8.6 Link types 1. 4.8.6.1 Link type "alternate" 2. 4.8.6.2 Link type "author" 3. 4.8.6.3 Link type "bookmark" 4. 4.8.6.4 Link type "help" 5. 4.8.6.5 Link type "icon" 6. 4.8.6.6 Link type "license" 7. 4.8.6.7 Link type "nofollow" 8. 4.8.6.8 Link type "noopener" 9. 4.8.6.9 Link type "noreferrer" 10. 4.8.6.10 Link type "search" 11. 4.8.6.11 Link type "stylesheet" 12. 4.8.6.12 Link type "tag" 13. 4.8.6.13 Sequential link types 1. 4.8.6.13.1 Link type "next" 2. 4.8.6.13.2 Link type "prev" 14. 4.8.6.14 Other link types 9. 4.9 Tabular data 1. 4.9.1 The table element 1. 4.9.1.1 Techniques for describing tables 2. 4.9.1.2 Techniques for table design 2. 4.9.2 The caption element 3. 4.9.3 The colgroup element 4. 4.9.4 The col element 5. 4.9.5 The tbody element 6. 4.9.6 The thead element 7. 4.9.7 The tfoot element 8. 4.9.8 The tr element 9. 4.9.9 The td element 10. 4.9.10 The th element 11. 4.9.11 Attributes common to td and th elements 12. 4.9.12 Processing model 1. 4.9.12.1 Forming a table 2. 4.9.12.2 Forming relationships between data cells and header cells 13. 4.9.13 Examples 10. 4.10 Forms 1. 4.10.1 Introduction 1. 4.10.1.1 Writing a form’s user interface 2. 4.10.1.2 Implementing the server-side processing for a form 3. 4.10.1.3 Configuring a form to communicate with a server 4. 4.10.1.4 Client-side form validation 5. 4.10.1.5 Enabling client-side automatic filling of form controls 6. 4.10.1.6 The difference between the field type, the autofill field name, and the input modality 7. 4.10.1.7 Date, time, and number formats 2. 4.10.2 Categories 3. 4.10.3 The form element 4. 4.10.4 The label element 5. 4.10.5 The input element 1. 4.10.5.1 States of the type attribute 1. 4.10.5.1.1 Hidden state (type=hidden) 2. 4.10.5.1.2 Text (type=text) state and Search state (type=search) 3. 4.10.5.1.3 Telephone state (type=tel) 4. 4.10.5.1.4 URL state (type=url) 5. 4.10.5.1.5 E-mail state (type=email) 6. 4.10.5.1.6 Password state (type=password) 7. 4.10.5.1.7 Date state (type=date) 8. 4.10.5.1.8 Month state (type=month) 9. 4.10.5.1.9 Week state (type=week) 10. 4.10.5.1.10 Time state (type=time) 11. 4.10.5.1.11 Local Date and Time state (type=datetime-local) 12. 4.10.5.1.12 Number state (type=number) 13. 4.10.5.1.13 Range state (type=range) 14. 4.10.5.1.14 Color state (type=color) 15. 4.10.5.1.15 Checkbox state (type=checkbox) 16. 4.10.5.1.16 Radio Button state (type=radio) 17. 4.10.5.1.17 File Upload state (type=file) 18. 4.10.5.1.18 Submit Button state (type=submit) 19. 4.10.5.1.19 Image Button state (type=image) 20. 4.10.5.1.20 Reset Button state (type=reset) 21. 4.10.5.1.21 Button state (type=button) 2. 4.10.5.2 Implementation notes regarding localization of form controls 3. 4.10.5.3 Common input element attributes 1. 4.10.5.3.1 The maxlength and minlength attributes 2. 4.10.5.3.2 The size attribute 3. 4.10.5.3.3 The readonly attribute 4. 4.10.5.3.4 The required attribute 5. 4.10.5.3.5 The multiple attribute 6. 4.10.5.3.6 The pattern attribute 7. 4.10.5.3.7 The min and max attributes 8. 4.10.5.3.8 The step attribute 9. 4.10.5.3.9 The list attribute 10. 4.10.5.3.10 The placeholder attribute 4. 4.10.5.4 Common input element APIs 5. 4.10.5.5 Common event behaviors 6. 4.10.6 The button element 7. 4.10.7 The select element 8. 4.10.8 The datalist element 9. 4.10.9 The optgroup element 10. 4.10.10 The option element 11. 4.10.11 The textarea element 12. 4.10.12 The output element 13. 4.10.13 The progress element 14. 4.10.14 The meter element 15. 4.10.15 The fieldset element 16. 4.10.16 The legend element 17. 4.10.17 Form control infrastructure 1. 4.10.17.1 A form control value 2. 4.10.17.2 Mutability 3. 4.10.17.3 Association of controls and forms 18. 4.10.18 Attributes common to form controls 1. 4.10.18.1 Naming form controls: the name attribute 2. 4.10.18.2 Submitting element directionality: the dirname attribute 3. 4.10.18.3 Limiting user input length: the maxlength attribute 4. 4.10.18.4 Setting minimum input length requirements: the minlength attribute 5. 4.10.18.5 Enabling and disabling form controls: the disabled attribute 6. 4.10.18.6 Form submission 1. 4.10.18.6.1 Autofocusing a form control: the autofocus attribute 7. 4.10.18.7 Autofill 1. 4.10.18.7.1 Autofilling form controls: the autocomplete attribute 2. 4.10.18.7.2 Processing model 19. 4.10.19 APIs for text field selections 20. 4.10.20 Constraints 1. 4.10.20.1 Definitions 2. 4.10.20.2 Constraint validation 3. 4.10.20.3 The constraint validation API 4. 4.10.20.4 Security 21. 4.10.21 Form submission 1. 4.10.21.1 Introduction 2. 4.10.21.2 Implicit submission 3. 4.10.21.3 Form submission algorithm 4. 4.10.21.4 Constructing the form data set 5. 4.10.21.5 Selecting a form submission encoding 6. 4.10.21.6 URL-encoded form data 7. 4.10.21.7 Multipart form data 8. 4.10.21.8 Plain text form data 22. 4.10.22 Resetting a form 11. 4.11 Interactive elements 1. 4.11.1 The details element 2. 4.11.2 The summary element 3. 4.11.3 Commands 1. 4.11.3.1 Facets 2. 4.11.3.2 Using the a element to define a command 3. 4.11.3.3 Using the button element to define a command 4. 4.11.3.4 Using the input element to define a command 5. 4.11.3.5 Using the option element to define a command 6. 4.11.3.6 Using the accesskey attribute on a label element to define a command 7. 4.11.3.7 Using the accesskey attribute on a legend element to define a command 8. 4.11.3.8 Using the accesskey attribute to define a command on other elements 4. 4.11.4 The dialog element 1. 4.11.4.1 Anchor points 12. 4.12 Scripting 1. 4.12.1 The script element 1. 4.12.1.1 Processing model 2. 4.12.1.2 Scripting languages 3. 4.12.1.3 Restrictions for contents of script elements 4. 4.12.1.4 Inline documentation for external scripts 5. 4.12.1.5 Interaction of script elements and XSLT 2. 4.12.2 The noscript element 3. 4.12.3 The template element 1. 4.12.3.1 Interaction of template elements with XSLT and XPath 4. 4.12.4 The canvas element 1. 4.12.4.1 Color spaces and color correction 2. 4.12.4.2 Serializing bitmaps to a file 3. 4.12.4.3 Security with canvas elements 13. 4.13 Common idioms without dedicated elements 1. 4.13.1 Subheadings, subtitles, alternative titles and taglines 2. 4.13.2 Bread crumb navigation 3. 4.13.3 Tag clouds 4. 4.13.4 Conversations 5. 4.13.5 Footnotes 14. 4.14 Disabled elements 15. 4.15 Matching HTML elements using selectors 1. 4.15.1 Case-sensitivity 2. 4.15.2 Pseudo-classes 5. 5 User interaction 1. 5.1 The hidden attribute 2. 5.2 Inert subtrees 3. 5.3 Activation 4. 5.4 Focus 1. 5.4.1 Introduction 2. 5.4.2 Data model 3. 5.4.3 The tabindex attribute 4. 5.4.4 Processing model 5. 5.4.5 Sequential focus navigation 6. 5.4.6 Focus management APIs 7. 5.4.7 Clipboard actions and focus 5. 5.5 Assigning keyboard shortcuts 1. 5.5.1 Introduction 2. 5.5.2 The accesskey attribute 3. 5.5.3 Processing model 6. 5.6 Editing 1. 5.6.1 Making document regions editable: The contenteditable content attribute 2. 5.6.2 Making entire documents editable: The designMode IDL attribute 3. 5.6.3 Best practices for in-page editors 4. 5.6.4 Editing APIs 5. 5.6.5 Spelling and grammar checking 7. 5.7 Drag and drop 1. 5.7.1 Introduction 2. 5.7.2 The drag data store 3. 5.7.3 The DataTransfer interface 1. 5.7.3.1 The DataTransferItemList interface 2. 5.7.3.2 The DataTransferItem interface 4. 5.7.4 The DragEvent interface 5. 5.7.5 Drag-and-drop processing model 6. 5.7.6 Events summary 7. 5.7.7 The draggable attribute 8. 5.7.8 Security risks in the drag-and-drop model 6. 6 Loading Web pages 1. 6.1 Browsing contexts 1. 6.1.1 Nested browsing contexts 1. 6.1.1.1 Navigating nested browsing contexts in the DOM 2. 6.1.2 Auxiliary browsing contexts 1. 6.1.2.1 Navigating auxiliary browsing contexts in the DOM 3. 6.1.3 Security 4. 6.1.4 Groupings of browsing contexts 5. 6.1.5 Browsing context names 6. 6.1.6 Script settings for browsing contexts 2. 6.2 Security infrastructure for Window, WindowProxy, and Location objects 1. 6.2.1 Integration with IDL 2. 6.2.2 Shared internal slot: [[CrossOriginPropertyDescriptorMap]] 3. 6.2.3 Shared abstract operations 1. 6.2.3.1 CrossOriginProperties ( O ) 2. 6.2.3.2 IsPlatformObjectSameOrigin ( O ) 3. 6.2.3.3 CrossOriginGetOwnPropertyHelper ( O, P ) 1. 6.2.3.3.1 CrossOriginPropertyDescriptor ( crossOriginProperty, originalDesc ) 2. 6.2.3.3.2 CrossOriginFunctionWrapper ( needsWrapping, functionToWrap ) 4. 6.2.3.4 CrossOriginGet ( O, P, Receiver ) 5. 6.2.3.5 CrossOriginSet ( O, P, V, Receiver ) 6. 6.2.3.6 CrossOriginOwnPropertyKeys ( O ) 3. 6.3 The Window object 1. 6.3.1 APIs for creating and navigating browsing contexts by name 2. 6.3.2 Accessing other browsing contexts 3. 6.3.3 Named access on the Window object 4. 6.3.4 Garbage collection and browsing contexts 5. 6.3.5 Closing browsing contexts 6. 6.3.6 Browser interface elements 7. 6.3.7 The WindowProxy object 1. 6.3.7.1 The WindowProxy internal methods 1. 6.3.7.1.1 [[GetPrototypeOf]] ( ) 2. 6.3.7.1.2 [[SetPrototypeOf]] ( V ) 3. 6.3.7.1.3 [[IsExtensible]] ( ) 4. 6.3.7.1.4 [[PreventExtensions]] ( ) 5. 6.3.7.1.5 [[GetOwnProperty]] ( P ) 6. 6.3.7.1.6 [[DefineOwnProperty]] ( P, Desc ) 7. 6.3.7.1.7 [[Get]] ( P, Receiver ) 8. 6.3.7.1.8 [[Set]] ( P, V, Receiver ) 9. 6.3.7.1.9 [[Delete]] ( P ) 10. 6.3.7.1.10 [[OwnPropertyKeys]] ( ) 4. 6.4 Origin 1. 6.4.1 Relaxing the same-origin restriction 5. 6.5 Sandboxing 6. 6.6 Session history and navigation 1. 6.6.1 The session history of browsing contexts 2. 6.6.2 The History interface 3. 6.6.3 Implementation notes for session history 4. 6.6.4 The Location interface 1. 6.6.4.1 The Location internal methods 1. 6.6.4.1.1 [[GetPrototypeOf]] ( ) 2. 6.6.4.1.2 [[SetPrototypeOf]] ( V ) 3. 6.6.4.1.3 [[IsExtensible]] ( ) 4. 6.6.4.1.4 [[PreventExtensions]] ( ) 5. 6.6.4.1.5 [[GetOwnProperty]] ( P ) 6. 6.6.4.1.6 [[DefineOwnProperty]] ( P, Desc ) 7. 6.6.4.1.7 [[Get]] ( P, Receiver ) 8. 6.6.4.1.8 [[Set]] ( P, V, Receiver ) 9. 6.6.4.1.9 [[Delete]] ( P ) 10. 6.6.4.1.10 [[OwnPropertyKeys]] ( ) 7. 6.7 Browsing the Web 1. 6.7.1 Navigating across documents 2. 6.7.2 Page load processing model for HTML files 3. 6.7.3 Page load processing model for XML files 4. 6.7.4 Page load processing model for text files 5. 6.7.5 Page load processing model for multipart/x-mixed-replace resources 6. 6.7.6 Page load processing model for media 7. 6.7.7 Page load processing model for content that uses plugins 8. 6.7.8 Page load processing model for inline content that doesn’t have a DOM 9. 6.7.9 Navigating to a fragment 10. 6.7.10 History traversal 1. 6.7.10.1 Persisted user state restoration 2. 6.7.10.2 The PopStateEvent interface 3. 6.7.10.3 The HashChangeEvent interface 4. 6.7.10.4 The PageTransitionEvent interface 11. 6.7.11 Unloading documents 1. 6.7.11.1 The BeforeUnloadEvent interface 12. 6.7.12 Aborting a document load 13. 6.7.13 Browser state 7. 7 Web application APIs 1. 7.1 Scripting 1. 7.1.1 Introduction 2. 7.1.2 Enabling and disabling scripting 3. 7.1.3 Processing model 1. 7.1.3.1 Definitions 2. 7.1.3.2 Fetching scripts 3. 7.1.3.3 Creating scripts 4. 7.1.3.4 Calling scripts 5. 7.1.3.5 Realms, settings objects, and global objects 1. 7.1.3.5.1 Entry 2. 7.1.3.5.2 Incumbent 3. 7.1.3.5.3 Current 4. 7.1.3.5.4 Relevant 6. 7.1.3.6 Killing scripts 7. 7.1.3.7 Integration with the JavaScript job queue 1. 7.1.3.7.1 EnqueueJob(queueName, job, arguments) 8. 7.1.3.8 Integration with the JavaScript module system 1. 7.1.3.8.1 HostResolveImportedModule(referencingModule, specifier) 9. 7.1.3.9 Runtime script errors 1. 7.1.3.9.1 Runtime script errors in documents 2. 7.1.3.9.2 The ErrorEvent interface 10. 7.1.3.10 Unhandled promise rejections 1. 7.1.3.10.1 The HostPromiseRejectionTracker implementation 2. 7.1.3.10.2 The PromiseRejectionEvent interface 11. 7.1.3.11 HostEnsureCanCompileStrings(callerRealm, calleeRealm) 4. 7.1.4 Event loops 1. 7.1.4.1 Definitions 2. 7.1.4.2 Processing model 3. 7.1.4.3 Generic task sources 5. 7.1.5 Events 1. 7.1.5.1 Event handlers 2. 7.1.5.2 Event handlers on elements, Document objects, and Window objects 1. 7.1.5.2.1 IDL definitions 3. 7.1.5.3 Event firing 4. 7.1.5.4 Events and the Window object 2. 7.2 The WindowOrWorkerGlobalScope mixin 3. 7.3 Base64 utility methods 4. 7.4 Dynamic markup insertion 1. 7.4.1 Opening the input stream 2. 7.4.2 Closing the input stream 3. 7.4.3 document.write() 4. 7.4.4 document.writeln() 5. 7.5 Timers 6. 7.6 User prompts 1. 7.6.1 Simple dialogs 2. 7.6.2 Printing 7. 7.7 System state and capabilities 1. 7.7.1 The Navigator object 1. 7.7.1.1 Client identification 2. 7.7.1.2 Language preferences 3. 7.7.1.3 Custom scheme and content handlers: the registerProtocolHandler() and registerContentHandler() methods 1. 7.7.1.3.1 Security and privacy 2. 7.7.1.3.2 Sample user interface 4. 7.7.1.4 Cookies 8. 7.8 Images 9. 7.9 Animation Frames 8. 8 The HTML syntax 1. 8.1 Writing HTML documents 1. 8.1.1 The DOCTYPE 2. 8.1.2 Elements 1. 8.1.2.1 Start tags 2. 8.1.2.2 End tags 3. 8.1.2.3 Attributes 4. 8.1.2.4 Optional tags 5. 8.1.2.5 Restrictions on content models 6. 8.1.2.6 Restrictions on the contents of raw text and escapable raw text elements 3. 8.1.3 Text 1. 8.1.3.1 Newlines 4. 8.1.4 Character references 5. 8.1.5 CDATA sections 6. 8.1.6 Comments 2. 8.2 Parsing HTML documents 1. 8.2.1 Overview of the parsing model 2. 8.2.2 The input byte stream 1. 8.2.2.1 Parsing with a known character encoding 2. 8.2.2.2 Determining the character encoding 3. 8.2.2.3 Character encodings 4. 8.2.2.4 Changing the encoding while parsing 5. 8.2.2.5 Preprocessing the input stream 3. 8.2.3 Parse state 1. 8.2.3.1 The insertion mode 2. 8.2.3.2 The stack of open elements 3. 8.2.3.3 The list of active formatting elements 4. 8.2.3.4 The element pointers 5. 8.2.3.5 Other parsing state flags 4. 8.2.4 Tokenization 1. 8.2.4.1 Data state 2. 8.2.4.2 RCDATA state 3. 8.2.4.3 RAWTEXT state 4. 8.2.4.4 Script data state 5. 8.2.4.5 PLAINTEXT state 6. 8.2.4.6 Tag open state 7. 8.2.4.7 End tag open state 8. 8.2.4.8 Tag name state 9. 8.2.4.9 RCDATA less-than sign state 10. 8.2.4.10 RCDATA end tag open state 11. 8.2.4.11 RCDATA end tag name state 12. 8.2.4.12 RAWTEXT less-than sign state 13. 8.2.4.13 RAWTEXT end tag open state 14. 8.2.4.14 RAWTEXT end tag name state 15. 8.2.4.15 Script data less-than sign state 16. 8.2.4.16 Script data end tag open state 17. 8.2.4.17 Script data end tag name state 18. 8.2.4.18 Script data escape start state 19. 8.2.4.19 Script data escape start dash state 20. 8.2.4.20 Script data escaped state 21. 8.2.4.21 Script data escaped dash state 22. 8.2.4.22 Script data escaped dash dash state 23. 8.2.4.23 Script data escaped less-than sign state 24. 8.2.4.24 Script data escaped end tag open state 25. 8.2.4.25 Script data escaped end tag name state 26. 8.2.4.26 Script data double escape start state 27. 8.2.4.27 Script data double escaped state 28. 8.2.4.28 Script data double escaped dash state 29. 8.2.4.29 Script data double escaped dash dash state 30. 8.2.4.30 Script data double escaped less-than sign state 31. 8.2.4.31 Script data double escape end state 32. 8.2.4.32 Before attribute name state 33. 8.2.4.33 Attribute name state 34. 8.2.4.34 After attribute name state 35. 8.2.4.35 Before attribute value state 36. 8.2.4.36 Attribute value (double-quoted) state 37. 8.2.4.37 Attribute value (single-quoted) state 38. 8.2.4.38 Attribute value (unquoted) state 39. 8.2.4.39 After attribute value (quoted) state 40. 8.2.4.40 Self-closing start tag state 41. 8.2.4.41 Bogus comment state 42. 8.2.4.42 Markup declaration open state 43. 8.2.4.43 Comment start state 44. 8.2.4.44 Comment start dash state 45. 8.2.4.45 Comment state 46. 8.2.4.46 Comment less-than sign state 47. 8.2.4.47 Comment less-than sign bang state 48. 8.2.4.48 Comment less-than sign bang dash state 49. 8.2.4.49 Comment less-than sign bang dash dash state 50. 8.2.4.50 Comment end dash state 51. 8.2.4.51 Comment end state 52. 8.2.4.52 Comment end bang state 53. 8.2.4.53 DOCTYPE state 54. 8.2.4.54 Before DOCTYPE name state 55. 8.2.4.55 DOCTYPE name state 56. 8.2.4.56 After DOCTYPE name state 57. 8.2.4.57 After DOCTYPE public keyword state 58. 8.2.4.58 Before DOCTYPE public identifier state 59. 8.2.4.59 DOCTYPE public identifier (double-quoted) state 60. 8.2.4.60 DOCTYPE public identifier (single-quoted) state 61. 8.2.4.61 After DOCTYPE public identifier state 62. 8.2.4.62 Between DOCTYPE public and system identifiers state 63. 8.2.4.63 After DOCTYPE system keyword state 64. 8.2.4.64 Before DOCTYPE system identifier state 65. 8.2.4.65 DOCTYPE system identifier (double-quoted) state 66. 8.2.4.66 DOCTYPE system identifier (single-quoted) state 67. 8.2.4.67 After DOCTYPE system identifier state 68. 8.2.4.68 Bogus DOCTYPE state 69. 8.2.4.69 CDATA section state 70. 8.2.4.70 CDATA section bracket state 71. 8.2.4.71 CDATA section end state 72. 8.2.4.72 Character reference state 73. 8.2.4.73 Numeric character reference state 74. 8.2.4.74 Hexadecimal character reference start state 75. 8.2.4.75 Decimal character reference start state 76. 8.2.4.76 Hexadecimal character reference state 77. 8.2.4.77 Decimal character reference state 78. 8.2.4.78 Numeric character reference end state 79. 8.2.4.79 Character reference end state 5. 8.2.5 Tree construction 1. 8.2.5.1 Creating and inserting nodes 2. 8.2.5.2 Parsing elements that contain only text 3. 8.2.5.3 Closing elements that have implied end tags 4. 8.2.5.4 The rules for parsing tokens in HTML content 1. 8.2.5.4.1 The "initial" insertion mode 2. 8.2.5.4.2 The "before html" insertion mode 3. 8.2.5.4.3 The "before head" insertion mode 4. 8.2.5.4.4 The "in head" insertion mode 5. 8.2.5.4.5 The "in head noscript" insertion mode 6. 8.2.5.4.6 The "after head" insertion mode 7. 8.2.5.4.7 The "in body" insertion mode 8. 8.2.5.4.8 The "text" insertion mode 9. 8.2.5.4.9 The "in table" insertion mode 10. 8.2.5.4.10 The "in table text" insertion mode 11. 8.2.5.4.11 The "in caption" insertion mode 12. 8.2.5.4.12 The "in column group" insertion mode 13. 8.2.5.4.13 The "in table body" insertion mode 14. 8.2.5.4.14 The "in row" insertion mode 15. 8.2.5.4.15 The "in cell" insertion mode 16. 8.2.5.4.16 The "in select" insertion mode 17. 8.2.5.4.17 The "in select in table" insertion mode 18. 8.2.5.4.18 The "in template" insertion mode 19. 8.2.5.4.19 The "after body" insertion mode 20. 8.2.5.4.20 The "in frameset" insertion mode 21. 8.2.5.4.21 The "after frameset" insertion mode 22. 8.2.5.4.22 The "after after body" insertion mode 23. 8.2.5.4.23 The "after after frameset" insertion mode 5. 8.2.5.5 The rules for parsing tokens in foreign content 6. 8.2.6 The end 7. 8.2.7 Coercing an HTML DOM into an infoset 8. 8.2.8 An introduction to error handling and strange cases in the parser 1. 8.2.8.1 Misnested tags: 2. 8.2.8.2 Misnested tags:

3. 8.2.8.3 Unexpected markup in tables 4. 8.2.8.4 Scripts that modify the page as it is being parsed 5. 8.2.8.5 The execution of scripts that are moving across multiple documents 6. 8.2.8.6 Unclosed formatting elements 3. 8.3 Serializing HTML fragments 4. 8.4 Parsing HTML fragments 5. 8.5 Named character references 9. 9 The XML syntax 1. 9.1 Writing documents in the XML syntax 2. 9.2 Parsing XML documents 3. 9.3 Serializing XML fragments 4. 9.4 Parsing XML fragments 10. 10 Rendering 1. 10.1 Introduction 2. 10.2 The CSS user agent style sheet and presentational hints 3. 10.3 Non-replaced elements 1. 10.3.1 Hidden elements 2. 10.3.2 The page 3. 10.3.3 Flow content 4. 10.3.4 Phrasing content 5. 10.3.5 Bidirectional text 6. 10.3.6 Quotes 7. 10.3.7 Sections and headings 8. 10.3.8 Lists 9. 10.3.9 Tables 10. 10.3.10 Margin collapsing quirks 11. 10.3.11 Form controls 12. 10.3.12 The hr element 13. 10.3.13 The fieldset and legend elements 4. 10.4 Replaced elements 1. 10.4.1 Embedded content 2. 10.4.2 Images 3. 10.4.3 Attributes for embedded content and images 4. 10.4.4 Image maps 5. 10.5 Widgets 1. 10.5.1 Introduction 2. 10.5.2 The button element 3. 10.5.3 The details and summary elements 4. 10.5.4 The input element as a text entry widget. 5. 10.5.5 The input element as domain-specific widgets 6. 10.5.6 The input element as a range control 7. 10.5.7 The input element as a color well 8. 10.5.8 The input element as a checkbox and radio button widgets 9. 10.5.9 The input element as a file upload control 10. 10.5.10 The input element as a button 11. 10.5.11 The marquee element 12. 10.5.12 The meter element 13. 10.5.13 The progress element 14. 10.5.14 The select element 15. 10.5.15 The textarea element 6. 10.6 Frames and framesets 7. 10.7 Interactive media 1. 10.7.1 Links, forms, and navigation 2. 10.7.2 The title attribute 3. 10.7.3 Editing hosts 4. 10.7.4 Text rendered in native user interfaces 8. 10.8 Print media 9. 10.9 Unstyled XML documents 11. 11 Obsolete features 1. 11.1 Obsolete but conforming features 1. 11.1.1 Warnings for obsolete but conforming features 2. 11.2 Non-conforming features 3. 11.3 Requirements for implementations 1. 11.3.1 The applet element 2. 11.3.2 The marquee element 3. 11.3.3 Frames 4. 11.3.4 Other elements, attributes and APIs 1. 11.3.4.1 Plugins 12. 12 IANA considerations 1. 12.1 text/html 2. 12.2 multipart/x-mixed-replace 3. 12.3 application/xhtml+xml 4. 12.4 web+ scheme prefix 13. Index 1. Terms defined by this specification 2. Terms defined by reference 3. Elements 4. Element content categories 5. Attributes 6. Element Interfaces 7. Events 14. Property Index 15. IDL Index 16. References 1. Normative References 2. Informative References 17. Changes 1. New features 2. Features removed 3. Fixing bugs and matching reality better 4. New concepts 5. Editorial clarifications 18. Acknowledgements 1. People who have contributed to this version of HTML 2. People who have contributed to previous revisions of HTML 5.x 1. Introduction 1.1. Background This section is non-normative. HTML is the World Wide Web’s core markup language. Originally, HTML was primarily designed as a language for semantically describing scientific documents. Its general design, however, has enabled it to be adapted, over the subsequent years, to describe a number of other types of documents and even applications. 1.2. Audience This section is non-normative. This specification is intended for authors of documents and scripts that use the features defined in this specification, implementors of tools that operate on pages that use the features defined in this specification, and individuals wishing to establish the correctness of documents or implementations with respect to the requirements of this specification. This document is probably not suited to readers who do not already have at least a passing familiarity with Web technologies, as in places it sacrifices clarity for precision, and brevity for completeness. More approachable tutorials and authoring guides can provide a gentler introduction to the topic. In particular, familiarity with the basics of DOM is necessary for a complete understanding of some of the more technical parts of this specification. An understanding of Web IDL, HTTP, XML, Unicode, character encodings, JavaScript, and CSS will also be helpful in places but is not essential. 1.3. Scope This section is non-normative. This specification is limited to providing a semantic-level markup language and associated semantic-level scripting APIs for authoring accessible pages on the Web ranging from static documents to dynamic applications. The scope of this specification does not include providing mechanisms for media-specific customization of presentation (although default rendering rules for Web browsers are included at the end of this specification, and several mechanisms for hooking into CSS are provided as part of the language). The scope of this specification is not to describe an entire operating system. In particular, hardware configuration software, image manipulation tools, and applications that users would be expected to use with high-end workstations on a daily basis are out of scope. In terms of applications, this specification is targeted specifically at applications that would be expected to be used by users on an occasional basis, or regularly but from disparate locations, with low CPU requirements. Examples of such applications include online purchasing systems, searching systems, games (especially multiplayer online games), public telephone books or address books, communications software (e-mail clients, instant messaging clients, discussion software), document editing software, etc. 1.4. History This section is non-normative. For its first five years (1990-1995), HTML went through a number of revisions and experienced a number of extensions, primarily hosted first at CERN, and then at the IETF. With the creation of the W3C, HTML’s development changed venue again. A first abortive attempt at extending HTML in 1995 known as HTML 3.0 then made way to a more pragmatic approach known as HTML 3.2, which was completed in 1997. HTML 4.01 quickly followed later that same year. The following year, the W3C membership decided to stop evolving HTML and instead begin work on an XML-based equivalent, called XHTML. This effort started with a reformulation of HTML 4.01 in XML, known as XHTML 1.0, which added no new features except the new serialization, and which was completed in 2000. After XHTML 1.0, the W3C’s focus turned to making it easier for other working groups to extend XHTML, under the banner of XHTML Modularization. In parallel with this, the W3C also worked on a new language that was not compatible with the earlier HTML and XHTML languages, calling it XHTML 2.0. Around the time that HTML’s evolution was stopped in 1998, parts of the API for HTML developed by browser vendors were specified and published under the name DOM Level 1 (in 1998) and DOM Level 2 Core and DOM Level 2 HTML (starting in 2000 and culminating in 2003). These efforts then petered out, with some DOM Level 3 specifications published in 2004 but the working group being closed before all the Level 3 drafts were completed. In 2003, the publication of XForms, a technology which was positioned as the next generation of Web forms, sparked a renewed interest in evolving HTML itself, rather than finding replacements for it. This interest was borne from the realization that XML’s deployment as a Web technology was limited to entirely new technologies (like RSS and later Atom), rather than as a replacement for existing deployed technologies (like HTML). A proof of concept to show that it was possible to extend HTML 4.01’s forms to provide many of the features that XForms 1.0 introduced, without requiring browsers to implement rendering engines that were incompatible with existing HTML Web pages, was the first result of this renewed interest. At this early stage, while the draft was already publicly available, and input was already being solicited from all sources, the specification was only under Opera Software’s copyright. The idea that HTML’s evolution should be reopened was tested at a W3C workshop in 2004, where some of the principles that underlie the HTML work (described below), as well as the aforementioned early draft proposal covering just forms-related features, were presented to the W3C jointly by Mozilla and Opera. The proposal was rejected on the grounds that the proposal conflicted with the previously chosen direction for the Web’s evolution; the W3C staff and membership voted to continue developing XML-based replacements instead. Shortly thereafter, Apple, Mozilla, and Opera jointly announced their intent to continue working on the effort under the umbrella of a new venue called the WHATWG. A public mailing list was created, and the draft was moved to the WHATWG site. The copyright was subsequently amended to be jointly owned by all three vendors, and to allow reuse of the specification. The WHATWG was based on several core principles, in particular that technologies need to be backwards compatible, that specifications and implementations need to match even if this means changing the specification rather than the implementations, and that specifications need to be detailed enough that implementations can achieve complete interoperability without reverse-engineering each other. The latter requirement in particular required that the scope of the HTML specification include what had previously been specified in three separate documents: HTML 4.01, XHTML 1.1, and DOM Level 2 HTML. It also meant including significantly more detail than had previously been considered the norm. In 2006, the W3C indicated an interest to participate in the development of HTML 5.0 after all, and in 2007 formed a working group chartered to work with the WHATWG on the development of the HTML specification. Apple, Mozilla, and Opera allowed the W3C to publish the specification under the W3C copyright, while keeping a version with the less restrictive license on the WHATWG site. For a number of years, both groups then worked together under the same editor: Ian Hickson. In 2011, the groups came to the conclusion that they had different goals: the W3C wanted to draw a line in the sand for features for a HTML 5.0 Recommendation, while the WHATWG wanted to continue working on a Living Standard for HTML, continuously maintaining the specification and adding new features. In mid 2012, a new editing team was introduced at the W3C to take care of creating a HTML 5.0 Recommendation and prepare a Working Draft for the next HTML version. Since then, the W3C Web Platform WG has been cherry picking patches from the WHATWG that resolved bugs registered on the W3C HTML specification or more accurately represented implemented reality in user agents. At time of publication of this document, patches from the WHATWG HTML specification have been merged until January 12, 2016. The W3C HTML editors have also added patches that resulted from discussions and decisions made by the W3C Web Platform WG as well a bug fixes from bugs not shared by the WHATWG. A separate document is published to document the differences between the HTML specified in this document and the language described in the HTML 4.01 specification. [HTML5-DIFF] 1.5. Design notes This section is non-normative. It must be admitted that many aspects of HTML appear at first glance to be nonsensical and inconsistent. HTML, its supporting DOM APIs, as well as many of its supporting technologies, have been developed over a period of several decades by a wide array of people with different priorities who, in many cases, did not know of each other’s existence. Features have thus arisen from many sources, and have not always been designed in especially consistent ways. Furthermore, because of the unique characteristics of the Web, implementation bugs have often become de-facto, and now de-jure, standards, as content is often unintentionally written in ways that rely on them before they can be fixed. Despite all this, efforts have been made to adhere to certain design goals. These are described in the next few subsections. 1.5.1. Serializability of script execution This section is non-normative. To avoid exposing Web authors to the complexities of multithreading, the HTML and DOM APIs are designed such that no script can ever detect the simultaneous execution of other scripts. Even with workers, the intent is that the behavior of implementations can be thought of as completely serializing the execution of all scripts in all browsing contexts. 1.5.2. Compliance with other specifications This section is non-normative. This specification interacts with and relies on a wide variety of other specifications. In certain circumstances, unfortunately, conflicting needs have led to this specification violating the requirements of these other specifications. Whenever this has occurred, the transgressions have each been noted as a "willful violation", and the reason for the violation has been noted. 1.5.3. Extensibility This section is non-normative. HTML has a wide array of extensibility mechanisms that can be used for adding semantics in a safe manner: * Authors can use the class attribute to extend elements, effectively creating their own elements, while using the most applicable existing "real" HTML element, so that browsers and other tools that don’t know of the extension can still support it somewhat well. This is the tack used by microformats, for example. * Authors can include data for inline client-side scripts or server-side site-wide scripts to process using the data-*="" attributes. These are guaranteed to never be touched by browsers, and allow scripts to include data on HTML elements that scripts can then look for and process. * Authors can use the meta name="" content="" mechanism to include page-wide metadata by registering extensions to the predefined set of metadata names. * Authors can use the rel="" mechanism to annotate links with specific meanings by registering extensions to the predefined set of link types. This is also used by microformats. * Authors can embed raw data using the script type="" mechanism with a custom type, for further handling by inline or server-side scripts. * Authors can extend APIs using the JavaScript prototyping mechanism. This is widely used by script libraries, for instance. 1.6. HTML vs XML Syntax This section is non-normative. This specification defines an abstract language for describing documents and applications, and some APIs for interacting with in-memory representations of resources that use this language. The in-memory representation is known as "DOM HTML", or "the DOM" for short. There are various concrete syntaxes that can be used to transmit resources that use this abstract language, two of which are defined in this specification. The first such concrete syntax is the HTML syntax. This is the format suggested for most authors. It is compatible with most legacy Web browsers. If a document is transmitted with the text/html MIME type, then it will be processed as an HTML document by Web browsers. This specification defines the latest version of the HTML syntax, known simply as "HTML". The second concrete syntax is the XHTML syntax, which is an application of XML. When a document is transmitted with an XML MIME type, such as application/xhtml+xml, then it is treated as an XML document by Web browsers, to be parsed by an XML processor. Authors are reminded that the processing for XML and HTML differs; in particular, even minor syntax errors will prevent a document labeled as XML from being rendered fully, whereas they would be ignored in the HTML syntax. This specification defines the latest version of the XHTML syntax, known simply as "XHTML". The DOM, the HTML syntax, and the XHTML syntax cannot all represent the same content. For example, namespaces cannot be represented using the HTML syntax, but they are supported in the DOM and in the XHTML syntax. Similarly, documents that use the noscript feature can be represented using the HTML syntax, but cannot be represented with the DOM or in the XHTML syntax. Comments that contain the string "-->" can only be represented in the DOM, not in the HTML and XHTML syntaxes. 1.7. Structure of this specification This section is non-normative. This specification is divided into the following major sections: §1 Introduction Non-normative materials providing a context for the HTML specification. §2 Common infrastructure The conformance classes, algorithms, definitions, and the common underpinnings of the rest of the specification. §3 Semantics, structure, and APIs of HTML documents Documents are built from elements. These elements form a tree using the DOM. This section defines the features of this DOM, as well as introducing the features common to all elements, and the concepts used in defining elements. §4 The elements of HTML Each element has a predefined meaning, which is explained in this section. Rules for authors on how to use the element, along with user agent requirements for how to handle each element, are also given. This includes large signature features of HTML such as video playback and subtitles, form controls and form submission, and a 2D graphics API known as the HTML canvas. §5 User interaction HTML documents can provide a number of mechanisms for users to interact with and modify content, which are described in this section, such as how focus works, and drag-and-drop. §6 Loading Web pages HTML documents do not exist in a vacuum — this section defines many of the features that affect environments that deal with multiple pages, such as Web browsers and offline caching of Web applications. §7 Web application APIs This section introduces basic features for scripting of applications in HTML. §8 The HTML syntax §9 The XML syntax All of these features would be for naught if they couldn’t be represented in a serialized form and sent to other people, and so these sections define the syntaxes of HTML and XHTML, along with rules for how to parse content using those syntaxes. §10 Rendering This section defines the default rendering rules for Web browsers. There are also some appendices, listing §11 Obsolete features and §12 IANA considerations, and several indices. 1.7.1. How to read this specification This specification should be read like all other specifications. First, it should be read cover-to-cover, multiple times. Then, it should be read backwards at least once. Then it should be read by picking random sections from the contents list and following all the cross-references. As described in the conformance requirements section below, this specification describes conformance criteria for a variety of conformance classes. In particular, there are conformance requirements that apply to producers, for example authors and the documents they create, and there are conformance requirements that apply to consumers, for example Web browsers. They can be distinguished by what they are requiring: a requirement on a producer states what is allowed, while a requirement on a consumer states how software is to act. For example, "the foo attribute’s value must be a valid integer" is a requirement on producers, as it lays out the allowed values; in contrast, the requirement "the foo attribute’s value must be parsed using the rules for parsing integers" is a requirement on consumers, as it describes how to process the content. Requirements on producers have no bearing whatsoever on consumers. Continuing the above example, a requirement stating that a particular attribute’s value is constrained to being a valid integer emphatically does not imply anything about the requirements on consumers. It might be that the consumers are in fact required to treat the attribute as an opaque string, completely unaffected by whether the value conforms to the requirements or not. It might be (as in the previous example) that the consumers are required to parse the value using specific rules that define how invalid (non-numeric in this case) values are to be processed. 1.7.2. Typographic conventions This is a definition, requirement, or explanation. This is a note. This is an example. This is an open issue. This is a warning. interface Example { // this is an IDL definition }; variable = object . method( [ optionalArgument ] ) This is a note to authors describing the usage of an interface. /* this is a CSS fragment */ The defining instance of a term is marked up like this. Uses of that term are marked up like this or like this. The defining instance of an element, attribute, or API is marked up like this. References to that element, attribute, or API are marked up like this. Other code fragments are marked up like this. Byte sequences with bytes in the range 0x00 to 0x7F, inclusive, are marked up like this. Variables are marked up like this. In an algorithm, steps in synchronous sections are marked with ⌛. In some cases, requirements are given in the form of lists with conditions and corresponding requirements. In such cases, the requirements that apply to a condition are always the first set of requirements that follow the condition, even in the case of there being multiple sets of conditions for those requirements. Such cases are presented as follows: This is a condition This is another condition This is the requirement that applies to the conditions above. This is a third condition This is the requirement that applies to the third condition. 1.8. Privacy concerns This section is non-normative. Some features of HTML trade user convenience for a measure of user privacy. In general, due to the Internet’s architecture, a user can be distinguished from another by the user’s IP address. IP addresses do not perfectly match to a user; as a user moves from device to device, or from network to network, their IP address will change; similarly, NAT routing, proxy servers, and shared computers enable packets that appear to all come from a single IP address to actually map to multiple users. Technologies such as onion routing can be used to further anonymize requests so that requests from a single user at one node on the Internet appear to come from many disparate parts of the network. However, the IP address used for a user’s requests is not the only mechanism by which a user’s requests could be related to each other. Cookies, for example, are designed specifically to enable this, and are the basis of most of the Web’s session features that enable you to log into a site with which you have an account. There are other mechanisms that are more subtle. Certain characteristics of a user’s system can be used to distinguish groups of users from each other; by collecting enough such information, an individual user’s browser’s "digital fingerprint" can be computed, which can be as good, if not better, as an IP address in ascertaining which requests are from the same user. Grouping requests in this manner, especially across multiple sites, can be used for both benign (and even arguably positive) purposes, as well as for malevolent purposes. An example of a reasonably benign purpose would be determining whether a particular person seems to prefer sites with dog illustrations as opposed to sites with cat illustrations (based on how often they visit the sites in question) and then automatically using the preferred illustrations on subsequent visits to participating sites. Malevolent purposes, however, could include governments combining information such as the person’s home address (determined from the addresses they use when getting driving directions on one site) with their apparent political affiliations (determined by examining the forum sites that they participate in) to determine whether the person should be prevented from voting in an election. Since the malevolent purposes can be remarkably evil, user agent implementors are encouraged to consider how to provide their users with tools to minimize leaking information that could be used to fingerprint a user. Unfortunately, as the first paragraph in this section implies, sometimes there is great benefit to be derived from exposing the very information that can also be used for fingerprinting purposes, so it’s not as easy as simply blocking all possible leaks. For instance, the ability to log into a site to post under a specific identity requires that the user’s requests be identifiable as all being from the same user. More subtly, though, information such as how wide text is, which is necessary for many effects that involve drawing text onto a canvas (e.g., any effect that involves drawing a border around the text) also leaks information that can be used to group a user’s requests. (In this case, by potentially exposing, via a brute force search, which fonts a user has installed, information which can vary considerably from user to user.) Features in this specification which can be used to fingerprint the user are marked as this paragraph is. (This is a fingerprinting vector.) Other features in the platform can be used for the same purpose, though, including, though not limited to: * The exact list of which features a user agents supports. * The maximum allowed stack depth for recursion in script. * Features that describe the user’s environment, like Media Queries and the Screen object. [MEDIAQ] [CSSOM-VIEW] * The user’s time zone. 1.9. A quick introduction to HTML This section is non-normative. A basic HTML document looks like this: Sample page

Sample page

This is a simple sample.

HTML documents consist of a tree of elements and text. Each element is denoted in the source by a start tag, such as "body", and an end tag, such as "/body". (Certain start tags and end tags can in certain cases be omitted and are implied by other tags.) Tags have to be nested such that elements are all completely within each other, without overlapping:

This is very wrong!

This is correct.

This specification defines a set of elements that can be used in HTML, along with rules about the ways in which the elements can be nested. Elements can have attributes, which control how the elements work. In the example below, there is a hyperlink, formed using the a element and its href attribute: simple Attributes are placed inside the start tag, and consist of a name and a value, separated by an "=" character. The attribute value can remain unquoted if it doesn’t contain space characters or any of " ' ` = < or >. Otherwise, it has to be quoted using either single or double quotes. The value, along with the "=" character, can be omitted altogether if the value is the empty string. HTML user agents (e.g., Web browsers) then parse this markup, turning it into a DOM (Document Object Model) tree. A DOM tree is an in-memory representation of a document. DOM trees contain several kinds of nodes, in particular a DocumentType node, Element nodes, Text nodes, Comment nodes, and in some cases ProcessingInstruction nodes. The markup snippet at the top of this section would be turned into the following DOM tree: * DOCTYPE: html * html * head * #text: ⏎␣␣ * title * #text: Sample page * #text: ⏎␣ * #text: ⏎␣ * body * #text: ⏎␣␣ * h1 * #text: Sample page * #text: ⏎␣␣ * p * #text: This is a * a href="demo.html" * #text: simple * #text: sample. * #text: ⏎␣␣ * #comment: this is a comment * #text: ⏎␣⏎ The document element of this tree is the html element, which is the element always found in that position in HTML documents. It contains two elements, head and body, as well as a Text node between them. There are many more Text nodes in the DOM tree than one would initially expect, because the source contains a number of spaces (represented here by "␣") and line breaks ("⏎") that all end up as Text nodes in the DOM. However, for historical reasons not all of the spaces and line breaks in the original markup appear in the DOM. In particular, all the white space before head start tag ends up being dropped silently, and all the white space after the body end tag ends up placed at the end of the body. The head element contains a title element, which itself contains a Text node with the text "Sample page". Similarly, the body element contains an h1 element, a p element, and a comment. ---------------------------------------------------------------------- This DOM tree can be manipulated from scripts in the page. Scripts (typically in JavaScript) are small programs that can be embedded using the script element or using event handler content attributes. For example, here is a form with a script that sets the value of the form’s output element to say "Hello World"
Result:
Each element in the DOM tree is represented by an object, and these objects have APIs so that they can be manipulated. For instance, a link (e.g., the a element in the tree above) can have its "href" attribute changed in several ways: var a = document.links[0]; // obtain the first link in the document a.href = 'sample.html'; // change the destination URL of the link a.protocol = 'https'; // change just the scheme part of the URL a.setAttribute('href', 'http://example.com/'); // change the content attribute directly Since DOM trees are used as the way to represent HTML documents when they are processed and presented by implementations (especially interactive implementations like Web browsers), this specification is mostly phrased in terms of DOM trees, instead of the markup described above. ---------------------------------------------------------------------- HTML documents represent a media-independent description of interactive content. HTML documents might be rendered to a screen, or through a speech synthesizer, or on a braille display. To influence exactly how such rendering takes place, authors can use a styling language such as CSS. In the following example, the page has been made yellow-on-blue using CSS. Sample styled page

Sample styled page

This page is just a demo.

For more details on how to use HTML, authors are encouraged to consult tutorials and guides. Some of the examples included in this specification might also be of use, but the novice author is cautioned that this specification, by necessity, defines the language with a level of detail that might be difficult to understand at first. 1.9.1. Writing secure applications with HTML This section is non-normative. When HTML is used to create interactive sites, care needs to be taken to avoid introducing vulnerabilities through which attackers can compromise the integrity of the site itself or of the site’s users. A comprehensive study of this matter is beyond the scope of this document, and authors are strongly encouraged to study the matter in more detail. However, this section attempts to provide a quick introduction to some common pitfalls in HTML application development. The security model of the Web is based on the concept of "origins", and correspondingly many of the potential attacks on the Web involve cross-origin actions. [ORIGIN] Not validating user input Cross-site scripting (XSS) SQL injection When accepting untrusted input, e.g., user-generated content such as text comments, values in URL parameters, messages from third-party sites, etc, it is imperative that the data be validated before use, and properly escaped when displayed. Failing to do this can allow a hostile user to perform a variety of attacks, ranging from the potentially benign, such as providing bogus user information like a negative age, to the serious, such as running scripts every time a user looks at a page that includes the information, potentially propagating the attack in the process, to the catastrophic, such as deleting all data in the server. When writing filters to validate user input, it is imperative that filters always be safelist-based, allowing known-safe constructs and disallowing all other input. Blocklist-based filters that disallow known-bad inputs and allow everything else are not secure, as not everything that is bad is yet known (for example, because it might be invented in the future). For example, suppose a page looked at its URL’s query string to determine what to display, and the site then redirected the user to that page to display a message, as in: If the message was just displayed to the user without escaping, a hostile attacker could then craft a URL that contained a script element: http://example.com/message.cgi?say=%3Cscript%3Ealert%28%27Oh%20no%21%27%29%3C/script%3E If the attacker then convinced a victim user to visit this page, a script of the attacker’s choosing would run on the page. Such a script could do any number of hostile actions, limited only by what the site offers: if the site is an e-commerce shop, for instance, such a script could cause the user to unknowingly make arbitrarily many unwanted purchases. This is called a cross-site scripting attack. There are many constructs that can be used to try to trick a site into executing code. Here are some that authors are encouraged to consider when writing safelist filters: * When allowing harmless-seeming elements like img, it is important to safelist any provided attributes as well. If one allowed all attributes then an attacker could, for instance, use the onload attribute to run arbitrary script. * When allowing URLs to be provided (e.g., for links), the scheme of each URL also needs to be explicitly safelisted, as there are many schemes that can be abused. The most prominent example is "javascript:", but user agents can implement (and indeed, have historically implemented) others. * Allowing a base element to be inserted means any script elements in the page with relative links can be hijacked, and similarly that any form submissions can get redirected to a hostile site. Cross-site request forgery (CSRF) If a site allows a user to make form submissions with user-specific side-effects, for example posting messages on a forum under the user’s name, making purchases, or applying for a passport, it is important to verify that the request was made by the user intentionally, rather than by another site tricking the user into making the request unknowingly. This problem exists because HTML forms can be submitted to other origins. Sites can prevent such attacks by populating forms with user-specific hidden tokens, or by checking Origin headers on all requests. Clickjacking A page that provides users with an interface to perform actions that the user might not wish to perform needs to be designed so as to avoid the possibility that users can be tricked into activating the interface. One way that a user could be so tricked is if a hostile site places the victim site in a small iframe and then convinces the user to click, for instance by having the user play a reaction game. Once the user is playing the game, the hostile site can quickly position the iframe under the mouse cursor just as the user is about to click, thus tricking the user into clicking the victim site’s interface. To avoid this, sites that do not expect to be used in frames are encouraged to only enable their interface if they detect that they are not in a frame (e.g., by comparing the window object to the value of the top attribute). 1.9.2. Common pitfalls to avoid when using the scripting APIs This section is non-normative. Scripts in HTML have "run-to-completion" semantics, meaning that the browser will generally run the script uninterrupted before doing anything else, such as firing further events or continuing to parse the document. On the other hand, parsing of HTML files happens incrementally, meaning that the parser can pause at any point to let scripts run. This is generally a good thing, but it does mean that authors need to be careful to avoid hooking event handlers after the events could have possibly fired. There are two techniques for doing this reliably: use event handler content attributes, or create the element and add the event handlers in the same script. The latter is safe because, as mentioned earlier, scripts are run to completion before further events can fire. One way this could manifest itself is with img elements and the load event. The event could fire as soon as the element has been parsed, especially if the image has already been cached (which is common). Here, the author uses the onload handler on an img element to catch the load event: Games If the element is being added by script, then so long as the event handlers are added in the same script, the event will still not be missed: However, if the author first created the img element and then in a separate script added the event listeners, there’s a chance that the load event would be fired in between, leading it to be missed: Games 1.9.3. How to catch mistakes when writing HTML: validators and conformance checkers This section is non-normative. Authors are encouraged to make use of conformance checkers (also known as validators) to catch common mistakes. The W3C provides a number of online validation services, including the Nu Markup Validation Service. 1.10. Conformance requirements for authors This section is non-normative. Unlike previous versions of the HTML specification, this specification defines in some detail the required processing for invalid documents as well as valid documents. However, even though the processing of invalid content is in most cases well-defined, conformance requirements for documents are still important: in practice, interoperability (the situation in which all implementations process particular content in a reliable and identical or equivalent way) is not the only goal of document conformance requirements. This section details some of the more common reasons for still distinguishing between a conforming document and one with errors. 1.10.1. Presentational markup This section is non-normative. The majority of presentational features from previous versions of HTML are no longer allowed. Presentational markup in general has been found to have a number of problems: The use of presentational elements leads to poorer accessibility While it is possible to use presentational markup in a way that provides users of assistive technologies (ATs) with an acceptable experience (e.g., using ARIA), doing so is significantly more difficult than doing so when using semantically-appropriate markup. Furthermore, even using such techniques doesn’t help make pages accessible for non-AT, non-graphical users, such as users of text-mode browsers. Using media-independent markup, on the other hand, provides an easy way for documents to be authored in such a way that they are "accessible" for more users (e.g., users of text browsers). Higher cost of maintenance It is significantly easier to maintain a site written in such a way that the markup is style-independent. For example, changing the color of a site that uses throughout requires changes across the entire site, whereas a similar change to a site based on CSS can be done by changing a single file. Larger document sizes Presentational markup tends to be much more redundant, and thus results in larger document sizes. For those reasons, presentational markup has been removed from HTML in this version. This change should not come as a surprise; HTML 4.0 deprecated presentational markup many years ago and provided a mode (HTML Transitional) to help authors move away from presentational markup; later, XHTML 1.1 went further and obsoleted those features altogether. The only remaining presentational markup features in HTML are the style attribute and the style element. Use of the style attribute is somewhat discouraged in production environments, but it can be useful for rapid prototyping (where its rules can be directly moved into a separate style sheet later) and for providing specific styles in unusual cases where a separate style sheet would be inconvenient. Similarly, the style element can be useful in syndication or for page-specific styles, but in general an external style sheet is likely to be more convenient when the styles apply to multiple pages. It is also worth noting that some elements that were previously presentational have been redefined in this specification to be media-independent: b, i, hr, s, small, and u. 1.10.2. Syntax errors This section is non-normative. The syntax of HTML is constrained to avoid a wide variety of problems. Unintuitive error-handling behavior Certain invalid syntax constructs, when parsed, result in DOM trees that are highly unintuitive. For example, the following markup fragment results in a DOM with an hr element that is an earlier sibling of the corresponding table element:
... Errors with optional error recovery To allow user agents to be used in controlled environments without having to implement the more bizarre and convoluted error handling rules, user agents are permitted to fail whenever encountering a parse error. Errors where the error-handling behavior is not compatible with streaming user agents Some error-handling behavior, such as the behavior for the tablehr... example mentioned above, are incompatible with streaming user agents (user agents that process HTML files in one pass, without storing state). To avoid interoperability problems with such user agents, any syntax resulting in such behavior is considered invalid. Errors that can result in infoset coercion When a user agent based on XML is connected to an HTML parser, it is possible that certain invariants that XML enforces, such as element or attribute names never contain multiple colons, will be violated by an HTML file. Handling this can require that the parser coerce the HTML DOM into an XML-compatible infoset. Most syntax constructs that require such handling are considered invalid. (Comments containing two consecutive hyphens, or ending with a hyphen, are exceptions that are allowed in the HTML syntax.) Errors that result in disproportionately poor performance Certain syntax constructs can result in disproportionately poor performance. To discourage the use of such constructs, they are typically made non-conforming. For example, the following markup results in poor performance, since all the unclosed i elements have to be reconstructed in each paragraph, resulting in progressively more elements in each paragraph:

He dreamt.

He dreamt that he ate breakfast.

Then lunch.

And finally dinner. The resulting DOM for this fragment would be: * p * i * #text: He dreamt. * p * i * i * #text: He dreamt that he ate breakfast. * p * i * i * i * #text: Then lunch. * p * i * i * i * i * #text: And finally dinner. Errors involving fragile syntax constructs There are syntax constructs that, for historical reasons, are relatively fragile. To help reduce the number of users who accidentally run into such problems, they are made non-conforming. For example, the parsing of certain named character references in attributes happens even with the closing semicolon being omitted. It is safe to include an ampersand followed by letters that do not form a named character reference, but if the letters are changed to a string that does form a named character reference, they will be interpreted as that character instead. In this fragment, the attribute’s value is "?bill&ted": Bill and Ted In the following fragment, however, the attribute’s value is actually "?art©", not the intended "?art©", because even without the final semicolon, "©" is handled the same as "©" and thus gets interpreted as "©": Art and Copy To avoid this problem, all named character references are required to end with a semicolon, and uses of named character references without a semicolon are flagged as errors. Thus, the correct way to express the above cases is as follows: Bill and Ted Art and Copy Errors involving known interoperability problems in legacy user agents Certain syntax constructs are known to cause especially subtle or serious problems in legacy user agents, and are therefore marked as non-conforming to help authors avoid them. For example, this is why the U+0060 GRAVE ACCENT character (`) is not allowed in unquoted attributes. In certain legacy user agents, it is sometimes treated as a quote character. Another example of this is the DOCTYPE, which is required to trigger no-quirks mode, because the behavior of legacy user agents in quirks mode is often largely undocumented. Errors that risk exposing authors to security attacks Certain restrictions exist purely to avoid known security problems. For example, the restriction on using UTF-7 exists purely to avoid authors falling prey to a known cross-site-scripting attack using UTF-7. [RFC2152] Cases where the author’s intent is unclear Markup where the author’s intent is very unclear is often made non-conforming. Correcting these errors early makes later maintenance easier. For example, it is unclear whether the author intended the following to be an h1 heading or an h2 heading:

Contact details

Cases that are likely to be typos When a user makes a simple typo, it is helpful if the error can be caught early, as this can save the author a lot of debugging time. This specification therefore usually considers it an error to use element names, attribute names, and so forth, that do not match the names defined in this specification. For example, if the author typed instead of caption, this would be flagged as an error and the author could correct the typo immediately. Errors that could interfere with new syntax in the future In order to allow the language syntax to be extended in the future, certain otherwise harmless features are disallowed. For example, attributes in end tags are ignored currently, but they are invalid, in case a future change to the language makes use of that syntax feature without conflicting with already-deployed (and valid!) content. Some authors find it helpful to be in the practice of always quoting all attributes and always including all optional tags, preferring the consistency derived from such custom over the minor benefits of terseness afforded by making use of the flexibility of the HTML syntax. To aid such authors, conformance checkers can provide modes of operation wherein such conventions are enforced. 1.10.3. Restrictions on content models and on attribute values This section is non-normative. Beyond the syntax of the language, this specification also places restrictions on how elements and attributes can be specified. These restrictions are present for similar reasons: Errors involving content with dubious semantics To avoid misuse of elements with defined meanings, content models are defined that restrict how elements can be nested when such nestings would be of dubious value. For example, this specification disallows nesting a section element inside a kbd element, since it is highly unlikely for an author to indicate that an entire section should be keyed in. Errors that involve a conflict in expressed semantics Similarly, to draw the author’s attention to mistakes in the use of elements, clear contradictions in the semantics expressed are also considered conformance errors. In the fragments below, for example, the semantics are nonsensical: a separator cannot simultaneously be a cell, nor can a radio button be a progress bar.
Another example is the restrictions on the content models of the ul element, which only allows li element children. Lists by definition consist just of zero or more list items, so if a ul element contains something other than an li element, it’s not clear what was meant. Cases where the default styles are likely to lead to confusion Certain elements have default styles or behaviors that make certain combinations likely to lead to confusion. Where these have equivalent alternatives without this problem, the confusing combinations are disallowed. For example, div elements are rendered as block boxes, and span elements as inline boxes. Putting a block box in an inline box is unnecessarily confusing; since either nesting just div elements, or nesting just span elements, or nesting span elements inside div elements all serve the same purpose as nesting a div element in a span element, but only the latter involves a block box in an inline box, the latter combination is disallowed. Another example would be the way interactive content cannot be nested. For example, a button element cannot contain a textarea element. This is because the default behavior of such nesting interactive elements would be highly confusing to users. Instead of nesting these elements, they can be placed side by side. Errors that indicate a likely misunderstanding of the specification Sometimes, something is disallowed because allowing it would likely cause author confusion. For example, setting the disabled attribute to the value "false" is disallowed, because despite the appearance of meaning that the element is enabled, it in fact means that the element is disabled (what matters for implementations is the presence of the attribute, not its value). Errors involving limits that have been imposed merely to simplify the language Some conformance errors simplify the language that authors need to learn. For example, the area element’s shape attribute, despite accepting both "circ" and "circle" values in practice as synonyms, disallows the use of the "circ" value, so as to simplify tutorials and other learning aids. There would be no benefit to allowing both, but it would cause extra confusion when teaching the language. Errors that involve peculiarities of the parser Certain elements are parsed in somewhat eccentric ways (typically for historical reasons), and their content model restrictions are intended to avoid exposing the author to these issues. For example, a form element isn’t allowed inside phrasing content, because when parsed as HTML, a form element’s start tag will imply a p element’s end tag. Thus, the following markup results in two paragraphs, not one:

Welcome.
It is parsed exactly like the following:

Welcome.

Errors that would likely result in scripts failing in hard-to-debug ways Some errors are intended to help prevent script problems that would be hard to debug. This is why, for instance, it is non-conforming to have two id attributes with the same value. Duplicate IDs lead to the wrong element being selected, with sometimes disastrous effects whose cause is hard to determine. Errors that waste authoring time Some constructs are disallowed because historically they have been the cause of a lot of wasted authoring time, and by encouraging authors to avoid making them, authors can save time in future efforts. For example, a script element’s src attribute causes the element’s contents to be ignored. However, this isn’t obvious, especially if the element’s contents appear to be executable script — which can lead to authors spending a lot of time trying to debug the inline script without realizing that it is not executing. To reduce this problem, this specification makes it non-conforming to have executable script in a script element when the src attribute is present. This means that authors who are validating their documents are less likely to waste time with this kind of mistake. Errors that involve areas that affect authors migrating to and from XHTML Some authors like to write files that can be interpreted as both XML and HTML with similar results. Though this practice is discouraged in general due to the myriad of subtle complications involved (especially when involving scripting, styling, or any kind of automated serialization), this specification has a few restrictions intended to at least somewhat mitigate the difficulties. This makes it easier for authors to use this as a transitionary step when migrating between HTML and XHTML. For example, there are somewhat complicated rules surrounding the lang and xml:lang attributes intended to keep the two synchronized. Another example would be the restrictions on the values of xmlns attributes in the HTML serialization, which are intended to ensure that elements in conforming documents end up in the same namespaces whether processed as HTML or XML. Errors that involve areas reserved for future expansion As with the restrictions on the syntax intended to allow for new syntax in future revisions of the language, some restrictions on the content models of elements and values of attributes are intended to allow for future expansion of the HTML vocabulary. For example, limiting the values of the target attribute that start with an U+005F LOW LINE character (_) to only specific predefined values allows new predefined values to be introduced at a future time without conflicting with author-defined values. Errors that indicate a mis-use of other specifications Certain restrictions are intended to support the restrictions made by other specifications. For example, requiring that attributes that take media query lists use only valid media query lists reinforces the importance of following the conformance rules of that specification. 1.11. Suggested reading This section is non-normative. The following documents might be of interest to readers of this specification. Character Model for the World Wide Web 1.0: Fundamentals [CHARMOD] This Architectural Specification provides authors of specifications, software developers, and content developers with a common reference for interoperable text manipulation on the World Wide Web, building on the Universal Character Set, defined jointly by the Unicode specification and ISO/IEC 10646. Topics addressed include use of the terms "character", "encoding" and "string", a reference processing model, choice and identification of character encodings, character escaping, and string indexing. Unicode Security Considerations [UNICODE-SECURITY] Because Unicode contains such a large number of characters and incorporates the varied writing systems of the world, incorrect usage can expose programs or systems to possible security attacks. This is especially important as more and more products are internationalized. This document describes some of the security considerations that programmers, system analysts, standards developers, and users should take into account, and provides specific recommendations to reduce the risk of problems. Web Content Accessibility Guidelines (WCAG) 2.0 [WCAG20] Web Content Accessibility Guidelines (WCAG) 2.0 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Following these guidelines will also often make your Web content more usable to users in general. Authoring Tool Accessibility Guidelines (ATAG) 2.0 [ATAG20] This specification provides guidelines for designing Web content authoring tools that are more accessible for people with disabilities. An authoring tool that conforms to these guidelines will promote accessibility by providing an accessible user interface to authors with disabilities as well as by enabling, supporting, and promoting the production of accessible Web content by all authors. User Agent Accessibility Guidelines (UAAG) 2.0 [UAAG20] This document provides guidelines for designing user agents that lower barriers to Web accessibility for people with disabilities. User agents include browsers and other types of software that retrieve and render Web content. A user agent that conforms to these guidelines will promote accessibility through its own user interface and through other internal facilities, including its ability to communicate with other technologies (especially assistive technologies). Furthermore, all users, not just users with disabilities, should find conforming user agents to be more usable. HTML Accessibility APIs Mappings 1.0 [html-aam-1.0] Defines how user agents map HTML 5.1 elements and attributes to platform accessibility APIs. Documenting these mappings promotes interoperable exposure of roles, states, properties, and events implemented by accessibility APIs and helps to ensure that this information appears in a manner consistent with author intent. 2. Common infrastructure 2.1. Terminology This specification refers to both HTML and XML attributes and IDL attributes, often in the same context. When it is not clear which is being referred to, they are referred to as content attributes for HTML and XML attributes, and IDL attributes for those defined on IDL interfaces. Similarly, the term "properties" is used for both JavaScript object properties and CSS properties. When these are ambiguous they are qualified as object properties and CSS properties respectively. Generally, when the specification states that a feature applies to the HTML syntax or the XHTML syntax, it also includes the other. When a feature specifically only applies to one of the two languages, it is called out by explicitly stating that it does not apply to the other format, as in "for HTML, ... (this does not apply to XHTML)". This specification uses the term document to refer to any use of HTML, ranging from short static documents to long essays or reports with rich multimedia, as well as to fully-fledged interactive applications. The term is used to refer both to Document objects and their descendant DOM trees, and to serialized byte streams using the HTML syntax or XHTML syntax, depending on context. In the context of the DOM structures, the terms HTML document and XML document are used as defined in the DOM specification, and refer specifically to two different modes that Document objects can find themselves in. [DOM41] (Such uses are always hyperlinked to their definition.) In the context of byte streams, the term HTML document refers to resources labeled as text/html, and the term XML document refers to resources labeled with an XML MIME type. The term XHTML document is used to refer to both Documents in the XML document mode that contains element nodes in the HTML namespace, and byte streams labeled with an XML MIME type that contain elements from the HTML namespace, depending on context. ---------------------------------------------------------------------- For simplicity, terms such as shown, displayed, and visible might sometimes be used when referring to the way a document is rendered to the user. These terms are not meant to imply a visual medium; they must be considered to apply to other media in equivalent ways. When an algorithm B says to return to another algorithm A, it implies that A called B. Upon returning to A, the implementation must continue from where it left off in calling B. Some algorithms run in parallel; this means that the algorithm’s subsequent steps are to be run, one after another, at the same time as other logic in the specification (e.g., at the same time as the event loop). This specification does not define the precise mechanism by which this is achieved, be it time-sharing cooperative multitasking, fibers, threads, processes, using different hyperthreads, cores, CPUs, machines, etc. By contrast, an operation that is to run immediately must interrupt the currently running task, run itself, and then resume the previously running task. The term "transparent black" refers to the color with red, green, blue, and alpha channels all set to zero. 2.1.1. Resources The specification uses the term supported when referring to whether a user agent has an implementation capable of decoding the semantics of an external resource. A format or type is said to be supported if the implementation can process an external resource of that format or type without critical aspects of the resource being ignored. Whether a specific resource is supported can depend on what features of the resource’s format are in use. For example, a PNG image would be considered to be in a supported format if its pixel data could be decoded and rendered, even if, unbeknownst to the implementation, the image also contained animation data. An MPEG-4 video file would not be considered to be in a supported format if the compression format used was not supported, even if the implementation could determine the dimensions of the movie from the file’s metadata. What some specifications, in particular the HTTP specification, refer to as a representation is referred to in this specification as a resource. [HTTP] The term MIME type is used to refer to what is sometimes called an Internet media type in protocol literature. The term media type in this specification is used to refer to the type of media intended for presentation, as used by the CSS specifications. [RFC2046] [MEDIAQ] A string is a valid MIME type if it matches the media-type rule. In particular, a valid MIME type may include MIME type parameters. [HTTP] A string is a valid MIME type with no parameters if it matches the media-type rule, but does not contain any U+003B SEMICOLON characters (;). In other words, if it consists only of a type and subtype, with no MIME Type parameters. [HTTP] The term HTML MIME type is used to refer to the MIME type text/html. A resource’s critical subresources are those that the resource needs to have available to be correctly processed. Which resources are considered critical or not is defined by the specification that defines the resource’s format. 2.1.2. XML compatibility To ease migration from HTML to XHTML, user agents conforming to this specification will place elements in HTML in the http://www.w3.org/1999/xhtml namespace, at least for the purposes of the DOM and CSS. The term "HTML elements", when used in this specification, refers to any element in that namespace, and thus refers to both HTML and XHTML elements. Except where otherwise stated, all elements defined or mentioned in this specification are in the HTML namespace ("http://www.w3.org/1999/xhtml"), and all attributes defined or mentioned in this specification have no namespace. The term element type is used to refer to the set of elements that have a given local name and namespace. For example, button elements are elements with the element type button, meaning they have the local name "button" and (implicitly as defined above) the HTML namespace. Attribute names are said to be XML-compatible if they match the Name production defined in XML and they contain no U+003A COLON characters (:). [XML] The term XML MIME type is used to refer to the MIME types text/xml, application/xml, and any MIME type whose subtype ends with the four characters "+xml". [RFC7303] 2.1.3. DOM trees When it is stated that some element or attribute is ignored, or treated as some other value, or handled as if it was something else, this refers only to the processing of the node after it is in the DOM. A user agent must not mutate the DOM in such situations. A content attribute is said to change value only if its new value is different than its previous value; setting an attribute to a value it already has does not change it. The term empty, when used for an attribute value, Text node, or string means that the length of the text is zero (i.e., not even containing spaces or control characters). An element’s child text content is the concatenation of the data of all the Text nodes that are children of the element (ignoring any other nodes such as comments or elements), in tree order. A node A is inserted into a node B when the insertion steps are invoked with A as the argument and A’s new parent is B. Similarly, a node A is removed from a node B when the removing steps are invoked with A as the removedNode argument and B as the oldParent argument. A node is inserted into a document when the insertion steps are invoked with it as the argument and it is now in a document tree. Analogously, a node is removed from a document when the removing steps are invoked with it as the argument and it is now no longer in a document tree. 2.1.4. Scripting The construction "a Foo object", where Foo is actually an interface, is sometimes used instead of the more accurate "an object implementing the interface Foo". An IDL attribute is said to be getting when its value is being retrieved (e.g., by author script), and is said to be setting when a new value is assigned to it. If a DOM object is said to be live, then the attributes and methods on that object must operate on the actual underlying data, not a snapshot of the data. In the contexts of events, the terms fire and dispatch are used as defined in the DOM specification: firing an event means to create and dispatch it, and dispatching an event means to follow the steps that propagate the event through the tree. The term trusted event is used to refer to events whose isTrusted attribute is initialized to true. [DOM41] 2.1.5. Plugins The term plugin refers to a user-agent defined set of content handlers that can be used by the user agent. The content handlers can take part in the user agent’s rendering of a Document object, but that neither act as child browsing contexts of the Document nor introduce any Node objects to the Document's DOM. Typically such content handlers are provided by third parties, though a user agent can also designate built-in content handlers as plugins. A user agent must not consider the types text/plain and application/octet-stream as having a registered plugin. One example of a plugin would be a PDF viewer that is instantiated in a browsing context when the user navigates to a PDF file. This would count as a plugin regardless of whether the party that implemented the PDF viewer component was the same as that which implemented the user agent itself. However, a PDF viewer application that launches separate from the user agent (as opposed to using the same interface) is not a plugin by this definition. This specification does not define a mechanism for interacting with plugins, as it is expected to be user-agent- and platform-specific. Some user agents might opt to support a plugin mechanism such as the Netscape Plugin API; others might use remote content converters or have built-in support for certain types. Indeed, this specification doesn’t require user agents to support plugins at all. [NPAPI] A plugin can be secured if it honors the semantics of the sandbox attribute. For example, a secured plugin would prevent its contents from creating pop-up windows when the plugin is instantiated inside a sandboxed iframe. Browsers should take extreme care when interacting with external content intended for plugins. When third-party software is run with the same privileges as the user agent itself, vulnerabilities in the third-party software become as dangerous as if they were vulnerabilities of the user agent itself. Since different users having different sets of plugins provides a fingerprinting vector that increases the chances of users being uniquely identified, user agents are encouraged to support the exact same set of plugins for each user. (This is a fingerprinting vector.) 2.1.6. Character encodings A character encoding, or just encoding where that is not ambiguous, is a defined way to convert between byte streams and Unicode strings, as defined in the Encoding specification. An encoding has an encoding name and one or more encoding labels, referred to as the encoding’s name and labels in the Encoding specification. [ENCODING] A UTF-16 encoding is UTF-16BE or UTF-16LE. [ENCODING] An ASCII-compatible encoding is any encoding that is not a UTF-16 encoding. [ENCODING] Since support for encodings that are not defined in the Encoding specification is prohibited, UTF-16 encodings are the only encodings that this specification needs to treat as not being ASCII-compatible encodings. The term code unit is used as defined in the Web IDL specification: a 16 bit unsigned integer, the smallest atomic component of a DOMString. (This is a narrower definition than the one used in Unicode, and is not the same as a code point.) [WEBIDL] The term Unicode code point means a Unicode scalar value where possible, and an isolated surrogate code point when not. When a conformance requirement is defined in terms of characters or Unicode code points, a pair of code units consisting of a high surrogate followed by a low surrogate must be treated as the single code point represented by the surrogate pair, but isolated surrogates must each be treated as the single code point with the value of the surrogate. [UNICODE] In this specification, the term character, when not qualified as Unicode character, is synonymous with the term Unicode code point. The term Unicode character is used to mean a Unicode scalar value (i.e. any Unicode code point that is not a surrogate code point). [UNICODE] The code-unit length of a string is the number of code units in that string. This complexity results from the historical decision to define the DOM API in terms of 16 bit (UTF-16) code units, rather than in terms of Unicode characters. 2.2. Conformance requirements All diagrams, examples, and notes in this specification are non-normative, as are all sections explicitly marked non-normative. Everything else in this specification is normative. The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "NOT RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this document are to be interpreted as described in RFC2119. The key word "OPTIONALLY" in the normative parts of this document is to be interpreted with the same normative meaning as "MAY" and "OPTIONAL". For readability, these words do not appear in all uppercase letters in this specification. [RFC2119] Requirements phrased in the imperative as part of algorithms (such as "strip any leading space characters" or "return false and abort these steps") are to be interpreted with the meaning of the key word ("must", "should", "may", etc) used in introducing the algorithm. For example, were the spec to say: To eat an orange, the user must: 1. Peel the orange. 2. Separate each slice of the orange. 3. Eat the orange slices. ...it would be equivalent to the following: To eat an orange: 1. The user must peel the orange. 2. The user must separate each slice of the orange. 3. The user must eat the orange slices. Here the key word is "must". The former (imperative) style is generally preferred in this specification for stylistic reasons. Conformance requirements phrased as algorithms or specific steps may be implemented in any manner, so long as the end result is equivalent. (In particular, the algorithms defined in this specification are intended to be easy to follow, and not intended to be performant.) 2.2.1. Conformance classes This specification describes the conformance criteria for user agents (relevant to implementors) and documents (relevant to authors and authoring tool implementors). Conforming documents are those that comply with all the conformance criteria for documents. For readability, some of these conformance requirements are phrased as conformance requirements on authors; such requirements are implicitly requirements on documents: by definition, all documents are assumed to have had an author. (In some cases, that author may itself be a user agent — such user agents are subject to additional rules, as explained below.) For example, if a requirement states that "authors must not use the foobar element", it would imply that documents are not allowed to contain elements named foobar. There is no implied relationship between document conformance requirements and implementation conformance requirements. User agents are not free to handle non-conformant documents as they please; the processing model described in this specification applies to implementations regardless of the conformity of the input documents. User agents fall into several (overlapping) categories with different conformance requirements. Web browsers and other interactive user agents Web browsers that support the XHTML syntax must process elements and attributes from the HTML namespace found in XML documents as described in this specification, so that users can interact with them, unless the semantics of those elements have been overridden by other specifications. A conforming XHTML processor would, upon finding an XHTML script element in an XML document, execute the script contained in that element. However, if the element is found within a transformation expressed in XSLT (assuming the user agent also supports XSLT), then the processor would instead treat the script element as an opaque element that forms part of the transform. Web browsers that support the HTML syntax must process documents labeled with an HTML MIME type as described in this specification, so that users can interact with them. User agents that support scripting must also be conforming implementations of the IDL fragments in this specification, as described in the Web IDL specification. [WEBIDL] Unless explicitly stated, specifications that override the semantics of HTML elements do not override the requirements on DOM objects representing those elements. For example, the script element in the example above would still implement the HTMLScriptElement interface. Non-interactive presentation user agents User agents that process HTML and XHTML documents purely to render non-interactive versions of them must comply to the same conformance criteria as Web browsers, except that they are exempt from requirements regarding user interaction. Typical examples of non-interactive presentation user agents are printers (static user agents) and overhead displays (dynamic user agents). It is expected that most static non-interactive presentation user agents will also opt to lack scripting support. A non-interactive but dynamic presentation user agent would still execute scripts, allowing forms to be dynamically submitted, and so forth. However, since the concept of "focus" is irrelevant when the user cannot interact with the document, the user agent would not need to support any of the focus-related DOM APIs. Visual user agents that support the suggested default rendering User agents, whether interactive or not, may be designated (possibly as a user option) as supporting the suggested default rendering defined by this specification. This is not required. In particular, even user agents that do implement the suggested default rendering are encouraged to offer settings that override this default to improve the experience for the user, e.g., changing the color contrast, using different focus styles, or otherwise making the experience more accessible and usable to the user. User agents that are designated as supporting the suggested default rendering must, while so designated, implement the rules in §10 Rendering. That section defines the behavior that user agents are expected to implement. User agents with no scripting support Implementations that do not support scripting (or which have their scripting features disabled entirely) are exempt from supporting the events and DOM interfaces mentioned in this specification. For the parts of this specification that are defined in terms of an events model or in terms of the DOM, such user agents must still act as if events and the DOM were supported. Scripting can form an integral part of an application. Web browsers that do not support scripting, or that have scripting disabled, might be unable to fully convey the author’s intent. Conformance checkers Conformance checkers must verify that a document conforms to the applicable conformance criteria described in this specification. Automated conformance checkers are exempt from detecting errors that require interpretation of the author’s intent (for example, while a document is non-conforming if the content of a blockquote element is not a quote, conformance checkers running without the input of human judgement do not have to check that blockquote elements only contain quoted material). Conformance checkers must check that the input document conforms when parsed without a browsing context (meaning that no scripts are run, and that the parser’s scripting flag is disabled), and should also check that the input document conforms when parsed with a browsing context in which scripts execute, and that the scripts never cause non-conforming states to occur other than transiently during script execution itself. (This is only a "SHOULD" and not a "MUST" requirement because it has been proven to be impossible. [COMPUTABLE]) The term "HTML validator" can be used to refer to a conformance checker that itself conforms to the applicable requirements of this specification. XML DTDs cannot express all the conformance requirements of this specification. Therefore, a validating XML processor and a DTD cannot constitute a conformance checker. Also, since neither of the two authoring formats defined in this specification are applications of SGML, a validating SGML system cannot constitute a conformance checker either. To put it another way, there are three types of conformance criteria: 1. Criteria that can be expressed in a DTD. 2. Criteria that cannot be expressed by a DTD, but can still be checked by a machine. 3. Criteria that can only be checked by a human. A conformance checker must check for the first two. A simple DTD-based validator only checks for the first class of errors and is therefore not a conforming conformance checker according to this specification. Data mining tools Applications and tools that process HTML and XHTML documents for reasons other than to either render the documents or check them for conformance should act in accordance with the semantics of the documents that they process. A tool that generates document outlines but increases the nesting level for each paragraph and does not increase the nesting level for each section would not be conforming. Authoring tools and markup generators Authoring tools and markup generators must generate conforming documents. Conformance criteria that apply to authors also apply to authoring tools, where appropriate. Authoring tools are exempt from the strict requirements of using elements only for their specified purpose, but only to the extent that authoring tools are not yet able to determine author intent. However, authoring tools must not automatically misuse elements or encourage their users to do so. For example, it is not conforming to use an address element for arbitrary contact information; that element can only be used for marking up contact information for the author of the document or section. However, since an authoring tool is likely unable to determine the difference, an authoring tool is exempt from that requirement. This does not mean, though, that authoring tools can use address elements for any block of italics text (for instance); it just means that the authoring tool doesn’t have to verify, if a user inserts contact information for a section or something else. In terms of conformance checking, an editor has to output documents that conform to the same extent that a conformance checker will verify. When an authoring tool is used to edit a non-conforming document, it may preserve the conformance errors in sections of the document that were not edited during the editing session (i.e., an editing tool is allowed to round-trip erroneous content). However, an authoring tool must not claim that the output is conformant if errors have been so preserved. Authoring tools are expected to come in two broad varieties: tools that work from structure or semantic data, and tools that work on a What-You-See-Is-What-You-Get media-specific editing basis (WYSIWYG). The former is the preferred mechanism for tools that author HTML, since the structure in the source information can be used to make informed choices regarding which HTML elements and attributes are most appropriate. However, WYSIWYG tools are legitimate. WYSIWYG tools should use elements they know are appropriate, and should not use elements that they do not know to be appropriate. This might in certain extreme cases mean limiting the use of flow elements to just a few elements, like div, b, i, and span and making liberal use of the style attribute. All authoring tools, whether WYSIWYG or not, should make a best effort attempt at enabling users to create well-structured, semantically rich, media-independent content. User agents may impose implementation-specific limits on otherwise unconstrained inputs, e.g., to prevent denial of service attacks, to guard against running out of memory, or to work around platform-specific limitations. (This is a fingerprinting vector.) For compatibility with existing content and prior specifications, this specification describes two authoring formats: one based on XML (referred to as the XHTML syntax), and one using a custom format inspired by SGML (referred to as the HTML syntax). Implementations must support at least one of these two formats, although supporting both is encouraged. Some conformance requirements are phrased as requirements on elements, attributes, methods or objects. Such requirements fall into two categories: those describing content model restrictions, and those describing implementation behavior. Those in the former category are requirements on documents and authoring tools. Those in the second category are requirements on user agents. Similarly, some conformance requirements are phrased as requirements on authors; such requirements are to be interpreted as conformance requirements on the documents that authors produce. (In other words, this specification does not distinguish between conformance criteria on authors and conformance criteria on documents.) 2.2.2. Dependencies This specification relies on several other underlying specifications. Unicode and Encoding The Unicode character set is used to represent textual data, and the Encoding specification defines requirements around character encodings. [UNICODE] This specification introduces terminology based on the terms defined in those specifications, as described earlier. The following terms are used as defined in the Encoding specification: [ENCODING] * Getting an encoding * Get an output encoding * The generic decode algorithm which takes a byte stream and an encoding and returns a character stream * The UTF-8 decode algorithm which takes a byte stream and returns a character stream, additionally stripping one leading UTF-8 Byte Order Mark (BOM), if any * The UTF-8 decode without BOM algorithm which is identical to UTF-8 decode except that it does not strip one leading UTF-8 Byte Order Mark (BOM) * The UTF-8 decode without BOM or fail algorithm which is identical to UTF-8 decode without BOM except that it returns failure upon encountering an error * The encode algorithm which takes a character stream and an encoding and returns a byte stream * The UTF-8 encode algorithm which takes a character stream and returns a byte stream. XML and related specifications Implementations that support the XHTML syntax must support some version of XML, as well as its corresponding namespaces specification, because that syntax uses an XML serialization with namespaces. [XML] [XML-NAMES] The attribute with the tag name xml:space in the XML namespace is defined by the XML specification. [XML] This specification also references the processing instruction, defined in the Associating Style Sheets with XML documents specification. [XML-STYLESHEET] This specification also non-normatively mentions the XSLTProcessor interface and its transformToFragment() and transformToDocument() methods. [XSLTP] URLs The following terms are defined in the WHATWG URL specification: [URL] * host * domain * URL * Origin of URLs * Absolute URL * Relative URL * Relative schemes * The URL parser and basic URL parser as well as these parser states: * scheme start state * host state * hostname state * port state * path start state * query state * fragment state * URL record, as well as its individual components: * scheme * username * password * host * port * path * query * fragment * A network scheme * The URL serializer * The host parser * The host serializer * Host equals * serialize an integer * Default encode set * Percent encode * UTF-8 percent encode * Percent decode * set the username * set the password * The domain to Unicode algorithm * non-relative flag * Parse errors from the URL parser A number of schemes and protocols are referenced by this specification also: * The about: scheme [RFC6694] * The blob: scheme [FILEAPI] * The data: scheme [RFC2397] * The http: scheme [HTTP] * The https: scheme [HTTP] * The mailto: scheme [RFC6068] * The sms: scheme [RFC5724] * The urn: scheme [URN] Media fragment syntax is defined in the Media Fragments URI specification. [MEDIA-FRAGS] HTTP and related specifications The following terms are defined in the HTTP specifications: [HTTP] * Accept header * Accept-Language header * Cache-Control header * Content-Disposition header * Content-Language header * Content-Length header * Last-Modified header * Referer The following terms are defined in the Cookie specification: [COOKIES] * cookie-string * receives a set-cookie-string * Cookie header The following term is defined in the Web Linking specification: [RFC5988] * Link header Fetch The following terms are defined in the WHATWG Fetch specification: [FETCH] * about:blank * HTTPS state value * referrer policy * CORS protocol * default User-Agent value * extract a MIME type * fetch * ok status * Origin header * process response * set * terminate * the RequestCredentials enumeration * response and its associated: * type * url * url list * status * header list * body * internal response * CSP list * HTTPS state * request and its associated: * url * method * header list * body * client * target browsing context * initiator * type * destination * origin * omit-Origin-header flag * same-origin data-URL flag * referrer * synchronous flag * mode * credentials mode * use-URL-credentials flag * unsafe-request flag * cache mode * redirect mode * cryptographic nonce metadata * referrer policy * parser metadata The following terms are defined in Referrer Policy [REFERRERPOLICY] * referrer policy * The Referrer-Policy HTTP header * The parse a referrer policy from a Referrer-Policy header algorithm * The "no-referrer", "no-referrer-when-downgrade", and "unsafe-url" referrer policies Web IDL The IDL fragments in this specification must be interpreted as required for conforming IDL fragments, as described in the Web IDL specification. [WEBIDL] The following terms are defined in the Web IDL specification: * array index property name * supported property indices * Determine the value of an indexed property * Support named properties * Supported property names * Determine the value of a named property * perform a security check * Platform object * Primary interface * Global environment associated with a platform object * Read only (when applied to arrays) * Callback this value * Converting between WebIDL types and JS types * invoke the Web IDL callback function The Web IDL specification also defines the following types that are used in Web IDL fragments in this specification: * ArrayBufferView * boolean * DOMString * USVString * double * Error * Function * long * object * unrestricted double * unsigned long The term throw in this specification is used as defined in the WebIDL specification. The following exception names are defined by WebIDL and used by this specification: * IndexSizeError * HierarchyRequestError * WrongDocumentError * InvalidCharacterError * NoModificationAllowedError * NotFoundError * NotSupportedError * InvalidStateError * SyntaxError * InvalidModificationError * NamespaceError * InvalidAccessError * SecurityError * NetworkError * AbortError * URLMismatchError * QuotaExceededError * TimeoutError * InvalidNodeTypeError * DataCloneError When this specification requires a user agent to create a Date object representing a particular time (which could be the special value Not-a-Number), the milliseconds component of that time, if any, must be truncated to an integer, and the time value of the newly created Date object must represent the resulting truncated time. For instance, given the time 23045 millionths of a second after 01:00 UTC on January 1st 2000, i.e., the time 2000-01-01T00:00:00.023045Z, then the Date object created representing that time would represent the same time as that created representing the time 2000-01-01T00:00:00.023Z, 45 millionths earlier. If the given time is NaN, then the result is a Date object that represents a time value NaN (indicating that the object does not represent a specific instant of time). JavaScript Some parts of the language described by this specification only support JavaScript as the underlying scripting language. [ECMA-262] The term "JavaScript" is used to refer to ECMA262, rather than the official term ECMAScript, since the term JavaScript is more widely known. Similarly, the MIME type used to refer to JavaScript in this specification is text/javascript, since that is the most commonly used type, despite it being an officially obsoleted type according to RFC 4329. [RFC4329] The following terms are defined in the JavaScript specification and used in this specification [ECMA-262]: * automatic semicolon insertion * early error * Directive Prologue * JavaScript execution context * JavaScript execution context stack * running JavaScript execution context * JavaScript realm * The current Realm Record * Use Strict Directive * Well-Known Symbols, including: * @@hasInstance * @@isConcatSpreadable * @@toPrimitive * @@toStringTag * Well-Known Intrinsic Objects, including: * %ArrayBuffer% * %ArrayPrototype% * %ObjProto_toString% * %ObjProto_valueOf% * The FunctionBody production * The Module production * The Pattern production * The Script production * The Type notation * The List and Record specification types * The Property Descriptor specification type * The Source Text Module Record specification type and its ModuleEvaluation and ModuleDeclarationInstantiation methods * The ArrayCreate abstract operation * The Call abstract operation * The Construct abstract operation * The CopyDataBlockBytes abstract operation * The CreateByteDataBlock abstract operation * The CreateDataProperty abstract operation * The DetachArrayBuffer abstract operation * The EnqueueJob abstract operation * The FunctionCreate abstract operation * The Get abstract operation * The GetActiveScriptOrModule abstract operation * The GetFunctionRealm abstract operation * The HasOwnProperty abstract operation * The HostEnsureCanCompileStrings abstract operation * The HostPromiseRejectionTracker abstract operation * The HostResolveImportedModule abstract operation * The InitializeHostDefinedRealm abstract operation * The IsAccessorDescriptor abstract operation * The IsCallable abstract operation * The IsConstructor abstract operation * The IsDataDescriptor abstract operation * The IsDetachedBuffer abstract operation * The NewObjectEnvironment abstract operation * The OrdinaryGetPrototypeOf abstract operation * The OrdinarySetPrototypeOf abstract operation * The OrdinaryIsExtensible abstract operation * The OrdinaryPreventExtensions abstract operation * The OrdinaryGetOwnProperty abstract operation * The OrdinaryDefineOwnProperty abstract operation * The OrdinaryGet abstract operation * The OrdinarySet abstract operation * The OrdinaryDelete abstract operation * The OrdinaryOwnPropertyKeys abstract operation * The ParseModule abstract operation * The ParseScript abstract operation * The RunJobs abstract operation * The SameValue abstract operation * The ScriptEvaluation abstract operation * The ToBoolean abstract operation * The ToString abstract operation * The ToUint32 abstract operation * The TypedArrayCreate abstract operation * The Abstract Equality Comparison algorithm * The Strict Equality Comparison algorithm * The ArrayBuffer object * The Date object * The SyntaxError object * The TypeError object * The RangeError object * The RegExp object * The typeof operator * The TypedArray Constructors table DOM The Document Object Model (DOM) is a representation — a model — of a document and its content. The DOM is not just an API; the conformance criteria of HTML implementations are defined, in this specification, in terms of operations on the DOM. [DOM41] Implementations must support DOM and the events defined in UI Events, because this specification is defined in terms of the DOM, and some of the features are defined as extensions to the DOM interfaces. [DOM41] [UIEVENTS] In particular, the following features are defined in the DOM specification: [DOM41] * Attr interface * Comment interface * DOMImplementation interface * Document interface * XMLDocument interface * DocumentFragment interface * DocumentType interface * DOMException interface * ChildNode interface * Element interface * Node interface * NodeList interface * ProcessingInstruction interface * Text interface * HTMLCollection interface * item() method * The terms collections and represented by the collection * DOMTokenList interface * createDocument() method * createHTMLDocument() method * createElement() method * createElementNS() method * getElementById() method * getElementsByClassName() method * appendChild() method * cloneNode() method * importNode() method * id attribute * textContent attribute * The tree concept * The tree order concept * The root concept * The inclusive ancestor concept * The document element concept * The in a document concept * The pre-insert, insert, append, remove, replace, and adopt algorithms for nodes * The insertion steps, removing steps, and adopting steps hooks * The attribute list concept. * The data of a text node. * Event interface * EventTarget interface * EventInit dictionary type * target attribute * currentTarget attribute * isTrusted attribute * initEvent() method * addEventListener() method * The type of an event * The concept of an event listener and the event listeners associated with an EventTarget * The concept of a target override * The encoding (herein the character encoding) and content type of a Document * The distinction between XML documents and HTML documents * The terms quirks mode, limited-quirks mode, and no-quirks mode * The algorithm to clone a Node, and the concept of cloning steps used by that algorithm * The concept of base URL change steps and the definition of what happens when an element is affected by a base URL change * The concept of an element’s unique identifier (ID) * The term supported tokens * The concept of a DOM range, and the terms start, end, and boundary point as applied to ranges. * The create an element algorithm * MutationObserver interface and mutation observers in general For example, to throw a TimeoutError exception, a user agent would construct a DOMException object whose type was the string "TimeoutError" (and whose code was the number 23, for legacy reasons) and actually throw that object as an exception. The following features are defined in the UI Events specification: [UIEVENTS] * MouseEvent interface and the following interface members: * The relatedTarget attribute * The button attribute * The ctrlKey attribute * The shiftKey attribute * The altKey attribute * The metaKey attribute * The getModifierState() method * MouseEventInit dictionary type * The FocusEvent interface and its relatedTarget attribute * The UIEvent interface’s view and detail attributes * click event * dblclick event * mousedown event * mouseenter event * mouseleave event * mousemove event * mouseout event * mouseover event * mouseup event * wheel event * keydown event * keyup event * keypress event The following features are defined in the Touch Events specification: [TOUCH-EVENTS] * Touch interface * Touch point concept This specification sometimes uses the term name to refer to the event’s type; as in, "an event named click" or "if the event name is keypress". The terms "name" and "type" for events are synonymous. The following features are defined in the DOM Parsing and Serialization specification: [DOM-PARSING] * innerHTML * outerHTML The Selection interface is defined in the Selection API specification. [SELECTION-API] User agents are also encouraged to implement the features described in the HTML Editing APIs and UndoManager and DOM Transaction specifications. [EDITING] [UNDO] The following parts of the Fullscreen specification are referenced from this specification, in part to define the rendering of dialog elements, and also to define how the Fullscreen API interacts with the sandboxing features in HTML: [FULLSCREEN] * The top layer concept * requestFullscreen() * The fullscreen enabled flag * The fully exit fullscreen algorithm The High Resolution Time specification provides the DOMHighResTimeStamp typedef and the Performance object’s now() method. [HR-TIME-2] File API This specification uses the following features defined in the File API specification: [FILEAPI] * Blob interface and its type attribute * File interface and its name and lastModified attributes * FileList interface * The concept of a Blob's snapshot state * The concept of read errors * Blob URL Store Indexed Database API This specification uses cleanup Indexed Database transactions defined by the Indexed Database API specification. [INDEXEDDB] Media Source Extensions The following terms are defined in the Media Source Extensions specification: [MEDIA-SOURCE] * MediaSource interface * Detaching from a media element Media Capture and Streams The following term is defined in the Media Capture and Streams specification: [MEDIACAPTURE-STREAMS] * MediaStream interface XMLHttpRequest This specification references the XMLHttpRequest specification to describe how the two specifications interact and to use its ProgressEvent features. The following features and terms are defined in the XMLHttpRequest specification: [XHR] * XMLHttpRequest interface * XMLHttpRequest.responseXML attribute * ProgressEvent interface * ProgressEvent.lengthComputable attribute * ProgressEvent.loaded attribute * ProgressEvent.total attribute * Fire a progress event named e Server-Sent Events This specification references EventSource which is specified in the Server-Sent Events specification [EVENTSOURCE] Media Queries Implementations must support the Media Queries language. [MEDIAQ] CSS modules While support for CSS as a whole is not required of implementations of this specification (though it is encouraged, at least for Web browsers), some features are defined in terms of specific CSS requirements. In particular, some features require that a string be parsed as a CSS value. When parsing a CSS value, user agents are required by the CSS specifications to apply some error handling rules. These apply to this specification also. [CSS3COLOR] [CSS-2015] For example, user agents are required to close all open constructs upon finding the end of a style sheet unexpectedly. Thus, when parsing the string "rgb(0,0,0" (with a missing close-parenthesis) for a color value, the close parenthesis is implied by this error handling rule, and a value is obtained (the color black). However, the similar construct "rgb(0,0," (with both a missing parenthesis and a missing "blue" value) cannot be parsed, as closing the open construct does not result in a viable value. The following terms and features are defined in the CSS specification: [CSS-2015] * viewport * replaced element * intrinsic dimensions The term named color is defined in the CSS Color specification. [CSS3COLOR] The terms intrinsic width and intrinsic height refer to the width dimension and the height dimension, respectively, of intrinsic dimensions. The term paint source is used as defined in the CSS Image Values and Replaced Content specification to define the interaction of certain HTML elements with the CSS 'element()' function. [CSS3-IMAGES] The term default object size is also defined in the CSS Image Values and Replaced Content specification. [CSS3-IMAGES] Implementations that support scripting must support the CSS Object Model. The following features and terms are defined in the CSSOM specifications: [CSSOM] [CSSOM-VIEW] * Screen * LinkStyle * CSSStyleDeclaration * cssText attribute of CSSStyleDeclaration * StyleSheet * create a CSS style sheet * remove a CSS style sheet * associated CSS style sheet * CSS style sheets and their properties: type, location, parent CSS style sheet, owner node, owner CSS rule, media, title, alternate flag, disabled flag, CSS rules, origin-clean flag * Alternative style sheet sets and the preferred style sheet set * Serializing a CSS value * run the resize steps * run the scroll steps * evaluate media queries and report changes * Scroll an element into view * Scroll to the beginning of the document * The resize event * The scroll event * The features argument of window.open The following features and terms are defined in the CSS Syntax specifications: [CSS-SYNTAX-3] * Parse a comma-separated list of component values * component value * environment encoding * The following terms are defined in the Selectors specification: [SELECTORS4] * type selector * attribute selector * pseudo-class The feature is defined in the CSS Values and Units specification. [CSS-VALUES] The term style attribute is defined in the CSS Style Attributes specification. [CSS-STYLE-ATTR] The term used value is defined in the CSS Cascading and Inheritance specification. [CSS-CASCADE-4] The CanvasRenderingContext2D object’s use of fonts depends on the features described in the CSS Fonts and Font Loading specifications, including in particular FontFace objects and the font source concept. [CSS-FONTS-3] [CSS-FONT-LOADING-3] The following interface is defined in the Geometry Interfaces Module specification: [GEOMETRY-1] * DOMMatrix interface SVG The CanvasRenderingContext2D object’s use of fonts depends on the features described in the CSS Fonts and Font Loading specifications, including in particular FontFace objects and the font source concept. [CSS-FONTS-3] [CSS-FONT-LOADING-3] The following interface is defined in the SVG specification: [SVG11] * SVGMatrix WebGL The following interface is defined in the WebGL specification: [WEBGL] * WebGLRenderingContext WebVTT Implementations may support WebVTT as a text track format for subtitles, captions, chapter titles, metadata, etc, for media resources. [WEBVTT] The following terms, used in this specification, are defined in the WebVTT specification: * WebVTT file * WebVTT file using cue text * WebVTT file using chapter title text * WebVTT file using only nested cues * WebVTT parser * The rules for updating the display of WebVTT text tracks * The rules for interpreting WebVTT cue text * The WebVTT text track cue writing direction The WebSocket protocol The following terms are defined in the WebSocket protocol specification: [RFC6455] * establish a WebSocket connection * the WebSocket connection is established * validate the server’s response * extensions in use * subprotocol in use * headers to send appropriate cookies * cookies set during the server’s opening handshake * a WebSocket message has been received * send a WebSocket Message * fail the WebSocket connection * close the WebSocket connection * start the WebSocket closing handshake * the WebSocket closing handshake is started * the WebSocket connection is closed (possibly cleanly) * the WebSocket connection close code * the WebSocket connection close reason * Sec-WebSocket-Protocol field ARIA The role attribute is defined in the ARIA specification, as are the following roles: [wai-aria-1.1] * alert * alertdialog * application * article * banner * button * cell * checkbox * columnheader * combobox * complementary * contentinfo * definition * dialog * directory * document * feed * figure * form * grid * gridcell * group * heading * img * link * list * listbox * listitem * log * main * marquee * math * menubar * navigation * none * note * option * presentation * progressbar * radio * radiogroup * region * row * rowgroup * rowheader * scrollbar * search * searchbox * separator * slider * spinbutton * status * switch * tab * table * tablist * tabpanel * term * textbox * timer * toolbar * tooltip * tree * treegrid * treeitem In addition, the following aria-* content attributes are defined in the ARIA specification: [wai-aria-1.1] * aria-activedescendant * aria-atomic * aria-autocomplete * aria-busy * aria-checked * aria-colcount * aria-colindex * aria-colspan * aria-controls * aria-current * aria-describedby * aria-details * aria-dialog * aria-disabled * aria-dropeffect * aria-errormessage * aria-expanded * aria-flowto * aria-grabbed * aria-haspopup * aria-hidden * aria-invalid * aria-keyshortcuts * aria-label * aria-labelledby * aria-level * aria-live * aria-multiline * aria-multiselectable * aria-orientation * aria-owns * aria-placeholder * aria-posinset * aria-pressed * aria-readonly * aria-relevant * aria-required * aria-roledescription * aria-rowcount * aria-rowindex * aria-rowspan * aria-selected * aria-setsize * aria-sort * aria-valuemax * aria-valuemin * aria-valuenow * aria-valuetext Content Security Policy The following terms are defined in Content Security Policy: [CSP3] * Content Security Policy * Content Security Policy directive * The Content Security Policy syntax * enforce the policy * The parse a serialized Content Security Policy algorithm * The Initialize a global object’s CSP list algorithm * The Initialize a Document’s CSP list algorithm * The Should element’s inline behavior be blocked by Content Security Policy? algorithm * The report-uri, frame-ancestors, and sandbox directives * The EnsureCSPDoesNotBlockStringCompilation abstract algorithm * The Is base allowed for Document? algorithm * The Should element be blocked a priori by Content Security Policy? algorithm The following terms are defined in Content Security Policy: Document Features * The frame-ancestors directive * The sandbox directive Service Workers The following terms are defined in Service Workers: [SERVICE-WORKERS] * client message queue * match service worker registration * ServiceWorkerContainer Secure Contexts The following term is defined in Secure Contexts: [SECURE-CONTEXTS] * Is environment settings object a secure context? Payment Request API The following term is defined in the Payment Request API specification: [PAYMENT-REQUEST] * PaymentRequest interface MathML While support for MathML as a whole is not required by this specification (though it is encouraged, at least for Web browsers), certain features depend upon small parts of MathML being implemented. [MATHML] The following features are defined in the MathML specification: * MathML annotation-xml element * MathML math element * MathML merror element * MathML mi element * MathML mn element * MathML mo element * MathML ms element * MathML mtext element SVG While support for SVG as a whole is not required by this specification (though it is encouraged, at least for Web browsers), certain features depend upon parts of SVG being implemented. Also, the SVG specifications do not reflect implementation reality. Implementations implement subsets of SVG 1.1 and SVG Tiny 1.2. Although it is hoped that the in-progress SVG 2 specification is a more realistic target for implementations, until that specification is ready, user agents that implement SVG must do so with the following willful violations and additions. [SVG11] [SVGTINY12] [SVG2] User agents that implement SVG must not implement the following features from SVG 1.1: * The tref element * The cursor element (use CSS’s cursor property instead) * The font-defining SVG elements: font, glyph, missing-glyph, hkern, vkern, font-face, font-face-src, font-face-uri, font-face-format, and font-face-name (use CSS’s @font-face instead) * The externalResourcesRequired attribute * The enable-background property * The contentScriptType and contentStyleType attributes (use the type attribute on the SVG script and style elements instead) User agents that implement SVG must implement the following features from SVG Tiny 1.2: * The non-scaling-stroke value for the vector-effect property * The class attribute is allowed on all SVG elements * The tabindex attribute is allowed on visible SVG elements * The ARIA accessibility attributes are allowed on all SVG elements The following features are defined in the SVG specifications: * SVGScriptElement interface * SVG desc element * SVG foreignObject element * SVG script element * SVG svg element * SVG title element Filter Effects The following feature is defined in the Filter Effects specification: * ---------------------------------------------------------------------- This specification does not require support of any particular network protocol, style sheet language, scripting language, or any of the DOM specifications beyond those required in the list above. However, the language described by this specification is biased towards CSS as the styling language, JavaScript as the scripting language, and HTTP as the network protocol, and several features assume that those languages and protocols are in use. A user agent that implements the HTTP protocol must implement the Web Origin Concept specification and the HTTP State Management Mechanism specification (Cookies) as well. [HTTP] [ORIGIN] [COOKIES] This specification might have certain additional requirements on character encodings, image formats, audio formats, and video formats in the respective sections. 2.2.3. Extensibility Vendor-specific proprietary user agent extensions to this specification are strongly discouraged. Documents must not use such extensions, as doing so reduces interoperability and fragments the user base, allowing only users of specific user agents to access the content in question. If such extensions are nonetheless needed, e.g., for experimental purposes, then vendors are strongly urged to use one of the following extension mechanisms: * For markup-level features that can be limited to the XML serialization and need not be supported in the HTML serialization, vendors should use the namespace mechanism to define custom namespaces in which the non-standard elements and attributes are supported. * For markup-level features that are intended for use with the HTML syntax, extensions should be limited to new attributes of the form "x-vendor-feature", where vendor is a short string that identifies the vendor responsible for the extension, and feature is the name of the feature. New element names should not be created. Using attributes for such extensions exclusively allows extensions from multiple vendors to co-exist on the same element, which would not be possible with elements. Using the "x-vendor-feature" form allows extensions to be made without risk of conflicting with future additions to the specification. For instance, a browser named "FerretBrowser" could use "ferret" as a vendor prefix, while a browser named "Mellblom Browser" could use "mb". If both of these browsers invented extensions that turned elements into scratch-and-sniff areas, an author experimenting with these features could write:

This smells of lemons!

Attribute names beginning with the two characters "x-" are reserved for user agent use and are guaranteed to never be formally added to the HTML language. For flexibility, attributes names containing underscores (the U+005F LOW LINE character) are also reserved for experimental purposes and are guaranteed to never be formally added to the HTML language. Pages that use such attributes are by definition non-conforming. For DOM extensions, e.g., new methods and IDL attributes, the new members should be prefixed by vendor-specific strings to prevent clashes with future versions of this specification. For events, experimental event types should be prefixed with vendor-specific strings. For example, if a user agent called "Pleasold" were to add an event to indicate when the user is going up in an elevator, it could use the prefix "pleasold" and thus name the event "pleasoldgoingup", possibly with an event handler attribute named "onpleasoldgoingup". All extensions must be defined so that the use of extensions neither contradicts nor causes the non-conformance of functionality defined in the specification. For example, while strongly discouraged from doing so, an implementation "Foo Browser" could add a new IDL attribute "fooTypeTime" to a control’s DOM interface that returned the time it took the user to select the current value of a control (say). On the other hand, defining a new control that appears in a form’s elements array would be in violation of the above requirement, as it would violate the definition of elements given in this specification. When adding new reflecting IDL attributes corresponding to content attributes of the form "x-vendor-feature", the IDL attribute should be named "vendorFeature" (i.e., the "x" is dropped from the IDL attribute’s name). ---------------------------------------------------------------------- When vendor-neutral extensions to this specification are needed, either this specification can be updated accordingly, or an extension specification can be written that overrides the requirements in this specification. When someone applying this specification to their activities decides that they will recognize the requirements of such an extension specification, it becomes an applicable specification for the purposes of conformance requirements in this specification. Someone could write a specification that defines any arbitrary byte stream as conforming, and then claim that their random junk is conforming. However, that does not mean that their random junk actually is conforming for everyone’s purposes: if someone else decides that the specification does not apply to their work, then they can quite legitimately say that the aforementioned random junk is just that, junk, and not conforming at all. As far as conformance goes, what matters in a particular community is what that community agrees is applicable. applicable specification. The conformance terminology for documents depends on the nature of the changes introduced by such applicable specifications, and on the content and intended interpretation of the document. Applicable specifications MAY define new document content (e.g., a foobar element), MAY prohibit certain otherwise conforming content (e.g., prohibit use of
s), or MAY change the semantics, DOM mappings, or other processing rules for content defined in this specification. Whether a document is or is not a conforming HTML document does not depend on the use of applicable specifications: if the syntax and semantics of a given conforming HTML document is unchanged by the use of applicable specification(s), then that document remains a conforming HTML document. If the semantics or processing of a given (otherwise conforming) document is changed by use of applicable specification(s), then it is not a conforming HTML document. For such cases, the applicable specifications SHOULD define conformance terminology. As a suggested but not required convention, such specifications might define conformance terminology such as: "Conforming HTML+XXX document", where XXX is a short name for the applicable specification. (Example: "Conforming HTML+AutomotiveExtensions document"). a consequence of the rule given above is that certain syntactically correct HTML documents may not be conforming HTML documents in the presence of applicable specifications. (Example: the applicable specification defines
to be a piece of furniture — a document written to that specification and containing a
element is NOT a conforming HTML document, even if the element happens to be syntactically correct HTML.) ---------------------------------------------------------------------- User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them. When support for a feature is disabled (e.g., as an emergency measure to mitigate a security problem, or to aid in development, or for performance reasons), user agents must act as if they had no support for the feature whatsoever, and as if the feature was not mentioned in this specification. For example, if a particular feature is accessed via an attribute in a Web IDL interface, the attribute itself would be omitted from the objects that implement that interface — leaving the attribute on the object but making it return null or throw an exception is insufficient. 2.2.4. Interactions with XPath and XSLT Implementations of XPath 1.0 that operate on HTML documents parsed or created in the manners described in this specification (e.g., as part of the document.evaluate() API) must act as if the following edit was applied to the XPath 1.0 specification. First, remove this paragraph: A QName in the node test is expanded into an expanded-name using the namespace declarations from the expression context. This is the same way expansion is done for element type names in start and end-tags except that the default namespace declared with xmlns is not used: if the QName does not have a prefix, then the namespace URI is null (this is the same way attribute names are expanded). It is an error if the QName has a prefix for which there is no namespace declaration in the expression context. Then, insert in its place the following: A QName in the node test is expanded into an expanded-name using the namespace declarations from the expression context. If the QName has a prefix, then there must be a namespace declaration for this prefix in the expression context, and the corresponding namespace URI is the one that is associated with this prefix. It is an error if the QName has a prefix for which there is no namespace declaration in the expression context. If the QName has no prefix and the principal node type of the axis is element, then the default element namespace is used. Otherwise if the QName has no prefix, the namespace URI is null. The default element namespace is a member of the context for the XPath expression. The value of the default element namespace when executing an XPath expression through the DOM3 XPath API is determined in the following way: 1. If the context node is from an HTML DOM, the default element namespace is "http://www.w3.org/1999/xhtml". 2. Otherwise, the default element namespace URI is null. This is equivalent to adding the default element namespace feature of XPath 2.0 to XPath 1.0, and using the HTML namespace as the default element namespace for HTML documents. It is motivated by the desire to have implementations be compatible with legacy HTML content while still supporting the changes that this specification introduces to HTML regarding the namespace used for HTML elements, and by the desire to use XPath 1.0 rather than XPath 2.0. This change is a willful violation of the XPath 1.0 specification, motivated by desire to have implementations be compatible with legacy content while still supporting the changes that this specification introduces to HTML regarding which namespace is used for HTML elements. [XPATH] ---------------------------------------------------------------------- XSLT 1.0 processors outputting to a DOM when the output method is "html" (either explicitly or via the defaulting rule in XSLT 1.0) are affected as follows: If the transformation program outputs an element in no namespace, the processor must, prior to constructing the corresponding DOM element node, change the namespace of the element to the HTML namespace, ASCII-lowercase the element’s local name, and ASCII-lowercase the names of any non-namespaced attributes on the element. This requirement is a willful violation of the XSLT 1.0 specification, required because this specification changes the namespaces and case-sensitivity rules of HTML in a manner that would otherwise be incompatible with DOM-based XSLT transformations. (Processors that serialize the output are unaffected.) [XSLT] ---------------------------------------------------------------------- This specification does not specify precisely how XSLT processing interacts with the HTML parser infrastructure (for example, whether an XSLT processor acts as if it puts any elements into a stack of open elements). However, XSLT processors must stop parsing if they successfully complete, and must set the current document readiness first to "interactive" and then to "complete" if they are aborted. ---------------------------------------------------------------------- This specification does not specify how XSLT interacts with the navigation algorithm, how it fits in with the event loop, nor how error pages are to be handled (e.g., whether XSLT errors are to replace an incremental XSLT output, or are rendered inline, etc). There are also additional non-normative comments regarding the interaction of XSLT and HTML in the script element section, and of XSLT, XPath, and HTML in the template element section. 2.3. Case-sensitivity and string comparison Comparing two strings in a case-sensitive manner means comparing them exactly, code point for code point. Comparing two strings in an ASCII case-insensitive manner means comparing them exactly, code point for code point, except that the characters in the range U+0041 to U+005A (i.e., LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z) and the corresponding characters in the range U+0061 to U+007A (i.e., LATIN SMALL LETTER A to LATIN SMALL LETTER Z) are considered to also match. Comparing two strings in a compatibility caseless manner means using the Unicode compatibility caseless match operation to compare the two strings, with no language-specific tailorings. [UNICODE] Except where otherwise stated, string comparisons must be performed in a case-sensitive manner. Converting a string to ASCII uppercase means replacing all characters in the range U+0061 to U+007A (i.e., LATIN SMALL LETTER A to LATIN SMALL LETTER Z) with the corresponding characters in the range U+0041 to U+005A (i.e., LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z). Converting a string to ASCII lowercase means replacing all characters in the range U+0041 to U+005A (i.e., LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z) with the corresponding characters in the range U+0061 to U+007A (i.e., LATIN SMALL LETTER A to LATIN SMALL LETTER Z). A string pattern is a prefix match for a string s when pattern is not longer than s and truncating s to pattern’s length leaves the two strings as matches of each other. 2.4. Common microsyntaxes There are various places in HTML that accept particular data types, such as dates or numbers. This section describes what the conformance criteria for content in those formats is, and how to parse them. Implementors are strongly urged to carefully examine any third-party libraries they might consider using to implement the parsing of syntaxes described below. For example, date libraries are likely to implement error handling behavior that differs from what is required in this specification, since error-handling behavior is often not defined in specifications that describe date syntaxes similar to those used in this specification, and thus implementations tend to vary greatly in how they handle errors. 2.4.1. Common parser idioms The space characters, for the purposes of this specification, are U+0020 SPACE, U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED (LF), U+000C FORM FEED (FF), and U+000D CARRIAGE RETURN (CR). The White_Space characters are those that have the Unicode property "White_Space" in the Unicode PropList.txt data file. [UNICODE] This should not be confused with the "White_Space" value (abbreviated "WS") of the "Bidi_Class" property in the Unicode.txt data file. The control characters are those whose Unicode "General_Category" property has the value "Cc" in the Unicode UnicodeData.txt data file. [UNICODE] The uppercase ASCII letters are the characters in the range U+0041 LATIN CAPITAL LETTER A to U+005A LATIN CAPITAL LETTER Z. The lowercase ASCII letters are the characters in the range U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER Z. The ASCII letters are the characters that are either uppercase ASCII letters or lowercase ASCII letters. The ASCII digits are the characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). The alphanumeric ASCII characters are those that are either uppercase ASCII letters, lowercase ASCII letters, or ASCII digits. The ASCII hex digits are the characters in the ranges U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0041 LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F, and U+0061 LATIN SMALL LETTER A to U+0066 LATIN SMALL LETTER F. The uppercase ASCII hex digits are the characters in the ranges U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9) and U+0041 LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F only. The lowercase ASCII hex digits are the characters in the ranges U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9) and U+0061 LATIN SMALL LETTER A to U+0066 LATIN SMALL LETTER F only. Some of the micro-parsers described below follow the pattern of having an input variable that holds the string being parsed, and having a position variable pointing at the next character to parse in input. For parsers based on this pattern, a step that requires the user agent to collect a sequence of characters means that the following algorithm must be run, with characters being the set of characters that can be collected: 1. Let input and position be the same variables as those of the same name in the algorithm that invoked these steps. 2. Let result be the empty string. 3. While position doesn’t point past the end of input and the character at position is one of the characters, append that character to the end of result and advance position to the next character in input. 4. Return result. The step skip white space means that the user agent must collect a sequence of characters that are space characters. The collected characters are not used. When a user agent is to strip line breaks from a string, the user agent must remove any U+000A LINE FEED (LF) and U+000D CARRIAGE RETURN (CR) characters from that string. When a user agent is to strip leading and trailing white space from a string, the user agent must remove all space characters that are at the start or end of the string. When a user agent is to strip and collapse white space in a string, it must replace any sequence of one or more consecutive space characters in that string with a single U+0020 SPACE character, and then strip leading and trailing white space from that string. When a user agent has to strictly split a string on a particular delimiter character delimiter, it must use the following algorithm: 1. Let input be the string being parsed. 2. Let position be a pointer into input, initially pointing at the start of the string. 3. Let tokens be an ordered list of tokens, initially empty. 4. While position is not past the end of input: 1. Collect a sequence of characters that are not the delimiter character. 2. Append the string collected in the previous step to tokens. 3. Advance position to the next character in input. 5. Return tokens. For the special cases of splitting a string on spaces and on commas, this algorithm does not apply (those algorithms also perform white space trimming). 2.4.2. Boolean attributes A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing white space. A boolean attribute without a value assigned to it (e.g. checked) is implicitly equivalent to one that has the empty string assigned to it (i.e. checked=""). As a consequence, it represents the true value. The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether. Here is an example of a checkbox that is checked and disabled. The checked and disabled attributes are the boolean attributes. This could be equivalently written as this: You can also mix styles; the following is still equivalent: 2.4.3. Keywords and enumerated attributes Some attributes are defined as taking one of a finite set of keywords. Such attributes are called enumerated attributes. The keywords are each defined to map to a particular state (several keywords might map to the same state, in which case some of the keywords are synonyms of each other; additionally, some of the keywords can be said to be non-conforming, and are only in the specification for historical reasons). In addition, two default states can be given. The first is the invalid value default, the second is the missing value default. If an enumerated attribute is specified, the attribute’s value must be an ASCII case-insensitive match for one of the given keywords that are not said to be non-conforming, with no leading or trailing white space. When the attribute is specified, if its value is an ASCII case-insensitive match for one of the given keywords then that keyword’s state is the state that the attribute represents. If the attribute value matches none of the given keywords, but the attribute has an invalid value default, then the attribute represents that state. Otherwise, if the attribute value matches none of the keywords but there is a missing value default state defined, then that is the state represented by the attribute. Otherwise, there is no default, and invalid values mean that there is no state represented. When the attribute is not specified, if there is a missing value default state defined, then that is the state represented by the (missing) attribute. Otherwise, the absence of the attribute means that there is no state represented. The empty string can be a valid keyword. 2.4.4. Numbers 2.4.4.1. Signed integers A string is a valid integer if it consists of one or more ASCII digits, optionally prefixed with a U+002D HYPHEN-MINUS character (-). A valid integer without a U+002D HYPHEN-MINUS (-) prefix represents the number that is represented in base ten by that string of digits. A valid integer with a U+002D HYPHEN-MINUS (-) prefix represents the number represented in base ten by the string of digits that follows the U+002D HYPHEN-MINUS, subtracted from zero. The rules for parsing integers are as given in the following algorithm. When invoked, the steps must be followed in the order given, aborting at the first step that returns a value. This algorithm will return either an integer or an error. 1. Let input be the string being parsed. 2. Let position be a pointer into input, initially pointing at the start of the string. 3. Let sign have the value "positive". 4. Skip white space. 5. If position is past the end of input, return an error. 6. If the character indicated by position (the first character) is a U+002D HYPHEN-MINUS character (-): 1. Let sign be "negative". 2. Advance position to the next character. 3. If position is past the end of input, return an error. Otherwise, if the character indicated by position (the first character) is a U+002B PLUS SIGN character (+): 1. Advance position to the next character. (The "+" is ignored, but it is not conforming.) 2. If position is past the end of input, return an error. 7. If the character indicated by position is not an ASCII digit, then return an error. 8. Collect a sequence of characters that are ASCII digits, and interpret the resulting sequence as a base-ten integer. Let value be that integer. 9. If sign is "positive", return value, otherwise return the result of subtracting value from zero. 2.4.4.2. Non-negative integers A string is a valid non-negative integer if it consists of one or more ASCII digits. A valid non-negative integer represents the number that is represented in base ten by that string of digits. The rules for parsing non-negative integers are as given in the following algorithm. When invoked, the steps must be followed in the order given, aborting at the first step that returns a value. This algorithm will return either zero, a positive integer, or an error. 1. Let input be the string being parsed. 2. Let value be the result of parsing input using the rules for parsing integers. 3. If value is an error, return an error. 4. If value is less than zero, return an error. 5. Return value. 2.4.4.3. Floating-point numbers A string is a valid floating-point number if it consists of: 1. Optionally, a U+002D HYPHEN-MINUS character (-). 2. One or both of the following, in the given order: 1. A series of one or more ASCII digits. 2. Both of the following, in the given order: 1. A single U+002E FULL STOP character (.). 2. A series of one or more ASCII digits. 3. Optionally: 1. Either a U+0065 LATIN SMALL LETTER E character (e) or a U+0045 LATIN CAPITAL LETTER E character (E). 2. Optionally, a U+002D HYPHEN-MINUS character (-) or U+002B PLUS SIGN character (+). 3. A series of one or more ASCII digits. A valid floating-point number represents the number obtained by multiplying the significand by ten raised to the power of the exponent, where the significand is the first number, interpreted as base ten (including the decimal point and the number after the decimal point, if any, and interpreting the significand as a negative number if the whole string starts with a U+002D HYPHEN-MINUS character (-) and the number is not zero), and where the exponent is the number after the E, if any (interpreted as a negative number if there is a U+002D HYPHEN-MINUS character (-) between the E and the number and the number is not zero, or else ignoring a U+002B PLUS SIGN character (+) between the E and the number if there is one). If there is no E, then the exponent is treated as zero. The Infinity and Not-a-Number (NaN) values are not valid floating-point numbers. The best representation of the number n as a floating-point number is the string obtained from running ToString(n). The abstract operation ToString is not uniquely determined. When there are multiple possible strings that could be obtained from ToString for a particular value, the user agent must always return the same string for that value (though it may differ from the value used by other user agents). The rules for parsing floating-point number values are as given in the following algorithm. This algorithm must be aborted at the first step that returns something. This algorithm will return either a number or an error. 1. Let input be the string being parsed. 2. Let position be a pointer into input, initially pointing at the start of the string. 3. Let value have the value 1. 4. Let divisor have the value 1. 5. Let exponent have the value 1. 6. Skip white space. 7. If position is past the end of input, return an error. 8. If the character indicated by position is a U+002D HYPHEN-MINUS character (-): 1. Change value and divisor to -1. 2. Advance position to the next character. 3. If position is past the end of input, return an error. Otherwise, if the character indicated by position (the first character) is a U+002B PLUS SIGN character (+): 1. Advance position to the next character. (The "+" is ignored, but it is not conforming.) 2. If position is past the end of input, return an error. 9. If the character indicated by position is a U+002E FULL STOP (.), and that is not the last character in input, and the character after the character indicated by position is an ASCII digit, then set value to zero and jump to the step labeled fraction. 10. If the character indicated by position is not an ASCII digit, then return an error. 11. Collect a sequence of characters that are ASCII digits, and interpret the resulting sequence as a base-ten integer. Multiply value by that integer. 12. If position is past the end of input, jump to the step labeled conversion. 13. Fraction: If the character indicated by position is a U+002E FULL STOP (.), run these substeps: 1. Advance position to the next character. 2. If position is past the end of input, or if the character indicated by position is not an ASCII digit, U+0065 LATIN SMALL LETTER E (e), or U+0045 LATIN CAPITAL LETTER E (E), then jump to the step labeled conversion. 3. If the character indicated by position is a U+0065 LATIN SMALL LETTER E character (e) or a U+0045 LATIN CAPITAL LETTER E character (E), skip the remainder of these substeps. 4. Fraction loop: Multiply divisor by ten. 5. Add the value of the character indicated by position, interpreted as a base-ten digit (0..9) and divided by divisor, to value. 6. Advance position to the next character. 7. If position is past the end of input, then jump to the step labeled conversion. 8. If the character indicated by position is an ASCII digit, jump back to the step labeled fraction loop in these substeps. 14. If the character indicated by position is a U+0065 LATIN SMALL LETTER E character (e) or a U+0045 LATIN CAPITAL LETTER E character (E), run these substeps: 1. Advance position to the next character. 2. If position is past the end of input, then jump to the step labeled conversion. 3. If the character indicated by position is a U+002D HYPHEN-MINUS character (-): 1. Change exponent to -1. 2. Advance position to the next character. 3. If position is past the end of input, then jump to the step labeled conversion. Otherwise, if the character indicated by position is a U+002B PLUS SIGN character (+): 1. Advance position to the next character. 2. If position is past the end of input, then jump to the step labeled conversion. 4. If the character indicated by position is not an ASCII digit, then jump to the step labeled conversion. 5. Collect a sequence of characters that are ASCII digits, and interpret the resulting sequence as a base-ten integer. Multiply exponent by that integer. 6. Multiply value by ten raised to the exponentth power. 15. Conversion: Let S be the set of finite IEEE 754 double-precision floating-point values except -0, but with two special values added: 2^1024 and -2^1024. 16. Let rounded-value be the number in S that is closest to value, selecting the number with an even significand if there are two equally close values. (The two special values 2^1024 and -2^1024 are considered to have even significands for this purpose.) 17. If rounded-value is 2^1024 or -2^1024, return an error. 18. Return rounded-value. 2.4.4.4. Percentages and lengths The rules for parsing dimension values are as given in the following algorithm. When invoked, the steps must be followed in the order given, aborting at the first step that returns a value. This algorithm will return either a number greater than or equal to 0.0, or an error; if a number is returned, then it is further categorized as either a percentage or a length. 1. Let input be the string being parsed. 2. Let position be a pointer into input, initially pointing at the start of the string. 3. Skip white space. 4. If position is past the end of input, return an error. 5. If the character indicated by position is a U+002B PLUS SIGN character (+), advance position to the next character. 6. If position is past the end of input, return an error. 7. If the character indicated by position is not an ASCII digit, then return an error. 8. Collect a sequence of characters that are ASCII digits, and interpret the resulting sequence as a base-ten integer. Let value be that number. 9. If position is past the end of input, return value as a length. 10. If the character indicated by position is a U+002E FULL STOP character (.): 1. Advance position to the next character. 2. If position is past the end of input, or if the character indicated by position is not an ASCII digit, then return value as a length. 3. Let divisor have the value 1. 4. Fraction loop: Multiply divisor by ten. 5. Add the value of the character indicated by position, interpreted as a base-ten digit (0..9) and divided by divisor, to value. 6. Advance position to the next character. 7. If position is past the end of input, then return value as a length. 8. If the character indicated by position is an ASCII digit, return to the step labeled fraction loop in these substeps. 11. If position is past the end of input, return value as a length. 12. If the character indicated by position is a U+0025 PERCENT SIGN character (%), return value as a percentage. 13. Return value as a length. 2.4.4.5. Non-zero percentages and lengths The rules for parsing non-zero dimension values are as given in the following algorithm. When invoked, the steps must be followed in the order given, aborting at the first step that returns a value. This algorithm will return either a number greater than 0.0, or an error; if a number is returned, then it is further categorized as either a percentage or a length. 1. Let input be the string being parsed. 2. Let value be the result of parsing input using the rules for parsing dimension values. 3. If value is an error, return an error. 4. If value is zero, return an error. 5. If value is a percentage, return value as a percentage. 6. Return value as a length. 2.4.4.6. Lists of floating-point numbers A valid list of floating-point numbers is a number of valid floating-point numbers separated by U+002C COMMA characters, with no other characters (e.g. no space characters). In addition, there might be restrictions on the number of floating-point numbers that can be given, or on the range of values allowed. The rules for parsing a list of floating-point numbers are as follows: 1. Let input be the string being parsed. 2. Let position be a pointer into input, initially pointing at the start of the string. 3. Let numbers be an initially empty list of floating-point numbers. This list will be the result of this algorithm. 4. Collect a sequence of characters that are space characters, U+002C COMMA, or U+003B SEMICOLON characters. This skips past any leading delimiters. 5. While position is not past the end of input: 1. Collect a sequence of characters that are not space characters, U+002C COMMA, U+003B SEMICOLON, ASCII digits, U+002E FULL STOP, or U+002D HYPHEN-MINUS characters. This skips past leading garbage. 2. Collect a sequence of characters that are not space characters, U+002C COMMA, or U+003B SEMICOLON characters, and let unparsed number be the result. 3. Let number be the result of parsing unparsed number using the rules for parsing floating-point number values. 4. If number is an error, set number to zero. 5. Append number to numbers. 6. Collect a sequence of characters that are space characters, U+002C COMMA, or U+003B SEMICOLON characters. This skips past the delimiter. 6. Return numbers. 2.4.4.7. Lists of dimensions The rules for parsing a list of dimensions are as follows. These rules return a list of zero or more pairs consisting of a number and a unit, the unit being one of percentage, relative, and absolute. 1. Let raw input be the string being parsed. 2. If the last character in raw input is a U+002C COMMA character (,), then remove that character from raw input. 3. Split the string raw input on commas. Let raw tokens be the resulting list of tokens. 4. Let result be an empty list of number/unit pairs. 5. For each token in raw tokens, run the following substeps: 1. Let input be the token. 2. Let position be a pointer into input, initially pointing at the start of the string. 3. Let value be the number 0. 4. Let unit be absolute. 5. If position is past the end of input, set unit to relative and jump to the last substep. 6. If the character at position is an ASCII digit, collect a sequence of characters that are ASCII digits, interpret the resulting sequence as an integer in base ten, and increment value by that integer. 7. If the character at position is a U+002E FULL STOP character (.), run these substeps: 1. Collect a sequence of characters consisting of space characters and ASCII digits. Let s be the resulting sequence. 2. Remove all space characters in s. 3. If s is not the empty string, run these subsubsteps: 1. Let length be the number of characters in s (after the spaces were removed). 2. Let fraction be the result of interpreting s as a base-ten integer, and then dividing that number by 10^length. 3. Increment value by fraction. 8. Skip white space. 9. If the character at position is a U+0025 PERCENT SIGN character (%), then set unit to percentage. Otherwise, if the character at position is a U+002A ASTERISK character (*), then set unit to relative. 10. Add an entry to result consisting of the number given by value and the unit given by unit. 6. Return the list result. 2.4.5. Dates and times This specification encodes dates and times according to a common subset of the [ISO8601] standard for dates. This means that encoded dates will look like 1582-03-01, 0033-03-27, or 2016-03-01, and date-times will look like 1929-11-13T19:00Z, 0325-06-03T00:21+10:30. The format is approximately YYYY-MM-DDTHH:MM:SS.DD±HH:MM, although some parts are optional, for example to express a month and day as in a birthday, a time without time-zone information, and the like. Times are expressed using the 24-hour clock, and it is an error to express leap seconds. Dates are expressed in the proleptic Gregorian calendar between the proleptic year 0000, and the year 9999. Other years cannot be encoded. The proleptic Gregorian calendar is the calendar most common globally since around 1950, and is likely to be understood by almost everyone for dates between the years 1950 and 9999, and for many people for dates in the last few decades or centuries. The Gregorian calendar was adopted officially in different countries at different times, between the years 1582 when it was proposed by Pope Gregory XIII as a replacement for the Julian calendar, and 1949 when it was adopted by the People’s republic of China. For most practical purposes, dealing with the present, recent past, or the next few thousand years, this will work without problems. For dates before the adoption of the Gregorian Calendar - for example prior to 1917 in Russia or Turkey, prior to 1752 in Britain or the then British colonies of America, or prior to 1582 in Spain, the Spanish colonies in America, and the rest of the world, dates will not match those written at the time. The use of the Gregorian calendar as an underlying encoding is a somewhat arbitrary choice. Many other calendars were or are in use, and the interested reader should look for information on the Web. See also the discussion of date, time, and number formats in forms (for authors), implementation notes regarding localization of form controls, and the time element. In the algorithms below, the number of days in month month of year year is: 31 if month is 1, 3, 5, 7, 8, 10, or 12; 30 if month is 4, 6, 9, or 11; 29 if month is 2 and year is a number divisible by 400, or if year is a number divisible by 4 but not by 100; and 28 otherwise. This takes into account leap years in the Gregorian calendar. [GREGORIAN] When ASCII digits are used in the date and time syntaxes defined in this section, they express numbers in base ten. While the formats described here are intended to be subsets of the corresponding ISO8601 formats, this specification defines parsing rules in much more detail than ISO8601. Implementors are therefore encouraged to carefully examine any date parsing libraries before using them to implement the parsing rules described below; ISO8601 libraries might not parse dates and times in exactly the same manner. [ISO8601] Where this specification refers to the proleptic Gregorian calendar, it means the modern Gregorian calendar, extrapolated backwards to year 1. A date in the proleptic Gregorian calendar, sometimes explicitly referred to as a proleptic-Gregorian date, is one that is described using that calendar even if that calendar was not in use at the time (or place) in question. [GREGORIAN] 2.4.5.1. Months A month consists of a specific proleptic-Gregorian date with no time-zone information and no date information beyond a year and a month. [GREGORIAN] A string is a valid month string representing a year year and month month if it consists of the following components in the given order: 1. Four or more ASCII digits, representing year, where year > 0 2. A U+002D HYPHEN-MINUS character (-) 3. Two ASCII digits, representing the month month, in the range 1 ≤ month ≤ 12 For example, February 2005 is encoded 2005-02, and March of the year 33AD (as a proleptic gregorian date) is encoded 0033-03. The expression 325-03 does not mean March in the year 325, it is an error, because it does not have 4 digits for the year. The rules to parse a month string are as follows. This will return either a year and month, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing. 1. Let input be the string being parsed. 2. Let position be a pointer into input, initially pointing at the start of the string. 3. Parse a month component to obtain year and month. If this returns nothing, then fail. 4. If position is not beyond the end of input, then fail. 5. Return year and month. The rules to parse a month component, given an input string and a position, are as follows. This will return either a year and a month, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing. 1. Collect a sequence of characters that are ASCII digits. If the collected sequence is not at least four characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let that number be the year. 2. If year is not a number greater than zero, then fail. 3. If position is beyond the end of input or if the character at position is not a U+002D HYPHEN-MINUS character, then fail. Otherwise, move position forwards one character. 4. Collect a sequence of characters that are ASCII digits. If the collected sequence is not exactly two characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let that number be the month. 5. If month is not a number in the range 1 ≤ month ≤ 12, then fail. 6. Return year and month. 2.4.5.2. Dates A date consists of a specific proleptic-Gregorian date with no time-zone information, consisting of a year, a month, and a day. [GREGORIAN] A string is a valid date string representing a year year, month month, and day day if it consists of the following components in the given order: 1. A valid month string, representing year and month 2. A U+002D HYPHEN-MINUS character (-) 3. Two ASCII digits, representing day, in the range 1 ≤ day ≤ maxday where maxday is the number of days in the month month and year year For example, 29 February 2016 is encoded 2016-02-29, and 3 March of the year 33AD (as a proleptic gregorian date) is encoded 0033-03-03. The expression 325-03-03 does not mean 3 March in the year 325, it is an error, because it does not have 4 digits for the year. The rules to parse a date string are as follows. This will return either a date, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing. 1. Let input be the string being parsed. 2. Let position be a pointer into input, initially pointing at the start of the string. 3. Parse a date component to obtain year, month, and day. If this returns nothing, then fail. 4. If position is not beyond the end of input, then fail. 5. Let date be the date with year year, month month, and day day. 6. Return date. The rules to parse a date component, given an input string and a position, are as follows. This will return either a year, a month, and a day, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing. 1. Parse a month component to obtain year and month. If this returns nothing, then fail. 2. Let maxday be the number of days in month month of year year. 3. If position is beyond the end of input or if the character at position is not a U+002D HYPHEN-MINUS character, then fail. Otherwise, move position forwards one character. 4. Collect a sequence of characters that are ASCII digits. If the collected sequence is not exactly two characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let that number be the day. 5. If day is not a number in the range 1 ≤ day ≤ maxday, then fail. 6. Return year, month, and day. 2.4.5.3. Yearless dates A yearless date consists of a Gregorian month and a day within that month, but with no associated year. [GREGORIAN] A string is a valid yearless date string representing a month month and a day day if it consists of the following components in the given order: 1. Optionally, two U+002D HYPHEN-MINUS characters (-) 2. Two ASCII digits, representing the month month, in the range 1 ≤ month ≤ 12 3. A U+002D HYPHEN-MINUS character (-) 4. Two ASCII digits, representing day, in the range 1 ≤ day ≤ maxday where maxday is the number of days in the month month and any arbitrary leap year (e.g., 4 or 2000) In other words, if the month is "02", meaning February, then the day can be 29, as if the year was a leap year. For example, 29 February is encoded 02-29, and 3 March is encoded 03-03. The rules to parse a yearless date string are as follows. This will return either a month and a day, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing. 1. Let input be the string being parsed. 2. Let position be a pointer into input, initially pointing at the start of the string. 3. Parse a yearless date component to obtain month and day. If this returns nothing, then fail. 4. If position is not beyond the end of input, then fail. 5. Return month and day. The rules to parse a yearless date component, given an input string and a position, are as follows. This will return either a month and a day, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing. 1. Collect a sequence of characters that are U+002D HYPHEN-MINUS characters (-). If the collected sequence is not exactly zero or two characters long, then fail. 2. Collect a sequence of characters that are ASCII digits. If the collected sequence is not exactly two characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let that number be the month. 3. If month is not a number in the range 1 ≤ month ≤ 12, then fail. 4. Let maxday be the number of days in month month of any arbitrary leap year (e.g., 4 or 2000). 5. If position is beyond the end of input or if the character at position is not a U+002D HYPHEN-MINUS character, then fail. Otherwise, move position forwards one character. 6. Collect a sequence of characters that are ASCII digits. If the collected sequence is not exactly two characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let that number be the day. 7. If day is not a number in the range 1 ≤ day ≤ maxday, then fail. 8. Return month and day. 2.4.5.4. Times A time consists of a specific time with no time-zone information, consisting of an hour, a minute, a second, and a fraction of a second. A string is a valid time string representing an hour hour, a minute minute, and a second second if it consists of the following components in the given order: 1. Two ASCII digits, representing hour, in the range 0 ≤ hour ≤ 23 2. A U+003A COLON character (:) 3. Two ASCII digits, representing minute, in the range 0 ≤ minute ≤ 59 4. If second is non-zero, or optionally if second is zero: 1. A U+003A COLON character (:) 2. Two ASCII digits, representing the integer part of second, in the range 0 ≤ s ≤ 59 3. If second is not an integer, or optionally if second is an integer: 1. A 002E FULL STOP character (.) 2. One, two, or three ASCII digits, representing the fractional part of second The second component cannot be 60 or 61; leap seconds cannot be represented. Times are encoded using the 24 hour clock, with optional seconds, and optional decimal fractions of seconds. Thus 7.45pm is encoded as 19:45. Note that parsing that time will return 19:45:00, or 7.45pm and zero seconds. 19:45:45.456 is 456 thousandths of a second after 7.45pm and 45 seconds. The rules to parse a time string are as follows. This will return either a time, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing. 1. Let input be the string being parsed. 2. Let position be a pointer into input, initially pointing at the start of the string. 3. Parse a time component to obtain hour, minute, and second. If this returns nothing, then fail. 4. If position is not beyond the end of input, then fail. 5. Let time be the time with hour hour, minute minute, and second second. 6. Return time. The rules to parse a time component, given an input string and a position, are as follows. This will return either an hour, a minute, and a second, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing. 1. Collect a sequence of characters that are ASCII digits. If the collected sequence is not exactly two characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let that number be the hour. 2. If hour is not a number in the range 0 ≤ hour ≤ 23, then fail. 3. If position is beyond the end of input or if the character at position is not a U+003A COLON character, then fail. Otherwise, move position forwards one character. 4. Collect a sequence of characters that are ASCII digits. If the collected sequence is not exactly two characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let that number be the minute. 5. If minute is not a number in the range 0 ≤ minute ≤ 59, then fail. 6. Let second be a string with the value "0". 7. If position is not beyond the end of input and the character at position is a U+003A COLON, then run these substeps: 1. Advance position to the next character in input. 2. If position is beyond the end of input, or at the last character in input, or if the next two characters in input starting at position are not both ASCII digits, then fail. 3. Collect a sequence of characters that are either ASCII digits or U+002E FULL STOP characters. If the collected sequence is three characters long, or if it is longer than three characters long and the third character is not a U+002E FULL STOP character, or if it has more than one U+002E FULL STOP character, then fail. Otherwise, let second be the collected string. 8. Interpret second as a base-ten number (possibly with a fractional part). Let second be that number instead of the string version. 9. If second is not a number in the range 0 ≤ second < 60, then fail. 10. Return hour, minute, and second. 2.4.5.5. Floating dates and times A floating date and time consists of a specific proleptic-Gregorian date, consisting of a year, a month, and a day, and a time, consisting of an hour, a minute, a second, and a fraction of a second, but expressed without a time zone. [GREGORIAN] A string is a valid floating date and time string representing a date and time if it consists of the following components in the given order: 1. A valid date string representing the date 2. A U+0054 LATIN CAPITAL LETTER T character (T) or a U+0020 SPACE character 3. A valid time string representing the time A string is a valid normalized floating date and time string representing a date and time if it consists of the following components in the given order: 1. A valid date string representing the date 2. A U+0054 LATIN CAPITAL LETTER T character (T) 3. A valid time string representing the time, expressed as the shortest possible string for the given time (e.g., omitting the seconds component entirely if the given time is zero seconds past the minute) The rules to parse a floating date and time string are as follows. This will return either a date and time, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing. 1. Let input be the string being parsed. 2. Let position be a pointer into input, initially pointing at the start of the string. 3. Parse a date component to obtain year, month, and day. If this returns nothing, then fail. 4. If position is beyond the end of input or if the character at position is neither a U+0054 LATIN CAPITAL LETTER T character (T) nor a U+0020 SPACE character, then fail. Otherwise, move position forwards one character. 5. Parse a time component to obtain hour, minute, and second. If this returns nothing, then fail. 6. If position is not beyond the end of input, then fail. 7. Let date be the date with year year, month month, and day day. 8. Let time be the time with hour hour, minute minute, and second second. 9. Return date and time. 2.4.5.6. Time zones A time-zone offset consists of a signed number of hours and minutes. A string is a valid time-zone offset string representing a time-zone offset if it consists of either: * A U+005A LATIN CAPITAL LETTER Z character (Z), allowed only if the time zone is UTC * Or, the following components, in the given order: 1. Either a U+002B PLUS SIGN character (+) or, if the time-zone offset is not zero, a U+002D HYPHEN-MINUS character (-), representing the sign of the time-zone offset 2. Two ASCII digits, representing the hours component hour of the time-zone offset, in the range 0 ≤ hour ≤ 23 3. Optionally, a U+003A COLON character (:) 4. Two ASCII digits, representing the minutes component minute of the time-zone offset, in the range 0 ≤ minute ≤ 59 This format allows for time-zone offsets from -23:59 to +23:59. In practice, however, right now the range of offsets of actual time zones is -12:00 to +14:00, and the minutes component of offsets of actual time zones is always either 00, 30, or 45. There is no guarantee that this will remain so forever, however; time zones are changed by countries at will and do not follow a standard. See also the usage notes and examples in the global date and time section below for details on using time-zone offsets with historical times that predate the formation of formal time zones. The rules to parse a time-zone offset string are as follows. This will return either a time-zone offset, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing. 1. Let input be the string being parsed. 2. Let position be a pointer into input, initially pointing at the start of the string. 3. Parse a time-zone offset component to obtain timezone_hours and timezone_minutes. If this returns nothing, then fail. 4. If position is not beyond the end of input, then fail. 5. Return the time-zone offset that is timezone_hours hours and timezone_minutes minutes from UTC. The rules to parse a time-zone offset component, given an input string and a position, are as follows. This will return either time-zone hours and time-zone minutes, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing. 1. If the character at position is a U+005A LATIN CAPITAL LETTER Z character (Z), then: 1. Let timezone_hours be 0. 2. Let timezone_minutes be 0. 3. Advance position to the next character in input. Otherwise, if the character at position is either a U+002B PLUS SIGN (+) or a U+002D HYPHEN-MINUS (-), then: 1. If the character at position is a U+002B PLUS SIGN (+), let sign be "positive". Otherwise, it’s a U+002D HYPHEN-MINUS (-); let sign be "negative". 2. Advance position to the next character in input. 3. Collect a sequence of characters that are ASCII digits. Let s be the collected sequence. 4. If s is exactly two characters long, then run these substeps: 1. Interpret s as a base-ten integer. Let that number be the timezone_hours. 2. If position is beyond the end of input or if the character at position is not a U+003A COLON character, then fail. Otherwise, move position forwards one character. 3. Collect a sequence of characters that are ASCII digits. If the collected sequence is not exactly two characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let that number be the timezone_minutes. If s is exactly four characters long, then run these substeps: 1. Interpret the first two characters of s as a base-ten integer. Let that number be the timezone_hours. 2. Interpret the last two characters of s as a base-ten integer. Let that number be the timezone_minutes. Otherwise, fail. 5. If timezone_hours is not a number in the range 0 ≤ timezone_hours ≤ 23, then fail. 6. If sign is "negative", then negate timezone_hours. 7. If timezone_minutes is not a number in the range 0 ≤ timezone_minutes ≤ 59, then fail. 8. If sign is "negative", then negate timezone_minutes. Otherwise, fail. 2. Return timezone_hours and timezone_minutes. 2.4.5.7. Global dates and times A global date and time consists of a specific proleptic-Gregorian date, consisting of a year, a month, and a day, and a time, consisting of an hour, a minute, a second, and a fraction of a second, expressed with a time-zone offset, consisting of a signed number of hours and minutes. [GREGORIAN] A string is a valid global date and time string representing a date, time, and a time-zone offset if it consists of the following components in the given order: 1. A valid date string representing the date 2. A U+0054 LATIN CAPITAL LETTER T character (T) or a U+0020 SPACE character 3. A valid time string representing the time 4. A valid time-zone offset string representing the time-zone offset Times in dates before the formation of UTC in the mid twentieth century must be expressed and interpreted in terms of UT1 (contemporary Earth mean solar time at the 0° longitude), not UTC (the approximation of UT1 that ticks in SI seconds). Time before the formation of time zones must be expressed and interpreted as UT1 times with explicit time zones that approximate the contemporary difference between the appropriate local time and the time observed at the location of Greenwich, London. The following are some examples of dates written as valid global date and time strings. "0037-12-13 00:00Z" Midnight "London time" (UTC) on the birthday of the Roman Emperor Nero. See below for further discussion on which date this actually corresponds to. "1979-10-14T12:00:00.001-04:00" One millisecond after noon on October 14th 1979, in the time zone in use on the east coast of the USA during daylight saving time. "8592-01-01T02:09+02:09" Midnight UTC on the 1st of January, 8592. The time zone associated with that time is two hours and nine minutes ahead of UTC, which is not currently a real time zone, but is nonetheless allowed. Several things are notable about these dates: * Years with fewer than four digits have to be zero-padded. The date "37-12-13" is not a valid date. * If the "T" is replaced by a space, it must be a single space character. The string "2001-12-21  12:00Z" (with two spaces between the components) would not be parsed successfully. * To unambiguously identify a date it has to be first converted to the Gregorian calendar (e.g., from the Hijri, Jewish, Julian or other calendar). For example, the Roman Emperor Nero was born on the 15th of December 37 in the Julian Calendar, which is the 13th of December 37 in the proleptic Gregorian calendar. * The time and time-zone offset components are not optional. * Dates before the year one or after the year 9999 in teh Gregorian calendar cannot be represented as a datetime in this version of HTML. * Time-zone offsets for a place may vary, for example due to daylight savings time. The zone offset is not a complete time zone specification. When working with real date and time values, consider using a separate field for time zone, perhaps using IANA time zone IDs. [TIMEZONE] A string is a valid normalized global date and time string representing a date, time, and a time-zone offset if it consists of the following components in the given order: 1. A valid date string representing the date converted to the UTC time zone 2. A U+0054 LATIN CAPITAL LETTER T character (T) 3. A valid time string representing the time converted to the UTC time zone and expressed as the shortest possible string for the given time (e.g., omitting the seconds component entirely if the given time is zero seconds past the minute) 4. A U+005A LATIN CAPITAL LETTER Z character (Z) The rules to parse a global date and time string are as follows. This will return either a time in UTC, with associated time-zone offset information for round-tripping or display purposes, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing. 1. Let input be the string being parsed. 2. Let position be a pointer into input, initially pointing at the start of the string. 3. Parse a date component to obtain year, month, and day. If this returns nothing, then fail. 4. If position is beyond the end of input or if the character at position is neither a U+0054 LATIN CAPITAL LETTER T character (T) nor a U+0020 SPACE character, then fail. Otherwise, move position forwards one character. 5. Parse a time component to obtain hour, minute, and second. If this returns nothing, then fail. 6. If position is beyond the end of input, then fail. 7. Parse a time-zone offset component to obtain timezone_hours and timezone_minutes. If this returns nothing, then fail. 8. If position is not beyond the end of input, then fail. 9. Let time be the moment in time at year year, month month, day day, hours hour, minute minute, second second, subtracting timezone_hours hours and timezone_minutes minutes. That moment in time is a moment in the UTC time zone. 10. Let timezone be timezone_hours hours and timezone_minutes minutes from UTC. 11. Return time and timezone. 2.4.5.8. Weeks A week consists of a week-year number and a week number representing a seven-day period starting on a Monday. Each week-year in this calendaring system has either 52 or 53 such seven-day periods, as defined below. The seven-day period starting on the Gregorian date Monday December 29th 1969 (1969-12-29) is defined as week number 1 in week-year 1970. Consecutive weeks are numbered sequentially. The week before the number 1 week in a week-year is the last week in the previous week-year, and vice versa. [GREGORIAN] A week-year with a number year has 53 weeks if it corresponds to either a year year in the proleptic Gregorian calendar that has a Thursday as its first day (January 1st), or a year year in the proleptic Gregorian calendar that has a Wednesday as its first day (January 1st) and where year is a number divisible by 400, or a number divisible by 4 but not by 100. All other week-years have 52 weeks. The week number of the last day of a week-year with 53 weeks is 53; the week number of the last day of a week-year with 52 weeks is 52. The week-year number of a particular day can be different than the number of the year that contains that day in the proleptic Gregorian calendar. The first week in a week-year y is the week that contains the first Thursday of the Gregorian year y. For modern purposes, a week as defined here is equivalent to ISO weeks as defined in ISO 8601. [ISO8601] A string is a valid week string representing a week-year year and week week if it consists of the following components in the given order: 1. Four or more ASCII digits, representing year, where year > 0 2. A U+002D HYPHEN-MINUS character (-) 3. A U+0057 LATIN CAPITAL LETTER W character (W) 4. Two ASCII digits, representing the week week, in the range 1 ≤ week ≤ maxweek, where maxweek is the week number of the last day of week-year year The rules to parse a week string are as follows. This will return either a week-year number and week number, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing. 1. Let input be the string being parsed. 2. Let position be a pointer into input, initially pointing at the start of the string. 3. Collect a sequence of characters that are ASCII digits. If the collected sequence is not at least four characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let that number be the year. 4. If year is not a number greater than zero, then fail. 5. If position is beyond the end of input or if the character at position is not a U+002D HYPHEN-MINUS character, then fail. Otherwise, move position forwards one character. 6. If position is beyond the end of input or if the character at position is not a U+0057 LATIN CAPITAL LETTER W character (W), then fail. Otherwise, move position forwards one character. 7. Collect a sequence of characters that are ASCII digits. If the collected sequence is not exactly two characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let that number be the week. 8. Let maxweek be the week number of the last day of year year. 9. If week is not a number in the range 1 ≤ week ≤ maxweek, then fail. 10. If position is not beyond the end of input, then fail. 11. Return the week-year number year and the week number week. 2.4.5.9. Durations A duration consists of a number of seconds. Since months and seconds are not comparable (a month is not a precise number of seconds, but is instead a period whose exact length depends on the precise day from which it is measured) a duration as defined in this specification cannot include months (or years, which are equivalent to twelve months). Only durations that describe a specific number of seconds can be described. A string is a valid duration string representing a duration t if it consists of either of the following: * A literal U+0050 LATIN CAPITAL LETTER P character followed by one or more of the following subcomponents, in the order given, where the number of days, hours, minutes, and seconds corresponds to the same number of seconds as in t: 1. One or more ASCII digits followed by a U+0044 LATIN CAPITAL LETTER D character, representing a number of days. 2. A U+0054 LATIN CAPITAL LETTER T character followed by one or more of the following subcomponents, in the order given: 1. One or more ASCII digits followed by a U+0048 LATIN CAPITAL LETTER H character, representing a number of hours. 2. One or more ASCII digits followed by a U+004D LATIN CAPITAL LETTER M character, representing a number of minutes. 3. The following components: 1. One or more ASCII digits, representing a number of seconds. 2. Optionally, a U+002E FULL STOP character (.) followed by one, two, or three ASCII digits, representing a fraction of a second. 3. A U+0053 LATIN CAPITAL LETTER S character. This, as with a number of other date- and time-related microsyntaxes defined in this specification, is based on one of the formats defined in ISO 8601. [ISO8601] * One or more duration time components, each with a different duration time component scale, in any order; the sum of the represented seconds being equal to the number of seconds in t. A duration time component is a string consisting of the following components: 1. Zero or more space characters. 2. One or more ASCII digits, representing a number of time units, scaled by the duration time component scale specified (see below) to represent a number of seconds. 3. If the duration time component scale specified is 1 (i.e., the units are seconds), then, optionally, a U+002E FULL STOP character (.) followed by one, two, or three ASCII digits, representing a fraction of a second. 4. Zero or more space characters. 5. One of the following characters, representing the duration time component scale of the time unit used in the numeric part of the duration time component: U+0057 LATIN CAPITAL LETTER W character U+0077 LATIN SMALL LETTER W character Weeks. The scale is 604800. U+0044 LATIN CAPITAL LETTER D character U+0064 LATIN SMALL LETTER D character Days. The scale is 86400. U+0048 LATIN CAPITAL LETTER H character U+0068 LATIN SMALL LETTER H character Hours. The scale is 3600. U+004D LATIN CAPITAL LETTER M character U+006D LATIN SMALL LETTER M character Minutes. The scale is 60. U+0053 LATIN CAPITAL LETTER S character U+0073 LATIN SMALL LETTER S character Seconds. The scale is 1. 6. Zero or more space characters. This is not based on any of the formats in ISO 8601. It is intended to be a more human-readable alternative to the ISO 8601 duration format. The rules to parse a duration string are as follows. This will return either a duration or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing. 1. Let input be the string being parsed. 2. Let position be a pointer into input, initially pointing at the start of the string. 3. Let months, seconds, and component count all be zero. 4. Let M-disambiguator be minutes. This flag’s other value is months. It is used to disambiguate the "M" unit in ISO8601 durations, which use the same unit for months and minutes. Months are not allowed, but are parsed for future compatibility and to avoid misinterpreting ISO8601 durations that would be valid in other contexts. 5. Skip white space. 6. If position is past the end of input, then fail. 7. If the character in input pointed to by position is a U+0050 LATIN CAPITAL LETTER P character, then advance position to the next character, set M-disambiguator to months, and skip white space. 8. Run the following substeps in a loop, until a step requiring the loop to be broken or the entire algorithm to fail is reached: 1. Let units be undefined. It will be assigned one of the following values: years, months, weeks, days, hours, minutes, and seconds. 2. Let next character be undefined. It is used to process characters from the input. 3. If position is past the end of input, then break the loop. 4. If the character in input pointed to by position is a U+0054 LATIN CAPITAL LETTER T character, then advance position to the next character, set M-disambiguator to minutes, skip white space, and return to the top of the loop. 5. Set next character to the character in input pointed to by position. 6. If next character is a U+002E FULL STOP character (.), then let N equal zero. (Do not advance position. That is taken care of below.) Otherwise, if next character is an ASCII digit, then collect a sequence of characters that are ASCII digits, interpret the resulting sequence as a base-ten integer, and let N be that number. Otherwise next character is not part of a number; fail. 7. If position is past the end of input, then fail. 8. Set next character to the character in input pointed to by position, and this time advance position to the next character. (If next character was a U+002E FULL STOP character (.) before, it will still be that character this time.) 9. If next character is a U+002E FULL STOP character (.), then run these substeps: 1. Collect a sequence of characters that are ASCII digits. Let s be the resulting sequence. 2. If s is the empty string, then fail. 3. Let length be the number of characters in s. 4. Let fraction be the result of interpreting s as a base-ten integer, and then dividing that number by 10^length. 5. Increment N by fraction. 6. Skip white space. 7. If position is past the end of input, then fail. 8. Set next character to the character in input pointed to by position, and advance position to the next character. 9. If next character is neither a U+0053 LATIN CAPITAL LETTER S character nor a U+0073 LATIN SMALL LETTER S character, then fail. 10. Set units to seconds. Otherwise, run these substeps: 1. If next character is a space character, then skip white space, set next character to the character in input pointed to by position, and advance position to the next character. 2. If next character is a U+0059 LATIN CAPITAL LETTER Y character, or a U+0079 LATIN SMALL LETTER Y character, set units to years and set M-disambiguator to months. If next character is a U+004D LATIN CAPITAL LETTER M character or a U+006D LATIN SMALL LETTER M character, and M-disambiguator is months, then set units to months. If next character is a U+0057 LATIN CAPITAL LETTER W character or a U+0077 LATIN SMALL LETTER W character, set units to weeks and set M-disambiguator to minutes. If next character is a U+0044 LATIN CAPITAL LETTER D character or a U+0064 LATIN SMALL LETTER D character, set units to days and set M-disambiguator to minutes. If next character is a U+0048 LATIN CAPITAL LETTER H character or a U+0068 LATIN SMALL LETTER H character, set units to hours and set M-disambiguator to minutes. If next character is a U+004D LATIN CAPITAL LETTER M character or a U+006D LATIN SMALL LETTER M character, and M-disambiguator is minutes, then set units to minutes. If next character is a U+0053 LATIN CAPITAL LETTER S character or a U+0073 LATIN SMALL LETTER S character, set units to seconds and set M-disambiguator to minutes. Otherwise if next character is none of the above characters, then fail. 10. Increment component count. 11. Let multiplier be 1. 12. If units is years, multiply multiplier by 12 and set units to months. 13. If units is months, add the product of N and multiplier to months. Otherwise, run these substeps: 1. If units is weeks, multiply multiplier by 7 and set units to days. 2. If units is days, multiply multiplier by 24 and set units to hours. 3. If units is hours, multiply multiplier by 60 and set units to minutes. 4. If units is minutes, multiply multiplier by 60 and set units to seconds. 5. Forcibly, units is now seconds. Add the product of N and multiplier to seconds. 14. Skip white space. 9. If component count is zero, fail. 10. If months is not zero, fail. 11. Return the duration consisting of seconds seconds. 2.4.5.10. Vaguer moments in time A string is a valid date string with optional time if it is also one of the following: * A valid date string * A valid global date and time string ---------------------------------------------------------------------- The rules to parse a date or time string are as follows. The algorithm will return either a date, a time, a global date and time, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing. 1. Let input be the string being parsed. 2. Let position be a pointer into input, initially pointing at the start of the string. 3. Set start position to the same position as position. 4. Set the date present and time present flags to true. 5. Parse a date component to obtain year, month, and day. If this fails, then set the date present flag to false. 6. If date present is true, and position is not beyond the end of input, and the character at position is either a U+0054 LATIN CAPITAL LETTER T character (T) or a U+0020 SPACE character, then advance position to the next character in input. Otherwise, if date present is true, and either position is beyond the end of input or the character at position is neither a U+0054 LATIN CAPITAL LETTER T character (T) nor a U+0020 SPACE character, then set time present to false. Otherwise, if date present is false, set position back to the same position as start position. 7. If the time present flag is true, then parse a time component to obtain hour, minute, and second. If this returns nothing, then fail. 8. If the date present and time present flags are both true, but position is beyond the end of input, then fail. 9. If the date present and time present flags are both true, parse a time-zone offset component to obtain timezone_hours and timezone_minutes. If this returns nothing, then fail. 10. If position is not beyond the end of input, then fail. 11. If the date present flag is true and the time present flag is false, then let date be the date with year year, month month, and day day, and return date. Otherwise, if the time present flag is true and the date present flag is false, then let time be the time with hour hour, minute minute, and second second, and return time. Otherwise, let time be the moment in time at year year, month month, day day, hours hour, minute minute, second second, subtracting timezone_hours hours and timezone_minutes minutes, that moment in time being a moment in the UTC time zone; let timezone be timezone_hours hours and timezone_minutes minutes from UTC; and return time and timezone. 2.4.6. Colors A simple color consists of three 8-bit numbers in the range 0..255, representing the red, green, and blue components of the color respectively, in the sRGB color space. [SRGB] A string is a valid simple color if it is exactly seven characters long, and the first character is a U+0023 NUMBER SIGN character (#), and the remaining six characters are all ASCII hex digits, with the first two digits representing the red component, the middle two digits representing the green component, and the last two digits representing the blue component, in hexadecimal. A string is a valid lowercase simple color if it is a valid simple color and doesn’t use any characters in the range U+0041 LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F. The rules for parsing simple color values are as given in the following algorithm. When invoked, the steps must be followed in the order given, aborting at the first step that returns a value. This algorithm will return either a simple color or an error. 1. Let input be the string being parsed. 2. If input is not exactly seven characters long, then return an error. 3. If the first character in input is not a U+0023 NUMBER SIGN character (#), then return an error. 4. If the last six characters of input are not all ASCII hex digits, then return an error. 5. Let result be a simple color. 6. Interpret the second and third characters as a hexadecimal number and let the result be the red component of result. 7. Interpret the fourth and fifth characters as a hexadecimal number and let the result be the green component of result. 8. Interpret the sixth and seventh characters as a hexadecimal number and let the result be the blue component of result. 9. Return result. The rules for serializing simple color values given a simple color are as given in the following algorithm: 1. Let result be a string consisting of a single U+0023 NUMBER SIGN character (#). 2. Convert the red, green, and blue components in turn to two-digit hexadecimal numbers using lowercase ASCII hex digits, zero-padding if necessary, and append these numbers to result, in the order red, green, blue. 3. Return result, which will be a valid lowercase simple color. ---------------------------------------------------------------------- Some obsolete legacy attributes parse colors in a more complicated manner, using the rules for parsing a legacy color value, which are given in the following algorithm. When invoked, the steps must be followed in the order given, aborting at the first step that returns a value. This algorithm will return either a simple color or an error. 1. Let input be the string being parsed. 2. If input is the empty string, then return an error. 3. Strip leading and trailing white space from input. 4. If input is an ASCII case-insensitive match for the string "transparent", then return an error. 5. If input is an ASCII case-insensitive match for one of the named colors, then return the simple color corresponding to that keyword. [CSS3COLOR] CSS2 System Colors are not recognized. 6. If input is four characters long, and the first character in input is a U+0023 NUMBER SIGN character (#), and the last three characters of input are all ASCII hex digits, then run these substeps: 1. Let result be a simple color. 2. Interpret the second character of input as a hexadecimal digit; let the red component of result be the resulting number multiplied by 17. 3. Interpret the third character of input as a hexadecimal digit; let the green component of result be the resulting number multiplied by 17. 4. Interpret the fourth character of input as a hexadecimal digit; let the blue component of result be the resulting number multiplied by 17. 5. Return result. 7. Replace any characters in input that have a Unicode code point greater than U+FFFF (i.e., any characters that are not in the basic multilingual plane) with the two-character string "00". 8. If input is longer than 128 characters, truncate input, leaving only the first 128 characters. 9. If the first character in input is a U+0023 NUMBER SIGN character (#), remove it. 10. Replace any character in input that is not an ASCII hex digit with the character U+0030 DIGIT ZERO (0). 11. While input’s length is zero or not a multiple of three, append a U+0030 DIGIT ZERO (0) character to input. 12. Split input into three strings of equal length, to obtain three components. Let length be the length of those components (one third the length of input). 13. If length is greater than 8, then remove the leading length-8 characters in each component, and let length be 8. 14. While length is greater than two and the first character in each component is a U+0030 DIGIT ZERO (0) character, remove that character and reduce length by one. 15. If length is still greater than two, truncate each component, leaving only the first two characters in each. 16. Let result be a simple color. 17. Interpret the first component as a hexadecimal number; let the red component of result be the resulting number. 18. Interpret the second component as a hexadecimal number; let the green component of result be the resulting number. 19. Interpret the third component as a hexadecimal number; let the blue component of result be the resulting number. 20. Return result. 2.4.7. Space-separated tokens A set of space-separated tokens is a string containing zero or more words (known as tokens) separated by one or more space characters, where words consist of any string of one or more characters, none of which are space characters. A string containing a set of space-separated tokens may have leading or trailing space characters. An unordered set of unique space-separated tokens is a set of space-separated tokens where none of the tokens are duplicated. An ordered set of unique space-separated tokens is a set of space-separated tokens where none of the tokens are duplicated but where the order of the tokens is meaningful. Sets of space-separated tokens sometimes have a defined set of allowed values. When a set of allowed values is defined, the tokens must all be from that list of allowed values; other values are non-conforming. If no such set of allowed values is provided, then all values are conforming. How tokens in a set of space-separated tokens are to be compared (e.g., case-sensitively or not) is defined on a per-set basis. When a user agent has to split a string on spaces, it must use the following algorithm: 1. Let input be the string being parsed. 2. Let position be a pointer into input, initially pointing at the start of the string. 3. Let tokens be an ordered list of tokens, initially empty. 4. Skip white space 5. While position is not past the end of input: 1. Collect a sequence of characters that are not space characters. 2. Append the string collected in the previous step to tokens. 3. Skip white space 6. Return tokens. 2.4.8. Comma-separated tokens A set of comma-separated tokens is a string containing zero or more tokens each separated from the next by a single U+002C COMMA character (,), where tokens consist of any string of zero or more characters, neither beginning nor ending with space characters, nor containing any U+002C COMMA characters (,), and optionally surrounded by space characters. For instance, the string " a ,b, ,d d " consists of four tokens: "a", "b", the empty string, and "d d". Leading and trailing white space around each token doesn’t count as part of the token, and the empty string can be a token. Sets of comma-separated tokens sometimes have further restrictions on what consists a valid token. When such restrictions are defined, the tokens must all fit within those restrictions; other values are non-conforming. If no such restrictions are specified, then all values are conforming. When a user agent has to split a string on commas, it must use the following algorithm: 1. Let input be the string being parsed. 2. Let position be a pointer into input, initially pointing at the start of the string. 3. Let tokens be an ordered list of tokens, initially empty. 4. Token: If position is past the end of input, jump to the last step. 5. Collect a sequence of characters that are not U+002C COMMA characters (,). Let s be the resulting sequence (which might be the empty string). 6. Strip leading and trailing white space from s. 7. Append s to tokens. 8. If position is not past the end of input, then the character at position is a U+002C COMMA character (,); advance position past that character. 9. Jump back to the step labeled token. 10. Return tokens. 2.4.9. References A valid hash-name reference to an element of type type is a string consisting of a U+0023 NUMBER SIGN character (#) followed by a string which exactly matches the value of the name attribute of an element with type type in the document. The rules for parsing a hash-name reference to an element of type type, given a context node scope, are as follows: 1. If the string being parsed does not contain a U+0023 NUMBER SIGN character, or if the first such character in the string is the last character in the string, then return null and abort these steps. 2. Let s be the string from the character immediately after the first U+0023 NUMBER SIGN character in the string being parsed up to the end of that string. 3. Return the first element of type type in tree order in the subtree rooted at scope that has an id attribute whose value is a case-sensitive match for s or a name attribute whose value is a compatibility caseless match for s. 2.4.10. Media queries A string is a valid media query list if it matches the production of the Media Queries specification. [MEDIAQ] A string matches the environment of the user if it is the empty string, a string consisting of only space characters, or is a media query list that matches the user’s environment according to the definitions given in the Media Queries specification. [MEDIAQ] 2.5. URLs 2.5.1. Terminology A URL is a valid URL if it conforms to the authoring conformance requirements in the WHATWG URL specification. [URL] A string is a valid non-empty URL if it is a valid URL but it is not the empty string. A string is a valid URL potentially surrounded by spaces if, after stripping leading and trailing white space from it, it is a valid URL. A string is a valid non-empty URL potentially surrounded by spaces if, after stripping leading and trailing white space from it, it is a valid non-empty URL. This specification defines the URL about:legacy-compat as a reserved, though unresolvable, about: URL, for use in DOCTYPEs in HTML documents when needed for compatibility with XML tools. [RFC6694] This specification defines the URL about:html-kind as a reserved, though unresolvable, about: URL, that is used as an identifier for kinds of media tracks. [RFC6694] This specification defines the URL about:srcdoc as a reserved, though unresolvable, about: URL, that is used as the document’s URL of iframe srcdoc documents. [RFC6694] The fallback base URL of a Document object is the absolute URL obtained by running these substeps: 1. If document is an iframe srcdoc document, then return the document base URL of the Document’s browsing context’s browsing context container’s node document. 2. If document’s URL is about:blank, and the Document’s browsing context has a creator browsing context, then return the creator base URL. 3. Return document’s URL. The document base URL of a Document object is the absolute URL obtained by running these substeps: 1. If there is no base element that has an href attribute in the Document, then the document base URL is the Document's fallback base URL; abort these steps. 2. Otherwise, the document base URL is the frozen base URL of the first base element in the Document that has an href attribute, in tree order. 2.5.2. Parsing URLs Parsing a URL is the process of taking a URL string and obtaining the URL record that it implies. While this process is defined in the WHATWG URL specification, this specification defines a wrapper for convenience. [URL] This wrapper is only useful when the character encoding for the URL parser has to match that of the document or environment settings object for legacy reasons. When that is not the case the URL parser can be used directly. To parse a URL url, relative to either a document or environment settings object, the user agent must use the following steps. Parsing a URL either results in failure or a resulting URL string and resulting URL record. 1. Let encoding be document’s character encoding, if document was given, and environment settings object’s API URL character encoding otherwise. 2. Let baseURL be document’s base URL, if document was given, and environment settings object’s API base URL otherwise. 3. Let urlRecord be the result of applying the URL parser to url, with baseURL and encoding. 4. If urlRecord is failure, then abort these steps with an error. 5. Let urlString be the result of applying the URL serializer to urlRecord. 6. Return urlString as the resulting URL string and urlRecord as the resulting URL record. 2.5.3. Dynamic changes to base URLs When a document’s document base URL changes, all elements in that document are affected by a base URL change. The following are base URL change steps, which run when an element is affected by a base URL change (as defined by the DOM specification): If the element creates a hyperlink If the URL identified by the hyperlink is being shown to the user, or if any data derived from that URL is affecting the display, then the href attribute should be reparsed relative to the element’s node document and the UI updated appropriately. For example, the CSS :link/:visited pseudo-classes might have been affected. If the element is a q, blockquote, ins, or del element with a cite attribute If the URL identified by the cite attribute is being shown to the user, or if any data derived from that URL is affecting the display, then the URL should be reparsed relative to the element’s node document and the UI updated appropriately. Otherwise The element is not directly affected. For instance, changing the base URL doesn’t affect the image displayed by img elements, although subsequent accesses of the src IDL attribute from script will return a new absolute URL that might no longer correspond to the image being shown. 2.6. Fetching resources 2.6.1. Terminology User agents can implement a variety of transfer protocols, but this specification mostly defines behavior in terms of HTTP. [HTTP] The HTTP GET method is equivalent to the default retrieval action of the protocol. For example, RETR in FTP. Such actions are idempotent and safe, in HTTP terms. The HTTP response codes are equivalent to statuses in other protocols that have the same basic meanings. For example, a "file not found" error is equivalent to a 404 code, a server error is equivalent to a 5xx code, and so on. The HTTP headers are equivalent to fields in other protocols that have the same basic meaning. For example, the HTTP authentication headers are equivalent to the authentication aspects of the FTP protocol. A referrer source is either a Document or a URL. To create a potential-CORS request, given a url, corsAttributeState, and an optional same-origin fallback flag, run these steps: 1. Let mode be "no-cors" if corsAttributeState is No CORS, and "cors" otherwise. 2. If same-origin fallback flag is set and mode is "no-cors", set mode to "same-origin". 3. Let credentialsMode be "include". 4. If corsAttributeState is Anonymous, set credentialsMode to "same-origin". 5. Let request be a new request whose URL is url, destination is "subresource", mode is mode, credentials mode is credentialsMode, and whose use-URL-credentials flag is set. 2.6.2. Processing model When a user agent is to fetch a resource or URL, optionally from an origin origin, optionally using a specific referrer source as an override referrer source, and optionally with any of a synchronous flag, a manual redirect flag, a force same-origin flag, and a block cookies flag, the following steps must be run. (When a URL is to be fetched, the URL identifies a resource to be obtained.) 1. If there is a specific override referrer source, and it is a URL, then let referrer be the override referrer source, and jump to the step labeled clean referrer. 2. Let document be the appropriate Document as given by the following list: If there is a specific override referrer source The override referrer source. When navigating The active document of the source browsing context. When fetching resources for an element The element’s Document. 3. While document is an iframe srcdoc document, let document be document’s browsing context’s browsing context container’s Document instead. 4. If the origin of Document is not a scheme/host/port tuple, then set referrer to the empty string and jump to the step labeled Clean referrer. 5. Let referrer be document’s URL. 6. Clean referrer: Apply the URL parser to referrer and let parsed referrer be the resulting URL record. 7. Let referrer be the result of applying the URL serializer to parsed referrer, with the exclude fragment flag set. 8. If referrer is not the empty string, is not a data: URL, and is not the URL "about:blank", then generate the address of the resource from which Request-URIs are obtained as required by HTTP for the Referer (sic) header from referrer. [HTTP] Otherwise, the Referer (sic) header must be omitted, regardless of its value. 9. If the algorithm was not invoked with the synchronous flag, perform the remaining steps in parallel. 10. If the Document with which any tasks queued by this algorithm would be associated doesn’t have an associated browsing context, then abort these steps. 11. This is the main step. If the resource is identified by an absolute URL, and the resource is to be obtained using an idempotent action (such as an HTTP GET or equivalent), and it is already being downloaded for other reasons (e.g., another invocation of this algorithm), and this request would be identical to the previous one (e.g., same Accept and Origin headers), and the user agent is configured such that it is to reuse the data from the existing download instead of initiating a new one, then use the results of the existing download instead of starting a new one. Otherwise, if the resource is identified by an absolute URL with a scheme that does not define a mechanism to obtain the resource (e.g., it is a mailto: URL) or that the user agent does not support, then act as if the resource was an HTTP 204 No Content response with no other metadata. Otherwise, if the resource is identified by the URL about:blank, then the resource is immediately available and consists of the empty string, with no metadata. Otherwise, at a time convenient to the user and the user agent, download (or otherwise obtain) the resource, applying the semantics of the relevant specifications (e.g., performing an HTTP GET or POST operation, or reading the file from disk, or expanding data: URLs, etc). For the purposes of the Referer (sic) header, use the address of the resource from which Request-URIs are obtained generated in the earlier step. For the purposes of the Origin header, if the fetching algorithm was explicitly initiated from an origin, then the origin that initiated the HTTP request is origin. Otherwise, this is a request from a "privacy-sensitive" context. [ORIGIN] 12. If the algorithm was not invoked with the block cookies flag, and there are cookies to be set, update the cookies. [COOKIES] (This is a fingerprinting vector.) 13. If the fetched resource is an HTTP redirect or equivalent, then: If the force same-origin flag is set and the URL of the target of the redirect does not have the same origin as the URL for which the fetch algorithm was invoked Abort these steps and return failure from this algorithm, as if the remote host could not be contacted. If the manual redirect flag is set Continue, using the fetched resource (the redirect) as the result of the algorithm. If the calling algorithm subsequently requires the user agent to transparently follow the redirect, then the user agent must resume this algorithm from the main step, but using the target of the redirect as the resource to fetch, rather than the original resource. Otherwise First, apply any relevant requirements for redirects (such as showing any appropriate prompts). Then, redo main step, but using the target of the redirect as the resource to fetch, rather than the original resource. For HTTP requests, the new request must include the same headers as the original request, except for headers for which other requirements are specified (such as the Host header). [HTTP] The HTTP specification requires that 301, 302, and 307 redirects, when applied to methods other than the safe methods, not be followed without user confirmation. That would be an appropriate prompt for the purposes of the requirement in the paragraph above. [HTTP] 14. If the algorithm was not invoked with the synchronous flag: When the resource is available, or if there is an error of some description, queue a task that uses the resource as appropriate. If the resource can be processed incrementally, as, for instance, with a progressively interlaced JPEG or an HTML file, additional tasks may be queued to process the data as it is downloaded. The task source for these tasks is the networking task source. Otherwise, return the resource or error information to the calling algorithm. If the user agent can determine the actual length of the resource being fetched for an instance of this algorithm, and if that length is finite, then that length is the file’s size. Otherwise, the subject of the algorithm (that is, the resource being fetched) has no known size. (For example, the HTTP Content-Length header might provide this information.) The user agent must also keep track of the number of bytes downloaded for each instance of this algorithm. This number must exclude any out-of-band metadata, such as HTTP headers. The navigation processing model handles redirects itself, overriding the redirection handling that would be done by the fetching algorithm. Whether the type sniffing rules apply to the fetched resource depends on the algorithm that invokes the rules — they are not always applicable. 2.6.3. Encrypted HTTP and related security concerns Anything in this specification that refers to HTTP also applies to HTTP-over-TLS, as represented by URLs representing the https scheme. [HTTP] User agents should report certificate errors to the user and must either refuse to download resources sent with erroneous certificates or must act as if such resources were in fact served with no encryption. User agents should warn the user that there is a potential problem whenever the user visits a page that the user has previously visited, if the page uses less secure encryption on the second visit. Not doing so can result in users not noticing man-in-the-middle attacks. If a user connects to a server with a self-signed certificate, the user agent could allow the connection but just act as if there had been no encryption. If the user agent instead allowed the user to override the problem and then displayed the page as if it was fully and safely encrypted, the user could be easily tricked into accepting man-in-the-middle connections. If a user connects to a server with full encryption, but the page then refers to an external resource that has an expired certificate, then the user agent will act as if the resource was unavailable, possibly also reporting the problem to the user. If the user agent instead allowed the resource to be used, then an attacker could just look for "secure" sites that used resources from a different host and only apply man-in-the-middle attacks to that host, for example taking over scripts in the page. If a user bookmarks a site that uses a CA-signed certificate, and then later revisits that site directly but the site has started using a self-signed certificate, the user agent could warn the user that a man-in-the-middle attack is likely underway, instead of simply acting as if the page was not encrypted. 2.6.4. Determining the type of a resource The Content-Type metadata of a resource must be obtained and interpreted in a manner consistent with the requirements of the MIME Sniffing specification. [MIMESNIFF] The computed type of a resource must be found in a manner consistent with the requirements given in the MIME Sniffing specification for finding the computed media type of the relevant sequence of octets. [MIMESNIFF] The rules for sniffing images specifically and the rules for distinguishing if a resource is text or binary are also defined in the MIME Sniffing specification. Both sets of rules return a MIME type as their result. [MIMESNIFF] It is imperative that the rules in the MIME Sniffing specification be followed exactly. When a user agent uses different heuristics for content type detection than the server expects, security problems can occur. For more details, see the MIME Sniffing specification. [MIMESNIFF] 2.6.5. Extracting character encodings from meta elements The algorithm for extracting a character encoding from a meta element, given a string s, is as follows. It either returns a character encoding or nothing. 1. Let position be a pointer into s, initially pointing at the start of the string. 2. Loop: Find the first seven characters in s after position that are an ASCII case-insensitive match for the word "charset". If no such match is found, return nothing and abort these steps. 3. Skip any space characters that immediately follow the word "charset" (there might not be any). 4. If the next character is not a U+003D EQUALS SIGN (=), then move position to point just before that next character, and jump back to the step labeled loop. 5. Skip any space characters that immediately follow the equals sign (there might not be any). 6. Process the next character as follows: If it is a U+0022 QUOTATION MARK character (") and there is a later U+0022 QUOTATION MARK character (") in s If it is a U+0027 APOSTROPHE character (') and there is a later U+0027 APOSTROPHE character (') in s Return the result of getting an encoding from the substring that is between this character and the next earliest occurrence of this character. If it is an unmatched U+0022 QUOTATION MARK character (") If it is an unmatched U+0027 APOSTROPHE character (') If there is no next character Return nothing. Otherwise Return the result of getting an encoding from the substring that consists of this character up to but not including the first space character or U+003B SEMICOLON character (;), or the end of s, whichever comes first. This algorithm is distinct from those in the HTTP specification (for example, HTTP doesn’t allow the use of single quotes and requires supporting a backslash-escape mechanism that is not supported by this algorithm). While the algorithm is used in contexts that, historically, were related to HTTP, the syntax as supported by implementations diverged some time ago. [HTTP] 2.6.6. CORS settings attributes A CORS settings attribute is an enumerated attribute. The following table lists the keywords and states for the attribute — the keywords in the left column map to the states in the cell in the second column on the same row as the keyword. Keyword State Brief description Requests for the element will have their anonymous Anonymous mode set to "cors" and their credentials mode set to "same-origin". Requests for the element will have their use-credentials Use Credentials mode set to "cors" and their credentials mode set to "include". The empty string is also a valid keyword, and maps to the Anonymous state. The attribute’s invalid value default is the Anonymous state. For the purposes of reflection, the canonical case for the Anonymous state is the anonymous keyword. The missing value default, used when the attribute is omitted, is the No CORS state. 2.6.7. Referrer policy attributes A referrer policy attribute is an enumerated attribute. Each referrer policy, including the empty string, is a keyword for this attribute, mapping to a state of the same name. The attribute’s invalid value default and missing value default are both the empty string state. The impact of these states on the processing model of various fetches is defined in more detail throughout this specification, in the WHATWG Fetch standard, and in Referrer Policy. [FETCH] [REFERRERPOLICY] Several signals can contribute to which processing model is used for a given fetch; a referrer policy attribute is only one of them. In general, the order in which these signals are processed are: 1. First, the presence of a noreferrer link type; 2. Then, the value of a referrer policy attribute; 3. Then, the presence of any meta element with name attribute set to referrer. 4. Finally, the Referrer-Policy HTTP header. 2.7. Common DOM interfaces 2.7.1. Reflecting content attributes in IDL attributes Some IDL attributes are defined to reflect a particular content attribute. This means that on getting, the IDL attribute returns the current value of the content attribute, and on setting, the IDL attribute changes the value of the content attribute to the given value. In general, on getting, if the content attribute is not present, the IDL attribute must act as if the content attribute’s value is the empty string; and on setting, if the content attribute is not present, it must first be added. If a reflecting IDL attribute is a USVString attribute whose content attribute is defined to contain a URLs, then on getting, if the content attribute is absent, the IDL attribute must return the empty string. Otherwise, the IDL attribute must parse the value of the content attribute relative to the element’s node document and if that is successful, return the resulting URL string. If parsing fails, then the value of the content attribute must be returned instead, converted to a USVString. On setting, the content attribute must be set to the specified new value. If a reflecting IDL attribute is a DOMString attribute whose content attribute is an enumerated attribute, and the IDL attribute is limited to only known values, then, on getting, the IDL attribute must return the conforming value associated with the state the attribute is in (in its canonical case), if any, or the empty string if the attribute is in a state that has no associated keyword value or if the attribute is not in a defined state (e.g., the attribute is missing and there is no missing value default); and on setting, the content attribute must be set to the specified new value. If a reflecting IDL attribute is a nullable DOMString attribute whose content attribute is an enumerated attribute, then, on getting, if the corresponding content attribute is in its missing value default then the IDL attribute must return null, otherwise, the IDL attribute must return the conforming value associated with the state the attribute is in (in its canonical case); and on setting, if the new value is null, the content attribute must be removed, and otherwise, the content attribute must be set to the specified new value. If a reflecting IDL attribute is a DOMString or USVString attribute but doesn’t fall into any of the above categories, then the getting and setting must be done in a transparent, case-preserving manner. If a reflecting IDL attribute is a boolean attribute, then on getting the IDL attribute must return true if the content attribute is set, and false if it is absent. On setting, the content attribute must be removed if the IDL attribute is set to false, and must be set to the empty string if the IDL attribute is set to true. (This corresponds to the rules for boolean content attributes.) If a reflecting IDL attribute has a signed integer type (long) then, on getting, the content attribute must be parsed according to the rules for parsing signed integers, and if that is successful, and the value is in the range of the IDL attribute’s type, the resulting value must be returned. If, on the other hand, it fails or returns an out of range value, or if the attribute is absent, then the default value must be returned instead, or 0 if there is no default value. On setting, the given value must be converted to the shortest possible string representing the number as a valid integer and then that string must be used as the new content attribute value. If a reflecting IDL attribute has a signed integer type (long) that is limited to only non-negative numbers then, on getting, the content attribute must be parsed according to the rules for parsing non-negative integers, and if that is successful, and the value is in the range of the IDL attribute’s type, the resulting value must be returned. If, on the other hand, it fails or returns an out of range value, or if the attribute is absent, the default value must be returned instead, or -1 if there is no default value. On setting, if the value is negative, the user agent must throw an IndexSizeError exception. Otherwise, the given value must be converted to the shortest possible string representing the number as a valid non-negative integer and then that string must be used as the new content attribute value. If a reflecting IDL attribute has an unsigned integer type (unsigned long) then, on getting, the content attribute must be parsed according to the rules for parsing non-negative integers, and if that is successful, and the value is in the range 0 to 2147483647 inclusive, the resulting value must be returned. If, on the other hand, it fails or returns an out of range value, or if the attribute is absent, the default value must be returned instead, or 0 if there is no default value. On setting, first, if the new value is in the range 0 to 2147483647, then let n be the new value, otherwise let n be the default value, or 0 if there is no default value; then, n must be converted to the shortest possible string representing the number as a valid non-negative integer and that string must be used as the new content attribute value. If a reflecting IDL attribute has an unsigned integer type (unsigned long) that is limited to only non-negative numbers greater than zero, then the behavior is similar to the previous case, but zero is not allowed. On getting, the content attribute must first be parsed according to the rules for parsing non-negative integers, and if that is successful, and the value is in the range 1 to 2147483647 inclusive, the resulting value must be returned. If, on the other hand, it fails or returns an out of range value, or if the attribute is absent, the default value must be returned instead, or 1 if there is no default value. On setting, if the value is zero, the user agent must throw an IndexSizeError exception. Otherwise, first, if the new value is in the range 1 to 2147483647, then let n be the new value, otherwise let n be the default value, or 1 if there is no default value; then, n must be converted to the shortest possible string representing the number as a valid non-negative integer and that string must be used as the new content attribute value. If a reflecting IDL attribute has a floating-point number type (double or unrestricted double), then, on getting, the content attribute must be parsed according to the rules for parsing floating-point number values, and if that is successful, the resulting value must be returned. If, on the other hand, it fails, or if the attribute is absent, the default value must be returned instead, or 0.0 if there is no default value. On setting, the given value must be converted to the best representation of the number as a floating-point number and then that string must be used as the new content attribute value. If a reflecting IDL attribute has a floating-point number type (double or unrestricted double) that is limited to numbers greater than zero, then the behavior is similar to the previous case, but zero and negative values are not allowed. On getting, the content attribute must be parsed according to the rules for parsing floating-point number values, and if that is successful and the value is greater than 0.0, the resulting value must be returned. If, on the other hand, it fails or returns an out of range value, or if the attribute is absent, the default value must be returned instead, or 0.0 if there is no default value. On setting, if the value is less than or equal to zero, then the value must be ignored. Otherwise, the given value must be converted to the best representation of the number as a floating-point number and then that string must be used as the new content attribute value. The values Infinity and Not-a-Number (NaN) values throw an exception on setting, as defined in the Web IDL specification. [WEBIDL] If a reflecting IDL attribute has the type DOMTokenList, then on getting it must return a DOMTokenList object whose associated element is the element in question and whose associated attribute’s local name is the name of the attribute in question. If a reflecting IDL attribute has the type HTMLElement, or an interface that descends from HTMLElement, then, on getting, it must run the following algorithm (stopping at the first point where a value is returned): 1. If the corresponding content attribute is absent, then the IDL attribute must return null. 2. Let candidate be the element that the document.getElementById() method would find when called on the content attribute’s element’s node document if it were passed as its argument the current value of the corresponding content attribute. 3. If candidate is null, or if it is not type-compatible with the IDL attribute, then the IDL attribute must return null. 4. Otherwise, it must return candidate. On setting, if the given element has an id attribute, and has the same tree as the element of the attribute being set, and the given element is the first element in that tree whose ID is the value of that id attribute, then the content attribute must be set to the value of that id attribute. Otherwise, the content attribute must be set to the empty string. 2.7.2. Collections The HTMLFormControlsCollection and HTMLOptionsCollection interfaces are collections derived from the HTMLCollection interface. The HTMLAllCollection however, is independent as it has a variety of unique quirks that are not desirable to inherit from HTMLCollection. 2.7.2.1. The HTMLAllCollection interface The HTMLAllCollection interface is used for the legacy document.all attribute. It operates similarly to HTMLCollection; it also supports a variety of other legacy features required for web compatibility such as the ability to be invoked like a function (legacycaller). All HTMLAllCollection objects are rooted at a Document and have a filter that matches all elements, so the elements represented by the collection of an HTMLAllCollection object consist of all the descendant elements of the root Document. [LegacyUnenumerableNamedProperties] interface HTMLAllCollection { readonly attribute unsigned long length; getter Element? (unsigned long index); getter (HTMLCollection or Element)? namedItem(DOMString name); legacycaller (HTMLCollection or Element)? item(optional DOMString nameOrItem); }; collection . length Returns the number of elements in the collection. element = collection . item(index) element = collection(index) element = collection[index] Returns the item with index index from the collection (determined by tree order. element = collection . item(name) collection = collection . item(name) element = collection . namedItem(name) collection = collection . namedItem(name) element = collection(name) collection = collection(name) element = collection[name] collection = collection[name] Returns the item with ID or name name from the collection. If there are multiple matching items, then an HTMLCollection object containing all those elements is returned. The name attribute’s value provides a name for button, input, select, and textarea. Similarly, iframe's name, object's name, meta's name, map's name, and form's name attribute’s value provides a name for their respective elements. Only the elements mentioned have a name for the purpose of this method. The object’s supported property indices are as defined for HTMLCollection objects. The supported property names consist of the non-empty values of all the id and name attributes of all the elements represented by the collection, in tree order, ignoring later duplicates, with the id of an element preceding its name if it contributes both, they differ from each other, and neither is the duplicate of an earlier entry. On getting, the length attribute must return the number of nodes represented by the collection. The indexed property getter must return the result of getting the "all"-indexed element from this HTMLAllCollection given the passed index. The namedItem(name) method must return the result of getting the "all"-named element or elements from this HTMLAllCollection given name. The item(nameOrIndex) method (and the legacycaller behavior) must act according to the following algorithm: 1. If nameOrIndex was not provided, return null. 2. If nameOrIndex, converted to a JavaScript string value, is an array index property name, return the result of getting the "all"-indexed element from this HTMLAllCollection given the number represented by nameOrIndex. 3. Return the result of getting the "all"-named element or elements from this HTMLAllCollection given nameOrIndex. The following elements are considered "all"-named elements: a, applet, button, embed, form, frame, frameset, iframe, img, input, map, meta, object, select, and textarea. To get the "all"-indexed element from an HTMLAllCollection collection given an index index, return the element with index index in collection, or null if there is no such element at index. To get the "all"-named element or elements from an HTMLAllCollection collection given a name name, run the following algorithm: 1. If name is the empty string, return null. 2. Let subCollection be an HTMLCollection object rooted at the same Document as collection, whose filter matches only elements that are either: * "all"-named elements with a name attribute equal to name, or, * elements with an ID equal to name. 3. If there is exactly one element in subCollection, then return that element. 4. Otherwise, if subCollection is empty, return null. 5. Otherwise, return subCollection. 2.7.2.2. The HTMLFormControlsCollection interface The HTMLFormControlsCollection interface is used for collections of listed elements in form elements. interface HTMLFormControlsCollection : HTMLCollection { // inherits length and item() getter (RadioNodeList or Element)? namedItem(DOMString name); // shadows inherited namedItem() }; interface RadioNodeList : NodeList { attribute DOMString value; }; collection . length Returns the number of elements in the collection. element = collection . item(index) element = collection[index] Returns the item with index index from the collection. The items are sorted in tree order. element = collection . namedItem(name) radioNodeList = collection . namedItem(name) element = collection[name] radioNodeList = collection[name] Returns the item with ID or name name from the collection. If there are multiple matching items, then a RadioNodeList object containing all those elements is returned. radioNodeList . value [ = value ] Returns the value of the first checked radio button represented by the object. Can be set, to check the first radio button with the given value represented by the object. The object’s supported property indices are as defined for HTMLCollection objects. The supported property names consist of the non-empty values of all the id and name attributes of all the elements represented by the collection, in tree order, ignoring later duplicates, with the id of an element preceding its name if it contributes both, they differ from each other, and neither is the duplicate of an earlier entry. The properties exposed in this way must be unenumerable. The namedItem(name) method must act according to the following algorithm: 1. If name is the empty string, return null and stop the algorithm. 2. If, at the time the method is called, there is exactly one node in the collection that has either an id attribute or a name attribute equal to name, then return that node and stop the algorithm. 3. Otherwise, if there are no nodes in the collection that have either an id attribute or a name attribute equal to name, then return null and stop the algorithm. 4. Otherwise, create a new RadioNodeList object representing a live view of the HTMLFormControlsCollection object, further filtered so that the only nodes in the RadioNodeList object are those that have either an id attribute or a name attribute equal to name. The nodes in the RadioNodeList object must be sorted in tree order. 5. Return that RadioNodeList object. ---------------------------------------------------------------------- Members of the RadioNodeList interface inherited from the NodeList interface must behave as they would on a NodeList object. The value IDL attribute on the RadioNodeList object, on getting, must return the value returned by running the following steps: 1. Let element be the first element in tree order represented by the RadioNodeList object that is an input element whose type attribute is in the Radio Button state and whose checkedness is true. Otherwise, let it be null. 2. If element is null, return the empty string. 3. If element is an element with no value attribute, return the string "on". 4. Otherwise, return the value of element’s value attribute. On setting, the value IDL attribute must run the following steps: 1. If the new value is the string "on": let element be the first element in tree order represented by the RadioNodeList object that is an input element whose type attribute is in the Radio Button state and whose value content attribute is either absent, or present and equal to the new value, if any. If no such element exists, then instead let element be null. Otherwise: let element be the first element in tree order represented by the RadioNodeList object that is an input element whose type attribute is in the Radio Button state and whose value content attribute is present and equal to the new value, if any. If no such element exists, then instead let element be null. 2. If element is not null, then set its checkedness to true. 2.7.2.3. The HTMLOptionsCollection interface The HTMLOptionsCollection interface is used for collections of option elements. It is always rooted on a select element and has attributes and methods that manipulate that element’s descendants. interface HTMLOptionsCollection : HTMLCollection { // inherits item(), namedItem() attribute unsigned long length; // shadows inherited length setter void (unsigned long index, HTMLOptionElement? option); void add((HTMLOptionElement or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null); void remove(long index); attribute long selectedIndex; }; collection . length [ = value ] Returns the number of elements in the collection. When set to a smaller number, truncates the number of option elements in the corresponding container. When set to a greater number, adds new blank option elements to that container. element = collection . item(index) element = collection[index] Returns the item with index index from the collection. The items are sorted in tree order. collection[index] = element When index is a greater number than the number of items in the collection, adds new blank option elements in the corresponding container. When set to null, removes the item at index index from the collection. When set to an option element, adds or replaces it at index index from the collection. element = collection . namedItem(name) element = collection[name] Returns the item with ID or name name from the collection. If there are multiple matching items, then the first is returned. collection . add(element [, before ] ) Inserts element before the node given by before. The before argument can be a number, in which case element is inserted before the item with that number, or an element from the collection, in which case element is inserted before that element. If before is omitted, null, or a number out of range, then element will be added at the end of the list. This method will throw a HierarchyRequestError exception if element is an ancestor of the element into which it is to be inserted. collection . remove(index) Removes the item with index index from the collection. collection . selectedIndex [ = value ] Returns the index of the first selected item, if any, or -1 if there is no selected item. Can be set, to change the selection. The object’s supported property indices are as defined for HTMLCollection objects. On getting, the length attribute must return the number of nodes represented by the collection. On setting, the behavior depends on whether the new value is equal to, greater than, or less than the number of nodes represented by the collection at that time. If the number is the same, then setting the attribute must do nothing. If the new value is greater, then n new option elements with no attributes and no child nodes must be appended to the select element on which the HTMLOptionsCollection is rooted, where n is the difference between the two numbers (new value minus old value). Mutation events must be fired as if a DocumentFragment containing the new option elements had been inserted. If the new value is lower, then the last n nodes in the collection must be removed from their parent nodes, where n is the difference between the two numbers (old value minus new value). Setting length never removes or adds any optgroup elements, and never adds new children to existing optgroup elements (though it can remove children from them). The supported property names consist of the non-empty values of all the id and name attributes of all the elements represented by the collection, in tree order, ignoring later duplicates, with the id of an element preceding its name if it contributes both, they differ from each other, and neither is the duplicate of an earlier entry. The properties exposed in this way must be unenumerable. When the user agent is to set the value of a new indexed property or set the value of an existing indexed property for a given property index index to a new value value, it must run the following algorithm: 1. If value is null, invoke the steps for the remove method with index as the argument, and abort these steps. 2. Let length be the number of nodes represented by the collection. 3. Let n be index minus length. 4. If n is greater than zero, then append a DocumentFragment consisting of n-1 new option elements with no attributes and no child nodes to the select element on which the HTMLOptionsCollection is rooted. 5. If n is greater than or equal to zero, append value to the select element. Otherwise, replace the indexth element in the collection by value. The add(element, before) method must act according to the following algorithm: 1. If element is an ancestor of the select element on which the HTMLOptionsCollection is rooted, then throw a HierarchyRequestError exception and abort these steps. 2. If before is an element, but that element isn’t a descendant of the select element on which the HTMLOptionsCollection is rooted, then throw a NotFoundError exception and abort these steps. 3. If element and before are the same element, then return and abort these steps. 4. If before is a node, then let reference be that node. Otherwise, if before is an integer, and there is a beforeth node in the collection, let reference be that node. Otherwise, let reference be null. 5. If reference is not null, let parent be the parent node of reference. Otherwise, let parent be the select element on which the HTMLOptionsCollection is rooted. 6. Pre-insert element into parent node before reference. The remove(index) method must act according to the following algorithm: 1. If the number of nodes represented by the collection is zero, abort these steps. 2. If index is not a number greater than or equal to 0 and less than the number of nodes represented by the collection, abort these steps. 3. Let element be the indexth element in the collection. 4. Remove element from its parent node. The selectedIndex IDL attribute must act like the identically named attribute on the select element on which the HTMLOptionsCollection is rooted 2.7.3. The DOMStringList interface The DOMStringList interface is a non-fashionable retro way of representing a list of strings. interface DOMStringList { readonly attribute unsigned long length; getter DOMString? item(unsigned long index); boolean contains(DOMString string); }; New APIs must use sequence or equivalent rather than DOMStringList. strings . length Returns the number of strings in strings. strings[index] strings . item()(index) Returns the string with index index from strings. strings . contains()(string) Returns true if strings contains string, and false otherwise. Each DOMStringList object has an associated list. The supported property indices for a DOMStringList object are the numbers zero to the associated list’s size minus one. If its associated list is empty, it has no supported property indices. The length attribute’s getter must this DOMStringList object’s associated list’s size. The item(index) method, when invoked, must return the indexth item in this DOMStringList object’s associated list, or null if index plus one is less than this DOMStringList object’s associated list’s size. The contains(string) method, when invoked, must return true if this DOMStringList object’s associated list contains string, and false otherwise. 2.7.4. Garbage collection There is an implied strong reference from any IDL attribute that returns a pre-existing object to that object. For example, the window.document attribute on the Window object means that there is a strong reference from a Window object to its Document object. Similarly, there is always a strong reference from a Document to any descendant nodes, and from any node to its owner node document. 2.8. Namespaces The HTML namespace is: http://www.w3.org/1999/xhtml The MathML namespace is: http://www.w3.org/1998/Math/MathML The SVG namespace is: http://www.w3.org/2000/svg The XLink namespace is: http://www.w3.org/1999/xlink The XML namespace is: http://www.w3.org/XML/1998/namespace The XMLNS namespace is: http://www.w3.org/2000/xmlns/ ---------------------------------------------------------------------- Data mining tools and other user agents that perform operations on content without running scripts, evaluating CSS or XPath expressions, or otherwise exposing the resulting DOM to arbitrary content, may "support namespaces" by just asserting that their DOM node analogs are in certain namespaces, without actually exposing the above strings. ---------------------------------------------------------------------- In the HTML syntax, namespace prefixes and namespace declarations do not have the same effect as in XML. For instance, the colon has no special meaning in HTML element names. 2.9. Safe passing of structured data This section uses the terminology and typographic conventions from the JavaScript specification. [ECMA-262] 2.9.1. Serializable objects Serializable objects support being serialized, and later deserialized, in a way that is independent of any given JavaScript Realm. This allows them to be stored on disk and later restored, or cloned across Document and Worker boundaries (including across documents of different origins or in different event loops). Not all objects are serializable objects, and not all aspects of objects that are serializable objects are necessarily preserved when they are serialized. Platform objects can be serializable objects if they implement only interfaces decorated with the [Serializable] IDL extended attribute. Such interfaces must also define the following algorithms: serialization steps, taking a platform object value, a Record serialized, and a boolean forStorage A set of steps that serializes the data in value into fields of serialized. The resulting data serialized into serialized must be independent of any JavaScript Realm. These steps may throw an exception if serialization is not possible. These steps may perform a sub-serialization to serialize nested data structures. They should not call StructuredSerialize directly, as doing so will omit the important memory argument. The introduction of these steps should omit mention of the forStorage argument if it is not relevant to the algorithm. deserialization steps, taking a Record serialized and a platform object value A set of steps that deserializes the data in serialized, using it to set up value as appropriate. value will be a newly-created instance of the platform object type in question, with none of its internal data set up; setting that up is the job of these steps. These steps may throw an exception if deserialization is not possible. These steps may perform a sub-deserialization to deserialize nested data structures. They should not call StructuredDeserialize directly, as doing so will omit the important targetRealm and memory arguments. It is up to the definition of individual platform objects to determine what data is serialized and deserialized by these steps. Typically the steps are very symmetric. The [Serializable] extended attribute must take no arguments, and must not appear on anything other than an interface. It must appear only once on an interface. It must not be used on a callback interface. If it appears on a partial interface or an interface that is really a mixin, then it must also appear on the original or mixed-in-to interface, and any supplied serialization steps and deserialization steps for the partial interface or mixin should be understood as being appended to those of the original or mixed-in-to interface. Let’s say we were defining a platform object Person, which had associated with it two pieces of associated data: * a name value, which is a string; * and a best friend value, which is either another Person instance or null We could then define Person instances to be serializable objects by annotating the Person interface with the [Serializable] extended attribute, and defining the following accompanying algorithms: serialization steps 1. Set serialized.[[Name]] to value’s associated name value. 2. Let serializedBestFriend be the sub-serialization of value’s associated best friend value. 3. Set serialized.[[BestFriend]] to serializedBestFriend. deserialization steps 1. Set value’s associated name value to serialized.[[Name]]. 2. Let deserializedBestFriend be the sub-deserialization of serialized.[[BestFriend]]. 3. Set value’s associated best friend value to deserializedBestFriend. Objects defined in the JavaScript specification are handled by the StructuredSerialize abstract operation directly. Originally, this specification defined the concept of "cloneable objects", which could be cloned from one JavaScript Realm to another. However, to better specify the behavior of certain more complex situations, the model was updated to make the serialization and deserialization explicit. 2.9.2. Transferable objects Transferable objects support being transferred across event loops. Transferring is effectively recreating the object while sharing a reference to the underlying data and then detaching the object being transferred. This is useful to transfer ownership of expensive resources. Not all objects are transferable objects and not all aspects of objects that are transferable objects are necessarily preserved when transferred. Transferring is an irreversible and non-idempotent operation. Once an object has been transferred, it cannot be transferred, or indeed used, again. Platform objects can be transferable objects if they implement only interfaces decorated with the [Transferable] IDL extended attribute. Such interfaces must also define the following algorithms: transfer steps, taking a platform object value and a Record dataHolder A set of steps that transfers the data in value into fields of dataHolder. The resulting data held in dataHolder must be independent of any JavaScript Realm. These steps may throw an exception if transferral is not possible. transfer-receiving steps, taking a Record dataHolder and a platform object value A set of steps that receives the data in dataHolder, using it to set up value as appropriate. value will be a newly-created instance of the platform object type in question, with none of its internal data set up; setting that up is the job of these steps. These steps may throw an exception if it is not possible to receive the transfer. It is up to the definition of individual platform objects to determine what data is transferred by these steps. Typically the steps are very symmetric. The [Transferable] extended attribute must take no arguments, and must not appear on anything other than an interface. It must appear only once on an interface. It must not be used on a callback interface. If it appears on a partial interface or an interface that is really a mixin, then it must also appear on the original or mixed-in-to interface, and any supplied serialization steps and deserialization steps for the partial interface or mixin should be understood as being appended to those of the original or mixed-in-to interface. Platform objects that are transferable objects have a Detached internal slot. This is used to ensure that once a platform object has been transferred, it cannot be transferred again. Objects defined in the JavaScript specification are handled by the StructuredSerializeWithTransfer abstract operation directly. 2.9.3. StructuredSerializeInternal ( value, forStorage [ , memory ] ) The StructuredSerializeInternal abstract operation takes as input a JavaScript value value and serializes it to a Realm-independent form, represented here as a Record. This serialized form has all the information necessary to later deserialize into a new JavaScript value in a different Realm. This process can throw an exception, for example when trying to serialize un-serializable objects. 1. If memory was not supplied, let memory be an empty map. The purpose of the memory map is to avoid serializing objects twice. This ends up preserving cycles and the identity of duplicate objects in graphs. 2. If memory[value] exists, then return memory[value]. 3. Let deep be false. 4. If Type(value) is Undefined, Null, Boolean, String, or Number, then return { [[Type]]: "primitive", [[Value]]: value }. 5. If Type(value) is Symbol, then throw a "DataCloneError" DOMException. 6. Let serialized be an uninitialized value. 7. If value has a [[BooleanData]] internal slot, then set serialized to { [[Type]]: "Boolean", [[BooleanData]]: value.[[BooleanData]] }. 8. Otherwise, if value has a [[NumberData]] internal slot, then set serialized to { [[Type]]: "Number", [[NumberData]]: value.[[NumberData]] }. 9. Otherwise, if value has a [[StringData]] internal slot, then set serialized to { [[Type]]: "String", [[StringData]]: value.[[StringData]] }. 10. Otherwise, if value has a [[DateValue]] internal slot, then set serialized to { [[Type]]: "Date", [[DateValue]]: value.[[DateValue]] }. 11. Otherwise, if value has a [[RegExpMatcher]] internal slot, then set serialized to { [[Type]]: "RegExp", [[RegExpMatcher]]: value.[[RegExpMatcher]], [[OriginalSource]]: value.[[OriginalSource]], [[OriginalFlags]]: value.[[OriginalFlags]] }. 12. Otherwise, if value has an [[ArrayBufferData]] internal slot, then: 1. Let size be value.[[ArrayBufferByteLength]]. 2. If ! IsSharedArrayBuffer(value) is true, then: 1. If forStorage is true, then throw a "DataCloneError" DOMException. 2. Set serialized to { [[Type]]: "SharedArrayBuffer", [[ArrayBufferData]]: value.[[ArrayBufferData]], [[ArrayBufferByteLength]]: size, [[AgentCluster]]: the current Realm Record’s corresponding agent cluster }. 3. Otherwise: 1. If ! IsDetachedBuffer(value) is true, then throw a "DataCloneError" DOMException. 2. Let dataCopy be ? CreateByteDataBlock(size). This can throw a RangeError exception upon allocation failure. 3. Perform ! CopyDataBlockBytes(dataCopy, 0, value.[[ArrayBufferData]], 0, size). 4. Set serialized to { [[Type]]: "ArrayBuffer", [[ArrayBufferData]]: dataCopy, [[ArrayBufferByteLength]]: size }. 13. Otherwise, if value has a [[ViewedArrayBuffer]] internal slot, then: 1. Let buffer be the value of value’s [[ViewedArrayBuffer]] internal slot. 2. Let bufferSerialized be ? StructuredSerializeInternal(buffer, forStorage, memory). 3. Assert​: bufferSerialized.[[Type]] is "ArrayBuffer". 4. If value has a [[DataView]] internal slot, then set serialized to { [[Type]]: "ArrayBufferView", [[Constructor]]: "DataView", [[ArrayBufferSerialized]]: bufferSerialized, [[ByteLength]]: value.[[ByteLength]], [[ByteOffset]]: value.[[ByteOffset]] }. 5. Otherwise: 1. Assert​: value has a [[TypedArrayName]] internal slot. 2. Set serialized to { [[Type]]: "ArrayBufferView", [[Constructor]]: value.[[TypedArrayName]], [[ArrayBufferSerialized]]: bufferSerialized, [[ByteLength]]: value.[[ByteLength]], [[ByteOffset]]: value.[[ByteOffset]], [[ArrayLength]]: value.[[ArrayLength]] }. 14. Otherwise, if value has [[MapData]] internal slot, then: 1. Set serialized to { [[Type]]: "Map", [[MapData]]: a new empty List }. 2. Set deep to true. 15. Otherwise, if value has [[SetData]] internal slot, then: 1. Set serialized to { [[Type]]: "Set", [[SetData]]: a new empty List }. 2. Set deep to true. 16. Otherwise, if value is an Array exotic object, then: 1. Let valueLenDescriptor be ? OrdinaryGetOwnProperty(value, "length"). 2. Let valueLen be valueLenDescriptor.[[Value]]. 3. Set serialized to { [[Type]]: "Array", [[Length]]: valueLen, [[Properties]]: a new empty List }. 4. Set deep to true. 17. Otherwise, if value is a platform object that is a serializable object: 1. If value has a [[Detached]] internal slot whose value is true, then throw a "DataCloneError" DOMException. 2. Let typeString be the identifier of the primary interface of value. 3. Set serialized to { [[Type]]: typeString }. 4. Set deep to true. 18. Otherwise, if value is a platform object, then throw a "DataCloneError" DOMException. 19. Otherwise, if IsCallable(value) is true, then throw a "DataCloneError" DOMException. 20. Otherwise, if value has any internal slot other than [[Prototype]] or [Extensible], then throw a "DataCloneError" DOMException. For instance, a [[PromiseState]] or [[WeakMapData]] internal slot. 21. Otherwise, if value is an exotic object, then throw a "DataCloneError" DOMException. For instance, a proxy object. 22. Otherwise: 1. Set serialized to { [[Type]]: "Object", [[Properties]]: a new empty List }. 2. Set deep to true. 23. Set memory[value] to serialized. 24. If deep is true, then: 1. If value has a [[MapData]] internal slot, then: 1. Let copiedList be a new empty List. 2. For each Record { [[Key]], [[Value]] } entry of value.[[MapData]]: 1. Let copiedEntry be a new Record { [[Key]]: entry.[[Key]], [[Value]]: entry.[[Value]] }. 2. If copiedEntry.[[Key]] is not the special value empty, append copiedEntry to copiedList. 3. For each Record { [[Key]], [[Value]] } entry of copiedList: 1. Let serializedKey be ? StructuredSerializeInternal(entry.[[Key]], forStorage, memory). 2. Let serializedValue be ? StructuredSerializeInternal(entry.[[Value]], forStorage, memory). 3. Append { [[Key]]: serializedKey, [[Value]]: serializedValue } to serialized.[[MapData]]. 2. Otherwise, if value has a [[SetData]] internal slot, then: 1. Let copiedList be a new empty List. 2. For each entry of value.[[SetData]]: 1. If entry is not the special value empty, append entry to copiedList. 3. For each entry of copiedList: 1. Let serializedEntry be ? StructuredSerializeInternal(entry, forStorage, memory). 2. Append serializedEntry to serialized.[[SetData]]. 3. Otherwise, if value is a platform object that is a serializable object, then perform the appropriate serialization steps given value, serialized, and forStorage. The serialization steps may need to perform a sub-serialization. This is an operation which takes as input a value subValue, and returns StructuredSerializeInternal(subValue, forStorage, memory). (In other words, a sub-serialization is a specialization of StructuredSerializeInternal to be consistent within this invocation.) 4. Otherwise: 1. Let enumerableKeys be a new empty List. 2. For each key in ! value.[[OwnPropertyKeys]](): 1. If Type(key) is String, then: 1. Let valueDesc be ! value.[[GetOwnProperty]](key). 2. If valueDesc.[[Enumerable]] is true, then append key to enumerableKeys. 3. For each key in enumerableKeys: 1. If ! HasOwnProperty(value, key) is true, then: 1. Let inputValue be ? value.[[Get]](key, value). 2. Let outputValue be ? StructuredSerializeInternal(inputValue, forStorage, memory). 3. Append { [[Key]]: key, [[Value]]: outputValue } to serialized.[[Properties]]. The key collection performed above is very similar to the JavaScript specification’s EnumerableOwnProperties operation, but crucially it uses the deterministic ordering provided by the [[OwnPropertyKeys]] internal method, instead of reordering the keys in an unspecified manner as EnumerableOwnProperties does. [ECMA-262] 25. Return serialized. It’s important to realize that the Records produced by StructuredSerializeInternal might contain "pointers" to other records that create circular references. For example, when we pass the following JavaScript object into StructuredSerializeInternal: const o = {};o.myself = o; it produces the following result: { \[[Type]]: "Object", \[[Properties]]: « { \[[Key]]: "myself", \[[Value]]: } » } 2.9.4. StructuredSerialize ( value ) 1. Return ? StructuredSerializeInternal(value, false). 2.9.5. StructuredSerializeForStorage ( value ) 1. Return ? StructuredSerializeInternal(value, true). 2.9.6. StructuredDeserialize ( serialized, targetRealm [ , memory ] ) The StructuredDeserialize abstract operation takes as input a Record serialized, which was previously produced by StructuredSerialize or StructuredSerializeForStorage, and deserializes it into a new JavaScript value, created in targetRealm. This process can throw an exception, for example when trying to allocate memory for the new objects (especially ArrayBuffer objects). 1. If memory was not supplied, let memory be an empty map. The purpose of the memory map is to avoid deserializing objects twice. This ends up preserving cycles and the identity of duplicate objects in graphs. 2. If memory[serialized] exists, then return memory[serialized]. 3. Let deep be false. 4. Let value be an uninitialized value. 5. If serialized contains a [[TransferConsumed]] field, then: 1. Assert​: serialized.[[TransferConsumed]] is false. (It must be impossible to get in a situation where StructuredDeserialize is being called multiple times on the same serialization, if that serialization contains transfer data holders.) 2. Set serialized.[[TransferConsumed]] to true. 3. If serialized.[[Type]] is "ArrayBuffer", then set value to a new ArrayBuffer object in targetRealm whose [[ArrayBufferData]] internal slot value is serialized.[[ArrayBufferData]], and whose [[ArrayBufferByteLength]] internal slot value is serialized.[[ArrayBufferByteLength]]. In cases where the original memory occupied by [[ArrayBufferData]] is accessible during the deserialization, this step is unlikely to throw an exception, as no new memory needs to be allocated: the memory occupied by [[ArrayBufferData]] is instead just getting transferred into the new ArrayBuffer. This could be true, for example, when both the source and target Realms are in the same process. 4. Otherwise: 1. Let interfaceName be serialized.[[Type]]. 2. If the interface identified by interfaceName is not exposed in targetRealm, then throw a "DataCloneError" DOMException. 3. Set value to a new instance of the interface identified by interfaceName, created in targetRealm. 4. Perform the appropriate transfer-receiving steps for the interface identified by interfaceName given serialized and value. 6. Otherwise, if serialized.[[Type]] is "primitive", then set value to serialized.[[Value]]. 7. Otherwise, if serialized.[[Type]] is "Boolean", then set value to a new Boolean object in targetRealm whose [[BooleanData]] internal slot value is serialized.[[BooleanData]]. 8. Otherwise, if serialized.[[Type]] is "Number", then set value to a new Number object in targetRealm whose [[NumberData]] internal slot value is serialized.[[NumberData]]. 9. Otherwise, if serialized.[[Type]] is "String", then set value to a new String object in targetRealm whose [[StringData]] internal slot value is serialized.[[StringData]]. 10. Otherwise, if serialized.[[Type]] is "Date", then set value to a new Date object in targetRealm whose [[DateValue]] internal slot value is serialized.[[DateValue]]. 11. Otherwise, if serialized.[[Type]] is "RegExp", then set value to a new RegExp object in targetRealm whose [[RegExpMatcher]] internal slot value is serialized.[[RegExpMatcher]], whose [[OriginalSource]] internal slot value is serialized.[[OriginalSource]], and whose [[OriginalFlags]] internal slot value is serialized.[[OriginalFlags]]. 12. Otherwise, if serialized.[[Type]] is "SharedArrayBuffer", then: 1. If targetRealm’s corresponding agent cluster is not serialized.[[AgentCluster]], then then throw a "DataCloneError" DOMException. 2. Otherwise, set value to a new SharedArrayBuffer object in targetRealm whose [[ArrayBufferData]] internal slot value is serialized.[[ArrayBufferData]] and whose [[ArrayBufferByteLength]] internal slot value is serialized.[[ArrayBufferByteLength]]. 13. Otherwise, if serialized.[[Type]] is "ArrayBuffer", then set value to a new ArrayBuffer object in targetRealm whose [[ArrayBufferData]] internal slot value is serialized.[[ArrayBufferData]], and whose [[ArrayBufferByteLength]] internal slot value is serialized.[[ArrayBufferByteLength]]. If this throws an exception, then throw a "DataCloneError" DOMException. This step might throw an exception if there is not enough memory available to create such an ArrayBuffer object. 14. Otherwise, if serialized.[[Type]] is "ArrayBufferView", then: 1. Let deserializedArrayBuffer be ? StructuredDeserialize(serialized.[[ArrayBufferSerialized]], targetRealm, memory). 2. If serialized.[[Constructor]] is "DataView", then set value to a new DataView object in targetRealm whose [[ViewedArrayBuffer]] internal slot value is deserializedArrayBuffer, whose [[ByteLength]] internal slot value is serialized.[[ByteLength]], and whose [[ByteOffset]] internal slot value is serialized.[[ByteOffset]]. 3. Otherwise, set value to a new typed array object in targetRealm, using the constructor given by serialized.[[Constructor]], whose [[ViewedArrayBuffer]] internal slot value is deserializedArrayBuffer, whose \[TypedArrayName]] internal slot value is serialized.[[Constructor]], whose [[ByteLength]] internal slot value is serialized.[[ByteLength]], whose [[ByteOffset]] internal slot value is serialized.[[ByteOffset]], and whose [[ArrayLength]] internal slot value is serialized.[[ArrayLength]]. 15. Otherwise, if serialized.[[Type]] is "Map", then: 1. Set value to a new Map object in targetRealm whose [[MapData]] internal slot value is a new empty List. 2. Set deep to true. 16. Otherwise, if serialized.[[Type]] is "Set", then: 1. Set value to a new Set object in targetRealm whose [[SetData]] internal slot value is a new empty List. 2. Set deep to true. 17. Otherwise, if serialized.[[Type]] is "Array", then: 1. Let outputProto be the %ArrayPrototype% intrinsic object in targetRealm. 2. Set value to ! ArrayCreate(serialized.[[Length]], outputProto). 3. Set deep to true. 18. Otherwise, if serialized.[[Type]] is "Object", then: 1. Set value to a new Object in targetRealm. 2. Set deep to true. 19. Otherwise: 1. Let interfaceName be serialized.[[Type]]. 2. If the interface identified by interfaceName is not exposed in targetRealm, then throw a "DataCloneError" DOMException. 3. Set value to a new instance of the interface identified by interfaceName, created in targetRealm. 4. Set deep to true. 20. Set memory[serialized] to value. 21. If deep is true, then: 1. If serialized.[[Type]] is "Map", then: 1. For each Record { [[Key]], [[Value]] } entry of serialized.[[MapData]]: 1. Let deserializedKey be ? StructuredDeserialize(entry.[[Key]], targetRealm, memory). 2. Let deserializedValue be ? StructuredDeserialize(entry.[[Value]], targetRealm, memory). 3. Append { [[Key]]: deserializedKey, [Value]]: deserializedValue } to value.[[MapData]]. 2. Otherwise, if serialized.[[Type]] is "Set", then: 1. For each entry of serialized.[[SetData]]: 1. Let deserializedEntry be ? StructuredDeserialize(entry, targetRealm, memory). 2. Append deserializedEntry to value.[[SetData]]. 3. Otherwise, if serialized.[[Type]] is "Array" or "Object", then: 1. For each Record { [[Key]], [[Value]] } entry of serialized.[[Properties]]: 1. Let deserializedValue be ? StructuredDeserialize(entry.[[Value]], targetRealm, memory). 2. Let result be ! CreateDataProperty(value, entry.[[Key]], deserializedValue). 3. Assert​: result is true. 4. Otherwise: 1. Perform the appropriate deserialization steps for the interface identified by serialized.[[Type]], given serialized and value. The deserialization steps may need to perform a sub-deserialization. This is an operation which takes as input a previously-serialized Record subSerialized, and returns StructuredDeserialize(subSerialized, targetRealm, memory). (In other words, a sub-deserialization is a specialization of StructuredDeserialize to be consistent within this invocation.) 22. Return value. 2.9.7. StructuredSerializeWithTransfer ( value, transferList ) 1. Let memory be an empty map. In addition to how it is used normally by StructuredSerializeInternal, in this algorithm memory is also used to ensure that StructuredSerializeInternal ignores items in transferList, and let us do our own handling instead. 2. For each transferable of transferList: 1. If transferable has neither an [[ArrayBufferData]] internal slot nor a [[Detached]] internal slot, then throw a "DataCloneError" DOMException. 2. If transferable has an [[ArrayBufferData]] internal slot and either ! IsSharedArrayBuffer(transferable) is true or ! IsDetachedBuffer(transferable) is true, then throw a "DataCloneError" DOMException. 3. If transferable has a [[Detached]] internal slot and transferable.[[Detached]] is true, then throw a "DataCloneError" DOMException. 4. Let placeholder be a user-agent-defined placeholder object. 5. Set memory[transferable] to placeholder. 3. Let serialized be ? StructuredSerializeInternal(value, false, memory). 4. Let transferDataHolders be a new empty List. 5. For each transferable of transferList: 1. Let placeholder be memory[transferable]. 2. Let dataHolder be an uninitialized value. 3. If transferable has an [[ArrayBufferData]] internal slot, then: 1. Set dataHolder to { [[TransferConsumed]]: false, [[Type]]: "ArrayBuffer", [[ArrayBufferData]]: transferable.[[ArrayBufferData]], [[ArrayBufferByteLength]]: transferable.[[ArrayBufferByteLength]] }. 2. Perform ! DetachArrayBuffer(transferable). 4. Otherwise: 1. Assert​: transferable is a platform object that is a transferable object. 2. Let interfaceName be the identifier of the primary interface of transferable. 3. Set dataHolder to { [[TransferConsumed]]: false, [[Type]]: interfaceName }. 4. Perform the appropriate transfer steps for the interface identified by interfaceName, given transferable and dataHolder. 5. Set transferable.[[Detached]] to true. 5. Within serialized, replace all instances of placeholder with dataHolder. 6. Append dataHolder to transferDataHolders. 6. Return { [[Serialized]]: serialized, [[TransferDataHolders]]: transferDataHolders }. 2.9.8. StructuredDeserializeWithTransfer ( serializeWithTransferResult, targetRealm ) 1. Let memory be an empty map. In addition to how it is used normally by StructuredDeserialize, in this algorithm memory is also used to help us determine the list of transferred values. 2. Let deserialized be ? StructuredDeserialize(serializeWithTransferResult.[[Serialized]], targetRealm, memory). 3. Let transferredValues be a new empty List. 4. For each transferDataHolder of serializeWithTransferResult.[[TransferDataHolders]]: 1. Append memory[transferDataHolder] to transferredValues. 5. Return { [[Deserialized]]: deserialized, [[TransferredValues]]: transferredValues }. 2.9.9. Performing serialization and transferring from other specifications Other specifications may use the abstract operations defined here. The following provides some guidance on when each abstract operation is typically useful, with examples. StructuredSerializeWithTransfer StructuredDeserializeWithTransfer Cloning a value to another JavaScript Realm, with a transfer list, but where the target Realm is not known ahead of time. In this case the serialization step can be performed immediately, with the deserialization step delayed until the target Realm becomes known. messagePort.postMessage() uses this pair of abstract operations, as the destination Realm is not known until the MessagePort has been shipped. StructuredSerialize StructuredSerializeForStorage StructuredDeserialize Creating a JavaScript Realm-independent snapshot of a given value which can be saved for an indefinite amount of time, and then reified back into a JavaScript value later, possibly multiple times. StructuredSerializeForStorage can be used for situations where the serialization is anticipated to be stored in a persistent manner, instead of passed between Realms. It throws when attempting to serialize SharedArrayBuffer objects, since storing shared memory does not make sense. Similarly, it can throw or possibly have different behavior when given a platform object with custom serialization steps when the forStorage argument is true. history.pushState() and history.replaceState() use StructuredSerializeForStorage on author-supplied state objects, storing them as serialized state in the appropriate session history entry. Then, StructuredDeserialize is used so that the history.state property can return a clone of the originally-supplied state object. broadcastChannel.postMessage() uses StructuredSerialize on its input, then uses StructuredDeserialize multiple times on the result to produce a fresh clone for each destination being broadcast to. Note that transferring does not make sense in multi-destination situations. Any API for persisting JavaScript values to the filesystem would also use StructuredSerializeForStorage on its input and StructuredDeserialize on its output. In general, call sites may pass in Web IDL values instead of JavaScript values; this is to be understood to perform an implicit conversion to the JavaScript value before invoking these algorithms. This specification used to define a "structured clone" algorithm, and more recently a StructuredClone abstract operation. However, in practice all known uses of it were better served by separate serialization and deserialization steps, so it was removed. ---------------------------------------------------------------------- Call sites that are not invoked as a result of author code synchronously calling into a user agent method must take care to properly prepare to run script and prepare to run a callback before invoking StructuredSerialize, StructuredSerializeForStorage, or StructuredSerializeWithTransfer abstract operations, if they are being performed on arbitrary objects. This is necessary because the serialization process can invoke author-defined accessors as part of its final deep-serialization steps, and these accessors could call into operations that rely on the entry and incumbent concepts being properly set up. window.postMessage() performs StructuredSerializeWithTransfer on its arguments, but is careful to do so immediately, inside the synchronous portion of its algorithm. Thus it is able to use the algorithms without needing to prepare to run script and prepare to run a callback. In contrast, a hypothetical API that used StructuredSerialize to serialize some author-supplied object periodically, directly from a task on the event loop, would need to ensure it performs the appropriate preparations beforehand. As of this time, we know of no such APIs on the platform; usually it is simpler to perform the serialization ahead of time, as a synchronous consequence of author code. 2.9.10. Monkey patch for Blob and FileList objects This monkey patch will be moved in due course. See w3c/FileAPI issue 32. Blob objects are serializable objects. The Blob interface must be annotated with the [Serializable] extended attribute. Their serialization steps, given value and serialized, are: 1. Set serialized.[[SnapshotState]] to value’s snapshot state. 2. Set serialized.[[ByteSequence]] to value’s underlying byte sequence. Their deserialization steps, given serialized and value, are: 1. Set value’s snapshot state to serialized.[[SnapshotState]]. 2. Set value’s underlying byte sequence to serialized.[[ByteSequence]]. ---------------------------------------------------------------------- File objects are serializable objects. The File interface must be annotated with the [Serializable] extended attribute. Their serialization steps, given value and serialized, are: 1. Set serialized.[[SnapshotState]] to value’s snapshot state. 2. Set serialized.[[ByteSequence]] to value’s underlying byte sequence. 3. Set serialized.[[Name]] to the value of value’s name attribute. 4. Set serialized.[[LastModified]] to the value of value’s lastModified attribute. Their deserialization steps, given serialized and value, are: 1. Set value’s snapshot state to serialized.[[SnapshotState]]. 2. Set value’s underlying byte sequence to serialized.[[ByteSequence]]. 3. Initialize the value of value’s name attribute to serialized.[[Name]]. 4. Initialize the value of value’s lastModified attribute to serialized.[[LastModified]]. ---------------------------------------------------------------------- FileList objects are serializable objects. The FileList interface must be annotated with the [Serializable] extended attribute. Their serialization steps, given value and serialized, are: 1. Set serialized.[[Files]] to an empty list. 2. For each file in value, append the sub-serialization of file to serialized.[[Files]]. Their deserialization steps, given serialized and value, are: 1. For each file of serialized.[[Files]], add the sub-deserialization of file to value. 3. Semantics, structure, and APIs of HTML documents 3.1. Documents Every XML and HTML document in an HTML UA is represented by a Document object. [DOM41] The Document object’s URL is defined in the DOM specification. It is initially set when the Document object is created, but that can change during the lifetime of the Document object; for example, it changes when the user navigates to a fragment on the page and when the pushState() method is called with a new URL. [DOM41] Interactive user agents typically expose the Document object’s URL in their user interface. This is the primary mechanism by which a user can tell if a site is attempting to impersonate another. When a Document is created by a script using the createDocument() or createHTMLDocument() APIs, the Document is both ready for post-load tasks and completely loaded immediately. The document’s referrer is a string (representing a URL) that can be set when the Document is created. If it is not explicitly set, then its value is the empty string. Each Document object has a reload override flag that is originally unset. The flag is set by the document.open() and document.write() methods in certain situations. When the flag is set, the Document also has a reload override buffer which is a Unicode string that is used as the source of the document when it is reloaded. When the user agent is to perform an overridden reload, given a source browsing context, it must act as follows: 1. Let source be the value of the browsing context's active document's reload override buffer. 2. Let address be the browsing context's active document's URL. 3. Let HTTPS state be the HTTPS state of the browsing context's active document. 4. Let referrer policy be the referrer policy of the browsing context's active document. 5. Let CSP list be the CSP list of the browsing context's active document. 6. Navigate the browsing context to a new response whose body is source, header list is Referrer-Policy/referrer policy, CSP list is CSP list and HTTPS state is HTTPS state, with the exceptions enabled flag set and replacement enabled. The source browsing context is that given to the overridden reload algorithm. When the navigate algorithm creates a Document object for this purpose, set that Document's reload override flag and set its reload override buffer to source. Rethrow any exceptions. When it comes time to set the document’s address in the navigation algorithm, use address as the override URL. 3.1.1. The Document object The DOM specification defines a Document interface, which this specification extends significantly: enum DocumentReadyState { "loading", "interactive", "complete" }; typedef (HTMLScriptElement or SVGScriptElement) HTMLOrSVGScriptElement; [OverrideBuiltins] partial interface Document { // resource metadata management [PutForwards=href, Unforgeable] readonly attribute Location? location; attribute USVString domain; readonly attribute USVString referrer; attribute USVString cookie; readonly attribute DOMString lastModified; readonly attribute DocumentReadyState readyState; // DOM tree accessors getter object (DOMString name); [CEReactions] attribute DOMString title; attribute DOMString dir; attribute HTMLElement? body; readonly attribute HTMLHeadElement? head; [SameObject] readonly attribute HTMLCollection images; [SameObject] readonly attribute HTMLCollection embeds; [SameObject] readonly attribute HTMLCollection plugins; [SameObject] readonly attribute HTMLCollection links; [SameObject] readonly attribute HTMLCollection forms; [SameObject] readonly attribute HTMLCollection scripts; NodeList getElementsByName(DOMString elementName); readonly attribute HTMLOrSVGScriptElement? currentScript; // classic scripts in a document tree only // dynamic markup insertion Document open(optional DOMString type = "text/html", optional DOMString replace = ""); WindowProxy open(DOMString url, DOMString name, DOMString features, optional boolean replace = false); [CEReactions] void close(); [CEReactions] void write(DOMString... text); [CEReactions] void writeln(DOMString... text); // user interaction readonly attribute WindowProxy? defaultView; readonly attribute Element? activeElement; boolean hasFocus(); [CEReactions] attribute DOMString designMode; [CEReactions] boolean execCommand(DOMString commandId, optional boolean showUI = false, optional DOMString value = ""); boolean queryCommandEnabled(DOMString commandId); boolean queryCommandIndeterm(DOMString commandId); boolean queryCommandState(DOMString commandId); boolean queryCommandSupported(DOMString commandId); DOMString queryCommandValue(DOMString commandId); // special event handler IDL attributes that only apply to Document objects [LenientThis] attribute EventHandler onreadystatechange; }; Document implements GlobalEventHandlers; Document implements DocumentAndElementEventHandlers; The Document has an HTTPS state (an HTTPS state value), initially "none", which represents the security properties of the network channel used to deliver the Document's data. The Document has a referrer policy (a referrer policy), initially the empty string, which represents the default referrer policy used by fetches initiated by the Document. The Document has a CSP list, which is a list of Content Security Policy objects active in this context. The list is empty unless otherwise specified. The Document has a module map, which is a module map, initially empty. 3.1.2. Resource metadata management document . referrer Returns the URL of the Document from which the user navigated to this one, unless it was blocked or there was no such document, in which case it returns the empty string. The noreferrer link type can be used to block the referrer. The referrer attribute must return the document’s referrer. ---------------------------------------------------------------------- document . cookie [ = value ] Returns the HTTP cookies that apply to the Document. If there are no cookies or cookies can’t be applied to this resource, the empty string will be returned. Can be set, to add a new cookie to the element’s set of HTTP cookies. If the contents are sandboxed into a unique origin (e.g., in an iframe with the sandbox attribute), a "SecurityError" DOMException will be thrown on getting and setting. The cookie attribute represents the cookies of the resource identified by the document’s URL. A Document object that falls into one of the following conditions is a cookie-averse Document object: * A Document that has no browsing context. * A Document whose URL's scheme is not a network scheme. On getting, if the document is a cookie-averse Document object, then the user agent must return the empty string. Otherwise, if the Document's origin is an opaque origin, the user agent must throw a "SecurityError" DOMException. Otherwise, the user agent must return the cookie-string for the document’s URL for a "non-HTTP" API, decoded using UTF-8 decode without BOM. [COOKIES] (This is a fingerprinting vector.) On setting, if the document is a cookie-averse Document object, then the user agent must do nothing. Otherwise, if the Document's origin is an opaque origin, the user agent must throw a "SecurityError" DOMException. Otherwise, the user agent must act as it would when receiving a set-cookie-string for the document’s URL via a "non-HTTP" API, consisting of the new value encoded as UTF-8. [COOKIES] [ENCODING] Since the cookie attribute is accessible across frames, the path restrictions on cookies are only a tool to help manage which cookies are sent to which parts of the site, and are not in any way a security feature. The cookie attribute’s getter and setter synchronously access shared state. Since there is no locking mechanism, other browsing contexts in a multiprocess user agent can modify cookies while scripts are running. A site could, for instance, try to read a cookie, increment its value, then write it back out, using the new value of the cookie as a unique identifier for the session; if the site does this twice in two different browser windows at the same time, it might end up using the same "unique" identifier for both sessions, with potentially disastrous effects. ---------------------------------------------------------------------- document . lastModified Returns the date of the last modification to the document, as reported by the server, in the form "MM/DD/YYYY hh:mm:ss", in the user’s local time zone. If the last modification date is not known, the current time is returned instead. The lastModified attribute, on getting, must return the date and time of the Document's source file’s last modification, in the user’s local time zone, in the following format: 1. The month component of the date. 2. A U+002F SOLIDUS character (/). 3. The day component of the date. 4. A U+002F SOLIDUS character (/). 5. The year component of the date. 6. A U+0020 SPACE character. 7. The hours component of the time. 8. A U+003A COLON character (:). 9. The minutes component of the time. 10. A U+003A COLON character (:). 11. The seconds component of the time. All the numeric components above, other than the year, must be given as two ASCII digits representing the number in base ten, zero-padded if necessary. The year must be given as the shortest possible string of four or more ASCII digits representing the number in base ten, zero-padded if necessary. The Document's source file’s last modification date and time must be derived from relevant features of the networking protocols used, e.g., from the value of the HTTP Last-Modified header of the document, or from metadata in the file system for local files. If the last modification date and time are not known, the attribute must return the current date and time in the above format. ---------------------------------------------------------------------- document . readyState Returns "loading" while the Document is loading, "interactive" once it is finished parsing but still loading sub-resources, and "complete" once it has loaded. The readystatechange event fires on the Document object when this value changes. Each document has a current document readiness. When a Document object is created, it must have its current document readiness set to the string "loading" if the document is associated with an HTML parser, an XML parser, or an XSLT processor, and to the string "complete" otherwise. Various algorithms during page loading affect this value. When the value is set, the user agent must fire an event named readystatechange at the Document object. A Document is said to have an active parser if it is associated with an HTML parser or an XML parser that has not yet been stopped or aborted. The readyState IDL attribute must, on getting, return the current document readiness. 3.1.3. DOM tree accessors The html element of a document is its document element, if it’s an html element, and null otherwise. ---------------------------------------------------------------------- document . head Returns the head element. The head element of a document is the first head element that is a child of the html element, if there is one, or null otherwise. The head attribute, on getting, must return the head element of the document (a head element or null). ---------------------------------------------------------------------- document . title [ = value ] Returns the document’s title, as given by the title element for HTML and as given by the SVG title element for SVG. Can be set, to update the document’s title. If there is no appropriate element to update, the new value is ignored. The title element of a document is the first title element in the document (in tree order), if there is one, or null otherwise. The title attribute must, on getting, run the following algorithm: 1. If the document element is an SVG svg element, then let value be the child text content of the first SVG title element that is a child of the document element. [SVG11] 2. Otherwise, let value be the child text content of the title element, or the empty string if the title element is null. 3. Strip and collapse white space in value. 4. Return value. On setting, the steps corresponding to the first matching condition in the following list must be run: If the document element is an SVG svg element 1. If there is an SVG title element that is a child of the document element, let element be the first such element. 2. Otherwise: 1. Let element be the result of creating an element given the document element's node document, SVG title, and the SVG namespace. 2. Insert element as the first child of the document element. 3. Act as if the textContent IDL attribute of element was set to the new value being assigned. If the document element is in the HTML namespace 1. If the title element is null and the head element is null, then abort these steps. 2. If the title element is non-null, let element be the title element. 3. Otherwise: 1. Let element be the result of creating an element given the document element's node document, title, and the HTML namespace. 2. Append element to the head element. 4. Act as if the textContent IDL attribute of element was set to the new value being assigned. Otherwise Do nothing. ---------------------------------------------------------------------- document . body [ = value ] Returns the body element. Can be set, to replace the body element. If the new value is not a body or frameset element, this will throw a "HierarchyRequestError" DOMException. The body element of a document is the first child of the html element that is either a body element or a frameset element. If there is no such element, it is null. The body attribute, on getting, must return the body element of the document (either a body element, a frameset element, or null). On setting, the following algorithm must be run: 1. If the new value is not a body or frameset element, then throw a "HierarchyRequestError" DOMException and abort these steps. 2. Otherwise, if the new value is the same as the body element, do nothing. Abort these steps. 3. Otherwise, if the body element is not null, then replace the body element with the new value within the body element’s parent and abort these steps. 4. Otherwise, if there is no document element, throw a "HierarchyRequestError" DOMException and abort these steps. 5. Otherwise, the body element is null, but there’s a document element. Append the new value to the document element. ---------------------------------------------------------------------- document . images Returns an HTMLCollection of the img elements in the Document. document . embeds document . plugins Return an HTMLCollection of the embed elements in the Document. document . links Returns an HTMLCollection of the a and area elements in the Document that have href attributes. document . forms Return an HTMLCollection of the form elements in the Document. document . scripts Return an HTMLCollection of the script elements in the Document. The images attribute must return an HTMLCollection rooted at the Document node, whose filter matches only img elements. The embeds attribute must return an HTMLCollection rooted at the Document node, whose filter matches only embed elements. The plugins attribute must return the same object as that returned by the embeds attribute. The links attribute must return an HTMLCollection rooted at the Document node, whose filter matches only a elements with href attributes and area elements with href attributes. The forms attribute must return an HTMLCollection rooted at the Document node, whose filter matches only form elements. The scripts attribute must return an HTMLCollection rooted at the Document node, whose filter matches only script elements. ---------------------------------------------------------------------- collection = document . getElementsByName(name) Returns a NodeList of elements in the Document that have a name attribute with the value name. The getElementsByName(name) method takes a string name, and must return a live NodeList containing all the HTML elements in that document that have a name attribute whose value is equal to the name argument (in a case-sensitive manner), in tree order. When the method is invoked on a Document object again with the same argument, the user agent may return the same as the object returned by the earlier call. In other cases, a new NodeList object must be returned. ---------------------------------------------------------------------- document . currentScript Returns the script element, or the SVG script element, that is currently executing, as long as the element represents a classic script. In the case of reentrant script execution, returns the one that most recently started executing amongst those that have not yet finished executing. Returns null if the Document is not currently executing a script element or SVG script element (e.g., because the running script is an event handler, or a timeout), or if the currently executing script or SVG script element represents a module script. The currentScript attribute, on getting, must return the value to which it was most recently initialized. When the Document is created, the currentScript must be initialized to null. This API has fallen out of favor in the implementor and standards community, as it globally exposes script or SVG script elements. As such, it is not available in newer contexts, such as when running module scripts or when running scripts in a shadow tree. ---------------------------------------------------------------------- The Document interface supports named properties. The supported property names of a Document object document at any moment consist of the following, in tree order according to the element that contributed them, ignoring later duplicates, and with values from id attributes coming before values from name attributes when the same element contributes both: * the value of the name content attribute for all applet, exposed embed, form, iframe, img, and exposed object elements that have a non-empty name content attribute and are in a document tree with document as their root; * the value of the id content attribute for all applet and exposed object elements that have a non-empty id content attribute and are in a document tree with document as their root; * the value of the id content attribute for all img elements that have both a non-empty id content attribute and a non-empty name content attribute, and are in a document tree with document as their root. To determine the value of a named property name for a Document, the user agent must return the value obtained using the following steps: 1. Let elements be the list of named elements with the name name that are in a document tree with the Document as their root. There will be at least one such element, by definition. 2. If elements has only one element, and that element is an iframe element, and that iframe element’s nested browsing context is not null, then return the WindowProxy object of the element’s nested browsing context. 3. Otherwise, if elements has only one element, return that element. 4. Otherwise return an HTMLCollection rooted at the Document node, whose filter matches only named elements with the name name. Named elements with the name name, for the purposes of the above algorithm, are those that are either: * applet, exposed embed, form, iframe, img, or exposed object elements that have a name content attribute whose value is name, or * applet or exposed object elements that have an id content attribute whose value is name, or * img elements that have an id content attribute whose value is name, and that have a non-empty name content attribute present also. An embed or object element is said to be exposed if it has no exposed object ancestor, and, for object elements, is additionally either not showing its fallback content or has no object or embed descendants. ---------------------------------------------------------------------- The dir attribute on the Document interface is defined along with the dir content attribute. 3.2. Elements 3.2.1. Semantics Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics). For example, the ol element represents an ordered list, and the lang attribute represents the language of the content. These definitions allow HTML processors, like web browsers and search engines, to present documents and applications consistently in different contexts. In this example the HTML headings may be presented as large text in a desktop browser, or standard size text in bold in a mobile browser. In both cases the semantic information remains the same - that the h1 and h2 elements represent headings. Favorite books
Favorite books logo

Favorite books

These are a few of my favorite books.

The Belgariad

Five books by David and Leigh Eddings.

The Hitchhiker’s Guide to the Galaxy

A trilogy of five books by Douglas Adams.

This semantic information is critical to assistive technologies. For example, a screen reader will query the browser for semantic information and use that information to present the document or application in synthetic speech. In some cases assistive technologies use semantic information to provide additional functionality. A speech recognition tool might provide a voice command for moving focus to the start of the main element for example. When the appropriate HTML element or attribute is not used, it deprives HTML processors of valuable semantic information. In this example styling may be used to create a visual representation of headings and other components, but because the appropriate HTML elements have not been used there is little semantic information available to web browsers, search engines and assistive technologies. Favorite books
Favorite books logo
Favorite books

These are a few of my favorite books.

The Belgariad

Five books by David and Leigh Eddings.

The Hitchhiker’s Guide to the Galaxy

A trilogy of five books by Douglas Adams.

A document can change dynamically while it is being processed. Scripting and other mechanisms can be used to change attribute values, text, or the entire document structure. The semantics of a document are therefore based on the document’s state at a particular instance in time, but may also change in response to external events. User agents must update their presentation of the document to reflect these changes. DOM nodes whose node document does not have a browsing context are exempt from all document conformance requirements other than the HTML syntax requirements and the XML syntax requirements. In this example the audio element is used to play a music track. The controls attribute is used to show the user agent player, and as the music plays the controls are updated to indicate progress. The available semantic information is updated in response to these changes.
Welcome! This is home of...

The Falcons!

The Lockheed Martin multirole jet fighter aircraft!
This page discusses the F-16 Fighting Falcon’s innermost secrets.
Here is another way of marking this up, this time showing the paragraphs explicitly, and splitting the one link element into three:

Welcome! This is home of...

The Falcons!

The Lockheed Martin multirole jet fighter aircraft! This page discusses the F-16 Fighting Falcon’s innermost secrets.

It is possible for paragraphs to overlap when using certain elements that define fallback content. For example, in the following section:

My Cats

You can play with my cat simulator. To see the cat simulator, use one of the following links: Alternatively, upgrade to the Mellblom Browser. I’m quite proud of it.
There are five paragraphs: 1. The paragraph that says "You can play with my cat simulator. object I’m quite proud of it.", where object is the object element. 2. The paragraph that says "To see the cat simulator, use one of the following links:". 3. The paragraph that says "Download simulator file". 4. The paragraph that says "Use online simulator". 5. The paragraph that says "Alternatively, upgrade to the Mellblom Browser.". The first paragraph is overlapped by the other four. A user agent that supports the "cats.sim" resource will only show the first one, but a user agent that shows the fallback will confusingly show the first sentence of the first paragraph as if it was in the same paragraph as the second one, and will show the last paragraph as if it was at the start of the second sentence of the first paragraph. To avoid this confusion, explicit p elements can be used. For example:

My Cats

You can play with my cat simulator.

To see the cat simulator, use one of the following links:

Alternatively, upgrade to the Mellblom Browser.

I’m quite proud of it.

3.2.5. Global attributes The following attributes are common to and may be specified on all HTML elements (even those not defined in this specification): * accesskey * class * contenteditable * dir * draggable * hidden * id * lang * spellcheck * style * tabindex * title * translate These attributes are only defined by this specification as attributes for HTML elements. When this specification refers to elements having these attributes, elements from namespaces that are not defined as having these attributes must not be considered as being elements with these attributes. For example, in the following XML fragment, the "bogus" element does not have a dir attribute as defined in this specification, despite having an attribute with the literal name "dir". Thus, the directionality of the inner-most span element is 'rtl', inherited from the div element indirectly through the "bogus" element.
---------------------------------------------------------------------- The DOM specification defines additional user agent requirements for the class, id, and slot attributes for any element in any namespace. [DOM41] The class, id, and slot attributes may be specified on all HTML elements. When specified on HTML elements, the class attribute must have a value that is a set of space-separated tokens representing the various classes that the element belongs to. Assigning classes to an element affects class matching in selectors in CSS, the getElementsByClassName() method in the DOM, and other such features. There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content. When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element’s tree and must contain at least one character. The value must not contain any space characters. The id attribute specifies its element’s unique identifier (ID). There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc. An element’s unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment, as a way to target an element when scripting, and as a way to style a specific element from CSS. Identifiers are opaque strings. Particular meanings should not be derived from the value of the id attribute. There are no conformance requirements for the slot attribute specific to HTML elements. ---------------------------------------------------------------------- To enable assistive technology products to expose a more fine-grained interface than is otherwise possible with HTML elements and attributes, a set of annotations for assistive technology products can be specified (the ARIA role and aria-* attributes). [wai-aria-1.1] ---------------------------------------------------------------------- The following event handler content attributes may be specified on any HTML element: * onabort * onauxclick * onblur* * oncancel * oncanplay * oncanplaythrough * onchange * onclick * onclose * oncuechange * ondblclick * ondrag * ondragend * ondragenter * ondragexit * ondragleave * ondragover * ondragstart * ondrop * ondurationchange * onemptied * onended * onerror* * onfocus* * oninput * oninvalid * onkeydown * onkeypress * onkeyup * onload* * onloadeddata * onloadedmetadata * onloadend * onloadstart * onmousedown * onmouseenter * onmouseleave * onmousemove * onmouseout * onmouseover * onmouseup * onwheel * onpause * onplay * onplaying * onprogress * onratechange * onreset * onresize* * onscroll* * onseeked * onseeking * onselect * onshow * onstalled * onsubmit * onsuspend * ontimeupdate * ontoggle * onvolumechange * onwaiting The attributes marked with an asterisk have a different meaning when specified on body elements as those elements expose event handlers of the Window object with the same names. While these attributes apply to all elements, they are not useful on all elements. For example, only media elements will ever receive a volumechange event fired by the user agent. ---------------------------------------------------------------------- Custom data attributes (e.g., data-foldername or data-msgid) can be specified on any HTML element, to store custom data specific to the page. ---------------------------------------------------------------------- In HTML documents, elements in the HTML namespace may have an xmlns attribute specified, if, and only if, it has the exact value "http://www.w3.org/1999/xhtml". This does not apply to XML documents. In HTML, the xmlns attribute has absolutely no effect. It is basically a talisman. It is allowed merely to make migration to and from XML mildly easier. When parsed by an HTML parser, the attribute ends up in no namespace, not the "http://www.w3.org/2000/xmlns/" namespace like namespace declaration attributes in XML do. In XML, an xmlns attribute is part of the namespace declaration mechanism, and an element cannot actually have an xmlns attribute in no namespace specified. ---------------------------------------------------------------------- The XML specification also allows the use of the xml:space attribute in the XML namespace on any element in an XML document. This attribute has no effect on HTML elements, as the default behavior in HTML is to preserve white space. [XML] There is no way to serialize the xml:space attribute on HTML elements in the text/html syntax. 3.2.5.1. The title attribute The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; on interactive content, it could be a label for, or instructions for, use of the element; and so forth. The value is text. Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g., requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet). If this attribute is omitted from an element, then it implies that the title attribute of the nearest ancestor HTML element with a title attribute set is also relevant to this element. Setting the attribute overrides this, explicitly stating that the advisory information of any ancestors is not relevant to this element. Setting the attribute to the empty string indicates that the element has no advisory information. If the title attribute’s value contains U+000A LINE FEED (LF) characters, the content is split into multiple lines. Each U+000A LINE FEED (LF) character represents a line break. Caution is advised with respect to the use of newlines in title attributes. For instance, the following snippet actually defines an abbreviation’s expansion with a line break in it:

My logs show that there was some interest in HTTP today.

Some elements, such as link, abbr, and input, define additional semantics for the title attribute beyond the semantics described above. The advisory information of an element is the value that the following algorithm returns, with the algorithm being aborted once a value is returned. When the algorithm returns the empty string, then there is no advisory information. 1. If the element is a link, style, dfn, or abbr, then: if the element has a title attribute, return the value of that attribute, otherwise, return the empty string. 2. Otherwise, if the element has a title attribute, then return its value. 3. Otherwise, if the element has a parent element, then return the parent element’s advisory information. 4. Otherwise, return the empty string. User agents should inform the user when elements have advisory information, otherwise the information would not be discoverable. ---------------------------------------------------------------------- The title IDL attribute must reflect the title content attribute. 3.2.5.2. The lang and xml:lang attributes The lang attribute (in no namespace) specifies the primary language for the element’s contents and for any of the element’s attributes that contain text. Its value must be a valid BCP 47 language tag, or the empty string. Setting the attribute to the empty string indicates that the primary language is unknown. [BCP47] The lang attribute in the XML namespace is defined in XML. [XML] If these attributes are omitted from an element, then the language of this element is the same as the language of its parent element, if any. The lang attribute in no namespace may be used on any HTML element. The lang attribute in the XML namespace may be used on HTML elements in XML documents, as well as elements in other namespaces if the relevant specifications allow it (in particular, MathML and SVG allow lang attributes in the XML namespace to be specified on their elements). If both the lang attribute in no namespace and the lang attribute in the XML namespace are specified on the same element, they must have exactly the same value when compared in an ASCII case-insensitive manner. Authors must not use the lang attribute in the XML namespace on HTML elements in HTML documents. To ease migration to and from XHTML, authors may specify an attribute in no namespace with no prefix and with the literal localname "xml:lang" on HTML elements in HTML documents, but such attributes must only be specified if a lang attribute in no namespace is also specified, and both attributes must have the same value when compared in an ASCII case-insensitive manner. The attribute in no namespace with no prefix and with the literal localname "xml:lang" has no effect on language processing. The language of HTML documents is indicated using a lang attribute (on the html element itself, to indicate the primary language of the document, and on individual elements, to indicate a change in language). It provides an explicit indication to user agents about the language of content in order to enable language specific behavior. For example, use of an appropriate language dictionary; selection of an appropriate font or glyphs for characters shared between different languages; or in the case of screen readers and similar assistive technologies with voice output, pronunciation of content using the correct voice / language library. Incorrect or absent lang attributes can produce unexpected results in other circumstances, as they are also used to determine quotation marks for q elements, styling such as hyphenation, case conversion, line-breaking, and spell-checking in some editors, etc. Setting the lang attribute to a language which does not match the language of the document or document parts will result in some users being unable to understand the content. ---------------------------------------------------------------------- To determine the language of a node, user agents must look at the nearest ancestor element (including the element itself if the node is an element) that has a lang attribute in the XML namespace set or is an HTML element and has a lang in no namespace attribute set. That attribute specifies the language of the node (regardless of its value). If both the lang attribute in no namespace and the lang attribute in the XML namespace are set on an element, user agents must use the lang attribute in the XML namespace, and the lang attribute in no namespace must be ignored for the purposes of determining the element’s language. If node’s inclusive ancestors do not have either attribute set, but there is a pragma-set default language set, then that is the language of the node. If there is no pragma-set default language set, then language information from a higher-level protocol (such as HTTP), if any, must be used as the final fallback language instead. In the absence of any such language information, and in cases where the higher-level protocol reports multiple languages, the language of the node is unknown, and the corresponding language tag is the empty string. For example, if a document is delivered over HTTP and the Content-Language HTTP header is specified with a value "en", then for any element in the document that does not itself have a lang attribute nor any ancestor of that element, the fallback language for the element will be English. If the value of the Content-Language header was "de, fr, it" then the language of the node is unknown. This article provides some additional guidance on the use of HTTP headers, and meta elements for providing language information. If the resulting value is not a recognized language tag, then it must be treated as an unknown language having the given language tag, distinct from all other languages. For the purposes of round-tripping or communicating with other services that expect language tags, user agents should pass unknown language tags through unmodified, and tagged as being BCP 47 language tags, so that subsequent services do not interpret the data as another type of language description. [BCP47] Thus, for instance, an element with lang="xyzzy" would be matched by the selector :lang(xyzzy) (e.g., in CSS), but it would not be matched by :lang(abcde), even though both are equally invalid. Similarly, if a Web browser and screen reader working in unison communicated about the language of the element, the browser would tell the screen reader that the language was "xyzzy", even if it knew it was invalid, just in case the screen reader actually supported a language with that tag after all. Even if the screen reader supported both BCP 47 and another syntax for encoding language names, and in that other syntax the string "xyzzy" was a way to denote the Belarusian language, it would be incorrect for the screen reader to then start treating text as Belarusian, because "xyzzy" is not how Belarusian is described in BCP 47 codes (BCP 47 uses the code "be" for Belarusian). If the resulting value is the empty string, then it must be interpreted as meaning that the language of the node is explicitly unknown. ---------------------------------------------------------------------- User agents may use the element’s language to determine proper processing or rendering (e.g., in the selection of appropriate fonts or pronunciations, for dictionary selection, or for the user interfaces of form controls such as date pickers). ---------------------------------------------------------------------- The lang IDL attribute must reflect the lang content attribute in no namespace. 3.2.5.3. The translate attribute The translate attribute is an enumerated attribute that is used to specify whether an element’s attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged. The attribute’s keywords are the empty string, yes, and no. The empty string and the yes keyword map to the yes state. The no keyword maps to the no state. In addition, there is a third state, the inherit state, which is the missing value default (and the invalid value default). Each element (even non-HTML elements) has a translation mode, which is in either the translate-enabled state or the no-translate state. If an HTML element's translate attribute is in the yes state, then the element’s translation mode is in the translate-enabled state; otherwise, if the element’s translate attribute is in the no state, then the element’s translation mode is in the no-translate state. Otherwise, either the element’s translate attribute is in the inherit state, or the element is not an HTML element and thus does not have a translate attribute; in either case, the element’s translation mode is in the same state as its parent element’s, if any, or in the translate-enabled state, if the element is a document element. When an element is in the translate-enabled state, the element’s translatable attributes and the values of its Text node children are to be translated when the page is localized. When an element is in the no-translate state, the element’s attribute values and the values of its Text node children are to be left as-is when the page is localized, e.g., because the element contains a person’s name or a name of a computer program. The following attributes are translatable attributes: * abbr on th elements * alt on area, img, and input elements * content on meta elements, if the name attribute specifies a metadata name whose value is known to be translatable * download on a and area elements * label on optgroup, option, and track elements * lang on HTML elements; must be "translated" to match the language used in the translation * placeholder on input and textarea elements * srcdoc on iframe elements; must be parsed and recursively processed * style on HTML elements; must be parsed and recursively processed (e.g., for the values of content properties) * title on all HTML elements * value on input elements with a type attribute in the Button state or the Reset Button state Other specifications may define other attributes that are also translatable attributes. For example, ARIA would define the aria-label attribute as translatable. ---------------------------------------------------------------------- The translate IDL attribute must, on getting, return true if the element’s translation mode is translate-enabled, and false otherwise. On setting, it must set the content attribute’s value to "yes" if the new value is true, and set the content attribute’s value to "no" otherwise. In this example, everything in the document is to be translated when the page is localized, except the sample keyboard input and sample program output: The Bee Game

The Bee Game is a text adventure game in English.

When the game launches, the first thing you should do is type eat honey. The game will respond with:

Yum yum! That was some good honey!
3.2.5.4. The xml:base attribute (XML only) The xml:base attribute is defined in XML Base. [XMLBASE] The xml:base attribute may be used on HTML elements of XML documents. Authors must not use the xml:base attribute on HTML elements in HTML documents. 3.2.5.5. The dir attribute The dir attribute specifies the element’s text directionality. The attribute is an enumerated attribute with the following keywords and states: The ltr keyword, which maps to the ltr state Indicates that the contents of the element are explicitly directionally isolated left-to-right text. The rtl keyword, which maps to the rtl state Indicates that the contents of the element are explicitly directionally isolated right-to-left text. The auto keyword, which maps to the auto state Indicates that the contents of the element are explicitly directionally isolated text, but that the direction is to be determined programmatically using the contents of the element (as described below). The heuristic used by this state is very crude (it just looks at the first character with a strong directionality, in a manner analogous to the Paragraph Level determination in the bidirectional algorithm). Authors are urged to only use this value as a last resort when the direction of the text is truly unknown and no better server-side heuristic can be applied. [BIDI] For textarea and pre elements, the heuristic is applied on a per-paragraph level. The attribute has no invalid value default and no missing value default. ---------------------------------------------------------------------- The directionality of an element (any element, not just an HTML element) is either 'ltr' or 'rtl', and is determined as per the first appropriate set of steps from the following list: If the element’s dir attribute is in the ltr state If the element is a document element and the dir attribute is not in a defined state (i.e., it is not present or has an invalid value) If the element is an input element whose type attribute is in the Telephone state, and the dir attribute is not in a defined state (i.e., it is not present or has an invalid value) The directionality of the element is 'ltr'. If the element’s dir attribute is in the rtl state The directionality of the element is 'rtl'. If the element is an input element whose type attribute is in the Text, Search, Telephone, URL, or E-mail state, and the dir attribute is in the auto state If the element is a textarea element and the dir attribute is in the auto state If the element’s value contains a character of bidirectional character type AL or R, and there is no character of bidirectional character type L anywhere before it in the element’s value, then the directionality of the element is 'rtl'. [BIDI] Otherwise, if the element’s value is not the empty string, or if the element is a document element, the directionality of the element is 'ltr'. Otherwise, the directionality of the element is the same as the element’s parent element’s directionality. If the element’s dir attribute is in the auto state If the element is a bdi element and the dir attribute is not in a defined state (i.e., it is not present or has an invalid value) Find the first character in tree order that matches the following criteria: * The character is from a Text node that is a descendant of the element whose directionality is being determined. * The character is of bidirectional character type L, AL, or R. [BIDI] * The character is not in a Text node that has an ancestor element that is a descendant of the element whose directionality is being determined and that is either: * A bdi element. * A script element. * A style element. * A textarea element. * An element with a dir attribute in a defined state. If such a character is found and it is of bidirectional character type AL or R, the directionality of the element is 'rtl'. If such a character is found and it is of bidirectional character type L, the directionality of the element is 'ltr'. Otherwise, if the element is a document element, the directionality of the element is 'ltr'. Otherwise, the directionality of the element the same as the element’s parent element’s directionality. If the element has a parent element and the dir attribute is not in a defined state (i.e., it is not present or has an invalid value) The directionality of the element is the same as the element’s parent element’s directionality. Since the dir attribute is only defined for HTML elements, it cannot be present on elements from other namespaces. Thus, elements from other namespaces always just inherit their directionality from their parent element, or, if they don’t have one, default to 'ltr'. This attribute has rendering requirements involving the bidirectional algorithm. ---------------------------------------------------------------------- The directionality of an attribute of an HTML element, which is used when the text of that attribute is to be included in the rendering in some manner, is determined as per the first appropriate set of steps from the following list: If the attribute is a directionality-capable attribute and the element’s dir attribute is in the auto state Find the first character (in logical order) of the attribute’s value that is of bidirectional character type L, AL, or R. [BIDI] If such a character is found and it is of bidirectional character type AL or R, the directionality of the attribute is 'rtl'. Otherwise, the directionality of the attribute is 'ltr'. Otherwise The directionality of the attribute is the same as the element’s directionality. The following attributes are directionality-capable attributes: * abbr on th elements * alt on area, img, and input elements * content on meta elements, if the name attribute specifies a metadata name whose value is primarily intended to be human-readable rather than machine-readable * label on optgroup, option, and track elements * placeholder on input and textarea elements * title on all HTML elements ---------------------------------------------------------------------- document . dir [ = value ] Returns the html element’s dir attribute’s value, if any. Can be set, to either 'ltr', 'rtl', or 'auto' to replace the html element’s dir attribute’s value. If there is no html element, returns the empty string and ignores new values. The dir IDL attribute on an element must reflect the dir content attribute of that element, limited to only known values. The dir IDL attribute on Document objects must reflect the dir content attribute of the html element, if any, limited to only known values. If there is no such element, then the attribute must return the empty string and do nothing on setting. Authors are strongly encouraged to use the dir attribute to indicate text direction rather than using CSS, since that way their documents will continue to render correctly even in the absence of CSS (e.g., as interpreted by search engines). This markup fragment is of an IM conversation.

Student: How do you write "What’s your name?" in Arabic?

Teacher: ما اسمك؟

Student: Thanks.

Teacher: That’s written "شكرًا".

Teacher: Do you know how to write "Please"?

Student: "من فضلك", right?

Given a suitable style sheet and the default alignment styles for the p element, namely to align the text to the start edge of the paragraph, the resulting rendering could be as follows: Each paragraph rendered as a separate block, with the paragraphs left-aligned except the second paragraph and the last one, which would be right aligned, with the usernames ('Student' and 'Teacher' in this example) flush right, with a colon to their left, and the text first to the left of that. As noted earlier, the 'auto' value is not a panacea. The final paragraph in this example is misinterpreted as being right-to-left text, since it begins with an Arabic character, which causes the "right?" to be to the left of the Arabic text. 3.2.5.6. The style attribute All HTML elements may have the style content attribute set. This is a style attribute as defined by the CSS Style Attributes specification. [CSS-STYLE-ATTR] In user agents that support CSS, the attribute’s value must be parsed when the attribute is added or has its value changed, according to the rules given for style attributes. [CSS-STYLE-ATTR] However, if the Should element’s inline behavior be blocked by Content Security Policy? algorithm returns "Blocked" when executed upon the attribute’s element and "style attribute", and the attribute’s value, then the style rules defined in the attribute’s value must not be applied to the element. [CSP3] Documents that use style attributes on any of their elements must still be comprehensible and usable if those attributes were removed. In particular, using the style attribute to hide and show content, or to convey meaning that is otherwise not included in the document, is non-conforming. (To hide and show content, use the hidden attribute.) ---------------------------------------------------------------------- element . style Returns a CSSStyleDeclaration object for the element’s style attribute. The style IDL attribute is defined in the CSS Object Model (CSSOM) specification. [CSSOM] In the following example, the words that refer to colors are marked up using the span element and the style attribute to make those words show up in the relevant colors in visual media.

My sweat suit is green and my eyes are blue.

3.2.5.7. Embedding custom non-visible data with the data-* attributes A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no uppercase ASCII letters. All attribute names on HTML elements in HTML documents get ASCII-lowercased automatically, so the restriction on ASCII uppercase letters doesn’t affect such documents. Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements. These attributes are not intended for use by software that is not known to the administrators of the site that uses the attributes. For generic extensions that are to be used by multiple independent tools, either this specification should be extended to provide the feature explicitly, or a technology like microdata should be used (with a standardized vocabulary). For instance, a site about music could annotate list items representing tracks in an album with custom data attributes containing the length of each track. This information could then be used by the site itself to allow the user to sort the list by track length, or to filter the list for tracks of certain lengths.
  1. Beyond The Sea
  2. ...
It would be inappropriate, however, for the user to use generic software not associated with that music site to search for tracks of a certain length by looking at this data. This is because these attributes are intended for use by the site’s own scripts, and are not a generic extension mechanism for publicly-usable metadata. Similarly, a page author could write markup that provides information for a translation tool that they are intending to use:

The third claim covers the case of HTML markup.

In this example, the "data-mytrans-de" attribute gives specific text for the MyTrans product to use when translating the phrase "claim" to German. However, the standard translate attribute is used to tell it that in all languages, "HTML" is to remain unchanged. When a standard attribute is available, there is no need for a custom data attribute to be used. Every HTML element may have any number of custom data attributes specified, with any value. Authors should carefully design such extensions so that when the attributes are ignored and any associated CSS dropped, the page is still usable. User agents must not derive any implementation behavior from these attributes or values. Specifications intended for user agents must not define these attributes to have any meaningful values. JavaScript libraries may use the custom data attributes, as they are considered to be part of the page on which they are used. Authors of libraries that are reused by many authors are encouraged to include their name in the attribute names, to reduce the risk of clashes. Where it makes sense, library authors are also encouraged to make the exact name used in the attribute names customizable, so that libraries whose authors unknowingly picked the same name can be used on the same page, and so that multiple versions of a particular library can be used on the same page even when those versions are not mutually compatible. For example, a library called "DoQuery" could use attribute names like data-doquery-range, and a library called "jJo" could use attributes names like data-jjo-range. The jJo library could also provide an API to set which prefix to use (e.g. J.setDataPrefix("j2"), making the attributes have names like data-j2-range). ---------------------------------------------------------------------- element . dataset Returns a DOMStringMap object for the element’s data-* attributes. Hyphenated names are converted to dromedary-case (which is the same as camel-case except the initial letter is not uppercased). For example, data-foo-bar="" becomes element.dataset.fooBar. The dataset IDL attribute provides convenient accessors for all the data-* attributes on an element. On getting, the dataset IDL attribute must return a DOMStringMap whose associated element is this element. The DOMStringMap interface is used for the dataset attribute. Each DOMStringMap has an associated element. [OverrideBuiltins] interface DOMStringMap { getter DOMString (DOMString name); [CEReactions] setter void (DOMString name, DOMString value); [CEReactions] deleter void (DOMString name); }; To get a DOMStringMap's name-value pairs, run the following algorithm: 1. Let list be an empty list of name-value pairs. 2. For each content attribute on the DOMStringMap's associated element whose first five characters are the string "data-" and whose remaining characters (if any) do not include any uppercase ASCII letters, in the order that those attributes are listed in the element’s attribute list, add a name-value pair to list whose name is the attribute’s name with the first five characters removed and whose value is the attribute’s value. 3. For each name in list, for each U+002D HYPHEN-MINUS character (-) in the name that is followed by a lowercase ASCII letter, remove the U+002D HYPHEN-MINUS character (-) and replace the character that followed it by the same character in ASCII uppercase. 4. Return list. The supported property names on a DOMStringMap object at any instant are the names of each pair returned from getting the DOMStringMap’s name-value pairs at that instant, in the order returned. To determine the value of a named property name for a DOMStringMap, return the value component of the name-value pair whose name component is name in the list returned from getting the DOMStringMap’s name-value pairs. To set the value of a new named property or set the value of an existing named property for a DOMStringMap, given a property name name and a new value value, run the following steps: 1. If name contains a U+002D HYPHEN-MINUS character (-) followed by a lowercase ASCII letter, then throw a "SyntaxError" DOMException and abort these steps. 2. For each uppercase ASCII letter in name, insert a U+002D HYPHEN-MINUS character (-) before the character and replace the character with the same character in ASCII lowercase. 3. Insert the string data- at the front of name. 4. If name does not match the XML Name production, throw an "InvalidCharacterError" DOMException and abort these steps. 5. Set an attribute value for the DOMStringMap's associated element using name and value. To delete an existing named property name for a DOMStringMap, run the following steps: 1. For each uppercase ASCII letter in name, insert a U+002D HYPHEN-MINUS character (-) before the character and replace the character with the same character in ASCII lowercase. 2. Insert the string data- at the front of name. 3. Remove an attribute by name given name, and the DOMStringMap's associated element. This algorithm will only get invoked by the Web IDL specification for names that are given by the earlier algorithm for getting the DOMStringMap’s name-value pairs. [WEBIDL] If a Web page wanted an element to represent a space ship, e.g., as part of a game, it would have to use the class attribute along with data-* attributes:
Notice how the hyphenated attribute name becomes dromedary-cased in the API. Given the following fragment and elements with similar constructions: Rocket Tower ...one could imagine a function splashDamage() that takes some arguments, the first of which is the element to process: function splashDamage(node, x, y, damage) { if (node.classList.contains('tower') && // checking the 'class' attribute node.dataset.x == x && // reading the 'data-x' attribute node.dataset.y == y) { // reading the 'data-y' attribute var hp = parseInt(node.dataset.hp); // reading the 'data-hp' attribute hp = hp - damage; if (hp < 0) { hp = 0; node.dataset.ai = 'dead'; // setting the 'data-ai' attribute delete node.dataset.ability; // removing the 'data-ability' attribute } node.dataset.hp = hp; // setting the 'data-hp' attribute } } 3.2.6. The innerText IDL attribute element . innerText [ = value ] Returns the element’s text content "as rendered". Can be set, to replace the element’s children with the given value, but with line breaks converted to br elements. On getting, the innerText attribute must follow these steps: 1. If this element is not being rendered, or if the user agent is a non-CSS user agent, then return the same value as the textContent IDL attribute on this element. 2. Compute a list of items each of which is a string or a positive integer (a required line break count), by applying the following recursive procedure to each child node node of this element in tree order, and then concatenating the results to a single list of items. Intuitively, a required line break count item means that a certain number of line breaks appear at that point, but they can be collapsed with the line breaks induced by adjacent required line break count items, reminiscent to CSS margin-collapsing. 1. Let items be the result of recursively applying this procedure to each child of node in tree order, and then concatenating the results to a single list of items. 2. If node’s computed value of visibility is not "visible", then let the result of these substeps be items and abort these substeps. 3. If node has no associated CSS box, then let the result of these substeps be items and abort these substeps. For the purpose of this step, the following elements must act as described if the computed value of the display property is not "none": * select elements have an associated non-replaced inline CSS box whose child boxes include only those of optgroup and option element child nodes; * optgroup elements have an associated non-replaced block-level CSS box whose child boxes include only those of option element child nodes; and * option element have an associated non-replaced block-level CSS box whose child boxes are as normal for non-replaced block-level CSS boxes. items can be non-empty due to "display:contents". 4. If node is a Text node, then for each CSS text box produced by node, in content order, compute the text of the box after application of the CSS white-space processing rules and text-transform rules, let the result of these substeps be a list of the resulting strings, and abort these substeps. The CSS white-space processing rules are slightly modified: collapsible spaces at the end of lines are always collapsed, but they are only removed if the line is the last line of the block, or it ends with a br element. Soft hyphens should be preserved. [CSS-TEXT-3] 5. If node is a br element, then append a string containing a single U+000A LINE FEED (LF) character to items. 6. If node’s computed value of display is table-cell, and node’s CSS box is not the last table-cell box of its enclosing table-row box, then append a string containing a single U+0009 CHARACTER TABULATION (tab) character to items. 7. If node’s computed value of display is table-cell, and node’s CSS box is not the last table-cell box of the nearest ancestor table box, then append a string containing a single U+000A LINE FEED (LF) character to items. 8. If node is a p element, then add 2 (a required line break count) at the beginning and end of items. 9. If node’s used value of display is block-level or table-caption, then add 1 (a required line break count) at the beginning and end of items. [CSS-DISPLAY-3] Floats and absolutely-positioned elements fall into this category. 10. Let the result of these substeps be items. 3. Delete any string items whose strings are empty. 4. Delete any runs of consecutive required line break count items at the start or end of the list. 5. Replace each remaining run of consecutive required line break count items with a string consisting of as many U+000A LINE FEED (LF) characters as the maximum of the values in the required line break count items. 6. Return the concatenation of the string items. Note that descendant nodes of most replaced elements (e.g., textarea, input, and video — but not button) are not rendered by CSS, strictly speaking, and therefore have no CSS boxes for the purposes of this algorithm. On setting, the innerText attribute must follow these steps: 1. Let document be this element’s node document. 2. Let fragment be a new DocumentFragment object whose node document is document. 3. Let input be the given value. 4. Let pointer be a pointer into input, initially pointing at the start of the string. 5. Let text be the empty string. 6. While pointer is not past the end of input: 1. Collect a sequence of characters that are not U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters. Set text to the collected characters. 2. If text is not the empty string, then append a new Text node whose data is text and node document is document to fragment. 3. While pointer is not past the end of input, and the character at position is either a U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) character: 1. If the character at position is a U+000D CARRIAGE RETURN (CR) character and the next character is a U+000A LINE FEED (LF) character, then advance position to the next character in input. 2. Advance position to the next character in input. 3. Append the result of creating an element given document, br, and the HTML namespace to fragment. 7. Replace all with fragment within this element. 3.2.7. Requirements relating to the bidirectional algorithm 3.2.7.1. Authoring conformance criteria for bidirectional-algorithm formatting characters Text content in HTML elements with Text nodes in their contents, and text in attributes of HTML elements that allow free-form text, may contain characters in the ranges U+202A to U+202E and U+2066 to U+2069 (the bidirectional-algorithm formatting characters). [BIDI] Authors are encouraged to use the dir attribute, the bdo element, and the bdi element, rather than maintaining the bidirectional-algorithm formatting characters manually. The bidirectional-algorithm formatting characters interact poorly with CSS. 3.2.7.2. User agent conformance criteria User agents must implement the Unicode bidirectional algorithm to determine the proper ordering of characters when rendering documents and parts of documents. [BIDI] The mapping of HTML to the Unicode bidirectional algorithm must be done in one of three ways. Either the user agent must implement CSS, including in particular the CSS unicode-bidi, direction, and content properties, and must have, in its user agent style sheet, the rules using those properties given in this specification’s rendering section, or, alternatively, the user agent must act as if it implemented just the aforementioned properties and had a user agent style sheet that included all the aforementioned rules, but without letting style sheets specified in documents override them, or, alternatively, the user agent must implement another styling language with equivalent semantics. [CSS-WRITING-MODES-3] [CSS3-CONTENT] The following elements and attributes have requirements defined by the rendering section that, due to the requirements in this section, are requirements on all user agents (not just those that support the suggested default rendering): * dir attribute * bdi element * bdo element * br element * pre element * textarea element * wbr element 3.2.8. WAI-ARIA and HTML Accessibility API Mappings 3.2.8.1. ARIA Authoring Requirements Authors may use the ARIA role and aria-* attributes on HTML elements, in accordance with the requirements described in the ARIA specifications, except where these conflict with the requirements specified in ARIA in HTML [html-aria]. These exceptions are intended to prevent authors from making assistive technology products report nonsensical states that do not represent the actual state of the document. [wai-aria-1.1] In the majority of cases setting an ARIA role and/or aria-* attribute that matches the default implicit ARIA semantics is unnecessary and not recommended as these properties are already set by the browser. Authors are encouraged to make use of the following documents for guidance on using ARIA in HTML beyond that which is provided in this section: * Using ARIA - A practical guide for developers on how to to add accessibility information to HTML elements using the Accessible Rich Internet Applications specification [wai-aria-1.1]. * WAI-ARIA Authoring Practices 1.1 - An author’s guide to understanding and implementing Accessible Rich Internet Applications. 3.2.8.2. Conformance Checker Implementation Requirements Conformance checkers are required to implement document conformance requirements for use of the ARIA role and aria-* attributes on HTML elements, as defined in ARIA in HTML. [html-aria] 3.2.8.3. User Agent Implementation Requirements User agents must implement ARIA semantics on all HTML elements, as defined in the ARIA specifications [wai-aria-1.1] and [core-aam-1.1]. User agents must implement Accessibility API semantics on all HTML elements, as defined in the HTML Accessibility API Mappings specification [html-aam-1.0]. The ARIA attributes defined in the ARIA specifications do not have any effect on CSS pseudo-class matching, user interface modalities that don’t use assistive technologies, or the default actions of user interaction events as described in this specification. 3.2.8.3.1. ARIA Role Attribute Every HTML element may have an ARIA role attribute specified. This is an ARIA Role attribute as defined by [wai-aria-1.1]. The attribute, if specified, must have a value that is a set of space-separated tokens; each token must be a non-abstract role defined in the WAI-ARIA specification [wai-aria-1.1]. The WAI-ARIA role that an HTML element has assigned to it is the first non-abstract role found in the list of values generated when the role attribute is split on spaces. 3.2.8.3.2. State and Property Attributes Every HTML element may have ARIA state and property attributes specified. These attributes are defined by [wai-aria-1.1]. A subset of the ARIA State and Property attributes are defined as "Global States and Properties" in the [wai-aria-1.1] specification. These attributes, if specified, must have a value that is the ARIA value type in the "Value" field of the definition for the state or property, mapped to the appropriate HTML value type according to [wai-aria-1.1]. ARIA State and Property attributes can be used on any element. They are not always meaningful, however, and in such cases user agents might not perform any processing aside from including them in the DOM. State and property attributes are processed according to the requirements of the HTML Accessibility API Mappings specification [html-aam-1.0], as well as [wai-aria-1.1] and, as defined in the ARIA specifications [WAI-ARIA] and [core-aam-1.1]. 3.2.8.4. Allowed ARIA roles, states and properties This section is non-normative. The following table provides an informative reference to the ARIA roles, states and properties permitted for use in HTML. Links to ARIA roles, states and properties in the table reference the normative definitions in the [wai-aria-1.1] specification. ARIA Roles, States and Properties Role Description Required Properties Supported Properties * aria-atomic * aria-busy (state) * aria-controls * aria-current (state) * aria-describedby * aria-details * aria-disabled (state) * aria-dropeffect * aria-errormessage global aria-* * aria-flowto attributes can be any used on any HTML none * aria-grabbed (state) element. * aria-haspopup * aria-hidden (state) * aria-invalid (state) * aria-keyshortcuts * aria-label * aria-labelledby * aria-live * aria-owns * aria-relevant * aria-roledescription A message with important, and usually alert time-sensitive, none * aria-expanded (state) information. See related alertdialog and status. A type of dialog that contains an alert message, where initial * aria-expanded (state) alertdialog focus goes to an none element within * aria-dialog the dialog. See related alert and dialog. A structure containing one or more focusable elements requiring user input, such as application keyboard or none * aria-expanded (state) gesture events, that do not follow a standard interaction pattern supported by a widget role. A section of a page that consists of a article composition that none * aria-expanded (state) forms an independent part of a document, page, or site. A region that contains mostly site-oriented banner content, rather none * aria-expanded (state) than page-specific content. An input that allows for user-triggered * aria-expanded (state) button actions when none clicked or * aria-pressed (state) pressed. See related link. A checkable input that has three * aria-checked checkbox possible values: (state) none true, false, or mixed. * aria-colspan A cell in a cell tabular none * aria-rowindex container. * aria-rowspan * aria-sort * aria-readonly * aria-required A cell containing header * aria-selected (state) columnheader information for a none column. * aria-expanded (state) * aria-colspan * aria-rowindex * aria-rowspan A presentation of a select; usually similar to a * aria-autocomplete textbox where users can type * aria-controls * aria-required combobox ahead to select an option, or * aria-expanded * aria-activedescendant type to enter (state) arbitrary text as * aria-orientation a new item in the list. See related listbox. A supporting section of the document, designed to be complementary to the main content complementary at a similar none * aria-expanded (state) level in the DOM hierarchy, but remains meaningful when separated from the main content. A large perceivable region that contentinfo contains none * aria-expanded (state) information about the parent document. definition A definition of a none * aria-expanded (state) term or concept. A dialog is an application window that is designed to interrupt the current processing of an * aria-expanded (state) dialog application in none order to prompt * aria-dialog the user to enter information or require a response. See related alertdialog. A list of references to directory members of a none * aria-expanded (state) group, such as a static table of contents. A region containing related document information that none * aria-expanded (state) is declared as document content, as opposed to a web application. A scrollable list of articles where scrolling may feed cause articles to none * aria-expanded (state) be added to or removed from either end of the list. A perceivable section of content that typically figure contains a none * aria-expanded (state) graphical document, images, code snippets, or example text. A landmark region that contains a collection of form items and objects none * aria-expanded (state) that, as a whole, combine to create a form. See related search. * aria-level A grid is an * aria-multiselectable interactive control which * aria-readonly contains cells of grid tabular data none * aria-activedescendant arranged in rows and columns, like * aria-expanded (state) a table. * aria-colcount * aria-rowcount * aria-readonly * aria-required * aria-selected (state) A cell in a grid gridcell or treegrid. none * aria-expanded (state) * aria-colspan * aria-rowindex * aria-rowspan A set of user interface objects which are not intended to be * aria-activedescendant group included in a none page summary or * aria-expanded (state) table of contents by assistive technologies. A heading for a * aria-level heading section of the none page. * aria-expanded (state) A container for a img collection of none * aria-expanded (state) elements that form an image. An interactive reference to an internal or external resource link that, when none * aria-expanded (state) activated, causes the user agent to navigate to that resource. See related button. A group of list non-interactive none * aria-expanded (state) list items. See related listbox. * aria-multiselectable A widget that allows the user * aria-required to select one or more items from a * aria-expanded (state) listbox list of choices. none See related * aria-activedescendant combobox and list. * aria-expanded (state) * aria-orientation * aria-level A single item in * aria-posinset listitem a list or none directory. * aria-setsize * aria-expanded (state) A type of live region where new information is added in log meaningful order none * aria-expanded (state) and old information may disappear. See related marquee. main The main content none * aria-expanded (state) of a document. A type of live region where non-essential marquee information none * aria-expanded (state) changes frequently. See related log. Content that MathML math represents a none * aria-expanded (state) mathematical expression. A presentation of * aria-expanded (state) menu that usually remains visible * aria-activedescendant menubar and is usually none presented * aria-expanded (state) horizontally. * aria-orientation A collection of navigational elements (usually navigation links) for none * aria-expanded (state) navigating the document or related documents. An element whose implicit native role semantics none will not be none none mapped to the accessibility API. See synonym presentation. A section whose content is note parenthetic or none * aria-expanded (state) ancillary to the main content of the resource. * aria-checked (state) A selectable item * aria-posinset option in a select list. none * aria-selected (state) * aria-setsize An element whose implicit native role semantics presentation will not be none none mapped to the accessibility API. * aria-valuemax An element that displays the * aria-valuemin progressbar progress status none for tasks that * aria-valuenow take a long time. * aria-valuetext A checkable input * aria-posinset in a group of radio radio roles, only * aria-checked * aria-selected (state) one of which can (state) be checked at a * aria-setsize time. * aria-required A group of radio * aria-activedescendant radiogroup buttons. none * aria-expanded (state) * aria-orientation A large perceivable section of a web page or document, that the author feels is important enough region to be included in none * aria-expanded (state) a page summary or table of contents, for example, an area of the page containing live sporting event statistics. * aria-level * aria-selected (state) A row of cells in * aria-activedescendant row a grid. none * aria-expanded (state) * aria-colindex * aria-rowindex A group * aria-activedescendant rowgroup containing one or none more row elements * aria-expanded (state) in a grid. * aria-sort * aria-readonly * aria-required A cell containing header * aria-selected (state) rowheader information for a none row in a grid. * aria-expanded (state) * aria-colspan * aria-rowspan * aria-rowindex A graphical object that * aria-controls controls the scrolling of * aria-orientation content within a scrollbar viewing area, * aria-valuemax * aria-expanded (state) regardless of whether the * aria-valuemin content is fully displayed within * aria-valuenow the viewing area. A landmark region that contains a collection of items and objects * aria-expanded (state) search that, as a whole, none combine to create * aria-orientation a search facility. See related form. * aria-activedescendant * aria-autocomplete A type of textbox intended for * aria-multiline searchbox specifying search none criteria.. * aria-placeholder * aria-readonly * aria-required * aria-valuemax A divider that (if focusable) separates and * aria-valuetext (if separator distinguishes * aria-valuemin focusable) sections of (if focusable) content. * aria-orientation * aria-valuenow (if focusable) A user input * aria-valuemax where the user * aria-orientation slider selects a value * aria-valuemin from within a * aria-valuetext given range. * aria-valuenow A form of range * aria-valuemax that expects the * aria-required spinbutton user to select * aria-valuemin from among * aria-valuetext discrete choices. * aria-valuenow A container whose content is advisory information for the user but is not important status enough to justify none * aria-expanded (state) an alert, often but not necessarily presented as a status bar. See related alert. A type of checkbox that represents on/off * aria-checked switch values, as (state) none opposed to checked/unchecked values. A grouping label providing a mechanism for * aria-selected (state) tab selecting the tab none content that is * aria-expanded (state) to be rendered to the user. A section containing data arranged in rows and columns. The * aria-colcount table table role is none intended for * aria-rowcount tabular containers which are not interactive. * aria-level A list of tab elements, which * aria-activedescendant tablist are references to none tabpanel * aria-expanded (state) elements. * aria-orientation A container for the resources tabpanel associated with a none * aria-expanded (state) tab, where each tab is contained in a tablist. A word or phrase with a term corresponding none none definition. See related definition. * aria-activedescendant * aria-autocomplete Input that allows * aria-multiline textbox free-form text as none its value. * aria-placeholder * aria-readonly * aria-required A type of live region containing a numerical counter which indicates an timer amount of elapsed none * aria-expanded (state) time from a start point, or the time remaining until an end point. A collection of * aria-activedescendant commonly used toolbar function buttons none * aria-expanded (state) represented in compact visual * aria-orientation form. A contextual popup that tooltip displays a none * aria-expanded (state) description for an element. * aria-multiselectable A type of list that may contain * aria-required sub-level nested tree groups that can none * aria-activedescendant be collapsed and expanded. * aria-expanded (state) * aria-orientation * aria-level * aria-multiselectable * aria-readonly A grid whose rows * aria-activedescendant can be expanded treegrid and collapsed in none * aria-expanded (state) the same manner as for a tree. * aria-required * aria-orientation * aria-colcount * aria-rowcount * aria-level An option item of a tree. This is * aria-posinset an element within a tree that may * aria-setsize treeitem be expanded or none collapsed if it * aria-expanded (state) contains a sub-level group * aria-checked (state) of treeitems. * aria-selected (state) 4. The elements of HTML 4.1. The document element 4.1.1. The html element Categories: None. Contexts in which this element can be used: As the document’s document element. Wherever a subdocument fragment is allowed in a compound document. Content model: A head element followed by a body element. Tag omission in text/html: An html element’s start tag can be omitted if the first thing inside the html element is not a comment. An html element’s end tag can be omitted if the html element is not immediately followed by a comment. Content attributes: Global attributes manifest — Application cache manifest Allowed ARIA role attribute values: None Allowed ARIA state and property attributes: None DOM interface: interface HTMLHtmlElement : HTMLElement {}; The html element represents the root of an HTML document. Authors are encouraged to specify a lang attribute on the root html element, giving the document’s language. This aids speech synthesis tools to determine what pronunciations to use, translation tools to determine what rules to use, and so forth. The manifest attribute gives the address of the document’s application cache manifest, if there is one. If the attribute is present, the attribute’s value must be a valid non-empty URL potentially surrounded by spaces. The manifest-based application cache feature is in the process of being removed from the Web platform. (This is a long process that takes many years.) Using the application cache feature at this time is highly discouraged. Use service workers instead. [SERVICE-WORKERS] The manifest attribute only has an effect during the early stages of document load. Changing the attribute dynamically thus has no effect (and thus, no DOM API is provided for this attribute). For the purposes of application cache selection, later base elements cannot affect the parsing of URLs in manifest attributes, as the attributes are processed before those elements are seen. The window.applicationCache IDL attribute provides scripted access to the offline application cache mechanism. It is recommended to keep the usage of attributes and their values defined on the html element to a minimum to allow for proper detection of the character encoding declaration within the first 1024 bytes. The html element in the following example declares that the document’s language is English. Swapping Songs

Swapping Songs

Tonight I swapped some of the songs I wrote with some friends, who gave me some of the songs they wrote. I love sharing my music.

4.2. Document metadata 4.2.1. The head element Categories: None. Contexts in which this element can be used: As the first element in an html element. Content model: If the document is an iframe srcdoc document or if title information is available from a higher-level protocol: Zero or more elements of metadata content, of which no more than one is a title element and no more than one is a base element. Otherwise: One or more elements of metadata content, of which exactly one is a title element and no more than one is a base element. Tag omission in text/html: A head element’s start tag may be omitted if the element is empty, or if the first thing inside the head element is an element. A head element’s end tag may be omitted if the head element is not immediately followed by a space character or a comment. Content attributes: Global attributes Allowed ARIA role attribute values: None Allowed ARIA state and property attributes: Global aria-* attributes DOM interface: interface HTMLHeadElement : HTMLElement {}; The head element represents a collection of metadata for the Document. The collection of metadata in a head element can be large or small. Here is an example of a very short one: A document with a short head ... Here is an example of a longer one: An application with a long head ... The title element is a required child in most situations, but when a higher-level protocol provides title information, e.g., in the Subject line of an e-mail when HTML is used as an e-mail authoring format, the title element can be omitted. It is recommended to keep the usage of attributes and their values defined on the head element to a minimum to allow for proper detection of the character encoding declaration within the first 1024 bytes. 4.2.2. The title element Categories: Metadata content. Contexts in which this element can be used: In a head element containing no other title elements. Content model: Text that is not inter-element white space. Tag omission in text/html: Neither tag is omissible. Content attributes: Global attributes Allowed ARIA role attribute values: None Allowed ARIA state and property attributes: Global aria-* attributes DOM interface: interface HTMLTitleElement : HTMLElement { attribute DOMString text; }; The title element represents the document’s title or name. Authors should use titles that identify their documents even when they are used out of context, for example in a user’s history or bookmarks, or in search results. The document’s title is often different from its first heading, since the first heading does not have to stand alone when taken out of context. There must be no more than one title element per document. If it’s reasonable for the Document to have no title, then the title element is probably not required. See the head element’s content model for a description of when the element is required. title . text [ = value ] Returns the child text content of the element. Can be set, to replace the element’s children with the given value. The IDL attribute text must return the child text content of the title element. On setting, it must act the same way as the textContent IDL attribute. Here are some examples of appropriate titles, contrasted with the top-level headings that might be used on those same pages. Introduction to The Mating Rituals of Bees ...

Introduction

This companion guide to the highly successful Introduction to Medieval Bee-Keeping book is... The next page might be a part of the same site. Note how the title describes the subject matter unambiguously, while the first heading assumes the reader knows what the context is and therefore won’t wonder if the dances are Salsa or Waltz: Dances used during bee mating rituals ...

The Dances

The string to use as the document’s title is given by the document.title IDL attribute. User agents should use the document’s title when referring to the document in their user interface. When the contents of a title element are used in this way, the directionality of that title element should be used to set the directionality of the document’s title in the user interface. 4.2.3. The base element Categories: Metadata content. Contexts in which this element can be used: In a head element containing no other base elements. Content model: Nothing. Tag omission in text/html: No end tag. Content attributes: Global attributes href — Document base URL target — Default browsing context for hyperlink navigation and §4.10.21 Form submission Allowed ARIA role attribute values: None Allowed ARIA state and property attributes: Global aria-* attributes. DOM interface: interface HTMLBaseElement : HTMLElement { attribute DOMString href; attribute DOMString target; }; The base element allows authors to specify the document base URL for the purposes of §2.5.2 Parsing URLs, and the name of the default browsing context for the purposes of following hyperlinks. The element does not represent any content beyond this information. There must be no more than one base element per document. A base element must have either an href attribute, a target attribute, or both. The href content attribute, if specified, must contain a valid URL potentially surrounded by spaces. A base element, if it has an href attribute, must come before any other elements in the tree that have attributes defined as taking URLs, except the html element (its manifest attribute isn’t affected by base elements). If there are multiple base elements with href attributes, all but the first are ignored. The target attribute, if specified, must contain a valid browsing context name or keyword, which specifies which browsing context is to be used as the default when hyperlinks and forms in the Document cause navigation. A base element, if it has a target attribute, must come before any elements in the tree that represent hyperlinks. If there are multiple base elements with target attributes, all but the first are ignored. A base element that is the first base element with an href content attribute in a document tree has a frozen base URL. The frozen base URL must be immediately set for an element whenever any of the following situations occur: * The base element becomes the first base element in tree order with an href content attribute in its Document. * The base element is the first base element in tree order with an href content attribute in its Document, and its href content attribute is changed. To set the frozen base URL, for an element element: 1. Let document be element’s node document. 2. Let urlRecord be the result of parsing the value of element’s href content attribute with document’s fallback base URL, and document’s character encoding. (Thus the base element isn’t affected by itself.) 3. Set elements’s frozen base URL to document’s fallback base URL, if urlRecord is failure or running Is base allowed for Document? on the resulting URL record and document returns "Blocked", and to urlRecord otherwise. The href IDL attribute, on getting, must return the result of running the following algorithm: 1. Let document be element’s node document. 2. Let url be the value of the href attribute of the base element, if it has one, and the empty string otherwise. 3. Let urlRecord be the result of parsing url with document’s fallback base url, and document’s character encoding. (Thus, the base element isn’t affected by other base elements or itself). 4. If urlRecord is failure, return url. 5. Return the serialization of urlRecord. The href IDL attribute, on setting, must set the href content attribute to the given new value. The target IDL attribute must reflect the content attribute of the same name. In this example, a base element is used to set the document base URL: This is an example for the <base> element

Visit the archives.

The link in the above example would be a link to "https://www.example.com/news/archives.html". 4.2.4. The link element Categories: Metadata content. If the element is allowed in the body: flow content. If the element is allowed in the body: phrasing content. Contexts in which this element can be used: Where metadata content is expected. In a noscript element that is a child of a head element. If the element is allowed in the body: where phrasing content is expected. Content model: Nothing. Tag omission in text/html: No end tag. Content attributes: Global attributes href — Address of the hyperlink crossorigin — How the element handles crossorigin requests rel — Relationship of this document (or subsection/topic) to the destination resource rev — Reverse link relationship of the destination resource to this document (or subsection/topic) media — Applicable media nonce — Cryptographic nonce used in Content Security Policy checks [CSP3] hreflang — Language of the linked resource type — Hint for the type of the referenced resource referrerpolicy - Referrer policy for fetches initiated by the element sizes — Sizes of the icons (for rel="icon") Also, the title attribute has special semantics on this element: Title of the link; alternative style sheet set name. Allowed ARIA role attribute values: None Allowed ARIA state and property attributes: None DOM interface: interface HTMLLinkElement : HTMLElement { [CEReactions] attribute USVString href; [CEReactions] attribute DOMString? crossOrigin; [CEReactions] attribute DOMString rel; [CEReactions] attribute DOMString rev; [CEReactions, SameObject, PutForwards=value] readonly attribute DOMTokenList relList; [CEReactions] attribute DOMString media; [CEReactions] attribute DOMString nonce; [CEReactions] attribute DOMString hreflang; [CEReactions] attribute DOMString type; [CEReactions, SameObject, PutForwards=value] readonly attribute DOMTokenList sizes; [CEReactions] attribute DOMString referrerPolicy; }; HTMLLinkElement implements LinkStyle; The link element allows authors to link their document to other resources. The destination of the link(s) is given by the href attribute, which must be present and must contain a valid non-empty URL potentially surrounded by spaces. If the href attribute is absent, then the element does not define a link. The crossorigin attribute is a CORS settings attribute. It is intended for use with external resource links. The types of link indicated (the relationships) are given by the value of the rel attribute, which, if present, must have a value that is a set of space-separated tokens. The allowed keywords and their meanings are defined in a later section. If the rel attribute is absent, has no keywords, or if none of the keywords used are allowed according to the definitions in this specification, then the element does not create any links. rel's supported tokens are the keywords defined in HTML link types which are allowed on link elements, impact the processing model, and are supported by the user agent. The possible supported tokens are alternate, dns-prefetch, icon, next, pingback, preconnect, prefetch, preload, prerender, search, serviceworker, and stylesheet. rel's supported tokens must only include the tokens from this list that the user agent implements the processing model for. A link element must have a rel attribute. If a link element has a rel attribute that contains only keywords that are body-ok, then the element is said to be allowed in the body. This means that the element can be used where phrasing content is expected. Two categories of links can be created using the link element: Links to external resources and hyperlinks. The §4.8.6 Link types section defines whether a particular link type is an external resource or a hyperlink. One link element can create multiple links (of which some might be external resource links and some might be hyperlinks); exactly which and how many links are created depends on the keywords given in the rel attribute. User agents must process the links on a per-link basis, not a per-element basis. Each link created for a link element is handled separately. For instance, if there are two link elements with rel="stylesheet", they each count as a separate external resource, and each is affected by its own attributes independently. Similarly, if a single link element has a rel attribute with the value next stylesheet, it creates both a hyperlink (for the next keyword) and an external resource link (for the stylesheet keyword), and they are affected by other attributes (such as media or title) differently. For example, the following link element creates two hyperlinks (to the same page): The two links created by this element are one whose semantic is that the target page has information about the current page’s author, and one whose semantic is that the target page has information regarding the license under which the current page is provided. Hyperlinks created with the link element and its rel attribute apply to the whole document. This contrasts with the rel attribute of a and area elements, which indicates the type of a link whose context is given by the link’s location within the document. The exact behavior for links to external resources depends on the exact relationship, as defined for the relevant link type. Some of the attributes control whether or not the external resource is to be applied (as defined below). The media attribute says which media the resource applies to. The value must be a valid media query list. The nonce attribute represents a cryptographic nonce ("number used once") which can be used by Content Security Policy to determine whether or not an external resource specified by the link will be loaded and applied to the document. The value is text. [CSP3] The hreflang attribute on the link element has the same semantics as the hreflang attribute on the a element. The type attribute gives the MIME type of the linked resource. It is purely advisory. The value must be a valid mime type. For external resource links, the type attribute is used as a hint to user agents so that they can avoid fetching resources they do not support. The referrerpolicy attribute is a referrer policy attribute. It is intended for use with external resource links, where it helps set the referrer policy used when obtaining the external resource. [REFERRERPOLICY]. The title attribute gives the title of the link. With one exception, it is purely advisory. The value is text. The exception is for style sheet links, where the title attribute defines alternative style sheet sets. The title attribute on link elements differs from the global title attribute of most other elements in that a link without a title does not inherit the title of the parent element: it merely has no title. ---------------------------------------------------------------------- The sizes attribute gives the sizes of icons for visual media. Its value, if present, is merely advisory. User agents may use the value to decide which icon(s) to use if multiple icons are available. If specified, the attribute must have a value that is an unordered set of unique space-separated tokens which are ASCII case-insensitive. Each value must be either an ASCII case-insensitive match for the string "any", or a value that consists of two valid non-negative integers that do not have a leading U+0030 DIGIT ZERO (0) character and that are separated by a single U+0078 LATIN SMALL LETTER X or U+0058 LATIN CAPITAL LETTER X character. The attribute must not be specified on link elements that do not have a rel attribute that specifies the icon keyword or the apple-touch-icon keyword. The apple-touch-icon keyword is a registered extension to the predefined set of link types, but user agents are not required to support it in any way. ---------------------------------------------------------------------- The IDL attributes href, hreflang, media, nonce, rel, rev, sizes, and type each must reflect the respective content attributes of the same name. The crossOrigin IDL attribute must reflect the crossorigin content attribute. The referrerPolicy IDL attribute must reflect the referrerpolicy content attribute, limited to only known values. The IDL attribute relList must reflect the rel content attribute. 4.2.4.1. Processing the media attribute If the link is a hyperlink then the media attribute is purely advisory, and describes for which media the document in question was designed. However, if the link is an external resource link, then the media attribute is prescriptive. The user agent must apply the external resource when the media attribute’s value matches the environment and the other relevant conditions apply, and must not apply it otherwise. The default, if the media attribute is omitted, is "all", meaning that by default links apply to all media. The external resource might have further restrictions defined within that limit its applicability. For example, a CSS style sheet might have some @media blocks. This specification does not override such further restrictions or requirements. 4.2.4.2. Processing the type attribute If type attribute is present, then the user agent must assume that the resource is of the given type (even if that is not a valid mime type, e.g., the empty string). If the attribute is omitted, but the external resource link type has a default type defined, then the user agent must assume that the resource is of that type. If the user agent does not support the given MIME type for the given link relationship, then the user agent should not obtain the resource; if the user agent does support the given MIME type for the given link relationship, then the user agent should obtain the resource at the appropriate time as specified for the external resource link’s particular type. If the attribute is omitted, and the external resource link type does not have a default type defined, but the user agent would obtain the resource if the type was known and supported, then the user agent should obtain the resource under the assumption that it will be supported. User agents must not consider the type attribute authoritative — upon fetching the resource, user agents must not use the type attribute to determine its actual type. Only the actual type (as defined in the next paragraph) is used to determine whether to apply the resource, not the aforementioned assumed type. If the external resource link type defines rules for processing the resource’s Content-Type metadata, then those rules apply. Otherwise, if the resource is expected to be an image, user agents may apply the image sniffing rules, with the official type being the type determined from the resource’s Content-Type metadata, and use the resulting computed type of the resource as if it was the actual type. Otherwise, if neither of these conditions apply or if the user agent opts not to apply the image sniffing rules, then the user agent must use the resource’s Content-Type metadata to determine the type of the resource. If there is no type metadata, but the external resource link type has a default type defined, then the user agent must assume that the resource is of that type. The stylesheet link type defines rules for processing the resource’s Content-Type metadata. Once the user agent has established the type of the resource, the user agent must apply the resource if it is of a supported type and the other relevant conditions apply, and must ignore the resource otherwise. If a document contains style sheet links labeled as follows: ...then a compliant user agent that supported only CSS style sheets would fetch the B and C files, and skip the A file (since text/plain is not the MIME type for CSS style sheets). For files B and C, it would then check the actual types returned by the server. For those that are sent as text/css, it would apply the styles, but for those labeled as text/plain, or any other type, it would not. If one of the two files was returned without a Content-Type metadata, or with a syntactically incorrect type like Content-Type: "null", then the default type for stylesheet links would kick in. Since that default type is text/css, the style sheet would nonetheless be applied. 4.2.4.3. Obtaining a resource from a link element For external resources that are represented in the DOM (for example, style sheets), the DOM representation must be made available (modulo cross-origin restrictions) even if the resource is not applied. To obtain the resource, the user agent must run the following steps: 1. If the href attribute’s value is the empty string, then abort these steps. 2. Parse the URL given by the href attribute, relative to the element’s node document. If that fails, then abort these steps. Otherwise, let url be the resulting URL record. 3. Let corsAttributeState be the current state of the element’s crossorigin content attribute. 4. Let request be the result of creating a potential-CORS request given url and corsAttributeState. 5. Set request’s client to the link element’s node document’s Window object’s environment settings object. 6. Set request’s cryptographic nonce metadata to the current state of the link element’s nonce content attribute. 7. Set request’s referrer policy to the current state of the link element’s referrerpolicy content attribute. 8. Fetch request. User agents may opt to only try to obtain such resources when they are needed, instead of pro-actively fetching all the external resources that are not applied. The semantics of the protocol used (e.g., HTTP) must be followed when fetching external resources. (For example, redirects will be followed and 404 responses will cause the external resource to not be applied.) Once the attempts to obtain the resource and its critical subresources are complete, the user agent must, if the loads were successful, queue a task to fire a simple event named load at the link element, or, if the resource or one of its critical subresources failed to completely load for any reason (e.g., DNS error, HTTP 404 response, a connection being prematurely closed, unsupported Content-Type), queue a task to fire a simple event named error at the link element. Non-network errors in processing the resource or its subresources (e.g., CSS parse errors, PNG decoding errors) are not failures for the purposes of this paragraph. The task source for these tasks is the DOM manipulation task source. The element must delay the load event of the element’s node document until all the attempts to obtain the resource and its critical subresources are complete. (Resources that the user agent has not yet attempted to obtain, e.g., because it is waiting for the resource to be needed, do not delay the load event.) 4.2.4.4. Processing Link headers HTTP Link: headers, if supported, must be assumed to come before any links in the document, in the order that they were given in the HTTP message. These headers are distinct from HTML link types, and thus their semantics can be different from same-named HTML types. 4.2.4.5. Providing users with a means to follow hyperlinks created using the link element Interactive user agents may provide users with a means to follow the hyperlinks created using the link element, somewhere within their user interface. The exact interface is not defined by this specification, but it could include the following information (obtained from the element’s attributes, again as defined below), in some form or another (possibly simplified), for each hyperlink created with each link element in the document: * The relationship between this document and the resource (given by the rel attribute) * The title of the resource (given by the title attribute). * The address of the resource (given by the href attribute). * The language of the resource (given by the hreflang attribute). * The optimum media for the resource (given by the media attribute). User agents could also include other information, such as the type of the resource (as given by the type attribute). The activation behavior of link elements that create hyperlinks is to run the following steps: 1. If the link element’s node document is not fully active, then abort these steps. 2. Follow the hyperlink created by thelink element. 4.2.4.6. The LinkStyle interface The LinkStyle interface is also implemented by this element. [CSSOM] Here, a set of link elements provide some style sheets: The following example shows how you can specify versions of the page that use alternative formats, are aimed at other languages, and that are intended for other media: 4.2.5. The meta element Categories: Metadata content. Contexts in which this element can be used: If the charset attribute is present, or if the element’s http-equiv attribute is in the encoding declaration state: in a head element. If the http-equiv attribute is present but not in the encoding declaration state: in a head element. If the http-equiv attribute is present but not in the encoding declaration state: in a noscript element that is a child of a head element. If the name attribute is present: where metadata content is expected. Content model: Nothing. Tag omission in text/html: No end tag. Content attributes: Global attributes name — Metadata name http-equiv — Pragma directive content — Value of the element charset — Character encoding declaration Allowed ARIA role attribute values: None Allowed ARIA state and property attributes: Global aria-* attributes DOM interface: interface HTMLMetaElement : HTMLElement { attribute DOMString name; attribute DOMString httpEquiv; attribute DOMString content; }; The meta element represents various kinds of metadata that cannot be expressed using the title, base, link, style, and script elements. The meta element can represent document-level metadata with the name attribute, pragma directives with the http-equiv attribute, and the file’s character encoding declaration when an HTML document is serialized to string form (e.g., for transmission over the network or for disk storage) with the charset attribute. Exactly one of the name, http-equiv, and charset attributes must be specified. If either name or http-equiv is specified, then the content attribute must also be specified. Otherwise, it must be omitted. The charset attribute specifies the character encoding used by the document. This is a character encoding declaration. If the attribute is present in an XML document, its value must be an ASCII case-insensitive match for the string "utf-8" (and the document is therefore forced to use UTF-8 as its encoding). The charset attribute on the meta element has no effect in XML documents, and is only allowed in order to facilitate migration to and from XHTML. There must not be more than one meta element with a charset attribute per document. The content attribute gives the value of the document metadata or pragma directive when the element is used for those purposes. The allowed values depend on the exact context, as described in subsequent sections of this specification. allows authors to define specific viewport characteristics (such as the layout viewport’s width and zoom factor) for their documents. Among these is the ability to prevent or restrict users from being able to zoom, using content values such as user-scalable=no or maximum-scale=1.0. Authors should not suppress or limit the ability of users to resize a document, as this causes accessibility and usability issues. The following examples illustrate code that should be avoided: There may be specific use cases where preventing users from zooming may be appropriate, such as map applications – where custom zoom functionality is handled via scripting. However, in general this practice should be avoided, and HTML conformance checking tools should display a warning if they encounter these values. Note that most user agents now allow users to always zoom, regardless of any restrictions – either by default, or as a setting/option (which may however not be immediately apparent to users). If a meta element has a name attribute, it sets document metadata. Document metadata is expressed in terms of name-value pairs, the name attribute on the meta element giving the name, and the content attribute on the same element giving the value. The name specifies what aspect of metadata is being set; valid names and the meaning of their values are described in the following sections. If a meta element has no content attribute, then the value part of the metadata name-value pair is the empty string. The name and content IDL attributes must reflect the respective content attributes of the same name. The IDL attribute httpEquiv must reflect the content attribute http-equiv. 4.2.5.1. Standard metadata names This specification defines a few names for the name attribute of the meta element. Names are case-insensitive, and must be compared in an ASCII case-insensitive manner. application-name The value must be a short free-form string giving the name of the Web application that the page represents. If the page is not a Web application, the application-name metadata name must not be used. Translations of the Web application’s name may be given, using the lang attribute to specify the language of each name. There must not be more than one meta element with a given language and with its name attribute set to the value application-name per document. User agents may use the application name in UI in preference to the page’s title, since the title might include status messages and the like relevant to the status of the page at a particular moment in time instead of just being the name of the application. To find the application name to use given an ordered list of languages (e.g., British English, American English, and English), user agents must run the following steps: 1. Let languages be the list of languages. 2. Let default language be the language of the Document's document element, if any, and if that language is not unknown. 3. If there is a default language, and if it is not the same language as any of the languages in languages, append it to languages. 4. Let winning language be the first language in languages for which there is a meta element in the Document that has its name attribute set to the value application-name and whose language is the language in question. If none of the languages have such a meta element, then abort these steps; there’s no given application name. 5. Return the value of the content attribute of the first meta element in the Document in tree order that has its name attribute set to the value application-name and whose language is winning language. This algorithm would be used by a browser when it needs a name for the page, for instance, to label a bookmark. The languages it would provide to the algorithm would be the user’s preferred languages. author The value must be a free-form string giving the name of one of the page’s authors. description The value must be a free-form string that describes the page. The value must be appropriate for use in a directory of pages, e.g., in a search engine. There must not be more than one meta element with its name attribute set to the value description per document. generator The value must be a free-form string that identifies one of the software packages used to generate the document. This value must not be used on pages whose markup is not generated by software, e.g., pages whose markup was written by a user in a text editor. Here is what a tool called "Frontweaver" could include in its output, in the page’s head element, to identify itself as the tool used to generate the page: keywords The value must be a set of comma-separated tokens, each of which is a keyword relevant to the page. This page about typefaces on British motorways uses a meta element to specify some keywords that users might use to look for the page: Typefaces on UK motorways ... Many search engines do not consider such keywords, because this feature has historically been used unreliably and even misleadingly as a way to spam search engine results in a way that is not helpful for users. To obtain the list of keywords that the author has specified as applicable to the page, the user agent must run the following steps: 1. Let keywords be an empty list. 2. For each meta element with a name attribute and a content attribute and whose name attribute’s value is keywords, run the following substeps: 1. Split the value of the element’s content attribute on commas. 2. Add the resulting tokens, if any, to keywords. 3. Remove any duplicates from keywords. 4. Return keywords. This is the list of keywords that the author has specified as applicable to the page. User agents should not use this information when there is insufficient confidence in the reliability of the value. For instance, it would be reasonable for a content management system to use the keyword information of pages within the system to populate the index of a site-specific search engine, but a large-scale content aggregator that used this information would likely find that certain users would try to game its ranking mechanism through the use of inappropriate keywords. referrer The value must be a referrer policy, which defines the default referrer policy for the Document. [REFERRERPOLICY] If any meta elements are inserted into the document or removed from the document, or existing meta elements have their name or content attributes changed, user agents must run the following algorithm: 1. Let candidate elements be the list of all meta elements that meet the following criteria, in tree order: * The element is in a document tree * The element has a name attribute, whose value is referrer * The element has a content attribute, whose value is not the empty string * The element is a child of the head element of the document 2. For each element in candidate elements: 1. Let value be the value of element’s content attribute, converted to ASCII lowercase. 2. If value is one of the values given in the first column of the following table, then set value to the value given in the second column: Legacy value Referrer policy never no-referrer default no-referrer-when-downgrade always unsafe-url origin-when-crossorigin origin-when-cross-origin 3. If value is a referrer policy, then set element’s node document’s referrer policy to policy. The fact that these steps are applied for each element enables deployment of fallback values for older user agents. [REFERRERPOLICY] 4.2.5.2. Other metadata names Extensions to the predefined set of metadata names may be registered in the WHATWG Wiki MetaExtensions page. [WHATWGWIKI] Anyone is free to edit the WHATWG Wiki MetaExtensions page at any time to add a type. These new names must be specified with the following information: Keyword The actual name being defined. The name should not be confusingly similar to any other defined name (e.g., differing only in case). Brief description A short non-normative description of what the metadata name’s meaning is, including the format the value is required to be in. Specification A link to a more detailed description of the metadata name’s semantics and requirements. It could be another page on the Wiki, or a link to an external page. Synonyms A list of other names that have exactly the same processing requirements. Authors should not use the names defined to be synonyms, they are only intended to allow user agents to support legacy content. Anyone may remove synonyms that are not used in practice; only names that need to be processed as synonyms for compatibility with legacy content are to be registered in this way. Status One of the following: Proposed The name has not received wide peer review and approval. Someone has proposed it and is, or soon will be, using it. Ratified The name has received wide peer review and approval. It has a specification that unambiguously defines how to handle pages that use the name, including when they use it in incorrect ways. Discontinued The metadata name has received wide peer review and it has been found wanting. Existing pages are using this metadata name, but new pages should avoid it. The "brief description" and "specification" entries will give details of what authors should use instead, if anything. If a metadata name is found to be redundant with existing values, it should be removed and listed as a synonym for the existing value. If a metadata name is registered in the "proposed" state for a period of a month or more without being used or specified, then it may be removed from the registry. If a metadata name is added with the "proposed" status and found to be redundant with existing values, it should be removed and listed as a synonym for the existing value. If a metadata name is added with the "proposed" status and found to be harmful, then it should be changed to "discontinued" status. Anyone can change the status at any time, but should only do so in accordance with the definitions above. Conformance checkers may use the information given on the WHATWG Wiki MetaExtensions page to establish if a value is allowed or not: values defined in this specification or marked as "proposed" or "ratified" must be accepted, whereas values marked as "discontinued" or not listed in either this specification or on the aforementioned page must be reported as invalid. Conformance checkers may cache this information (e.g., for performance reasons or to avoid the use of unreliable network connectivity). When an author uses a new metadata name not defined by either this specification or the Wiki page, conformance checkers should offer to add the value to the Wiki, with the details described above, with the "proposed" status. Metadata names whose values are to be URLs must not be proposed or accepted. Links must be represented using the link element, not the meta element. 4.2.5.3. Pragma directives When the http-equiv attribute is specified on a meta element, the element is a pragma directive. The http-equiv attribute is an enumerated attribute. The following table lists the keywords defined for this attribute. The states given in the first cell of the rows with keywords give the states to which those keywords map. Some of the keywords are non-conforming, as noted in the last column. State Keyword Notes Content Language content-language Non-conforming Encoding declaration content-type Default style default-style Refresh refresh Cookie setter set-cookie Non-conforming When a meta element is inserted into the document, if its http-equiv attribute is present and represents one of the above states, then the user agent must run the algorithm appropriate for that state, as described in the following list: Content language state (http-equiv="content-language") This feature is non-conforming. Authors are encouraged to use the lang attribute instead. This pragma sets the pragma-set default language. Until such a pragma is successfully processed, there is no pragma-set default language. 1. If the meta element has no content attribute, then abort these steps. 2. If the element’s content attribute contains a U+002C COMMA character (,) then abort these steps. 3. Let input be the value of the element’s content attribute. 4. Let position point at the first character of input. 5. Skip white space. 6. Collect a sequence of characters that are not space characters. 7. Let candidate be the string that resulted from the previous step. 8. If candidate is the empty string, abort these steps. 9. Set the pragma-set default language to candidate. If the value consists of multiple space-separated tokens, tokens after the first are ignored. This pragma is not the same as the HTTP Content-Language header of the same name. HTTP Content-Language values with more than one language tag will be rejected as invalid by this pragma. [HTTP] Encoding declaration state (http-equiv="content-type") The encoding declaration state is just an alternative form of setting the charset attribute: it is a character encoding declaration. This state’s user agent requirements are all handled by the parsing section of the specification. For meta elements with an http-equiv attribute in the encoding declaration state, the content attribute must have a value that is an ASCII case-insensitive match for a string that consists of: the literal string "text/html;", optionally followed by any number of space characters, followed by the literal string "charset=", followed by one of the labels of the character encoding of the character encoding declaration. A document must not contain both a meta element with an http-equiv attribute in the encoding declaration state and a meta element with the charset attribute present. The encoding declaration state may be used in HTML documents and in XML Documents. If the encoding declaration state is used in XML Documents, the name of the character encoding must be an ASCII case-insensitive match for the string "UTF-8" (and the document is therefore forced to use UTF-8 as its encoding). The encoding declaration state has no effect in XML documents, and is only allowed in order to facilitate migration to and from XHTML. Default style state (http-equiv="default-style") This pragma sets the name of the default alternative style sheet set. 1. If the meta element has no content attribute, or if that attribute’s value is the empty string, then abort these steps. 2. Set the preferred style sheet set to the value of the element’s content attribute. [CSSOM] Refresh state (http-equiv="refresh") This pragma acts as timed redirect. 1. If another meta element with an http-equiv attribute in the Refresh state has already been successfully processed (i.e., when it was inserted the user agent processed it and reached the step labeled end), then abort these steps. 2. If the meta element has no content attribute, or if that attribute’s value is the empty string, then abort these steps. 3. Let input be the value of the element’s content attribute. 4. Let position point at the first character of input. 5. Skip white space. 6. Collect a sequence of characters that are ASCII digits, and parse the resulting string using the rules for parsing non-negative integers. If the sequence of characters collected is the empty string, then no number will have been parsed; abort these steps. Otherwise, let time be the parsed number. 7. Collect a sequence of characters that are ASCII digits and U+002E FULL STOP characters (.). Ignore any collected characters. 8. Let url be the meta element’s node document’s URL. 9. If position is past the end of input, jump to the step labeled end. 10. If the character in input pointed to by position is not a U+003B SEMICOLON character (;), a U+002C COMMA character (,), or a space character, then abort these steps. 11. Skip white space. 12. If the character in input pointed to by position is a U+003B SEMICOLON character (;), a U+002C COMMA character (,), then advance position to the next character. 13. Skip white space. 14. If position is past the end of input, jump to the step labeled end. 15. Let url be equal to the substring of input from the character at position to the end of the string. 16. If the character in input pointed to by position is a U+0055 LATIN CAPITAL LETTER U character (U) or a U+0075 LATIN SMALL LETTER U character (u), then advance position to the next character. Otherwise, jump to the step labeled skip quotes. 17. If the character in input pointed to by position is a U+0052 LATIN CAPITAL LETTER R character (R) or a U+0072 LATIN SMALL LETTER R character (r), then advance position to the next character. Otherwise, jump to the step labeled Parse. 18. If the character in input pointed to by position is s U+004C LATIN CAPITAL LETTER L character (L) or a U+006C LATIN SMALL LETTER L character (l), then advance position to the next character. Otherwise, jump to the step labeled Parse. 19. Skip white space. 20. If the character in input pointed to by position is a U+003D EQUALS SIGN (=), then advance position to the next character. Otherwise, jump to the step step labeled Parse. 21. Skip white space. 22. Skip quotes: If the character in input pointed to by position is either a U+0027 APOSTROPHE character (') or U+0022 QUOTATION MARK character ("), then let quote be that character, and advance position to the next character. Otherwise, let quote be the empty string. 23. Let url be equal to the substring of input from the character at position to the end of the string. 24. If quote is not the empty string, and there is a character in url equal to quote, then truncate url at that character, so that it and all subsequent characters are removed. 25. Parse: Parse url relative to the meta element’s node document. If that fails, abort these steps. Otherwise, let urlRecord be the resulting URL record. 26. End: Perform one or more of the following steps: * After the refresh has come due (as defined below), if the user has not canceled the redirect and if the meta element’s node document’s active sandboxing flag set does not have the sandboxed automatic features browsing context flag set, navigate the Document's browsing context to urlRecord, with replacement enabled, and with the Document's browsing context as the source browsing context. For the purposes of the previous paragraph, a refresh is said to have come due as soon as the later of the following two conditions occurs: * At least time seconds have elapsed since the document has completely loaded, adjusted to take into account user or user agent preferences. * At least time seconds have elapsed since the meta element was inserted into the document, adjusted to take into account user or user agent preferences. * Provide the user with an interface that, when selected, navigates a browsing context to urlRecord, with the Document's browsing context as the source browsing context. * Do nothing. In addition, the user agent may, as with anything, inform the user of any and all aspects of its operation, including the state of any timers, the destinations of any timed redirects, and so forth. For meta elements with an http-equiv attribute in the Refresh state, the content attribute must have a value consisting either of: * just a valid non-negative integer, or * a valid non-negative integer, followed by a U+003B SEMICOLON character (;), followed by one or more space characters, followed by a substring that is an ASCII case-insensitive match for the string "URL", followed by a U+003D EQUALS SIGN character (=), followed by a valid URL that does not start with a literal U+0027 APOSTROPHE (') or U+0022 QUOTATION MARK (") character. In the former case, the integer represents a number of seconds before the page is to be reloaded; in the latter case the integer represents a number of seconds before the page is to be replaced by the page at the given URL. A news organization’s front page could include the following markup in the page’s head element, to ensure that the page automatically reloads from the server every five minutes: A sequence of pages could be used as an automated slide show by making each page refresh to the next page in the sequence, using markup such as the following: Cookie setter (http-equiv="set-cookie") This pragma sets an HTTP cookie. [COOKIES] It is non-conforming. Real HTTP headers should be used instead. 1. If the meta element has no content attribute, or if that attribute’s value is the empty string, then abort these steps. 2. Act as if receiving a set-cookie-string for the document’s URL via a "non-HTTP" API, consisting of the value of the element’s content attribute encoded as UTF-8. [COOKIES] [ENCODING] Content security policy state (http-equiv="content-security-policy") This pragma enforces a Content Security Policy on a Document. [CSP3] 1. If the meta element is not a child of a head element, abort these steps. 2. If the meta element has no content attribute, or if that attribute’s value is the empty string, then abort these steps. 3. Let policy be the result of executing Content Security Policy’s parse a serialized Content Security Policy algorithm on the meta element’s content attribute’s value. 4. Remove all occurrences of the report-uri, frame-ancestors, and sandbox directives from policy. 5. Enforce the policy policy. For meta elements with an http-equiv attribute in the Content security policy state, the content attribute must have a value consisting of a valid Content Security Policy, but must not contain any report-uri, frame-ancestors, or sandbox directives. The Content Security Policy given in the content attribute will be enforced upon the current document. [CSP3] A page might choose to mitigate the risk of cross-site scripting attacks by preventing the execution of inline JavaScript, as well as blocking all plugin content, using a policy such as the following: There must not be more than one meta element with any particular state in the document at a time. 4.2.5.4. Other pragma directives Extensions to the predefined set of pragma directives may, under certain conditions, be registered in the WHATWG Wiki PragmaExtensions page. [WHATWGWIKI] Such extensions must use a name that is identical to an HTTP header registered in the Permanent Message Header Field Registry, and must have behavior identical to that described for the HTTP header. [IANAPERMHEADERS] Pragma directives corresponding to headers describing metadata, or not requiring specific user agent processing, must not be registered; instead, use metadata names. Pragma directives corresponding to headers that affect the HTTP processing model (e.g., caching) must not be registered, as they would result in HTTP-level behavior being different for user agents that implement HTML than for user agents that do not. Anyone is free to edit the WHATWG Wiki PragmaExtensions page at any time to add a pragma directive satisfying these conditions. Such registrations must specify the following information: Keyword The actual name being defined. The name must match a previously-registered HTTP name with the same requirements. Brief description A short non-normative description of the purpose of the pragma directive. Specification A link to the specification defining the corresponding HTTP header. Conformance checkers must use the information given on the WHATWG Wiki PragmaExtensions page to establish if a value is allowed or not: values defined in this specification or listed on the aforementioned page must be accepted, whereas values not listed in either this specification or on the aforementioned page must be rejected as invalid. Conformance checkers may cache this information (e.g., for performance reasons or to avoid the use of unreliable network connectivity). 4.2.5.5. Specifying the document’s character encoding A character encoding declaration is a mechanism by which the character encoding used to store or transmit a document is specified. The following restrictions apply to character encoding declarations: * The character encoding name given must be an ASCII case-insensitive match for one of the labels of the character encoding used to serialize the file. [ENCODING] * The character encoding declaration must be serialized without the use of character references or character escapes of any kind. * The element containing the character encoding declaration must be serialized completely within the first 1024 bytes of the document. In addition, due to a number of restrictions on meta elements, there can only be one meta-based character encoding declaration per document. If an HTML document does not start with a BOM, and its encoding is not explicitly given by Content-Type metadata, and the document is not an iframe srcdoc document, then the character encoding used must be an ASCII-compatible encoding, and the encoding must be specified using a meta element with a charset attribute or a meta element with an http-equiv attribute in the encoding declaration state. A character encoding declaration is required (either in the Content-Type metadata or explicitly in the file) even if the encoding is US-ASCII, because a character encoding is needed to process non-ASCII characters entered by the user in forms, in URLs generated by scripts, and so forth. If the document is an iframe srcdoc document, the document must not have a character encoding declaration. (In this case, the source is already decoded, since it is part of the document that contained the iframe.) If an HTML document contains a meta element with a charset attribute or a meta element with an http-equiv attribute in the encoding declaration state, then the character encoding used must be an ASCII-compatible encoding. Authors should use UTF-8. Conformance checkers may advise authors against using legacy encodings. [ENCODING] Authoring tools should default to using UTF-8 for newly-created documents. [ENCODING] Authors must not use encodings that are not defined in the WHATWG Encoding specification. Additionally, authors should not use ISO-2022-JP. [ENCODING] Some encodings that are not defined in the WHATWG Encoding specification use bytes in the range 0x20 to 0x7E, inclusive, to encode characters other than the corresponding characters in the range U+0020 to U+007E, inclusive, and represent a potential security vulnerability: A user agent might end up interpreting supposedly benign plain text content as HTML tags and JavaScript. Using non-UTF-8 encodings can have unexpected results on form submission and URL encodings, which use the document’s character encoding by default. In XHTML, the XML declaration should be used for inline character encoding information, if necessary. In HTML, to declare that the character encoding is UTF-8, the author could include the following markup near the top of the document (in the head element): In XML, the XML declaration would be used instead, at the very top of the markup: 4.2.6. The style element Categories: Metadata content. Contexts in which this element can be used: Where metadata content is expected. In a noscript element that is a child of a head element. In the body, where flow content is expected. Content model: Depends on the value of the type attribute, but must match requirements described in prose below. Tag omission in text/html: Neither tag is omissible. Content attributes: Global attributes media — Applicable media nonce - Cryptographic nonce used in Content Security Policy checks [CSP3] type — Type of embedded resource Also, the title attribute has special semantics on this element: Alternative style sheet set name. Allowed ARIA role attribute values: None Allowed ARIA state and property attributes: Global aria-* attributes DOM interface: interface HTMLStyleElement : HTMLElement { attribute DOMString media; attribute DOMString nonce; attribute DOMString type; }; HTMLStyleElement implements LinkStyle; The style element allows authors to embed style information in their documents. The style element is one of several inputs to the styling processing model. The element does not represent content for the user. The type attribute gives the styling language. If the attribute is present, its value must be a valid mime type that designates a styling language. The charset parameter must not be specified. The default value for the type attribute, which is used if the attribute is absent, is "text/css". [RFC2318] When examining types to determine if they support the language, user agents must not ignore unknown MIME parameters — types with unknown parameters must be assumed to be unsupported. The charset parameter must be treated as an unknown parameter for the purpose of comparing MIME types here. The media attribute says which media the styles apply to. The value must be a valid media query list. The user agent must apply the styles when the media attribute’s value matches the environment and the other relevant conditions apply, and must not apply them otherwise. The styles might be further limited in scope, e.g., in CSS with the use of @media blocks. This specification does not override such further restrictions or requirements. The default, if the media attribute is omitted, is "all", meaning that by default styles apply to all media. A style element should preferably be used in the head of the document. The use of style in the body of the document may cause restyling, trigger layout and/or cause repainting, and hence, should be used with care. The nonce attribute represents a cryptographic nonce ("number used once") which can be used by Content Security Policy to determine whether or not the style specified by an element will be applied to the document. The value is text. [CSP3] The title attribute on style elements defines alternative style sheet sets. If the style element has no title attribute, then it has no title; the title attribute of ancestors does not apply to the style element. [CSSOM] The title attribute on style elements, like the title attribute on link elements, differs from the global title attribute in that a style block without a title does not inherit the title of the parent element: it merely has no title. The textContent of a style element must match the style production in the following ABNF, the character set for which is Unicode. [ABNF] style = no-c-start *( c-start no-c-end c-end no-c-start ) no-c-start = < any string that doesn’t contain a substring that matches c-start > c-start = "" ---------------------------------------------------------------------- The user agent must run the update a style block algorithm that applies for the style sheet language specified by the style element’s type attribute, passing it the element’s style data, whenever one of the following conditions occur: * the element is popped off the stack of open elements of an HTML parser or XML parser, * the element is not on the stack of open elements of an HTML parser or XML parser, and it is inserted into a document or removed from a document, * the element is not on the stack of open elements of an HTML parser or XML parser, and one of its child nodes is modified by a script, For styling languages that consist of pure text (as opposed to XML), a style element’s style data is the child text content of the style element (not any other nodes such as comments or elements), in tree order. For XML-based styling languages, the style data consists of all the child nodes of the style element. The update a style block algorithm for CSS (text/css) is as follows: 1. Let element be the style element. 2. If element has an associated CSS style sheet, remove the CSS style sheet in question. 3. If element is not in a Document, then abort these steps. 4. If the Should element’s inline behavior be blocked by Content Security Policy? algorithm returns "Blocked" when executed upon the style element, "style", and the style element’s style data, then abort these steps. [CSP3] 5. create a CSS style sheet with the following properties: type text/css owner node element media The media attribute of element. This is a reference to the (possibly absent at this time) attribute, rather than a copy of the attribute’s current value. The CSSOM specification defines what happens when the attribute is dynamically set, changed, or removed. title The title attribute of element. Again, this is a reference to the attribute. alternate flag Unset. origin-clean flag Set. parent CSS style sheet owner CSS rule null disabled flag Left at its default value. CSS rules Left uninitialized. This specification does not define any other styling language’s update a style block algorithm. Once the attempts to obtain the style sheet’s critical subresources, if any, are complete, or, if the style sheet has no critical subresources, once the style sheet has been parsed and processed, the user agent must, if the loads were successful or there were none, queue a task to fire a simple event named load at the style element, or, if one of the style sheet’s critical subresources failed to completely load for any reason (e.g., DNS error, HTTP 404 response, a connection being prematurely closed, unsupported Content-Type), queue a task to fire a simple event named error at the style element. Non-network errors in processing the style sheet or its subresources (e.g., CSS parse errors, PNG decoding errors) are not failures for the purposes of this paragraph. The task source for these tasks is the DOM manipulation task source. The element must delay the load event of the element’s node document until all the attempts to obtain the style sheet’s critical subresources, if any, are complete. This specification does not specify a style system, but CSS is expected to be supported by most Web browsers. [CSS-2015] The media, nonce, and type IDL attributes must reflect the respective content attributes of the same name. The LinkStyle interface is also implemented by this element. [CSSOM] The following document has its stress emphasis styled as bright red text rather than italics text, while leaving titles of works and Latin words in their default italics. It shows how using appropriate elements enables easier restyling of documents. My favorite book

My favorite book of all time has got to be A Cat’s Life. It is a book by P. Rahmel that talks about the Felis Catus in modern human society.

4.2.7. Interactions of styling and scripting Style sheets, whether added by a link element, a style element, an PI, an HTTP Link header, or some other mechanism, have a style sheet ready flag, which is initially unset. When a style sheet is ready to be applied, its style sheet ready flag must be set. If the style sheet referenced no other resources (e.g., it was an internal style sheet given by a style element with no @import rules), then the style rules must be immediately made available to script; otherwise, the style rules must only be made available to script once the event loop reaches its update the rendering step. A style sheet in the context of the Document of an HTML parser or XML parser is said to be a style sheet that is blocking scripts if the element was created by that Document's parser, and the element is either a style element or a link element that was an external resource link when the element was created by the parser, and the element’s style sheet was enabled when the element was created by the parser, and the element’s style sheet ready flag is not yet set, and, the last time the event loop reached step 1, the element was in that Document, and the user agent hasn’t given up on that particular style sheet yet. A user agent may give up on a style sheet at any time. Giving up on a style sheet before the style sheet loads, if the style sheet eventually does still load, means that the script might end up operating with incorrect information. For example, if a style sheet sets the color of an element to green, but a script that inspects the resulting style is executed before the sheet is loaded, the script will find that the element is black (or whatever the default color is), and might thus make poor choices (e.g., deciding to use black as the color elsewhere on the page, instead of green). Implementors have to balance the likelihood of a script using incorrect information with the performance impact of doing nothing while waiting for a slow network request to finish. A Document has a style sheet that is blocking scripts if there is either a style sheet that is blocking scripts in the context of that Document, or if that Document is in a browsing context that has a parent browsing context, and the active document of that parent browsing context itself has a style sheet that is blocking scripts. A Document has no style sheet that is blocking scripts if it does not have a style sheet that is blocking scripts as defined in the previous paragraph. 4.3. Sections 4.3.1. The body element Categories: Sectioning root. Contexts in which this element can be used: As the second element in an html element. Content model: Flow content. Tag omission in text/html: A body element’s start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a meta, link, script, style, or template element. A body element’s end tag may be omitted if the body element is not immediately followed by a comment. Content attributes: Global attributes onafterprint onbeforeprint onbeforeunload onhashchange onlanguagechange onmessage onoffline ononline onpagehide onpageshow onpopstate onrejectionhandled onstorage onunhandledrejection onunload Allowed ARIA role attribute values: document role (default - do not set). Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the default role. DOM interface: interface HTMLBodyElement : HTMLElement { }; HTMLBodyElement implements WindowEventHandlers; The body element represents the content of the document. In conforming documents, there is only one body element. The document.body IDL attribute provides scripts with easy access to a document’s body element. Some DOM operations (for example, parts of the drag and drop model) are defined in terms of "the body element". This refers to a particular element in the DOM, as per the definition of the term, and not any arbitrary body element. The body element exposes as event handler content attributes a number of the event handlers of the Window object. It also mirrors their event handler IDL attributes. The onblur, onerror, onfocus, onload, onresize, and onscroll event handlers of the Window object, exposed on the body element, replace the generic event handlers with the same names normally supported by HTML elements. Thus, for example, a bubbling error event dispatched on a child of the body element of a Document would first trigger the onerror event handler content attributes of that element, then that of the root html element, and only then would it trigger the onerror event handler content attribute on the body element. This is because the event would bubble from the target, to the body, to the html, to the Document, to the Window, and the event handler on the body is watching the Window not the body. A regular event listener attached to the body using addEventListener(), however, would be run when the event bubbled through the body and not when it reaches the Window object. This page updates an indicator to show whether or not the user is online: Online or offline?

You are: (Unknown)

4.3.2. The article element Categories: Flow content. Sectioning content. Palpable content. Contexts in which this element can be used: Where flow content is expected. Content model: Flow content, but with no main element descendants. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: article (default - do not set), application, document feed, main or region. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The article element represents a complete, or self-contained, composition in a document, page, application, or site. This could be a magazine, newspaper, technical or scholarly article, an essay or report, a blog or other social media post. A general rule is that the article element is appropriate only if the element’s contents would be listed explicitly in the document’s outline. Each article should be identified, typically by including a heading(h1-h6 element) as a child of the article element. Assistive Technology may convey the semantics of the article to users. This information can provide a hint to users as to the type of content. For example the role of the element, which in this case matches the element name "article", can be announced by screen reader software when a user navigates to an article element. User Agents may also provide methods to navigate to article elements. When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site could consist of summaries of other blog entries in article elements nested within the article element for the blog entry. The following is an example of a blog post extract, marked up using the article element:

Short note on wearing shorts

Posted on Wednesday, 10 February 2016 by Patrick Lauke. 6 comments

A fellow traveller posed an interesting question: Why do you wear shorts rather than longs? The person was wearing culottes as the time, so I considered the question equivocal in nature, but I attempted to provide an honest answer despite the dubiousness of the questioner’s dress.

The short answer is that I enjoy wearing shorts, the long answer is...

Continue reading: Short note on wearing shorts

The schema.org vocabulary can be used to provide more granular information about the type of article, using the CreativeWork - Article subtypes, other information such as the publication date for the article can also be provided. This example shows a blog post using the article element, with some schema.org annotations:

The Very First Rule of Life

If there’s a microphone anywhere near you, assume it’s hot and sending whatever you’re saying to the world. Seriously.

...

Here is that same blog post, but showing some of the comments:

The Very First Rule of Life

If there’s a microphone anywhere near you, assume it’s hot and sending whatever you’re saying to the world. Seriously.

...

Comments

  1. Posted by: George Washington

    Yeah! Especially when talking about your lobbyist friends!

  2. Posted by: George Hammond

    Hey, you have the same first name as me.

Notice the use of an ordered list ol to organize the comments. Also note the comments are a subsection of the article, identified using a section element. 4.3.3. The section element Categories: Flow content. Sectioning content. Palpable content. Contexts in which this element can be used: Where flow content is expected. Content model: Flow content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: region role (default - do not set), alert, alertdialog, application, contentinfo , dialog, document, feed, log, main, marquee, presentation, region, search, status or tabpanel. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. Each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information. Authors are encouraged to use the article element instead of the section element when the content is complete, or self-contained, composition. The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline. Assistive Technology may convey the semantics of the section to users when the element has an explicit label. This information can provide a hint to users as to the type of content. For example the role of the element, which in this case is "region", can be announced by screen reader software when a user navigates to an section element. User Agents may also provide methods to navigate to section elements. In the following example, we see an article (part of a larger Web page) about apples, containing two short sections. The section has an aria-label attribute providing a brief description of the contents. Assistive technology may convey the region role along with the aria-label value as a hint to users.

Apples

Tasty, delicious fruit!

The apple is the pomaceous fruit of the apple tree.

Red Delicious

These bright red apples are the most common found in many supermarkets.

Granny Smith

These juicy, green apples make a great filling for apple pies.

Here is a graduation program with two sections, one for the list of people graduating, and one for the description of the ceremony. (The markup in this example features an uncommon style sometimes used to minimize the amount of inter-element white space.) Graduation Ceremony Summer 2022

Graduation

Ceremony

Opening Procession

Speech by Validactorian

Speech by Class President

Presentation of Diplomas

Closing Speech by Headmaster

Graduates

  • Molly Carpenter
  • Anastasia Luccio
  • Ebenezar McCoy
  • Karrin Murphy
  • Thomas Raith
  • Susan Rodriguez
In this example, a book author has marked up some sections as chapters and some as appendices, and uses CSS to style the headers in these two classes of section differently. The whole book is wrapped in an article element as part of an even larger document containing other books. ...

My Book

A sample with not much content

Published by Dummy Publicorp Ltd.

My First Chapter

This is the first of my chapters. It doesn’t say much.

But it has two paragraphs!

It Continues: The Second Chapter

Bla dee bla, dee bla dee bla. Boom.

Chapter Three: A Further Example

It’s not like a battle between brightness and earthtones would go unnoticed.

But it might ruin my story.

Appendix A: Overview of Examples

These are demonstrations.

Appendix B: Some Closing Remarks

Hopefully this long example shows that you can style sections, so long as they are used to indicate actual sections.

4.3.4. The nav element Categories: Flow content. Sectioning content. Palpable content. Contexts in which this element can be used: Where flow content is expected. Content model: Flow content, but with no main element descendants. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: navigation role (default - do not set). Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the default role. DOM interface: Uses HTMLElement. The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Assistive Technology may convey the semantics of the nav to users. This information can provide a hint to users as to the type of content. For example the role of the element, which in this case is "navigation", can be announced by screen reader software when a user navigates to an nav element. User Agents may also provide methods to navigate to nav elements. In cases where the content of a nav element represents a list of items, use list markup to aid understanding and navigation. Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary. User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both). In the following example, there are two nav elements, one for primary navigation around the site, and one for secondary navigation around the page itself.

The Wiki Center Of Exampland

© copyright 1998 Exampland Emperor

In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.

Wake up sheeple!

News - Blog - Forums

Last Modified: 2009-04-01

My Day at the Beach

Today I went to the beach and had a lot of fun.

...more content...

Posted .

...more blog posts...
Notice the main element being used to wrap the main content of the page. In this case, all content other than the page header and footer. You can also see microdata annotations in the above example that use the schema.org vocabulary to provide the publication date and other metadata about the blog post. A nav element doesn’t have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose: In this example, nav is used in an e-mail application, to let the user switch folders:

4.3.5. The aside element Categories: Flow content. Sectioning content. Palpable content. Contexts in which this element can be used: Where flow content is expected. Content model: Flow content, but with no main element descendants. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: complementary role (default - do not set), feed, note, search or presentation. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The aside element represents a section of a page that consists of content that is tangentially related to the content of the parenting sectioning content, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the nearest ancestor sectioning content. Assistive Technology may convey the semantics of the aside to users. This information can provide a hint to users as to the type of content. For example the role of the element, which in this case is "complementary", can be announced by screen reader software when a user navigates to an aside element. User Agents may also provide methods to navigate to aside elements. It’s not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document. The following example shows how an aside is used to mark up background material on Switzerland in a much longer news story on Europe. The following example shows how an aside is used to mark up a pull quote in a longer article. ...

He later joined a large company, continuing on the same work. I love my job. People ask me what I do for fun when I’m not at work. But I’m paid to do my hobby, so I never know what to answer. Some people wonder what they would do if they didn’t have to work... but I know what I would do, because I was unemployed for a year, and I filled that time doing exactly what I do now.

Of course his work — or should that be hobby? — isn’t his only passion. He also enjoys other pleasures.

... The following extract shows how aside can be used for blogrolls and other side content on a blog:

My wonderful blog

My tagline

My last post

This is my last post.

My first post

This is my first post.

4.3.6. The h1, h2, h3, h4, h5, and h6 elements Categories: Flow content. Heading content. Palpable content. Contexts in which this element can be used: Where flow content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: heading role (default - do not set), tab or presentation. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: interface HTMLHeadingElement : HTMLElement {}; These elements represent headings for their sections. These elements have a rank given by the number in their name. The h1 element has the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank. Use the rank of heading elements to create the document outline. The following code shows how to mark up a document outline with six levels of headings.

top level heading

2nd level heading

3nd level heading

4th level heading

5th level heading
6th level heading
The document outline would be the same if the section elements were not used. h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. Instead use the markup patterns in the §4.13 Common idioms without dedicated elements section of the specification. Assistive technology often announces the presence and level of a heading to users, as a hint to understand the structure of a document and construct a 'mental model' of its outline. For example the role of the element, which in this case is "heading" and the heading level "1" to "6", can be announced by screen reader software when a user navigates to an h1–h6 element. User Agents may also provide methods to navigate to h1–h6 elements. As far as their respective document outlines (their heading and section structures) are concerned, these two snippets are semantically equivalent:

Let’s call it a draw(ing surface)

Diving in

Simple shapes

Canvas coordinates

Canvas coordinates diagram

Paths

Let’s call it a draw(ing surface)

Diving in

Simple shapes

Canvas coordinates

Canvas coordinates diagram

Paths

Authors might prefer the former style for its terseness, or the latter style for its convenience in the face of heavy editing; which is best is purely an issue of preferred authoring style. The two styles can be combined, for compatibility with legacy tools while still future-proofing for when that compatibility is no longer needed. The semantics and meaning of the h1–h6 elements are further detailed in the section on §4.3.9 Headings and sections. 4.3.7. The header element Categories: Flow content. Palpable content. Contexts in which this element can be used: Where flow content is expected. Content model: Flow content, but with no main element descendants, or header, footer elements that are not descendants of sectioning content which is a descendant of the header. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: banner role (default - do not set), group or presentation. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The header element represents introductory content for its nearest ancestor main element or sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids. When a header element’s nearest ancestor sectioning root element is the body element, and it is not a descendant of the main element or a sectioning content element, then that header is scoped to the body element and represents introductory content for the page as a whole. Assistive Technology may convey to users the semantics of the header element when it applies to the whole page. This information can provide a hint as to the type of content. For example, the role of the element, which in this case is "banner", can be announced by screen reader software when a user navigates to a header element that is scoped to the body element. User Agents may also provide methods to navigate to a header element scoped to the body element. A header element is intended to usually contain the section’s heading (an h1–h6 element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos. Here are some sample headers. This first one is for a game:

Welcome to...

Voidwars!

The following snippet shows how the element can be used to mark up a specification’s header:

Scalable Vector Graphics (SVG) 1.2

W3C Working Draft 27 October 2004

This version:
https://www.w3.org/TR/2004/WD-SVG12-20041027/
Previous version:
https://www.w3.org/TR/2004/WD-SVG12-20040510/
Latest version of SVG 1.2:
https://www.w3.org/TR/SVG12/
Latest SVG Recommendation:
https://www.w3.org/TR/SVG/
Editor:
Dean Jackson, W3C, dean@w3.org
Authors:
See Author List
  • Forum
  • Download

    Important News

    To play today’s games you will need to update your client.

    Games

  • You have three active games:

    ... For cases where an developer wants to nest a header or footer within another header: The header element can only contain a header or footer if they are themselves contained within sectioning content. In this example, the article has a header which contains an aside which itself contains a header. This is conforming as the descendant header is contained within the aside element.

    Flexbox: The definitive guide

    The guide about Flexbox was supposed to be here, but it turned out Wes wasn’t a Flexbox expert either.

    4.3.8. The footer element Categories: Flow content. Palpable content. Contexts in which this element can be used: Where flow content is expected. Content model: Flow content, but with no main element descendants, or header, footer elements that are not descendants of sectioning content which is a descendant of the footer. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: contentinfo role (default - do not set), group or presentation. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The footer element represents a footer for its nearest ancestor main element or sectioning content or sectioning root element. A footer typically contains information about its section, such as who wrote it, links to related documents, copyright data, and the like. A footer element can also contain entire sections representing appendices, indexes, long colophons, verbose license agreements, and other such content. When a footer element’s nearest ancestor sectioning root element is the body element, and it is not a descendant of the main element or a sectioning content element, then that footer is scoped to the body element and represents a footer for the page as a whole. Assistive Technology may convey to users the semantics of the footer element when it applies to the whole page. This information can provide a hint as to the type of content. For example, the role of the element, which in this case is "content information", can be announced by screen reader software when a user navigates to a footer element that is scoped to the body element. User Agents may also provide methods to navigate to a footer element scoped to the body element. Contact information for the author or editor of a section belongs in an address element, possibly itself inside a footer. Bylines and other information that could be suitable for both a header or a footer can be placed in either (or neither). Footers don’t necessarily have to appear at the end of a section, though they usually do. The footer element is not sectioning content; it doesn’t introduce a new section. Here is a page with two footers, one at the top and one at the bottom, with the same content:

    Lorem ipsum

    The ipsum of all lorems

    A dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Here is an example which shows the footer element being used both for a site-wide footer and for a section footer. The Ramblings of a Scientist

    The Ramblings of a Scientist

    My Favorite Trains

    I love my trains. My favorite train of all time is a Köf.

    It is fun to see them pull some coal cars because they look so dwarfed in comparison.

    Published

    Some site designs have what is sometimes referred to as "fat footers" — footers that contain a lot of material, including images, links to other articles, links to pages for sending feedback, special offers... in some ways, a whole "front page" in the footer. This fragment shows the bottom of a page on a site with a "fat footer": ...

    Copyright © 2015 The Snacker — Terms of Service

    4.3.9. Headings and sections The h1–h6 elements are headings. The first element of heading content in an element of sectioning content represents the heading for that explicit section. Subsequent headings of equal or higher rank start new implied subsections that are part of the previous section’s parent section. Subsequent headings of lower rank start new implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section. h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. Instead use the markup patterns in the §4.13 Common idioms without dedicated elements section of the specification. Certain elements are said to be sectioning roots, including blockquote and td elements. These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors. * blockquote * body * details * dialog * fieldset * figure * td Sectioning content elements are always considered subsections of their nearest ancestor sectioning root or their nearest ancestor element of sectioning content, whichever is nearest, regardless of what implied sections other headings may have created. For the following fragment:

    Foo

    Bar

    Bla

    Baz

    Quux

    Thud

    Grunt

    ...the structure would be: 1. Foo (heading of explicit body section, containing the "Grunt" paragraph) 1. Bar (heading starting implied section, containing a block quote and the "Baz" paragraph) 2. Quux (heading starting implied section with no content other than the heading itself) 3. Thud (heading of explicit section section) Notice how the section ends the earlier implicit section so that a later paragraph ("Grunt") is back at the top level. Sections may contain headings of a rank equal to their section nesting level. Authors should use headings of the appropriate rank for the section’s nesting level. Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content. For example, the following is correct:

    Apples

    Apples are fruit.

    Taste

    They taste lovely.

    Sweet

    Red apples are sweeter than green ones.

    Color

    Apples come in various colors.

    However, the same document would be more clearly expressed as:

    Apples

    Apples are fruit.

    Taste

    They taste lovely.

    Sweet

    Red apples are sweeter than green ones.

    Color

    Apples come in various colors.

    Both of the documents above are semantically identical and would produce the same outline in compliant user agents. 4.3.9.1. Creating an outline There are currently no known native implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers and browser extensions. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors should use heading rank (h1-h6) to convey document structure. This section is non-normative This section defines an algorithm for creating an outline for a sectioning content element or a sectioning root element. It is defined in terms of a walk over the nodes of a DOM tree, in tree order, with each node being visited when it is entered and when it is exited during the walk. Each time a node is visited, it can be seen as triggering an enter or exit event. The following pseudocode fragment: visitNode(node) onEnter(node) child = node.firstChild while(child != null) visitNode(child) child = child.nextSibling onExit(node) ...exemplifies how to recursively traverse the node tree and when to trigger the enter and exit events. See the JavaScript example for a possible, non-recursive JavaScript implementation. The outline for a sectioning content element or a sectioning root element consists of a list of one or more potentially nested sections. The element for which an outline is created is said to be the outline’s owner. A section is a container that corresponds to some nodes in the original DOM tree. Each section can have one heading associated with it, and can contain any number of further nested subsections. The algorithm for the outline also associates each node in the DOM tree with a particular section and potentially a heading. (The sections in the outline aren’t section elements, though some may correspond to such elements — they are merely conceptual sections.) The following markup fragment:

    A

    B

    C

    D

    E

    F

    ...results in the following outline being created for the body node (and thus the entire document): 1. Section created for body node. Associated with heading "A". Also associated with paragraph "B". Nested sections: 1. Section implied for first h2 element. Associated with heading "C". Also associated with paragraph "D". No nested sections. 2. Section implied for second h2 element. Associated with heading "E". Also associated with paragraph "F". No nested sections. The algorithm that must be followed during a walk of a DOM subtree rooted at a sectioning content element or a sectioning root element to determine that element’s outline is as follows: 1. Let current outline owner be null. (It holds the element whose outline is being created.) 2. Let current section be null. (It holds a pointer to a section, so that elements in the DOM can all be associated with a section.) 3. Create a stack to hold elements, which is used to handle nesting. Initialize this stack to empty. 4. Walk over the DOM in tree order, starting with the sectioning content element or sectioning root element at the root of the subtree for which an outline is to be created, and trigger the first relevant step below for each element as the walk enters and exits it. When exiting an element, if that element is the element at the top of the stack The element being exited is a heading content element or an element with a hidden attribute. Pop that element from the stack. If the top of the stack is a heading content element or an element with a hidden attribute Do nothing. When entering an element with a hidden attribute Push the element being entered onto the stack. (This causes the algorithm to skip that element and any descendants of the element.) When entering a sectioning content element Run these steps: 1. If current outline owner is not null, run these substeps: 1. If the current section has no heading, create an implied heading and let that be the heading for the current section. 2. Push current outline owner onto the stack. 2. Let current outline owner be the element that is being entered. 3. Let current section be a newly created section for the current outline owner element. 4. Associate current outline owner with current section. 5. Let there be a new outline for the new current outline owner, initialized with just the new current section as the only section in the outline. When exiting a sectioning content element, if the stack is not empty Run these steps: 1. If the current section has no heading, create an implied heading and let that be the heading for the current section. 2. Pop the top element from the stack, and let the current outline owner be that element. 3. Let current section be the last section in the outline of the current outline owner element. 4. Append the outline of the sectioning content element being exited to the current section. (This does not change which section is the last section in the outline.) When entering a sectioning root element Run these steps: 1. If current outline owner is not null, push current outline owner onto the stack. 2. Let current outline owner be the element that is being entered. 3. Let current outline owner’s parent section be current section. 4. Let current section be a newly created section for the current outline owner element. 5. Let there be a new outline for the new current outline owner, initialized with just the new current section as the only section in the outline. When exiting a sectioning root element, if the stack is not empty Run these steps: 1. If the current section has no heading, create an implied heading and let that be the heading for the current section. 2. Let current section be current outline owner’s parent section. 3. Pop the top element from the stack, and let the current outline owner be that element. When exiting a sectioning content element or a sectioning root element (when the stack is empty) The current outline owner is the element being exited, and it is the sectioning content element or a sectioning root element at the root of the subtree for which an outline is being generated. If the current section has no heading, create an implied heading and let that be the heading for the current section. Skip to the next step in the overall set of steps. (The walk is over.) When entering a heading content element If the current section has no heading, let the element being entered be the heading for the current section. Otherwise, if the heading of the last section of the outline of the current outline owner is an implied heading, or if the heading being entered has a rank equal to or higher than the heading of the last section of the outline of the current outline owner, then create a new section and append it to the outline of the current outline owner element, so that this new section is the new last section of that outline. Let current section be that new section. Let the element being entered be the new heading for the current section. Otherwise, run these substeps: 1. Let candidate section be current section. 2. Heading loop: If the element being entered has a rank lower than the rank of the heading of the candidate section, then create a new section, and append it to candidate section. (This does not change which section is the last section in the outline.) Let current section be this new section. Let the element being entered be the new heading for the current section. Abort these substeps. 3. Let new candidate section be the section that contains candidate section in the outline of current outline owner. 4. Let candidate section be new candidate section. 5. Return to the step labeled heading loop. Push the element being entered onto the stack. (This causes the algorithm to skip any descendants of the element.) Recall that h1 has the highest rank, and h6 has the lowest rank. Otherwise Do nothing. In addition, whenever the walk exits a node, after doing the steps above, if the node is not associated with a section yet, associate the node with the section current section. 5. Associate all non-element nodes that are in the subtree for which an outline is being created with the section with which their parent element is associated. 6. Associate all nodes in the subtree with the heading of the section with which they are associated, if any. The tree of sections created by the algorithm above, or a proper subset thereof, must be used when generating document outlines, for example when generating tables of contents. The outline created for the body element of a Document is the outline of the entire document. When creating an interactive table of contents, entries should jump the user to the relevant sectioning content element, if the section was created for a real element in the original document, or to the relevant heading content element, if the section in the tree was generated for a heading in the above process. Selecting the first section of the document therefore always takes the user to the top of the document, regardless of where the first heading in the body is to be found. The outline depth of a heading content element associated with a section section is the number of sections that are ancestors of section in the outermost outline that section finds itself in when the outlines of its Document's elements are created, plus 1. The outline depth of a heading content element not associated with a section is 1. User agents should provide default headings for sections that do not have explicit section headings. Consider the following snippet:

    Hello world.

    Although it contains no headings, this snippet has three sections: a document (the body) with two subsections (a nav and an aside). A user agent could present the outline as follows: 1. Untitled document 1. Navigation 2. Sidebar These default headings ("Untitled document", "Navigation", "Sidebar") are not specified by this specification, and might vary with the user’s language, the page’s language, the user’s preferences, the user agent implementor’s preferences, etc. The following JavaScript function shows how the tree walk could be implemented. The root argument is the root of the tree to walk (either a sectioning content element or a sectioning root element), and the enter and exit arguments are callbacks that are called with the nodes as they are entered and exited. [ECMA-262] function (root, enter, exit) { var node = root; start: while (node) { enter(node); if (node.firstChild) { node = node.firstChild; continue start; } while (node) { exit(node); if (node == root) { node = null; } else if (node.nextSibling) { node = node.nextSibling; continue start; } else { node = node.parentNode; } } } } 4.3.10. Usage summary This section is non-normative. Element Purpose Example body Steve Hill’s Home Page

    Hard Trance is My Life.

    Masif tee

    Yellow smiley face with the caption 'masif'

    My fave Masif tee so far!

    Posted 2 days ago
    article

    Masif’s birthday

    Happy 2nd birthday Masif Saturdays!!!

    Posted 3 weeks ago

    Biography

    The facts

    1500+ shows, 14+ countries

    section

    2010/2011 figures per year

    100+ shows, 8+ countries

    Music

    aside

    As any burner can tell you, the event has a lot of trance.

    This year we played a kind of trance that originated in Belgium, Germany, and the Netherlands in the mid 90s.

    A section heading

    The Guide To Music On The Playa

    h1–h6

    The Main Stage

    If you want to play on a stage, you should bring one.

    Amplified Music

    Amplifiers up to 300W or 90dB are welcome.

    Hard Trance is My Life

    header

    By DJ Steve Hill and Technikal

    The album with the amusing punctuation has red artwork.

    Hard Trance is My Life

    The album with the amusing punctuation has red artwork.

    footer

    Artists: DJ Steve Hill and Technikal

    4.3.10.1. Article or section? This section is non-normative. A section forms part of something else. An article is its own thing. But how does one know which is which? Mostly the real answer is "it depends on author intent". For example, one could imagine a book with a "Granny Smith" chapter that just said "These juicy, green apples make a great filling for apple pies."; that would be a section because there’d be lots of other chapters on (maybe) other kinds of apples. On the other hand, one could imagine a tweet or tumblr post or newspaper classified ad that just said "Granny Smith. These juicy, green apples make a great filling for apple pies."; it would then be articles because that was the whole thing. Comments on an article are not part of the article on which they are commenting, but are related, therefore may be contained in their own nested article. 4.4. Grouping content 4.4.1. The p element Categories: Flow content. Palpable content. Contexts in which this element can be used: Where flow content is expected. Content model: Phrasing content. Tag omission in text/html: A p element’s end tag may be omitted if the p element is immediately followed by an address, article, aside, blockquote, details, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, main, nav, ol, p, pre, section, table, or ul, element, or if there is no more content in the parent element and the parent element is an HTML element that is not an a, audio, del, ins, map, noscript, or video element. Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the default or allowed roles. DOM interface: interface HTMLParagraphElement : HTMLElement {}; The p element represents a paragraph. While paragraphs are usually represented in visual media by blocks of text that are physically separated from adjacent blocks through blank lines, a style sheet or user agent would be equally justified in presenting paragraph breaks in a different manner, for instance using inline pilcrows (¶). The following examples are conforming HTML fragments:

    The little kitten gently seated itself on a piece of carpet. Later in his life, this would be referred to as the time the cat sat on the mat.

    Personal information

    There was once an example from Femley,
    Whose markup was of dubious quality.
    The validator complained,
    So the author was pained,
    To move the error from the markup to the rhyming.

    The p element should not be used when a more specific element is more appropriate. The following example is technically correct:

    Last modified: 2001-04-23

    Author: fred@example.com

    However, it would be better marked-up as:
    Last modified: 2001-04-23
    Author: fred@example.com
    Or:

    Last modified: 2001-04-23

    Author: fred@example.com
    List elements (in particular, ol and ul elements) cannot be children of p elements. When a sentence contains a bulleted list, therefore, one might wonder how it should be marked up. For instance, this fantastic sentence has bullets relating to * wizards, * faster-than-light travel, and * telepathy, and is further discussed below. The solution is to realize that a paragraph, in HTML terms, is not a logical concept, but a structural one. In the fantastic example above, there are actually five paragraphs as defined by this specification: one before the list, one for each bullet, and one after the list. The markup for the above example could therefore be:

    For instance, this fantastic sentence has bullets relating to

    • wizards,
    • faster-than-light travel, and
    • telepathy,

    and is further discussed below.

    Authors wishing to conveniently style such "logical" paragraphs consisting of multiple "structural" paragraphs can use the div element instead of the p element. Thus for instance the above example could become the following:
    For instance, this fantastic sentence has bullets relating to
    • wizards,
    • faster-than-light travel, and
    • telepathy,
    and is further discussed below.
    This example still has five structural paragraphs, but now the author can style just the div instead of having to consider each part of the example separately. In general, elements that cannot be children of p elements include any elements that are inline blocks, inline tables, as well as floated and positioned block-level elements. 4.4.2. The address element Categories: Flow content. Palpable content. Contexts in which this element can be used: Where flow content is expected. Content model: Flow content, but with no heading content descendants, no sectioning content descendants, and no header, footer, or address element descendants. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: group role (default - do not set) Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The address element represents contact information for a person, people or organization. It should include physical and/or digital location/contact information and a means of identifying a person(s) or organization the information pertains to. For example, the W3C twitter account:

    W3C on Twitter:

    @w3c

    Address, telephone and fax numbers for an organization:
    UNIVERSITY INTERSCHOLASTIC LEAGUE
    1701 Manor Road, Austin, TX 78722
    Tel: (512) 471-5883 | Fax: (512) 471-5908
    The address part of a form output: ... ...

    Name: Hament Dhanji

    House number: 1976

    Street: Meadowband Road ...

    Location of a cat
    Lola the cat is at Latitude: 51.413126 Longtitude: -0.298219
    The meaning and usage contexts of the address element is broad. If developers wish to provide more granular and specific semantics for the address element, use of any of the various semantic web metadata schemas is suggested. For example, the postal address of a local business annotated using RDFa:

    Beachwalk Beachwear & Giftware

    A superb collection of fine gifts and clothing to accent your stay in Mexico Beach.
    3102 Highway 98 Mexico Beach, FL
    Phone: 850-648-4200
    4.4.3. The hr element Categories: Flow content. Contexts in which this element can be used: Where flow content is expected. Content model: Nothing. Tag omission in text/html: No end tag. Content attributes: Global attributes Allowed ARIA role attribute values: separator (default - do not set) or presentation. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the default or allowed roles. DOM interface: interface HTMLHRElement : HTMLElement {}; The hr element represents a paragraph-level thematic break, e.g., a scene change in a story, or a transition to another topic within a section of a reference book. The following fictional extract from a project manual shows two sections that use the hr element to separate topics within the section.

    Communication

    There are various methods of communication. This section covers a few of the important ones used by the project.


    Communication stones seem to come in pairs and have mysterious properties:

    • They can transfer thoughts in two directions once activated if used alone.
    • If used with another device, they can transfer one’s consciousness to another body.
    • If both stones are used with another device, the consciousnesses switch bodies.

    Radios use the electromagnetic spectrum in the meter range and longer.


    Signal flares use the electromagnetic spectrum in the nanometer range.

    Food

    All food at the project is rationed:

    Potatoes
    Two per day
    Soup
    One bowl per day

    Cooking is done by the chefs on a set rotation.

    There is no need for an hr element between the sections themselves, since the section elements and the h1 elements imply thematic changes themselves. The following extract from Pandora’s Star by Peter F. Hamilton shows two paragraphs that precede a scene change and the paragraph that follows it. The scene change, represented in the printed book by a gap containing a solitary centered star between the second and third paragraphs, is here represented using the hr element.

    Dudley was ninety-two, in his second life, and fast approaching time for another rejuvenation. Despite his body having the physical age of a standard fifty-year-old, the prospect of a long degrading campaign within academia was one he regarded with dread. For a supposedly advanced civilization, the Intersolar Commonwealth could be appallingly backward at times, not to mention cruel.

    Maybe it won’t be that bad, he told himself. The lie was comforting enough to get him through the rest of the night’s shift.


    The Carlton AllLander drove Dudley home just after dawn. Like the astronomer, the vehicle was old and worn, but perfectly capable of doing its job. It had a cheap diesel engine, common enough on a semi-frontier world like Gralmond, although its drive array was a thoroughly modern photoneural processor. With its high suspension and deep-tread tyres it could plough along the dirt track to the observatory in all weather and seasons, including the metre-deep snow of Gralmond’s winters.

    The hr element does not affect the document’s outline. 4.4.4. The pre element Categories: Flow content. Palpable content. Contexts in which this element can be used: Where flow content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the default or allowed roles. DOM interface: interface HTMLPreElement : HTMLElement {}; The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements. In the HTML syntax, a leading newline character immediately following the pre element start tag is stripped. Some examples of cases where the pre element could be used: * Including an e-mail, with paragraphs indicated by blank lines, lists indicated by lines prefixed with a bullet, and so on. * Including fragments of computer code, with structure indicated according to the conventions of that language. * Displaying ASCII art. Authors are encouraged to consider how preformatted text will be experienced when the formatting is lost, as will be the case for users of speech synthesizers, braille displays, and the like. For cases like ASCII art, it is likely that an alternative presentation, such as a textual description, would be more universally accessible to the readers of the document. To represent a block of computer code, the pre element can be used with a code element; to represent a block of computer output the pre element can be used with a samp element. Similarly, the kbd element can be used within a pre element to indicate text that the user is to enter. This element has rendering requirements involving the bidirectional algorithm. In the following snippet, a sample of computer code is presented.

    This is the Panel constructor:

    function Panel(element, canClose, closeHandler) {
       this.element = element;
       this.canClose = canClose;
       this.closeHandler = function () { if (closeHandler) closeHandler() };
     }
    In the following snippet, samp and kbd elements are mixed in the contents of a pre element to show a session of Zork I.
    You are in an open field west of a big white house with a boarded
     front door.
     There is a small mailbox here.
    
     > open mailbox
    
     Opening the mailbox reveals:
     A leaflet.
    
     >
    The following shows a contemporary poem that uses the pre element to preserve its unusual formatting, which forms an intrinsic part of the poem itself.
                    maxling
    
     it is with a          heart
                     heavy
    
     that i admit loss of a feline
             so           loved
    
     a friend lost to the
             unknown
                                     (night)
    
     ~cdr 11dec07
    4.4.5. The blockquote element Categories: Flow content. Sectioning root. Palpable content. Contexts in which this element can be used: Where flow content is expected. Content model: Flow content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes cite - Link to the source of the quotation. Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the default or allowed roles. DOM interface: interface HTMLQuoteElement : HTMLElement { attribute DOMString cite; }; The HTMLQuoteElement interface is also used by the q element. The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations. Content inside a blockquote other than citations and in-line changes must be quoted from another source, whose address, if it has one, may be cited in the cite attribute. In cases where a page contains contributions from multiple people, such as comments on a blog post, 'another source' can include text from the same page, written by another person. If the cite attribute is present, it must be a valid URL potentially surrounded by spaces. To obtain the corresponding citation link, the value of the attribute must be parsed relative to the element’s node document. User agents may allow users to follow such citation links, but they are primarily intended for private use (e.g., by server-side scripts collecting statistics about a site’s use of quotations), not for readers. The cite IDL attribute must reflect the element’s cite content attribute. The content of a blockquote may be abbreviated, may have context added or may have annotations. Any such additions or changes to quoted text must be indicated in the text (at the text level). This may mean the use of notational conventions or explicit remarks, such as "emphasis mine". For example, in English, abbreviations are traditionally identified using square brackets. Consider a page with the sentence "Fred ate the cracker. He then said he liked apples and fish."; it could be quoted as follows:

    [Fred] then said he liked [...] fish.

    Quotation marks may be used to delineate between quoted text and annotations within a blockquote. For example, an in-line note provided by the author:
    "That monster custom, who all sense doth eat Of habit’s devil," &c. not in Folio "What a falling off was there ! From me, whose love was of that dignity That it went hand in hand even with the vow I made to her in marriage, and to decline Upon a wretch."
    Shakespeare manual by Frederick Gard Fleay, p19 (in Google Books)
    In the example above, the citation is contained within the footer of a figure element, this groups and associates the information, about the quote, with the quote. The figcaption element was not used, in this case, as a container for the citation as it is not a caption. Attribution for the quotation, may be be placed inside the blockquote element, but must be within a cite element for in-text attributions or within a footer element. For example, here the attribution is given in a footer after the quoted text, to clearly relate the quote to its attribution:

    I contend that we are both atheists. I just believe in one fewer god than you do. When you understand why you dismiss all the other possible gods, you will understand why I dismiss yours.

    Stephen Roberts
    Here the attribution is given in a cite element on the last line of the quoted text. Note that a link to the author is also included.
    The people recognize themselves in their commodities; they find their soul in their automobile, hi-fi set, split-level home, kitchen equipment. — Herbert Marcuse
    Here the attribution is given in a footer after the quoted text, and metadata about the reference has been added using the RDFA Lite syntax. [rdfa-lite]

    ... she said she would not sign any deposition containing the word "amorous" instead of "advances". For her the difference was of crucial significance, and one of the reasons she had separated from her husband was that he had never been amorous but had consistently made advances.

    Heinrich Böll, The Lost Honor of Katharina Blum, January 1, 1974
    There is no formal method for indicating the markup in a blockquote is from a quoted source. It is suggested that if the footer or cite elements are included and these elements are also being used within a blockquote to identify citations, the elements from the quoted source could be annotated with metadata to identify their origin, for example by using the class attribute (a defined extensibility mechanism). In this example the source of a quote includes a cite element, which is annotated using the class attribute:

    My favorite book is At Swim-Two-Birds

    - Mike[tm]Smith
    The other examples below show other ways of showing attribution. Here a blockquote element is used in conjunction with a figure element and its figcaption:

    The truth may be puzzling. It may take some work to grapple with. It may be counterintuitive. It may contradict deeply held prejudices. It may not be consonant with what we desperately want to be true. But our preferences do not determine what’s true. We have a method, and that method helps us to reach not absolute truth, only asymptotic approaches to the truth — never there, just closer and closer, always finding vast new oceans of undiscovered possibilities. Cleverly designed experiments are the key.

    Carl Sagan, in "Wonder and Skepticism", from the Skeptical Inquirer Volume 19, Issue 1 (January-February 1995)
    This next example shows the use of cite alongside blockquote:

    His next piece was the aptly named Sonnet 130:

    My mistress' eyes are nothing like the sun,
    Coral is far more red, than her lips red,
    ... This example shows how a forum post could use blockquote to show what post a user is replying to. The article element is used for each post, to mark up the threading.

    Bacon on a crowbar

    t3yw 12 points 1 hour ago

    I bet a narwhal would love that.

    greg 8 points 1 hour ago

    I bet a narwhal would love that.

    Dude narwhals don’t eat bacon.

    t3yw 15 points 1 hour ago

    I bet a narwhal would love that.

    Dude narwhals don’t eat bacon.

    Next thing you’ll be saying they don’t get capes and wizard hats either!

    boing -5 points 1 hour ago

    narwhals are worse than ceiling cat

    fred 1 points 23 minutes ago

    I bet a narwhal would love that.

    I bet they’d love to peel a banana too.

    This example shows the use of a blockquote for short snippets, demonstrating that one does not have to use p elements inside blockquote elements:

    He began his list of "lessons" with the following:

    One should never assume that his side of the issue will be recognized, let alone that it will be conceded to have merits.

    He continued with a number of similar points, ending with:

    Finally, one should be prepared for the threat of breakdown in negotiations at any given moment and not be cowed by the possibility.

    We shall now discuss these points... Examples of how to represent a conversation are shown in a later section; it is not appropriate to use the cite and blockquote elements for this purpose. 4.4.6. The ol element Categories: Flow content. If the element’s children include at least one li element: Palpable content. Contexts in which this element can be used: Where flow content is expected. Content model: Zero or more li and script-supporting elements. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes reversed - Number the list backwards. start - Ordinal value of the first item type - Kind of list marker. Allowed ARIA role attribute values: list role (default - do not set), directory, group, listbox, menubar, presentation, radiogroup, tablist, toolbar or tree. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the default or allowed roles. DOM interface: interface HTMLOListElement : HTMLElement { attribute boolean reversed; attribute long start; attribute DOMString type; }; The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document. The items of the list are the li element child nodes of the ol element, in tree order. The reversed attribute is a boolean attribute. If present, it indicates that the list is a descending list (..., 3, 2, 1). If the attribute is omitted, the list is an ascending list (1, 2, 3, ...). The start attribute, if present, must be a valid integer giving the ordinal value of the first list item. If the start attribute is present, user agents must parse it as an integer, in order to determine the attribute’s value. The default value, used if the attribute is missing or if the value cannot be converted to a number according to the referenced algorithm, is 1 if the element has no reversed attribute, and is the number of child li elements otherwise. The first item in the list has the ordinal value given by the ol element’s start attribute, unless that li element has a value attribute with a value that can be successfully parsed, in which case it has the ordinal value given by that value attribute. Each subsequent item in the list has the ordinal value given by its value attribute, if it has one, or, if it doesn’t, the ordinal value of the previous item, plus one if the reversed is absent, or minus one if it is present. The type attribute can be used to specify the kind of marker to use in the list, in the cases where that matters (e.g., because items are to be referenced by their number/letter). The attribute, if specified, must have a value that is a case-sensitive match for one of the characters given in the first cell of one of the rows of the following table. The type attribute represents the state given in the cell in the second column of the row whose first cell matches the attribute’s value; if none of the cells match, or if the attribute is omitted, then the attribute represents the decimal state. Keyword State Description Examples for values 1-3 and 3999-4001 1 decimal Decimal 1. 2. 3. ... 3999. 4000. 4001. ... (U+0031) numbers a Lowercase (U+0061) lower-alpha latin a. b. c. ... ewu. ewv. eww. ... alphabet A Uppercase (U+0041) upper-alpha latin A. B. C. ... EWU. EWV. EWW. ... alphabet i Lowercase (U+0069) lower-roman roman i. ii. iii. ... mmmcmxcix. i̅v̅. i̅v̅i. ... numerals I Uppercase (U+0049) upper-roman roman I. II. III. ... MMMCMXCIX. I̅V̅. I̅V̅I. ... numerals User agents should render the items of the list in a manner consistent with the state of the type attribute of the ol element. Numbers less than or equal to zero should always use the decimal system regardless of the type attribute. For CSS user agents, a mapping for this attribute to the list-style-type CSS property is given in the §10 Rendering section (the mapping is straightforward: the states above have the same names as their corresponding CSS values). It is possible to redefine the default CSS list styles used to implement this attribute in CSS user agents; doing so will affect how list items are rendered. The reversed, start, and type IDL attributes must reflect the respective content attributes of the same name. The start IDL attribute has the same default as its content attribute. The following markup shows a list where the order matters, and where the ol element is therefore appropriate. Compare this list to the equivalent list in the ul section to see an example of the same items using the ul element.

    I have lived in the following countries (given in the order of when I first lived there):

    1. Switzerland
    2. United Kingdom
    3. United States
    4. Norway
    Note how changing the order of the list changes the meaning of the document. In the following example, changing the relative order of the first two items has changed the birthplace of the author:

    I have lived in the following countries (given in the order of when I first lived there):

    1. United Kingdom
    2. Switzerland
    3. United States
    4. Norway
    4.4.7. The ul element Categories: Flow content. If the element’s children include at least one li element: Palpable content. Contexts in which this element can be used: Where flow content is expected. Content model: Zero or more li and script-supporting elements. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: list role (default - do not set), directory, group, listbox, presentation, menubar, radiogroup, tablist, toolbar or tree. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the default or allowed roles. DOM interface: interface HTMLUListElement : HTMLElement {}; The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document. The items of the list are the li element child nodes of the ul element. The following markup shows a list where the order does not matter, and where the ul element is therefore appropriate. Compare this list to the equivalent list in the ol section to see an example of the same items using the ol element.

    I have lived in the following countries:

    • Norway
    • Switzerland
    • United Kingdom
    • United States
    Note that changing the order of the list does not change the meaning of the document. The items in the snippet above are given in alphabetical order, but in the snippet below they are given in order of the size of their current account balance in 2007, without changing the meaning of the document whatsoever:

    I have lived in the following countries:

    • Switzerland
    • Norway
    • United Kingdom
    • United States
    4.4.8. The li element Categories: None. Contexts in which this element can be used: Inside ol elements. Inside ul elements. Content model: Flow content. Tag omission in text/html: An li element’s end tag may be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element. Content attributes: Global attributes If the element is not a child of an ul: value Allowed ARIA role attribute values: listitem role (default - do not set), option, presentation, radio, separator, tab or treeitem. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the default or allowed roles. DOM interface: interface HTMLLIElement : HTMLElement { attribute long value; }; The li element represents a list item. If its parent element is an ol, or ul, then the element is an item of the parent element’s list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element. If the parent element is an ol element, then the li element has an ordinal value. The value attribute, if present, must be a valid integer giving the ordinal value of the list item. If the value attribute is present, user agents must parse it as an integer, in order to determine the attribute’s value. If the attribute’s value cannot be converted to a number, the attribute must be treated as if it was absent. The attribute has no default value. The value attribute is processed relative to the element’s parent ol element (q.v.), if there is one. If there is not, the attribute has no effect. The value IDL attribute must reflect the value of the value content attribute. The following example, the top ten movies are listed (in reverse order). Note the way the list is given a title by using a figure element and its figcaption element.
    The top 10 movies of all time
    1. Josie and the Pussycats, 2001
    2. Црна мачка, бели мачор, 1998
    3. A Bug’s Life, 1998
    4. Toy Story, 1995
    5. Monsters, Inc, 2001
    6. Cars, 2006
    7. Toy Story 2, 1999
    8. Finding Nemo, 2003
    9. The Incredibles, 2004
    10. Ratatouille, 2007
    The markup could also be written as follows, using the reversed attribute on the ol element:
    The top 10 movies of all time
    1. Josie and the Pussycats, 2001
    2. Црна мачка, бели мачор, 1998
    3. A Bug’s Life, 1998
    4. Toy Story, 1995
    5. Monsters, Inc, 2001
    6. Cars, 2006
    7. Toy Story 2, 1999
    8. Finding Nemo, 2003
    9. The Incredibles, 2004
    10. Ratatouille, 2007
    While it is conforming to include heading elements (e.g., h2) and Sectioning content inside li elements, it likely does not convey the semantics that the author intended. A heading starts a new section, so a heading in a list implicitly splits the list into spanning multiple sections. Sectioning content explicitly creates a new section and so splits the list into spanning multiple sections. 4.4.9. The dl element Categories: Flow content. If the element’s children include at least one name-value group: Palpable content. Contexts in which this element can be used: Where flow content is expected. Content model: Either:Zero or more groups each consisting of one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements. Or: One or more div elements, optionally intermixed with script-supporting elements. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: list role (default - do not set), group or presentation. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the default or allowed roles. DOM interface: interface HTMLDListElement : HTMLElement {}; The dl element represents a description list of zero or more term-description groups. Each term-description group consists of one or more terms (represented by dt elements) possibly as children of a div element child, and one or more descriptions (represented by dd elements possibly as children of a div element child), ignoring any nodes other than dt and dd element children, and dt and dd elements that are children of div element children within a single dl element. Term-description groups may be names and definitions, questions and answers, categories and topics, or any other groups of term-description pairs. In this example a dl is used to represent a simple list of names and descriptions:
    Blanco tequila
    The purest form of the blue agave spirit...
    Reposado tequila
    Typically aged in wooden barrels for between two and eleven months...
    Each term within a term-description group must be represented by a single dt element. The descriptions within a term-description group are alternatives. Each description must be represented by a single dd element. In this example a dl element represents a set of terms, each of which has multiple descriptions:

    Information about the rock band Queen:

    Members
    Brian May
    Freddie Mercury
    John Deacon
    Roger Taylor
    Record labels
    EMI
    Parlophone
    Capitol
    Hollywood
    Island
    The order of term-description groups within a dl element, and the order of terms and descriptions within each group, may be significant. In this example a dl is used to show a set of instructions, where the order of the instructions is important:

    Determine the victory points as follows (use the first matching case):

    If you have exactly five gold coins
    You get five victory points
    If you have one or more gold coins, and you have one or more silver coins
    You get two victory points
    If you have one or more silver coins
    You get one victory point
    Otherwise
    You get no victory points
    If a dl element contains no dt or dd child elements, it contains no term-description groups. If a dl element has one or more non-white space text node children, or has children that are neither dt or dd elements, then all such text nodes and elements as well as their descendants (including any dt and dd elements) do not form part of any term-description group within the dl. If a dl element has one or more dt element children, but no dd element children, then it consists of one group with terms but no descriptions. If a dl element has one or more dd element children, but no dt element children, it consists of one group with descriptions but no terms. If a dd element is the first child of a dl element (excepting a script-supporting element), the first group has no associated term. If a dt element is the last child of a dl element (excepting a script-supporting element), the last group has no associated descriptions. Note: when a dl element does not match its content model, it is often because a dd element has been used instead of a dt element, or vice versa. 4.4.10. The dt element Categories: None. Contexts in which this element can be used: Before dd or dt elements inside dl elements. Content model: Flow content, but with no header, footer, sectioning content, or heading content descendants. Tag omission in text/html: A dt element’s end tag may be omitted if the dt element is immediately followed by another dt element or a dd element. Content attributes: Global attributes Allowed ARIA role attribute values: None. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes None DOM interface: Uses HTMLElement. The dt element represents a term, part of a term-description group in a description list (dl element). In this example the dt elements represent questions and the dd elements the answers:
    What is my favorite drink?
    Tea
    What is my favorite food?
    Sushi
    What is my favourite film?
    What a Wonderful Life
    When used within a dl element, the dt element does not necessarily represent a term being defined. The dfn element should be used to represent a term being defined. In this example the dfn element indicates that the dt element contains a defined term, the definition for which is represented by the dd element:
    Color
    Colour
    A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view.
    4.4.11. The dd element Categories: None. Contexts in which this element can be used: After dt or dd elements inside dl elements. Content model: Flow content. Tag omission in text/html: A dd element’s end tag may be omitted if the dd element is immediately followed by another dd element or a dt element, or if there is no more content in the parent element. Content attributes: Global attributes Allowed ARIA role attribute values: None Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the default or allowed roles. DOM interface: Uses HTMLElement. The dd element represents a description, part of a term-description group in a description list (dl element). In this example the dd elements represent the keys that invoke the keycodes indicated in the dt elements:
    37
    Left
    38
    Right
    39
    Up
    40
    Down
    4.4.12. The figure element Categories: Flow content. Sectioning root. Palpable content. Contexts in which this element can be used: Where flow content is expected. Content model: Flow content optionally including a figcaption child element. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: figure role (default - do not set), group or presentation. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the default or allowed roles. DOM interface: Uses HTMLElement. The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document. "Self-contained" in this context does not necessarily mean independent. For example, each sentence in a paragraph is self-contained; an image that is part of a sentence would be inappropriate for figure, but an entire sentence made of images would be fitting. The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc. When a figure is referred to from the main content of the document by identifying it by its caption (e.g., by figure number), it enables such content to be easily moved away from that primary content, e.g., to the side of the page, to dedicated pages, or to an appendix, without affecting the flow of the document. If a figure element is referenced by its relative position, e.g., "in the photograph above" or "as the next figure shows", then moving the figure would disrupt the page’s meaning. Authors are encouraged to consider using labels to refer to figures, rather than using such relative references, so that the page can easily be restyled without affecting the page’s meaning. The figcaption descendant of figure, if any, represents the caption of the figure element’s contents. If there is no child figcaption element, then there is no caption. A figure element’s contents are part of the surrounding flow. If the purpose of the page is to display the figure, for example a photograph on an image sharing site, the figure and figcaption elements can be used to explicitly provide a caption for that figure. For content that is only tangentially related, or that serves a separate purpose than the surrounding flow, the aside element should be used (and can itself wrap a figure). For example, a pull quote that repeats content from an article would be more appropriate in an aside than in a figure, because it isn’t part of the content, it’s a repetition of the content for the purposes of enticing readers or highlighting key topics. This example shows the figure element to mark up a code listing.

    In listing 4 we see the primary core interface API declaration.

    Listing 4. The primary core interface API declaration.
    interface PrimaryCore {
       boolean verifyDataLine();
       void sendData(in sequence<byte> data);
       void initSelfDestruct();
     }

    The API is designed to use UTF-8.

    Here we see a figure element to mark up a photo that is the main content of the page (as in a gallery). Bubbles at work — My Gallery™
    Bubbles, sitting in his office chair, works on his
             latest project intently.
    Bubbles at work
    In this example, we see an image that is not a figure, as well as an image and a video that are. The first image is literally part of the example’s second sentence, so it’s not a self-contained unit, and thus figure would be inappropriate.

    Malinko’s comics

    This case centered on some sort of "intellectual property" infringement related to a comic (see Exhibit A). The suit started after a trailer ending with these words:

    ROUGH COPY! Promblem-Packed Action!

    ...was aired. A lawyer, armed with a Bigger Notebook, launched a preemptive strike using snowballs. A complete copy of the trailer is included with Exhibit B.

    Two squiggles on a dirty piece of paper.
    Exhibit A. The alleged rough copy comic.
    Exhibit B. The Rough Copy trailer.

    The case was resolved out of court. Here, a part of a poem is marked up using figure.

    'Twas brillig, and the slithy toves
    Did gyre and gimble in the wabe;
    All mimsy were the borogoves,
    And the mome raths outgrabe.

    Jabberwocky (first verse). Lewis Carroll, 1832-98
    In this example, which could be part of a much larger work discussing a castle, nested figure elements are used to provide both a group caption and individual captions for each figure in the group:
    The castle through the ages: 1423, 1858, and 1999 respectively.
    Etching. Anonymous, ca. 1423.
    The castle has one tower, and a tall wall around it.
    Oil-based paint on canvas. Maria Towle, 1858.
    The castle now has two towers and two walls.
    Film photograph. Peter Jankle, 1999.
    The castle lies in ruins, the original tower all that remains in one piece.
    The figure is sometimes referenced only implicitly from the content:

    Fiscal negotiations stumble in Congress as deadline nears

    Obama and Reid sit together smiling in the Oval Office.
    Barack Obama and Harry Reid. White House press photograph.

    Negotiations in Congress to end the fiscal impasse sputtered on Tuesday, leaving both chambers grasping for a way to reopen the government and raise the country’s borrowing authority with a Thursday deadline drawing near.

    ...
    4.4.13. The figcaption element Categories: None. Contexts in which this element can be used: As a descendant of a figure element. Content model: Flow content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: group or presentation. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the default or allowed roles. DOM interface: Uses HTMLElement. The figcaption element represents a caption or legend for the rest of the contents of the figcaption element’s parent figure element, if any. 4.4.14. The main element Categories: Flow content. Palpable content. Contexts in which this element can be used: Where flow content is expected, but with no article, aside, footer, header or nav element ancestors. Content model: Flow content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: main role (default - do not set) or presentation. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the default or allowed roles. DOM interface: Uses HTMLElement The main element represents the main content of the body of a document or application. The main element is not sectioning content and has no effect on the document outline. The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or application’s main function is that of a search form). There must not be more than one visible main element in a document. If more than one main element is present in a document, all other instances must be hidden using §5.1 The hidden attribute.
    ...
    ...
    ...
    ...
    ...
    ...
    Authors must not include the main element as a descendant of an article, aside, footer, header or nav element. The main element is not suitable for use to identify the main content areas of sub sections of a document or application. The simplest solution is to not mark up the main content of a sub section at all, and just leave it as implicit, but an author could use a §4.4 Grouping content or sectioning content element as appropriate. In the following example, we see 2 articles about skateboards (the main topic of a Web page) the main topic content is identified by the use of the main element.

    Skateboards

    The skateboard is the way cool kids get around

    Longboards

    Longboards are a type of skateboard with a longer wheelbase and larger, softer wheels.

    ...

    ...

    Electric Skateboards

    These no longer require the propelling of the skateboard by means of the feet; rather an electric motor propels the board, fed by an electric battery.

    ...

    ...

    Here is a graduation programme, in which the main content section is defined by the use of the main element. Note in this example the main element contains a nav element consisting of links to sub sections of the main content. Graduation Ceremony Summer 2022
    The Lawson Academy:

    Graduation

    Ceremony

    Opening Procession

    Speech by Valedictorian

    Speech by Class President

    Presentation of Diplomas

    Closing Speech by Headmaster

    Graduates

    • Eileen Williams
    • Andy Maseyk
    • Blanca Sainz Garcia
    • Clara Faulkner
    • Gez Lemon
    • Eloisa Faulkner

    Awards

    • Clara Faulkner
    • Eloisa Faulkner
    • Blanca Sainz Garcia
    Copyright 2012 B.lawson
    In the next example, both the header and the footer are outside the main element because they are generic to the website and not specific to main's content. Great Dogs for Families

    The Border Terrier

    Welcome!

    This site is all about the Border Terrier, the best breed of dog that there is!

    Copyright © by I. Devlin
    Here, the same generic header and footer elements remain outside main, but there is an additional header element within the main element as its content is relevant to the content within main because it contains a relevant heading and in-page navigation. The in-page navigation is repeated within a footer which is again within the main element. Great Dogs for Families

    The Border Terrier

    About

    Basic Information

    The Border Terrier is a small, rough-coated breed of dog of the terrier group, originally bred as fox and vermin hunters. [...]

    Appearance

    Identifiable by their otter-shaped heads, Border Terriers have a broad skull and short (although many be fairly long), strong muzzle with a scissors bite. [...]

    Temperament

    Though sometimes stubborn and strong willed, border terriers are, on the whole very even tempered, and are friendly and rarely aggressive. [...]

    Copyright © by I. Devlin
    This example is largely the same as the previous one except that it includes an aside. The content of the aside is considered to be relevant to the content within the main element, which is all about the Border Terrier, so the aside is placed within the main element. Great Dogs for Families

    The Border Terrier

    About

    Basic Information

    The Border Terrier is a small, rough-coated breed of dog of the terrier group, originally bred as fox and vermin hunters. [...]

    Appearance

    Identifiable by their otter-shaped heads, Border Terriers have a broad skull and short (although many be fairly long), strong muzzle with a scissors bite. [...]

    Temperament

    Though sometimes stubborn and strong willed, border terriers are, on the whole very even tempered, and are friendly and rarely aggressive. [...]

    Copyright © by I. Devlin
    In the following example, two aside elements containg adverts have been placed outside the main element as their content is not specific to the content within main. These asides could be on any page, as they are as generic as the header and footer shown. Great Dogs for Families

    The Border Terrier

    Welcome!

    This site is all about the Border Terrier, the best breed of dog that there is!

    Copyright © by I. Devlin
    4.4.15. The div element Categories: Flow content. Palpable content. Contexts in which this element can be used: Where flow content is expected. As a child of a dl element. Content model: If the element is a child of a dl element: one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements. If the element is not a child of a dl element: Flow content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the default or allowed roles. DOM interface: interface HTMLDivElement : HTMLElement {}; The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements. Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors. For example, a blog post would be marked up using article, a chapter using section, a page’s navigation aids using nav, and a group of form controls using fieldset. On the other hand, div elements can be useful for stylistic purposes or to wrap multiple paragraphs within a section that are all to be annotated in a similar way. In the following example, we see div elements used as a way to set the language of two paragraphs at once, instead of setting the language on the two paragraph elements separately:

    My use of language and my cats

    My cat’s behavior hasn’t changed much since her absence, except that she plays her new physique to the neighbors regularly, in an attempt to get pets.

    My other cat, colored black and white, is a sweetie. He followed us to the pool today, walking down the pavement with us. Yesterday he apparently visited our neighbours. I wonder if he recognizes that their flat is a mirror image of ours.

    Hm, I just noticed that in the last paragraph I used British English. But I’m supposed to write in American English. So I shouldn’t say "pavement" or "flat" or "color"...

    I should say "sidewalk" and "apartment" and "color"!

    4.5. Text-level semantics 4.5.1. The a element Categories: Flow content. Phrasing content. If the element has an href attribute: Interactive content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Transparent, but there must be no interactive content or a element descendants. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes href - Address of the hyperlink target - Default browsing context for hyperlink navigation and §4.10.21 Form submission download - Whether to download the resource instead of navigating to it, and its file name if so rel — Relationship of this document (or subsection/topic) to the destination resource rev — Reverse link relationship of the destination resource to this document (or subsection/topic) hreflang - Language of the linked resource type - Hint for the type of the referenced resource referrerpolicy - Referrer policy for fetches initiated by the element Allowed ARIA role attribute values: link (default - do not set), button, checkbox, radio, switch, tab or treeitem Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: interface HTMLAnchorElement : HTMLElement { attribute DOMString target; attribute DOMString download; attribute DOMString rel; attribute DOMString rev; [SameObject, PutForwards=value] readonly attribute DOMTokenList relList; attribute DOMString hreflang; attribute DOMString type; attribute DOMString text; attribute DOMString referrerPolicy; }; HTMLAnchorElement implements HTMLHyperlinkElementUtils; If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents. If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element’s contents. The target, download, rel, rev, hreflang, type, and referrerpolicy attributes must be omitted if the href attribute is not present. If a site uses a consistent navigation toolbar on every page, then the link that would normally link to the page itself could be marked up using an a element: The href, target, download, and referrerpolicy attributes affect what happens when users follow hyperlinks or download hyperlinks created using the a element. The rel, rev, hreflang, and type attributes may be used to indicate to the user the likely nature of the target resource before the user follows the link. The activation behavior of a elements that create hyperlinks is to run the following steps: 1. If the a element’s Document is not fully active, then abort these steps. 2. If either the a element has a download attribute and the algorithm is not allowed to show a popup, or the element’s target attribute is present and applying the rules for choosing a browsing context given a browsing context name, using the value of the target attribute as the browsing context name, would result in there not being a chosen browsing context, then run these substeps: 1. If there is an entry settings object, throw an InvalidAccessError exception. 2. Abort these steps without following the hyperlink. 3. If the target of the click event is an img element with an ismap attribute specified, then server-side image map processing must be performed, as follows: 1. If the click event was a real pointing-device-triggered click event on the img element, then let x be the distance in CSS pixels from the left edge of the image to the location of the click, and let y be the distance in CSS pixels from the top edge of the image to the location of the click. Otherwise, let x and y be zero. 2. Let hyperlink suffix be a U+003F QUESTION MARK character, the value of x expressed as a base-ten integer using ASCII digits, a U+002C COMMA character (,), and the value of y expressed as a base-ten integer using ASCII digits. 4. Finally, the user agent must follow the hyperlink or download the hyperlink created by the a element, as determined by the download attribute and any expressed user preference, passing hyperlink suffix, if the steps above defined it. a . text Same as textContent. The IDL attributes download, target, rel, hreflang, and type, must reflect the respective content attributes of the same name. The IDL attribute relList must reflect the rel content attribute. The IDL attribute referrerPolicy must reflect the referrerpolicy content attribute, limited to only known values. The text IDL attribute, on getting, must return the same value as the textContent IDL attribute on the element, and on setting, must act as if the textContent IDL attribute on the element had been set to the new value. ---------------------------------------------------------------------- The a element also supports the HTMLHyperlinkElementUtils interface. [URL] When the element is created, and whenever the element’s href content attribute is set, changed, or removed, the user agent must invoke the element’s HTMLHyperlinkElementUtils interface’s set the input algorithm with the value of the href content attribute, if any, or the empty string otherwise, as the given value. The element’s HTMLHyperlinkElementUtils interface’s get the base algorithm must simply return the document base URL. The element’s HTMLHyperlinkElementUtils interface’s query encoding is the document’s character encoding. When the element’s HTMLHyperlinkElementUtils interface invokes its update steps with a string value, the user agent must set the element’s href content attribute to the string value. The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g., buttons or other links). This example shows how this can be used to make an entire advertising block into a link: 4.5.2. The em element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The em element represents stress emphasis of its contents. The level of stress that a particular piece of content has is given by its number of ancestor em elements. The placement of stress emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which stress is used in this way depends on the language. These examples show how changing the stress emphasis changes the meaning. First, a general statement of fact, with no stress:

    Cats are cute animals.

    By emphasizing the first word, the statement implies that the kind of animal under discussion is in question (maybe someone is asserting that dogs are cute):

    Cats are cute animals.

    Moving the stress to the verb, one highlights that the truth of the entire sentence is in question (maybe someone is saying cats are not cute):

    Cats are cute animals.

    By moving it to the adjective, the exact nature of the cats is reasserted (maybe someone suggested cats were mean animals):

    Cats are cute animals.

    Similarly, if someone asserted that cats were vegetables, someone correcting this might emphasize the last word:

    Cats are cute animals.

    By emphasizing the entire sentence, it becomes clear that the speaker is fighting hard to get the point across. This kind of stress emphasis also typically affects the punctuation, hence the exclamation mark here.

    Cats are cute animals!

    Anger mixed with emphasizing the cuteness could lead to markup such as:

    Cats are cute animals!

    The em element isn’t a generic "italics" element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the i element is more appropriate. The em element also isn’t intended to convey importance; for that purpose, the strong element is more appropriate. 4.5.3. The strong element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The strong element represents strong importance, seriousness, or urgency for its contents. Importance: The strong element can be used in a heading, caption, or paragraph to distinguish the part that really matters from other parts that might be more detailed, more jovial, or merely boilerplate. For example, the first word of the previous paragraph is marked up with strong to distinguish it from the more detailed text in the rest of the paragraph. Seriousness: The strong element can be used to mark up a warning or caution notice. Urgency: The strong element can be used to denote contents that the user needs to see sooner than other parts of the document. The relative level of importance of a piece of content is given by its number of ancestor strong elements; each strong element increases the importance of its contents. Changing the importance of a piece of text with the strong element does not change the meaning of the sentence. Here, the word "chapter" and the actual chapter number are mere boilerplate, and the actual name of the chapter is marked up with strong:

    Chapter 1: The Praxis

    In the following example, the name of the diagram in the caption is marked up with strong, to distinguish it from boilerplate text (before) and the description (after):
    Figure 1. Ant colony dynamics. The ants in this colony areaffected by the heat source (upper left) and the food source (lower right).
    In this example, the heading is really "Flowers, Bees, and Honey", but the author has added a light-hearted addition to the heading. The strong element is thus used to mark up the first part to distinguish it from the latter part.

    Flowers, Bees, and Honey and other things I don’t understand

    Here is an example of a warning notice in a game, with the various parts marked up according to how important they are:

    Warning. This dungeon is dangerous. Avoid the ducks. Take any gold you find. Do not take any of the diamonds, they are explosive and will destroy anything within ten meters. You have been warned.

    In this example, the strong element is used to denote the part of the text that the user is intended to read first.

    Welcome to Remy, the reminder system.

    Your tasks for today:

    • Turn off the oven.

    • Put out the trash.

    • Do the laundry.

    4.5.4. The small element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The small element represents side comments such as small print. Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements. The small element does not "de-emphasize" or lower the importance of text emphasized by the em element or marked as important with the strong element. To mark text as not emphasized or important, simply do not mark it up with the em or strong elements respectively. The small element should not be used for extended spans of text, such as multiple paragraphs, lists, or sections of text. It is only intended for short runs of text. The text of a page listing terms of use, for instance, would not be a suitable candidate for the small element: in such a case, the text is not a side comment, it is the main content of the page. In this example, the small element is used to indicate that value-added tax is not included in a price of a hotel room:
    Single room
    199 € breakfast included, VAT not included
    Double room
    239 € breakfast included, VAT not included
    In this second example, the small element is used for a side comment in an article.

    Example Corp today announced record profits for the second quarter (Full Disclosure: Foo News is a subsidiary of Example Corp), leading to speculation about a third quarter merger with Demo Group.

    This is distinct from a sidebar, which might be multiple paragraphs long and is removed from the main flow of text. In the following example, we see a sidebar from the same article. This sidebar also has small print, indicating the source of the information in the sidebar. In this last example, the small element is marked as being important small print.

    Continued use of this service will result in a kiss.

    4.5.5. The s element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The s element represents contents that are no longer accurate or no longer relevant. The s element is not appropriate when indicating document edits; to mark a span of text as having been removed from a document, use the del element. In this example a recommended retail price has been marked as no longer relevant as the product in question has a new sale price.

    Buy our Iced Tea and Lemonade!

    Recommended retail price: $3.99 per bottle

    Now selling for just $2.99 a bottle!

    4.5.6. The cite element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The cite element represents a reference to a creative work. It must include the title of the work or the name of the author (person, people or organization) or an URL reference, or a reference in abbreviated form as per the conventions used for the addition of citation metadata. Creative works include a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, a computer program, , a web site, a web page, a blog post or comment, a forum post or comment, a tweet, a written or oral statement, etc. Here is an example of the author of a quote referenced using the cite element:

    In the words of Charles Bukowski - An intellectual says a simple thing in a hard way. An artist says a hard thing in a simple way.

    This second example identifies the author of a tweet by referencing the authors name using the cite element: In this example the cite element is used to reference the title of a work in a bibliography:

    Universal Declaration of Human Rights, United Nations, December 1948. Adopted by General Assembly resolution 217 A (III).

    In this example the cite element is used to reference the title of a television show:

    Who is your favorite doctor (in Doctor Who)?

    A very common use for the cite element is to identify the author of a comment in a blog post or forum, as in this example:
    Comment by Oli Studholme

    Unfortunately I don’t think adding names back into the definition of cite solves the problem: of the 12 blockquote examples in Examples of block quote metadata, there’s not even one that’s just a person’s name.

    A subset of the problem, maybe…

    Another common use for the cite element is to reference the URL of a search result, as in this example:
    About 416,000,000 results 0.33 seconds) 
    ...

    W3C HTML Working Group

    www.w3.org/html/wg/

    15 Apr 2013 - The HTML Working Group is currently chartered to continue its work through 31 December 2014. A Plan 2014 document published by the...

    ... Where the cite element is used to identify an abbreviated reference such as Ibid. it is suggested that this reference be linked to the base reference:

    Book notes

    ... ...
    "Money is the real cause of poverty,"
    The Ragged-Trousered Philanthropists, page 89.
    ... ...
    "Money is the cause of poverty because it is the device by which those who are too lazy to work are enabled to rob the workers of the fruits of their labour." Ibid.
    ...
    A citation is not a quote (for which the q element is appropriate). This is incorrect usage, because cite is not for quotes:

    This is wrong!, said Hillary. is a quote from the popular daytime TV drama When Ian became Hillary.

    This is an example of the correct usage:

    This is correct, said Hillary. is a quote from the popular daytime TV drama When Ian became Hillary.

    4.5.7. The q element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes cite - Link to the source of the quotation or more information about the edit Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLQuoteElement. The q element represents some phrasing content quoted from another source. Quotation punctuation (such as quotation marks) that is quoting the contents of the element must not appear immediately before, after, or inside q elements; they will be inserted into the rendering by the user agent. Content inside a q element must be quoted from another source, whose address, if it has one, may be cited in the cite attribute. The source may be fictional, as when quoting characters in a novel or screenplay. If the cite attribute is present, it must be a valid URL potentially surrounded by spaces. To obtain the corresponding citation link, the value of the attribute must be parsed relative to the element’s node document. User agents may allow users to follow such citation links, but they are primarily intended for private use (e.g., by server-side scripts collecting statistics about a site’s use of quotations), not for readers. The q element must not be used in place of quotation marks that do not represent quotes; for example, it is inappropriate to use the q element for marking up sarcastic statements. The use of q elements to mark up quotations is entirely optional; using explicit quotation punctuation without q elements is just as correct. Here is a simple example of the use of the q element:

    The man said Things that are impossible just take longer. I disagreed with him.

    Here is an example with both an explicit citation link in the q element, and an explicit citation outside:

    The W3C page About W3C says the W3C’s mission is To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web. I disagree with this mission.

    In the following example, the quotation itself contains a quotation:

    In Example One, he writes The man said Things that are impossible just take longer. I disagreed with him. Well, I disagree even more!

    In the following example, quotation marks are used instead of the q element:

    His best argument was ❝I disagree❞, which I thought was laughable.

    In the following example, there is no quote — the quotation marks are used to name a word. Use of the q element in this case would be inappropriate.

    The word "ineffable" could have been used to describe the disaster resulting from the campaign’s mismanagement.

    4.5.8. The dfn element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content, but there must be no dfn element descendants. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Also, the title attribute has special semantics on this element. Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The dfn element represents the defining instance of a term. The term-description group , p, li or section element that is the nearest ancestor of the dfn element must also contain the definition(s) for the term given by the dfn element. Defining term: If the dfn element has a title attribute, then the exact value of that attribute is the term being defined. Otherwise, if it contains exactly one element child node and no child Text nodes, and that child element is an abbr element with a title attribute, then the exact value of that attribute is the term being defined. Otherwise, it is the exact textContent of the dfn element that gives the term being defined. If the title attribute of the dfn element is present, then it must contain only the term being defined. The title attribute of ancestor elements does not affect dfn elements. An a element that links to a dfn element represents an instance of the term defined by the dfn element. In the following fragment, the term "Garage Door Opener" is first defined in the first paragraph, then used in the second. In both cases, its abbreviation is what is actually displayed.

    The GDO is a device that allows off-world teams to open the iris.

    Teal’c activated his GDO and so Hammond ordered the iris to be opened.

    With the addition of an a element, the reference can be made explicit:

    The GDO is a device that allows off-world teams to open the iris.

    Teal’c activated his GDO and so Hammond ordered the iris to be opened.

    4.5.9. The abbr element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Also, the title attribute has special semantics on this element. Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The abbr element represents an abbreviation or acronym, optionally with its expansion. The title attribute may be used to provide an expansion of the abbreviation. The attribute, if specified, must contain an expansion of the abbreviation, and nothing else. The paragraph below contains an abbreviation marked up with the abbr element. This paragraph defines the term "Web Hypertext Application Technology Working Group".

    The WHATWG is a loose unofficial collaboration of Web browser manufacturers and interested parties who wish to develop new technologies designed to allow authors to write and deploy Applications over the World Wide Web.

    An alternative way to write this would be:

    The Web Hypertext Application Technology Working Group (WHATWG) is a loose unofficial collaboration of Web browser manufacturers and interested parties who wish to develop new technologies designed to allow authors to write and deploy Applications over the World Wide Web.

    This paragraph has two abbreviations. Notice how only one is defined; the other, with no expansion associated with it, does not use the abbr element.

    The WHATWG started working on HTML in 2004.

    This paragraph links an abbreviation to its definition.

    The WHATWG community does not have much representation from Asia.

    This paragraph marks up an abbreviation without giving an expansion, possibly as a hook to apply styles for abbreviations (e.g., smallcaps).

    Philip and Dashiva both denied that they were going to get the issue counts from past revisions of the specification to backfill the WHATWG issue graph.

    If an abbreviation is pluralized, the expansion’s grammatical number (plural vs singular) must match the grammatical number of the contents of the element. Here the plural is outside the element, so the expansion is in the singular:

    Two WGs worked on this specification: the WHATWG and the HTMLWG.

    Here the plural is inside the element, so the expansion is in the plural:

    Two WGs worked on this specification: the WHATWG and the HTMLWG.

    Abbreviations do not have to be marked up using this element. It is expected to be useful in the following cases: * Abbreviations for which the author wants to give expansions, where using the abbr element with a title attribute is an alternative to including the expansion inline (e.g., in parentheses). * Abbreviations that are likely to be unfamiliar to the document’s readers, for which authors are encouraged to either mark up the abbreviation using an abbr element with a title attribute or include the expansion inline in the text the first time the abbreviation is used. * Abbreviations whose presence needs to be semantically annotated, e.g., so that they can be identified from a style sheet and given specific styles, for which the abbr element can be used without a title attribute. Providing an expansion in a title attribute once will not necessarily cause other abbr elements in the same document with the same contents but without a title attribute to behave as if they had the same expansion. Every abbr element is independent. 4.5.10. The ruby element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: See prose. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The ruby element allows one or more spans of phrasing content to be marked with ruby annotations. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation or to include other annotations. In Japanese, this form of typography is also known as furigana. Ruby text can appear on either side, and sometimes both sides, of the base text, and it is possible to control its position using CSS. A more complete introduction to ruby can be found in the Use Cases & Exploratory Approaches for Ruby Markup document as well as in CSS Ruby. [RUBY-UC] [CSS3-RUBY] The content model of ruby elements consists of one or more of the following sequences: 1. One or more phrasing content nodes or rb elements. 2. One or more rt or rtc elements, each of which either immediately preceded or followed by an rp elements. The ruby, rb, rtc, and rt elements can be used for a variety of kinds of annotations, including in particular (though by no means limited to) those described below. For more details on Japanese Ruby in particular, and how to render Ruby for Japanese, see Requirements for Japanese Text Layout. [JLREQ] The rp element can be used as fallback content when ruby rendering is not supported. Mono-ruby for individual base characters Annotations (the ruby text) are associated individually with each ideographic character (the base text). In Japanese this is typically hiragana or katakana characters used to provide readings of kanji characters. baseannotation When no rb element is used, the base is implied, as above. But you can also make it explicit. This can be useful notably for styling, or when consecutive bases are to be treated as a group, as in the jukugo ruby example further down. baseannotation In the following example, notice how each annotation corresponds to a single base character. ほん いたさくぶんです。 Ruby text interspersed in regular text provides structure akin to the following image: An example of ruby text mixed up with regular text. This example can also be written as follows, using one ruby element with two segments of base text and two annotations (one for each) rather than two back-to-back ruby elements each with one base text segment and annotation (as in the markup above): ほん いたさくぶんです。 Group ruby Group ruby is often used where phonetic annotations don’t map to discreet base characters, or for semantic glosses that span the whole base text. For example, the word "today" is written with the characters 今日, literally "this day". But it’s pronounced きょう (kyou), which can’t be broken down into a "this" part and a "day" part. In typical rendering, you can’t split text that is annotated with group ruby; it has to wrap as a single unit onto the next line. When a ruby text annotation maps to a base that is comprised of more than one character, then that base is grouped. The following group ruby: Group ruby example with きょう annotating 今日 Can be marked up as follows: 今日きょう Jukugo ruby Jukugo refers to a Japanese compound noun, i.e., a word made up of more than one kanji character. Jukugo ruby is a term that is used not to describe ruby annotations over jukugo text, but rather to describe ruby with a behavior slightly different from mono or group ruby. Jukugo ruby is similar to mono ruby, in that there is a strong association between ruby text and individual base characters, but the ruby text is typically rendered as grouped together over multiple ideographs when they are on the same line. The distinction is captured in this example: Example of jukugo ruby Which can be marked up as follows: きょう In this example, each rt element is paired with its respective rb element, the difference with an interleaved rb/rt approach being that the sequences of both base text and ruby annotations are implicitly placed in common containers so that the grouping information is captured. For more details on Jukugo Ruby rendering, see Appendix F in the Requirements for Japanese Text Layout and Use Case C: Jukugo ruby in the Use Cases & Exploratory Approaches for Ruby Markup. [JLREQ] [RUBY-UC] Inline ruby In some contexts, for instance when the font size or line height are too small for ruby to be readable, it is desirable to inline the ruby annotation such that it appears in parentheses after the text it annotates. This also provides a convenient fallback strategy for user agents that do not support rendering ruby annotations. Inlining takes grouping into account. For example, Tokyo is written with two kanji characters, 東, which is pronounced とう, and 京, which is pronounced きょう. Each base character should be annotated individually, but the fallback should be 東京(とうきょう) not 東(とう)京(きょう). This can be marked up as follows: とうきょう Note that the above markup will enable the usage of parentheses when inlining for browsers that support ruby layout, but for those that don’t it will fail to provide parenthetical fallback. This is where the rp element is useful. It can be inserted into the above example to provide the appropriate fallback when ruby layout is not supported: (とうきょう) Text with both phonetic and semantic annotations (double-sided ruby) Sometimes, ruby can be used to annotate a base twice. In the following example, the Chinese word for San Francisco (旧金山, i.e., "old gold mountain") is annotated both using pinyin to give the pronunciation, and with the original English. San Francisco in Chinese, with both pinyin and the original English as annotations. Which is marked up as follows: jiùjīnshānSan Francisco In this example, a single base run of three base characters is annotated with three pinyin ruby text segments in a first (implicit) container, and an rtc element is introduced in order to provide a second single ruby text annotation being the city’s English name. We can also revisit our jukugo example above with 上手 ("skill") to show how it can be annotation in both kana and romaji phonetics while at the same time maintaining the pairing to bases and annotation grouping information. 上手 ("skill") annotated in both kana and romaji, shown in both jukugo and mono styles. Which is marked up as follows: じようjouzu Text that is a direct child of the rtc element implicitly produces a ruby text segment as if it were contained in an rt element. In this contrived example, this is shown with some symbols that are given names in English and French with annotations intended to appear on either side of the base symbol. HeartCœurShamrockTrèfleStarÉtoile Similarly, text directly inside a ruby element implicitly produces a ruby base as if it were contained in an rb element, and rt children of ruby are implicitly contained in an rtc container. In effect, the above example is equivalent (in meaning, though not in the DOM it produces) to the following: HeartCœur ShamrockTrèfle StarÉtoile ---------------------------------------------------------------------- Within a ruby element, content is parcelled into a series of ruby segments. Each ruby segment is described by: * Zero or more ruby bases, each of which is a DOM range that may contain phrasing content or an rb element. * A base range, that is a DOM range including all the bases. This is the ruby base container. * Zero or more ruby text containers which may correspond to explicit rtc elements, or to sequences of rt elements implicitly recognized as contained in an anonymous ruby text container. Each ruby text container is described by zero or more ruby text annotations each of which is a DOM range that may contain phrasing content or an rt element, and an annotations range that is a range including all the annotations for that container. A ruby text container is also known (primarily in a CSS context) as a ruby annotation container. Furthermore, a ruby element contains ignored ruby content. Ignored ruby content does not form part of the document’s semantics. It consists of some inter-element white space and rp elements, the latter of which are used for legacy user agents that do not support ruby at all. The process of annotation pairing associates ruby annotations with ruby bases. Within each ruby segment, each ruby base in the ruby base container is paired with one ruby text annotation from the ruby text container, in order. If there are not enough ruby text annotations in a ruby annotation container, the last one is associated with any excess ruby bases. (If there are not any in the ruby annotation container, an anonymous empty one is assumed to exist.) If there are not enough ruby bases, any remaining ruby text annotations are assumed to be associated with empty, anonymous bases inserted at the end of the ruby base container. Note that the terms ruby segment, ruby base, ruby text annotation, ruby text container, ruby base container, and ruby annotation container have their equivalents in CSS Ruby Module Level 3. [CSS3-RUBY] Informally, the segmentation and categorization algorithm below performs a simple set of tasks. First it processes adjacent rb elements, text nodes, and non-ruby elements into a list of bases. Then it processes any number of rtc elements or sequences of rt elements that are considered to automatically map to an anonymous ruby text container. Put together these data items form a ruby segment as detailed in the data model above. It will continue to produce such segments until it reaches the end of the content of a given ruby element. The complexity of the algorithm below compared to this informal description stems from the need to support an author-friendly syntax and being mindful of inter-element white space. At any particular time, the segmentation and categorization of content of a ruby element is the result that would be obtained from running the following algorithm: 1. Let root be the ruby element for which the algorithm is being run. 2. Let index be 0. 3. Let ruby segments be an empty list. 4. Let current bases be an empty list of DOM ranges. 5. Let current bases range be null. 6. Let current bases range start be null. 7. Let current annotations be an empty list of DOM ranges. 8. Let current annotations range be null. 9. Let current annotations range start be null. 10. Let current annotation containers be an empty list. 11. Let current automatic base nodes be an empty list of DOM Nodes. 12. Let current automatic base range start be null. 13. Process a ruby child: If index is equal to or greater than the number of child nodes in root, then run the steps to commit a ruby segment, return ruby segments, and abort these steps. 14. Let current child be the indexth node in root. 15. If current child is not a Text node and is not an Element node, then increment index by one and jump to the step labelled process a ruby child. 16. If current child is an rp element, then increment index by one and jump to the step labelled process a ruby child. (Note that this has the effect of including this element in any range that we are currently processing. This is done intentionally so that misplaced rp can be processed correctly; semantically they are ignored all the same.) 17. If current child is an rt element, then run these substeps: 1. Run the steps to commit an automatic base. 2. Run the steps to commit the base range. 3. If current annotations is empty, set current annotations range start to the value of index. 4. Create a new DOM range whose start is the boundary point (root, index) and whose end is the boundary point (root, index plus one), and append it at the end of current annotations. 5. Increment index by one and jump to the step labelled process a ruby child. 18. If current child is an rtc element, then run these substeps: 1. Run the steps to commit an automatic base. 2. Run the steps to commit the base range. 3. Run the steps to commit current annotations. 4. Create a new ruby annotation container. It is described by the list of annotations returned by running the steps to process an rtc element and a DOM range whose start is the boundary point (root, index) and whose end is the boundary point (root, index plus one). Append this new ruby annotation container at the end of current annotation containers. 5. Increment index by one and jump to the step labelled process a ruby child. 19. If current child is a Text node and is inter-element white space, then run these substeps: 1. If current annotations is not empty, increment index by one and jump to the step labelled process a ruby child. 2. Run the following substeps: 1. Let lookahead index be set to the value of index. 2. Peek ahead: Increment lookahead index by one. 3. If lookahead index is equal to or greater than the number of child nodes in root, then abort these substeps. 4. Let peek child be the lookahead indexth node in root. 5. If peek child is a Text node and is inter-element white space, then jump to the step labelled peek ahead. 6. If peek child is an rt element, an rtc element, or an rp element, then set index to the value of lookahead index and jump to the step labelled process a ruby child. 20. If current annotations is not empty or if current annotation containers is not empty, then run the steps to commit a ruby segment. 21. If current child is an rb element, then run these substeps: 1. Run the steps to commit an automatic base. 2. If current bases is empty, then set current bases range start to the value of index. 3. Create a new DOM range whose start is the boundary point (root, index) and whose end is the boundary point (root, index plus one), and append it at the end of current bases. 4. Increment index by one and jump to the step labelled process a ruby child. 22. If current automatic base nodes is empty, set current automatic base range start to the value of index. 23. Append current child at the end of current automatic base nodes. 24. Increment index by one and jump to the step labelled process a ruby child. When the steps above say to commit a ruby segment, it means to run the following steps at that point in the algorithm: 1. Run the steps to commit an automatic base. 2. If current bases, current annotations, and current annotation containers are all empty, abort these steps. 3. Run the steps to commit the base range. 4. Run the steps to commit current annotations. 5. Create a new ruby segment. It is described by a list of bases set to current bases, a base DOM range set to current bases range, and a list of ruby annotation containers that are the current annotation containers list. Append this new ruby segment at the end of ruby segments. 6. Let current bases be an empty list. 7. Let current bases range be null. 8. Let current bases range start be null. 9. Let current annotation containers be an empty list. When the steps above say to commit the base range, it means to run the following steps at that point in the algorithm: 1. If current bases is empty, abort these steps. 2. If current bases range is not null, abort these steps. 3. Let current bases range be a DOM range whose start is the boundary point (root, current bases range start) and whose end is the boundary point (root, index). When the steps above say to commit current annotations, it means to run the following steps at that point in the algorithm: 1. If current annotations is not empty and current annotations range is null let current annotations range be a DOM range whose start is the boundary point (root, current annotations range start) and whose end is the boundary point (root, index). 2. If current annotations is not empty, create a new ruby annotation container. It is described by an annotations list set to current annotations and a range set to current annotations range. Append this new ruby annotation container at the end of current annotation containers. 3. Let current annotations be an empty list of DOM ranges. 4. Let current annotations range be null. 5. Let current annotations range start be null. When the steps above say to commit an automatic base, it means to run the following steps at that point in the algorithm: 1. If current automatic base nodes is empty, abort these steps. 2. If current automatic base nodes contains nodes that are not Text nodes, or Text nodes that are not inter-element white space, then run these substeps: 1. It current bases is empty, set current bases range start to the value of current automatic base range start. 2. Create a new DOM range whose start is the boundary point (root, current automatic base range start) and whose end is the boundary point (root, index), and append it at the end of current bases. 3. Let current automatic base nodes be an empty list of DOM Nodes. 4. Let current automatic base range start be null. 4.5.11. The rb element Categories: None. Contexts in which this element can be used: As a child of a ruby element. Content model: Phrasing content. Tag omission in text/html: An rb element’s end tag may be omitted if the rb element is immediately followed by an rb, rt, rtc or rp element, or if there is no more content in the parent element. Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The rb element marks the base text component of a ruby annotation. When it is the child of a ruby element, it doesn’t represent anything itself, but its parent ruby element uses it as part of determining what it represents. An rb element that is not a child of a ruby element represents the same thing as its children. 4.5.12. The rt element Categories: None. Contexts in which this element can be used: As a child of a ruby or of an rtc element. Content model: Phrasing content. Tag omission in text/html: An rt element’s end tag may be omitted if the rt element is immediately followed by an rb, rt, rtc or rp element, or if there is no more content in the parent element. Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The rt element marks the ruby text component of a ruby annotation. When it is the child of a ruby element or of an rtc element that is itself the child of a ruby element, it doesn’t represent anything itself, but its ancestor ruby element uses it as part of determining what it represents. An rt element that is not a child of a ruby element or of an rtc element that is itself the child of a ruby element represents the same thing as its children. 4.5.13. The rtc element Categories: None. Contexts in which this element can be used: As a child of a ruby element. Content model: Phrasing content, rt, or rp elements. Tag omission in text/html: An rtc element’s end tag may be omitted if the rtc element is immediately followed by an rb or rtc element, or if there is no more content in the parent element. Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The rtc element marks a ruby text container for ruby text components in a ruby annotation. When it is the child of a ruby element it doesn’t represent anything itself, but its parent ruby element uses it as part of determining what it represents. An rtc element that is not a child of a ruby element represents the same thing as its children. When an rtc element is processed as part of the segmentation and categorization of content for a ruby element, the following algorithm defines how to process an rtc element: 1. Let root be the rtc element for which the algorithm is being run. 2. Let index be 0. 3. Let annotations be an empty list of DOM ranges. 4. Let current automatic annotation nodes be an empty list of DOM nodes. 5. Let current automatic annotation range start be null. 6. Process an rtc child: If index is equal to or greater than the number of child nodes in root, then run the steps to commit an automatic annotation, return annotations, and abort these steps. 7. Let current child be the indexth node in root. 8. If current child is an rt element, then run these substeps: 1. Run the steps to commit an automatic annotation. 2. Create a new DOM range whose start is the boundary point (root, index) and whose end is the boundary point (root, index plus one), and append it at the end of annotations. 3. Increment index by one and jump to the step labelled process an rtc child. 9. If current automatic annotation nodes is empty, set current automatic annotation range start to the value of index. 10. Append current child at the end of current automatic annotation nodes. 11. Increment index by one and jump to the step labelled process an rtc child. When the steps above say to commit an automatic annotation, it means to run the following steps at that point in the algorithm: 1. If current automatic annotation nodes is empty, abort these steps. 2. If current automatic annotation nodes contains nodes that are not Text nodes, or Text nodes that are not inter-element white space, then create a new DOM range whose start is the boundary point (root, current automatic annotation range start) and whose end is the boundary point (root, index), and append it at the end of annotations. 3. Let current automatic annotation nodes be an empty list of DOM nodes. 4. Let current automatic annotation range start be null. 4.5.14. The rp element Categories: None. Contexts in which this element can be used: As a child of a ruby or rtc element, either immediately before or immediately after an rt or rtc element, but not between rt elements. Content model: Phrasing content. Tag omission in text/html: An rp element’s end tag may be omitted if the rp element is immediately followed by an rb, rt, rtc or rp element, or if there is no more content in the parent element. Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The rp element is used to provide fallback text to be shown by user agents that don’t support ruby annotations. One widespread convention is to provide parentheses around the ruby text component of a ruby annotation. The contents of the rp elements are typically not displayed by user agents which do support ruby annotations An rp element that is a child of a ruby element represents nothing. An rp element whose parent element is not a ruby element represents its children. The example shown previously, in which each ideograph in the text 漢字 is annotated with its phonetic reading, could be expanded to use rp so that in legacy user agents the readings are in parentheses (please note that white space has been introduced into this example in order to make it more readable): ... ( かん ) ... In conforming user agents the rendering would be as above, but in user agents that do not support ruby, the rendering would be: ... 漢字 (かんじ) ... When there are multiple annotations for a segment, rp elements can also be placed between the annotations. Here is another copy of an earlier contrived example showing some symbols with names given in English and French using double-sided annotations, but this time with rp elements as well: : Heart, Cœur.: Shamrock, Trèfle.: Star, Étoile. This would make the example render as follows in non-ruby-capable user agents: ♥: Heart, Cœur. ☘: Shamrock, Trèfle. ✶: Star, Étoile. 4.5.15. The data element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes value - Machine-readable value Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: interface HTMLDataElement : HTMLElement { attribute DOMString value; }; The data element represents its contents, along with a machine-readable form of those contents in the value attribute. The value attribute must be present. Its value must be a representation of the element’s contents in a machine-readable format. When the value is date- or time-related, the more specific time element can be used instead. The element can be used for several purposes. When combined with microformats or microdata, the element serves to provide both a machine-readable value for the purposes of data processors, and a human-readable value for the purposes of rendering in a Web browser. In this case, the format to be used in the value attribute is determined by the microformats or microdata vocabulary in use. The element can also, however, be used in conjunction with scripts in the page, for when a script has a literal value to store alongside a human-readable value. In such cases, the format to be used depends only on the needs of the script. (The data-* attributes can also be useful in such situations.) The value IDL attribute must reflect the content attribute of the same name. 4.5.16. The time element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: If the element has a datetime attribute: Phrasing content. Otherwise: Text , but must match requirements described in prose below. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes datetime - Machine-readable value Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: interface HTMLTimeElement : HTMLElement { attribute DOMString dateTime; }; The time element represents its contents, along with a machine-readable form of those contents in the datetime attribute. The kind of content is limited to various kinds of dates, times, time-zone offsets, and durations, as described below. The datetime attribute may be present. If present, its value must be a representation of the element’s contents in a machine-readable format. A time element that does not have a datetime content attribute must not have any element descendants. The datetime value of a time element is the value of the element’s datetime content attribute, if it has one, otherwise the child text content of the time element. The datetime value of a time element must match one of the following syntaxes. A valid month string A valid date string A valid yearless date string A valid time string A valid floating date and time string Times with dates but without a time zone offset are useful for specifying events that are observed at the same specific time in each time zone, throughout a day. For example, the 2020 new year is celebrated at 2020-01-01 00:00 in each time zone, not at the same precise moment across all time zones. For events that occur at the same time across all time zones, for example a videoconference meeting, a valid global date and time string is likely more useful. A valid time-zone offset string For times without dates (or times referring to events that recur on multiple dates), specifying the geographic location that controls the time is usually more useful than specifying a time zone offset, because geographic locations change time zone offsets with daylight savings time. In some cases, geographic locations even change time zone, e.g., when the boundaries of those time zones are redrawn, as happened with Samoa at the end of 2011. There exists a time zone database that describes the boundaries of time zones and what rules apply within each such zone, known as the time zone database. [TZDATABASE] A valid global date and time string Times with dates and a time zone offset are useful for specifying specific events, or recurring virtual events where the time is not anchored to a specific geographic location. For example, the precise time of an asteroid impact, or a particular meeting in a series of meetings held at 1400 UTC every day, regardless of whether any particular part of the world is observing daylight savings time or not. For events where the precise time varies by the local time zone offset of a specific geographic location, a valid floating date and time string combined with that geographic location is likely more useful. A valid week string Four or more ASCII digits, at least one of which is not U+0030 DIGIT ZERO (0) A valid duration string Many of the preceding valid syntaxes describe "floating" date and/or time values (they do not include a time-zone offset). Care is needed when converting floating time values to or from global ("incremental") time values (e.g., JavaScript’s Date object). In many cases, an implicit time-of-day and time zone are used in the conversion and may result in unexpected changes to the value of the date itself. [TIMEZONE] The machine-readable equivalent of the element’s contents must be obtained from the element’s datetime value by using the following algorithm: 1. If parsing a month string from the element’s datetime value returns a month, that is the machine-readable equivalent; abort these steps. 2. If parsing a date string from the element’s datetime value returns a date, that is the machine-readable equivalent; abort these steps. 3. If parsing a yearless date string from the element’s datetime value returns a yearless date, that is the machine-readable equivalent; abort these steps. 4. If parsing a time string from the element’s datetime value returns a time, that is the machine-readable equivalent; abort these steps. 5. If parsing a floating date and time string from the element’s datetime value returns a floating date and time, that is the machine-readable equivalent; abort these steps. 6. If parsing a time-zone offset string from the element’s datetime value returns a time-zone offset, that is the machine-readable equivalent; abort these steps. 7. If parsing a floating date and time string from the element’s datetime value returns a global date and time, that is the machine-readable equivalent; abort these steps. 8. If parsing a week string from the element’s datetime value returns a week, that is the machine-readable equivalent; abort these steps. 9. If the element’s datetime value consists of only ASCII digits, at least one of which is not U+0030 DIGIT ZERO (0), then the machine-readable equivalent is the base-ten interpretation of those digits, representing a year; abort these steps. 10. If parsing a duration string from the element’s datetime value returns a duration, that is the machine-readable equivalent; abort these steps. 11. There is no machine-readable equivalent. The algorithms referenced above are intended to be designed such that for any arbitrary string s, only one of the algorithms returns a value. A more efficient approach might be to create a single algorithm that parses all these data types in one pass; developing such an algorithm is left as an exercise to the reader. The dateTime IDL attribute must reflect the element’s datetime content attribute. The time element can be used to encode dates, for example in microformats. The following shows a hypothetical way of encoding an event using a variant on hCalendar that uses the time element:
    https://www.web2con.com/ Web 2.0 Conference: - , at the Argent Hotel, San Francisco, CA
    Here, a fictional RDFa vocabulary based on the Atom vocabulary is used with the time element to mark up a blog post’s publication date [html-rdfa].

    Big tasks

    Published .

    Today, I went out and bought a bike for my kid.

    In this example, another article’s publication date is marked up using time, this time using the schema.org vocabulary:

    Small tasks

    Published .

    I put a bike bell on his bike.

    In the following snippet, the time element is used to encode a date in the ISO8601 format, for later processing by a script:

    Our first date was .

    In this second snippet, the value includes a time:

    We stopped talking at .

    A script loaded by the page (and thus privy to the page’s internal convention of marking up dates and times using the time element) could scan through the page and look at all the time elements therein to create an index of dates and times. For example, this element conveys the string "Friday" with the additional semantic that the 18th of November 2011 is the meaning that corresponds to "Friday": Today is . In this example, a specific time in the Pacific Standard Time timezone is specified: Your next meeting is at . 4.5.17. The code element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The code element represents a fragment of computer code. This could be an XML element name, a file name, a computer program, or any other string that a computer would recognize. There is no formal way to indicate the language of computer code being marked up. Authors who wish to mark code elements with the language used, e.g., so that syntax highlighting scripts can use the right rules, can use the class attribute, e.g., by adding a class prefixed with "language-" to the element. The following example shows how the element can be used in a paragraph to mark up element names and computer code, including punctuation.

    The code element represents a fragment of computer code.

    When you call the activate() method on the robotSnowman object, the eyes glow.

    The example below uses the begin keyword to indicate the start of a statement block. It is paired with an end keyword, which is followed by the . punctuation character (full stop) to indicate the end of the program.

    The following example shows how a block of code could be marked up using the pre and code elements.
    var i: Integer;
     begin
         i := 1;
     end.
    A class is used in that example to indicate the language used. See the pre element for more details. 4.5.18. The var element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The var element represents a variable. This could be an actual variable in a mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a function parameter, or just be a term used as a placeholder in prose. In the paragraph below, the letter "n" is being used as a variable in prose:

    If there are n pipes leading to the ice cream factory then I expect at least n flavors of ice cream to be available for purchase!

    For mathematics, in particular for anything beyond the simplest of expressions, MathML is more appropriate. However, the var element can still be used to refer to specific variables that are then mentioned in MathML expressions. In this example, an equation is shown, with a legend that references the variables in the equation. The expression itself is marked up with MathML, but the variables are mentioned in the figure’s legend using var.
    a = b2 + c2
    Using Pythagoras' theorem to solve for the hypotenuse a of a triangle with sides b and c
    Here, the equation describing mass-energy equivalence is used in a sentence, and the var element is used to mark the variables and constants in that equation:

    Then he turned to the blackboard and picked up the chalk. After a few moment’s thought, he wrote E = m c2. The teacher looked pleased.

    4.5.19. The samp element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The samp element represents sample or quoted output from another program or computing system. See the pre and kbd elements for more details. This element can be contrasted with the output element, which can be used to provide immediate output in a Web application. This example shows the samp element being used inline:

    The computer said Too much cheese in tray two but I didn’t know what that meant.

    This second example shows a block of sample output. Nested samp and kbd elements allow for the styling of specific elements of the sample output using a style sheet. There’s also a few parts of the samp that are annotated with even more detailed markup, to enable very precise styling. To achieve this, span elements are used.
    jdoe@mowmow:~$ ssh demo.example.com
     Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
     Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown
    
     jdoe@demo:~$ _
    4.5.20. The kbd element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The kbd element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands). When the kbd element is nested inside a samp element, it represents the input as it was echoed by the system. When the kbd element contains a samp element, it represents input based on system output. When the kbd element is nested inside another kbd element, it represents an actual key or other single unit of input as appropriate for the input mechanism. Here the kbd element is used to indicate keys to press:

    To make George eat an apple, press Shift+F3

    In this second example, the user is told to pick a particular menu item. The outer kbd element marks up a block of input, with the inner kbd elements representing each individual step of the input, and the samp elements inside them indicating that the steps are input based on something being displayed by the system, in this case menu labels:

    To make George eat an apple, select File|Eat Apple...

    Such precision isn’t necessary; the following is equally fine:

    To make George eat an apple, select File | Eat Apple...

    4.5.21. The sub and sup elements Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Use HTMLElement. The sub element represents a subscript, and the sup element represents a superscript. These elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation for presentation’s sake. For example, it would be inappropriate for the sub and sup elements to be used in the name of the LaTeX document preparation system. In general, authors should use these elements only if the absence of those elements would change the meaning of the content. In certain languages, superscripts are part of the typographical conventions for some abbreviations.

    The most beautiful women are Mlle Gwendoline and Mme Denise.

    The sub element can be used inside a var element, for variables that have subscripts. Here, the sub element is used to represent the subscript that identifies the variable in a family of variables:

    The coordinate of the ith point is (xi, yi). For example, the 10th point has coordinate (x10, y10).

    Mathematical expressions often use subscripts and superscripts. Authors are encouraged to use MathML for marking up mathematics, but authors may opt to use sub and sup if detailed mathematical markup is not desired. [MATHML] E=mc2 f(x, n) = log4xn 4.5.22. The i element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts. Terms in languages different from the main text should be annotated with lang attributes (or, in XML, lang attributes in the XML namespace). The examples below show uses of the i element:

    The Felis silvestris catus is cute.

    The term prose content is defined above.

    There is a certain je ne sais quoi in the air.

    In the following example, a dream sequence is marked up using i elements.

    Raymond tried to sleep.

    The ship sailed away on Thursday, he dreamt. The ship had many people aboard, including a beautiful princess called Carey. He watched her, day-in, day-out, hoping she would notice him, but she never did.

    Finally one night he picked up the courage to speak with her—

    Raymond woke with a start as the fire alarm rang out.

    Authors are encouraged to consider whether other elements might be more applicable than the i element, for instance the em element for marking up stress emphasis, or the dfn element to mark up the defining instance of a term. Style sheets can be used to format i elements, just like any other element can be restyled. Thus, it is not the case that content in i elements will necessarily be italicized. 4.5.23. The b element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede. The following example shows a use of the b element to highlight key words without marking them up as important:

    The frobonitor and barbinator components are fried.

    In the following example, objects in a text adventure are highlighted as being special by use of the b element.

    You enter a small room. Your sword glows brighter. A rat scurries past the corner wall.

    Another case where the b element is appropriate is in marking up the lede (or lead) sentence or paragraph. The following example shows how a BBC article about kittens adopting a rabbit as their own could be marked up:

    Kittens 'adopted' by pet rabbit

    Six abandoned kittens have found an unexpected new mother figure — a pet rabbit.

    Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.

    [...] As with the i element, authors can use the class attribute on the b element to identify why the element is being used, so that if the style of a particular use is to be changed at a later date, the author doesn’t have to go through annotating each use. The b element should be used as a last resort when no other element is more appropriate. In particular, headings should use the h1 to h6 elements, stress emphasis should use the em element, importance should be denoted with the strong element, and text marked or highlighted should use the mark element. The following would be incorrect usage:

    WARNING! Do not frob the barbinator!

    In the previous example, the correct element to use would have been strong, not b. Style sheets can be used to format b elements, just like any other element can be restyled. Thus, it is not the case that content in b elements will necessarily be boldened. 4.5.24. The u element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The u element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt. In most cases, another element is likely to be more appropriate: for marking stress emphasis, the em element should be used; for marking key words or phrases either the b element or the mark element should be used, depending on the context; for marking book titles, the cite element should be used; for labeling text with explicit textual annotations, the ruby element should be used; for technical terms, taxonomic designation, transliteration, a thought, or for labeling ship names in Western texts, the i element should be used. The default rendering of the u element in visual presentations clashes with the conventional rendering of hyperlinks (underlining). Authors are encouraged to avoid using the u element where it could be confused for a hyperlink. 4.5.25. The mark element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader’s attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user’s current activity. This example shows how the mark element can be used to bring attention to a particular part of a quotation:

    Consider the following quote:

    Look around and you will find, no-one’s really colour blind.

    As we can tell from the spelling of the word, the person writing this quote is clearly not American.

    (If the goal was to mark the element as misspelt, however, the u element, possibly with a class, would be more appropriate.) Another example of the mark element is highlighting parts of a document that are matching some search string. If someone looked at a document, and the server knew that the user was searching for the word "kitten", then the server might return the document with one paragraph modified as follows:

    I also have some kittens who are visiting me these days. They’re really cute. I think they like my garden! Maybe I should adopt a kitten.

    In the following snippet, a paragraph of text refers to a specific part of a code fragment.

    The highlighted part below is where the error lies:

    var i: Integer;
     begin
         i := 1.1;
     end.
    This is separate from syntax highlighting, for which span is more appropriate. Combining both, one would get:

    The highlighted part below is where the error lies:

    var i: Integer;
     begin
         i := 1.1;
     end.
    This is another example showing the use of mark to highlight a part of quoted text that was originally not emphasized. In this example, common typographic conventions have led the author to explicitly style mark elements in quotes to render in italics.

    She knew

    Did you notice the subtle joke in the joke on panel 4?

    I didn’t want to believe. Of course on some level I realized it was a known-plaintext attack. But I couldn’t admit it until I saw for myself.

    (Emphasis mine.) I thought that was great. It’s so pedantic, yet it explains everything neatly.

    Note, incidentally, the distinction between the em element in this example, which is part of the original text being quoted, and the mark element, which is highlighting a part for comment. The following example shows the difference between denoting the importance of a span of text (strong) as opposed to denoting the relevance of a span of text (mark). It is an extract from a textbook, where the extract has had the parts relevant to the exam highlighted. The safety warnings, important though they may be, are apparently not relevant to the exam.

    Wormhole Physics Introduction

    A wormhole in normal conditions can be held open for a maximum of just under 39 minutes. Conditions that can increase the time include a powerful energy source coupled to one or both of the gates connecting the wormhole, and a large gravity well (such as a black hole).

    Momentum is preserved across the wormhole. Electromagnetic radiation can travel in both directions through a wormhole, but matter cannot.

    When a wormhole is created, a vortex normally forms. Warning: The vortex caused by the wormhole opening will annihilate anything in its path. Vortexes can be avoided when using sufficiently advanced dialing technology.

    An obstruction in a gate will prevent it from accepting a wormhole connection.

    4.5.26. The bdi element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Also, the dir global attribute has special semantics on this element. Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The bdi element represents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting. [BIDI] The dir global attribute defaults to auto on this element (it never inherits from the parent element like with other elements). This element has rendering requirements involving the bidirectional algorithm. This element is especially useful when embedding user-generated content with an unknown directionality. In this example, usernames are shown along with the number of posts that the user has submitted. If the bdi element were not used, the username of the Arabic user would end up confusing the text (the bidirectional algorithm would put the colon and the number "3" next to the word "User" rather than next to the word "posts").
    • User jcranmer: 12 posts.
    • User hober: 5 posts.
    • User إيان: 3 posts.
    When using the bdi element, the username acts as expected. If the bdi element were to be replaced by a b element, the username would confuse the bidirectional algorithm and the third bullet would end up saying "User 3 :", followed by the Arabic name (right-to-left), followed by "posts" and a period. 4.5.27. The bdo element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Also, the dir global attribute has special semantics on this element. Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The bdo element represents explicit text directionality formatting control for its children. It allows authors to override the Unicode bidirectional algorithm by explicitly specifying a direction override. [BIDI] Authors must specify the dir attribute on this element, with the value ltr to specify a left-to-right override and with the value rtl to specify a right-to-left override. The auto value must not be specified. This element has rendering requirements involving the bidirectional algorithm. 4.5.28. The span element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Phrasing content. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: interface HTMLSpanElement : HTMLElement {}; The span element doesn’t mean anything on its own, but can be useful when used together with the Global attributes, e.g., class, lang, or dir. It represents its children. In this example, a code fragment is marked up using span elements and class attributes so that its keywords and identifiers can be color-coded from CSS:
    for (j = 0; j < 256; j++) {
       i_t3 = (i_t3 & 0x1ffff) | (j << 17);
       i_t6 = (((((((i_t3 >> 3) ^ i_t3) >> 1) ^ i_t3) >> 8) ^ i_t3) >> 5) & 0xff;
       if (i_t6 == i_t1)
         break;
     }
    4.5.29. The br element Categories: Flow content. Phrasing content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Nothing. Tag omission in text/html: No end tag Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: interface HTMLBRElement : HTMLElement {}; The br element represents a line break. While line breaks are usually represented in visual media by physically moving subsequent text to a new line, a style sheet or user agent would be equally justified in causing line breaks to be rendered in a different manner, for instance as green dots, or as extra spacing. br elements must be used only for line breaks that are actually part of the content, as in poems or addresses. The following example is correct usage of the br element:

    P. Sherman
    42 Wallaby Way
    Sydney

    br elements must not be used for separating thematic groups in a paragraph. The following examples are non-conforming, as they abuse the br element:

    34 comments.
    Add a comment.


    Here are alternatives to the above, which are correct:

    34 comments.

    Add a comment.

    If a paragraph consists of nothing but a single br element, it represents a placeholder blank line (e.g., as in a template). Such blank lines must not be used for presentation purposes. Any content inside br elements must not be considered part of the surrounding text. This element has rendering requirements involving the bidirectional algorithm. 4.5.30. The wbr element Categories: Flow content. Phrasing content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Nothing. Tag omission in text/html: No end tag Content attributes: Global attributes Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: Uses HTMLElement. The wbr element represents a line break opportunity. In the following example, someone is quoted as saying something which, for effect, is written as one long word. However, to ensure that the text can be wrapped in a readable fashion, the individual words in the quote are separated using a wbr element.

    So then he pointed at the tiger and screamed "thereisnowayyouareevergoingtocatchme"!

    Here, especially long lines of code in a program listing have suggested wrapping points given using wbr elements.
    ...
     Heading heading = Helm.HeadingFactory(HeadingCoordinates[1], HeadingCoordinates[2], HeadingCoordinates[3], HeadingCoordinates[4]);
     Course course = Helm.CourseFactory(Heading, Maps.MapFactoryFromHeading(heading), Speeds.GetMaximumSpeed().ConvertToWarp());
     ...
    Any content inside wbr elements must not be considered part of the surrounding text. var wbr = document.createElement("wbr"); wbr.textContent = "This is wrong"; document.body.appendChild(wbr); This element has rendering requirements involving the bidirectional algorithm. 4.5.31. Usage summary This section is non-normative. Element Purpose Example a Hyperlinks Visit my drinks page. em Stress emphasis I must say I adore lemonade. strong Importance This tea is very hot. small Side comments These grapes are made into wine. Alcohol is addictive. s Inaccurate text Price: £4.50 £2.00! cite Titles of works The case Hugo v. Danielle is relevant here. q Quotations The judge said You can drink water from the fish tank but advised against it. dfn Defining The term organic food refers to food produced without synthetic chemicals. instance abbr Abbreviations Organic food in Ireland is certified by the IOFGA. ruby, rb, rp, Ruby annotations OJ (Orange Juice) rt, rtc data Machine-readable Available starting today! North Coast Organic Apple Cider equivalent Machine-readable equivalent of time date- or Available starting on ! time-related data code Computer code The fruitdb program can be used for tracking fruit production. var Variables If there are n fruit in the bowl, at least n÷2 will be ripe. samp Computer output The computer said Unknown error -3. kbd User input Hit F1 to continue. sub Subscripts Water is H2O. sup Superscripts The Hydrogen in heavy water is usually 2H. i Alternative Lemonade consists primarily of Citrus limon. voice b Keywords Take a lemon and squeeze it with a juicer. u Annotations The mixture of apple juice and eldeflower juice is very pleasant. mark Highlight Elderflower cordial, with one part cordial to ten parts water, stands apart from the rest. Text bdi directionality The recommended restaurant is My Juice Café (At The Beach). isolation Text bdo directionality The proposal is to write English, but in reverse order. "Juice" would become "Juice" formatting span Other In French we call it sirop de sureau. br Line break Simply Orange Juice Company
    Apopka, FL 32703
    U.S.A. wbr Line breaking www.simplyorangejuice.com opportunity 4.6. Edits The ins and del elements represent edits to the document. 4.6.1. The ins element Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Transparent. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes cite - Link to the source of the quotation or more information about the edit datetime - Date and (optionally) time of the change Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the default or allowed roles. DOM interface: Uses the HTMLModElement interface. The ins element represents an addition to the document. The following represents the addition of a single paragraph: As does the following, because everything in the aside element here counts as phrasing content and therefore there is just one paragraph: ins elements should not cross implied paragraph boundaries. The following example represents the addition of two paragraphs, the second of which was inserted in two parts. The first ins element in this example thus crosses a paragraph boundary, which is considered poor form. Here is a better way of marking this up. It uses more elements, but none of the elements cross implied paragraph boundaries. 4.6.2. The del element Categories: Flow content. Phrasing content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Transparent. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes cite - Link to the source of the quotation or more information about the edit datetime - Date and (optionally) time of the change Allowed ARIA role attribute values: Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the default or allowed roles. DOM interface: Uses the HTMLModElement interface. The del element represents a removal from the document. del elements should not cross implied paragraph boundaries. The following shows a "to do" list where items that have been done are crossed-off with the date and time of their completion.

    To Do

    • Empty the dishwasher
    • Watch Walter Lewin’s lectures
    • Download more tracks
    • Buy a printer
    4.6.3. Attributes common to ins and del elements The cite attribute may be used to specify the address of a document that explains the change. When that document is long, for instance the minutes of a meeting, authors are encouraged to include a fragment pointing to the specific part of that document that discusses the change. If the cite attribute is present, it must be a valid URL potentially surrounded by spaces that explains the change. To obtain the corresponding citation link, the value of the attribute must be parsed relative to the element’s node document. User agents may allow users to follow such citation links, but they are primarily intended for private use (e.g., by server-side scripts collecting statistics about a site’s use of quotations), not for readers. The datetime attribute may be used to specify the time and date of the change. If present, the datetime attribute’s value must be a valid date string with optional time. User agents must parse the datetime attribute according to the parse a date or time string algorithm. If that doesn’t return a date or a global date and time, then the modification has no associated timestamp (the value is non-conforming; it is not a valid date string with optional time). Otherwise, the modification is marked as having been made at the given date or global date and time. If the given value is a global date and time then user agents should use the associated time-zone offset information to determine which time zone to present the given datetime in. This value may be shown to the user, but it is primarily intended for private use. The ins and del elements must implement the HTMLModElement interface: interface HTMLModElement : HTMLElement { attribute DOMString cite; attribute DOMString dateTime; }; The cite IDL attribute must reflect the element’s cite content attribute. The dateTime IDL attribute must reflect the element’s datetime content attribute. 4.6.4. Edits and paragraphs This section is non-normative. Since the ins and del elements do not affect paragraphing, it is possible, in some cases where paragraphs are implied (without explicit p elements), for an ins or del element to span both an entire paragraph or other non-phrasing content elements and part of another paragraph. For example:

    This is a paragraph that was inserted.

    This is another paragraph whose first sentence was inserted at the same time as the paragraph above.
    This is a second sentence, which was there all along.
    By only wrapping some paragraphs in p elements, one can even get the end of one paragraph, a whole second paragraph, and the start of a third paragraph to be covered by the same ins or del element (though this is very confusing, and not considered good practice):
    This is the first paragraph. This sentence was inserted.

    This second paragraph was inserted.

    This sentence was inserted too.
    This is the third paragraph in this example.
    However, due to the way implied paragraphs are defined, it is not possible to mark up the end of one paragraph and the start of the very next one using the same ins or del element. You instead have to use one (or two) p element(s) and two ins or del elements, as for example:

    This is the first paragraph. This sentence was deleted.

    This sentence was deleted too. That sentence needed a separate <del> element.

    Partly because of the confusion described above, authors are strongly encouraged to always mark up all paragraphs with the p element, instead of having ins or del elements that cross implied paragraphs boundaries. 4.6.5. Edits and lists This section is non-normative. The content models of the ol and ul elements do not allow ins and del elements as children. Lists always represent all their items, including items that would otherwise have been marked as deleted. To indicate that an item is inserted or deleted, an ins or del element can be wrapped around the contents of the li element. To indicate that an item has been replaced by another, a single li element can have one or more del elements followed by one or more ins elements. In the following example, a list that started empty had items added and removed from it over time. The bits in the example that have been emphasized show the parts that are the "current" state of the list. The list item numbers don’t take into account the edits, though.

    Stop-ship bugs

    1. Bug 225: Rain detector doesn’t work in snow
    2. Bug 228: Water buffer overflows in April
    3. Bug 230: Water heater doesn’t use renewable fuels
    4. Bug 232: Carbon dioxide emissions detected after startup
    In the following example, a list that started with just fruit was replaced by a list with just colors.

    List of fruitscolors

    • LimeGreen
    • Apple
    • Orange
    • Pear
    • Teal
    • LemonYellow
    • Olive
    • Purple
    4.6.6. Edits and tables This section is non-normative. The elements that form part of the table model have complicated content model requirements that do not allow for the ins and del elements, so indicating edits to a table can be difficult. To indicate that an entire row or an entire column has been added or removed, the entire contents of each cell in that row or column can be wrapped in ins or del elements (respectively). Here, a table’s row has been added:
    Game name Game publisher Verdict
    Diablo 2 Blizzard 8/10
    Portal Valve 10/10
    Portal 2 Valve 10/10
    Here, a column has been removed (the time at which it was removed is given also, as is a link to the page explaining why):
    Game name Game publisher Verdict
    Diablo 2 Blizzard 8/10
    Portal Valve 10/10
    Portal 2 Valve 10/10
    Generally speaking, there is no good way to indicate more complicated edits (e.g., that a cell was removed, moving all subsequent cells up or to the left). 4.7. Embedded content 4.7.1. Introduction This section is non-normative. To embed an image in HTML, when there is only a single image resource, use the img element and with its src and alt attributes.

    From today’s featured article

    Marie Lloyd (1870–1922) was an English music hall singer, ... However, there are a number of situations for which the author might wish to use multiple image resources that the user agent can choose from: * Different users might have different environmental characteristics: * The users' physical screen size might be different from one another. A mobile phone’s screen might be 4 inches diagonally, while a laptop’s screen might be 14 inches diagonally. The phone’s screen is much smaller compared to the laptop’s screen. This is only relevant when an image’s rendered size depends on the viewport size. * The users' screen pixel density might be different from one another. A mobile phone’s screen might have three times as many physical pixels per inch compared to another mobile phone’s screen, regardless of their physical screen size. One phone has big pixels, the other has small pixels. * The users' zoom level might be different from one another, or might change for a single user over time. A user might zoom in to a particular image to be able to get a more detailed look. The zoom level and the screen pixel density (the previous point) can both affect the number of physical screen pixels per CSS pixel. This ratio is usually referred to as device-pixel-ratio. * The users' screen orientation might be different from one another, or might change for a single user over time. A tablet can be held upright or rotated 90 degrees, so that the screen is either "portrait" or "landscape". The tablet has two orientations. * The users' network speed, network latency and bandwidth cost might be different from one another, or might change for a single user over time. A user might be on a fast, low-latency and constant-cost connection while at work, on a slow, low-latency and constant-cost connection while at home, and on a variable-speed, high-latency and variable-cost connection anywhere else. * Authors might want to show the same image content but with different rendered size depending on, usually, the width of the viewport. This is usually referred to as viewport-based selection. A Web page might have a banner at the top that always spans the entire viewport width. In this case, the rendered size of the image depends on the physical size of the screen (assuming a maximised browser window). The upright-held phone shows a small wolf at the top, and the tablet shows the same image but it is bigger Another Web page might have images in columns, with a single column for screens with a small physical size, two columns for screens with medium physical size, and three columns for screens with big physical size, with the images varying in rendered size in each case to fill up the viewport. In this case, the rendered size of an image might be bigger in the one-column layout compared to the two-column layout, despite the screen being smaller. The rotated phone shows a top part of an image of a kettlebell swing; the upright-held tablet shows a bit smaller images in two columns; the laptop shows images in three columns. * Authors might want to show different image content depending on the rendered size of the image. This is usually referred to as art direction. When a Web page is viewed on a screen with a large physical size (assuming a maximised browser window), the author might wish to include some less relevant parts surrounding the critical part of the image. When the same Web page is viewed on a screen with a small physical size, the author might wish to show only the critical part of the image. The upright-held phone shows a cropped image of a wolf; the rotated tablet shows the uncropped image. * Authors might want to show the same image content but using different image formats, depending on which image formats the user agent supports. This is usually referred to as image format-based selection. A Web page might have some images in the JPEG, WebP and JPEG XR image formats, with the latter two having better compression abilities compared to JPEG. Since different user agents can support different image formats, with some formats offering better compression ratios, the author would like to serve the better formats to user agents that support them, while providing JPEG fallback for user agents that don’t. The above situations are not mutually exclusive. For example, it is reasonable to combine different resources for different device-pixel-ratio with different resources for art direction. While it is possible to solve these problems using scripting, doing so introduces some other problems: * Some user agents aggressively download images specified in the HTML markup, before scripts have had a chance to run, so that Web pages complete loading sooner. If a script changes which image to download, the user agent will potentially start two separate downloads, which can instead cause worse page loading performance. * If the author avoids specifying any image in the HTML markup and instead instantiates a single download from script, that avoids the double download problem above but instead it makes no image be downloaded at all for users with scripting disabled and it disables the agressive image downloading optimization. With this in mind, this specification introduces a number of features to address the above problems in a declarative manner. Device-pixel-ratio-based selection when the rendered size of the image is fixed The src and srcset attributes on the img element can be used, using the x descriptor, to provide multiple images that only vary in their size (the smaller image is a scaled-down version of the bigger image). The x descriptor is not appropriate when the rendered size of the image depends on the viewport width (viewport-based selection), but can be used together with art direction.

    From today’s featured article

    Marie Lloyd (1870–1922) was an English music hall singer, ... The user agent can choose any of the given resources depending on the user’s screen’s pixel density, zoom level, and possibly other factors such as the user’s network conditions. For backwards compatibility with older user agents that don’t yet understand the srcset attribute, one of the URLs is specified in the img element’s src attribute. This will result in something useful (though perhaps lower-resolution than the user would like) being displayed even in older user agents. For new user agents, the src attribute participates in the resource selection, as if it was specified in srcset with a 1x descriptor. The image’s rendered size is given in the width and height attributes, which allows the user agent to allocate space for the image before it is downloaded. Viewport-based selection The srcset and sizes attributes can be used, using the w descriptor, to provide multiple images that only vary in their size (the smaller image is a scaled-down version of the bigger image). In this example, a banner image takes up the entire viewport width (using appropriate CSS).

    The rad wolf

    The user agent will calculate the effective pixel density of each image from the specified w descriptors and the specified rendered size in the sizes attribute. It can then choose any of the given resources depending on the user’s screen’s pixel density, zoom level, and possibly other factors such as the user’s network conditions. If the user’s screen is 320 CSS pixels wide, this is equivalent to specifying wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x. On the other hand, if the user’s screen is 1200 CSS pixels wide, this is equivalent to specifying wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x. By using the w descriptors and the sizes attribute, the user agent can choose the correct image source to download regardless of how large the user’s device is. For backwards compatibility, one of the URLs is specified in the img element’s src attribute. In new user agents, the src attribute is ignored when the srcset attribute uses w descriptors. In this example, the sizes attribute could be omitted because the default value is 100vw. In this example, the Web page has three layouts depending on the width of the viewport. The narrow layout has one column of images (the width of each image is about 100%), the middle layout has two columns of images (the width of each image is about 50%), and the widest layout has three columns of images, and some page margin (the width of each image is about 33%). It breaks between these layouts when the viewport is 30em wide and 50em wide, respectively. Kettlebell Swing The sizes attribute sets up the layout breakpoints at 30em and 50em, and declares the image sizes between these breakpoints to be 100vw, 50vw, or calc(33vw - 100px). These sizes do not necessarily have to match up exactly with the actual image width as specified in the CSS. The user agent will pick a width from the sizes attribute, using the first item with a (the part in parentheses) that evaluates to true, or using the last item (calc(33vw - 100px)) if they all evaluate to false. For example, if the viewport width is 29em, then (max-width: 30em) evaluates to true and 100vw is used, so the image size, for the purpose of resource selection, is 29em. If the viewport width is instead 32em, then (max-width: 30em) evaluates to false, but (max-width: 50em) evaluates to true and 50vw is used, so the image size, for the purpose of resource selection, is 16em (half the viewport width). Notice that the slightly wider viewport results in a smaller image because of the different layout. The user agent can then calculate the effective pixel density and choose an appropriate resource similarly to the previous example. Art direction-based selection The picture element and the source element, together with the media attribute, can be used, to provide multiple images that vary the image content (for intance the smaller image might be a cropped version of the bigger image). The wolf runs through the snow. The user agent will choose the first source element for which the media query in the media attribute matches, and then choose an appropriate URL from its srcset attribute. The rendered size of the image varies depending on which resource is chosen. To specify dimensions that the user agent can use before having downloaded the image, CSS can be used. img { width: 300px; height: 300px } @media (min-width: 32em) { img { width: 500px; height:300px } } @media (min-width: 45em) { img { width: 700px; height:400px } } This example combines art direction- and device-pixel-ratio-based selection. A banner that takes half the viewport is provided in two versions, one for wide screens and one for narrow screens.

    The Breakfast Combo

    Image format-based selection The type attribute on the source element can be used, to provide multiple images in different formats.

    From today’s featured article

    Marie Lloyd (1870–1922) was an English music hall singer, ... In this example, the user agent will choose the first source that has a type attribute with a supported MIME type. If the user agent supports WebP images, the first source element will be chosen. If not, but the user agent does support JPEG XR images, the second source element will be chosen. If neither of those formats are supported, the img element will be chosen. 4.7.2. Dependencies Media Queries [MEDIAQ] CSS Values and Units [CSS-VALUES] CSS Syntax [CSS-SYNTAX-3] Parse a comma-separated list of component values component value 4.7.3. The picture element Categories: Flow content. Phrasing content. Embedded content. Contexts in which this element can be used: Where embedded content is expected. Content model: Zero or more source elements, followed by one img element, optionally intermixed with script-supporting elements. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes Allowed ARIA role attribute values: None Allowed ARIA state and property attributes: None DOM interface: interface HTMLPictureElement : HTMLElement {}; The picture element is a container which provides multiples sources to its contained img element to allow authors to declaratively control or give hints to the user agent about which image resource to use, based on the screen pixel density, viewport size, image format, and other factors. It represents its children. The picture element is somewhat different from the similar-looking video and audio elements. While all of them contain source elements, the source element’s src attribute has no meaning when the element is nested within a picture element, and the resource selection algorithm is different. As well, the picture element itself does not display anything; it merely provides a context for its contained img element that enables it to choose from multiple URLs. 4.7.4. The source element Categories: None. Contexts in which this element can be used: As a child of a picture element, before the img element. As a child of a media element, before any flow content or track elements. Content model: Nothing. Tag omission in text/html: No end tag Content attributes: Global attributes src - Address of the resource type - Type of embedded resource srcset - Images to use in different situations (e.g., high-resolution displays, small monitors, etc) sizes - Image sizes between breakpoints media - Applicable media Allowed ARIA role attribute values: None Allowed ARIA state and property attributes: Global aria-* attributes DOM interface: interface HTMLSourceElement : HTMLElement { attribute DOMString src; attribute DOMString type; attribute DOMString srcset; attribute DOMString sizes; attribute DOMString media; }; The source element allows authors to specify multiple alternative source sets for img elements or multiple alternative media resources for media elements. It does not represent anything on its own. The type attribute may be present. If present, the value must be a valid MIME type. The remainder of the requirements depend on whether the parent is a picture element or a media element: source element’s parent is a picture element The srcset content attribute must be present, and must consist of one or more image candidate strings, each separated from the next by a U+002C COMMA character (,). If an image candidate string contains no descriptors and no space characters after the URL, the following image candidate string, if there is one, must begin with one or more space characters. If the srcset attribute has any image candidate strings using a width descriptor, the sizes content attribute must also be present, and the value must be a valid source size list. The media content attribute may also be present. If present, the value must contain a valid media query list. The type gives the type of the images in the source set, to allow the user agent to skip to the next source element if it does not support the given type. If the type attribute is not specified, the user agent will not select a different source element if it finds that it does not support the image format after fetching it. When a source element has a following sibling source element or img element with a srcset attribute specified, it must have at least one of the following: * A media attribute specified with a value that, after stripping leading and trailing white space, is not the empty string and is not an ASCII case-insensitive match for the string "all". * A type attribute specified. The src attribute must not be present. source element’s parent is a media element The src attribute gives the address of the media resource. The value must be a valid non-empty URL potentially surrounded by spaces. This attribute must be present. Dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect. To change what is playing, just use the src attribute on the media element directly, possibly making use of the canPlayType() method to pick from amongst available resources. Generally, manipulating source elements manually after the document has been parsed is an unnecessarily complicated approach. The type content attribute gives the type of the media resource, to help the user agent determine if it can play this media resource before fetching it. If specified, its value must be a valid MIME type. The codecs parameter, which certain MIME types define, might be necessary to specify exactly how the resource is encoded. [RFC6381] The following list shows some examples of how to use the codecs= MIME parameter in the type attribute. H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container H.264 "High" profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container Theora video and Vorbis audio in Ogg container Theora video and Speex audio in Ogg container Vorbis audio alone in Ogg container Speex audio alone in Ogg container FLAC audio alone in Ogg container Dirac video and Vorbis audio in Ogg container The srcset, sizes, and media attributes must not be present. If a source element is inserted as a child of a media element that has no src attribute and whose networkState has the value NETWORK_EMPTY, the user agent must invoke the media element’s resource selection algorithm. The IDL attributes src, type, srcset, sizes and media must reflect the respective content attributes of the same name. If the author isn’t sure if user agents will all be able to render the media resources provided, the author can listen to the error event on the last source element and trigger fallback behavior: 4.7.5. The img element Categories: Flow content. Phrasing content. Embedded content. Form-associated element. If the element has a usemap attribute: interactive content. Palpable content. Contexts in which this element can be used: Where embedded content is expected. Content model: Nothing Tag omission in text/html: No end tag. Content attributes: Global attributes alt - Replacement text for use when images are not available src - Address of the resource srcset - Images to use in different situations (e.g., high-resolution displays, small monitors, etc) sizes - Image sizes between breakpoints crossorigin - How the element handles crossorigin requests usemap - Name of image map to use ismap - Whether the image is a server-side image map width - Horizontal dimension height - Vertical dimension referrerpolicy - Referrer policy for fetches initiated by the element longdesc - A url that provides a link to an expanded description of the image, defined in [html-longdesc] Allowed ARIA role attribute values: presentation or none role only, for an img element whose alt attribute’s value is empty (alt=""), otherwise Any role value. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: [NamedConstructor=Image(optional unsigned long width, optional unsigned long height)] interface HTMLImageElement : HTMLElement { attribute DOMString alt; attribute DOMString src; attribute DOMString srcset; attribute DOMString sizes; attribute DOMString? crossOrigin; attribute DOMString useMap; attribute DOMString longDesc; attribute boolean isMap; attribute unsigned long width; attribute unsigned long height; readonly attribute unsigned long naturalWidth; readonly attribute unsigned long naturalHeight; readonly attribute boolean complete; readonly attribute DOMString currentSrc; attribute DOMString referrerPolicy; }; An img element represents an image and its fallback content. The image given by the src and srcset attributes, and any previous sibling source elements' srcset attributes if the parent is a picture element, is the embedded content; the value of the alt attribute and the content referred to by the longdesc attribute are the img element’s fallback content, and provide equivalent content for users and user agents who cannot process images or have image loading disabled. Requirements for alternative representations of the image are described in the next section. The src attribute must be present, and must contain a valid non-empty URL potentially surrounded by spaces referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted. The srcset attribute may also be present. If present, its value must consist of one or more image candidate strings, each separated from the next by a U+002C COMMA character (,). If an image candidate string contains no descriptors and no space characters after the URL, the following image candidate string, if there is one, must begin with one or more space characters. An image candidate string consists of the following components, in order, with the further restrictions described below this list: 1. Zero or more space characters. 2. A valid non-empty URL that does not start or end with a U+002C COMMA character (,), referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted. 3. Zero or more space characters. 4. Zero or one of the following: * A width descriptor, consisting of: a space character, a valid non-negative integer giving a number greater than zero representing the width descriptor value, and a U+0077 LATIN SMALL LETTER W character. * A pixel density descriptor, consisting of: a space character, a valid floating-point number giving a number greater than zero representing the pixel density descriptor value, and a U+0078 LATIN SMALL LETTER X character. 5. Zero or more space characters. There must not be an image candidate string for an element that has the same width descriptor value as another image candidate string’s width descriptor value for the same element. There must not be an image candidate string for an element that has the same pixel density descriptor value as another image candidate string’s pixel density descriptor value for the same element. For the purpose of this requirement, an image candidate string with no descriptors is equivalent to an image candidate string with a 1x descriptor. If a source element has a sizes attribute present or an img element has a sizes attribute present, all image candidate strings for that element must have the width descriptor specified. If an image candidate string for a source or img element has the width descriptor specified, all other image candidate strings for that element must also have the width descriptor specified. The specified width in an image candidate string’s width descriptor must match the intrinsic width in the resource given by the image candidate string’s URL, if it has an intrinsic width. The requirements above imply that images can be static bitmaps (e.g., PNGs, GIFs, JPEGs), single-page vector documents (single-page PDFs, XML files with an SVG document element), animated bitmaps (APNGs, animated GIFs), animated vector graphics (XML files with an SVG document element that use declarative SMIL animation), and so forth. However, these definitions preclude SVG files with script, multipage PDF files, interactive MNG files, HTML documents, plain text documents, and so forth. [PNG] [GIF] [JPEG] [PDF] [XML] [APNG] [SVG11] [MNG] If the srcset attribute is present, the sizes attribute may also be present. If present, its value must be a valid source size list. A valid source size list is a string that matches the following grammar: [CSS-VALUES] [MEDIAQ] = # [ , ]? | = = A must not be negative. Percentages are not allowed in a , to avoid confusion about what it would be relative to. The vw unit can be used for sizes relative to the viewport width. The img element must not be used as a layout tool. In particular, img elements should not be used to display transparent images, as such images rarely convey meaning and rarely add anything useful to the document. ---------------------------------------------------------------------- The crossorigin attribute is a CORS settings attribute. Its purpose is to allow images from third-party sites that allow cross-origin access to be used with canvas. The referrerpolicy attribute is a referrer policy attribute. Its purpose is to set the referrer policy used when fetching the image. [REFERRERPOLICY] ---------------------------------------------------------------------- An img element has a current request and a pending request. The current request is initially set to a new image request. The pending request is initially set to null. The current request is usually referred to as the img element itself. An image request has a state, current URL and image data. An image request’s state is one of the following: Unavailable The user agent hasn’t obtained any image data, or has obtained some or all of the image data but hasn’t yet decoded enough of the image to get the image dimensions. Partially available The user agent has obtained some of the image data and at least the image dimensions are available. Completely available The user agent has obtained all of the image data and at least the image dimensions are available. Broken The user agent has obtained all of the image data that it can, but it cannot even decode the image enough to get the image dimensions (e.g., the image is corrupted, or the format is not supported, or no data could be obtained). An image request’s current URL is initially the empty string. An image request’s image data is the decoded image data. When an image request is either in the partially available state or in the completely available state, it is said to be available. An image request is initially unavailable. When an img element is available, it provides a paint source whose width is the image’s density-corrected intrinsic width (if any), whose height is the image’s density-corrected intrinsic height (if any), and whose appearance is the intrinsic appearance of the image. In a browsing context where scripting is disabled, user agents may obtain images immediately or on demand. In a browsing context where scripting is enabled, user agents must obtain images immediately. A user agent that obtains images immediately must immediately update the image data of an img element, with the restart animation flag set if so stated, whenever that element is created or has experienced relevant mutations. A user agent that obtains images on demand must update the image data of an img element whenever it needs the image data (i.e., on demand), but only if the img element is in the unavailable state. When an img element has experienced relevant mutations, if the user agent only obtains images on demand, the img element must return to the unavailable state. The relevant mutations for an img element are as follows: * The element’s src, srcset, width, or sizes attributes are set, changed, or removed. * The element’s src attribute is set to the same value as the previous value. This must set the restart animation flag for the update the image data algorithm. * The element’s crossorigin attribute’s state is changed. * The element is inserted into or removed from a picture parent element. * The element’s parent is a picture element and a source element is inserted as a previous sibling. * The element’s parent is a picture element and a source element that was a previous sibling is removed. * The element’s parent is a picture element and a source element that is a previous sibling has its srcset, sizes, media or type attributes set, changed, or removed. * The element’s adopting steps are run. Each img element has a last selected source, which must initially be null. Each image request has a current pixel density, which must initially be undefined. When an img element has a current pixel density that is not 1.0, the element’s image data must be treated as if its resolution, in device pixels per CSS pixels, was the current pixel density. The image’s density-corrected intrinsic width and height are the intrinsic width and height after taking into account the current pixel density. For example, given a screen with 96 CSS pixels per CSS inch, if the current pixel density is 3.125, that means that there are 96 × 3.125 = 300 device pixels per CSS inch, and thus if the image data is 300x600, it has intrinsic dimensions of 300 ÷ 3.125 = 96 CSS pixels by 600 ÷ 3.125 = 192 CSS pixels. With a current pixel density of 2.0 (192 device pixels per CSS inch) and the same image data (300x600), the intrinsic dimensions would be 150x300. Each Document object must have a list of available images. Each image in this list is identified by a tuple consisting of an absolute URL, a CORS settings attribute mode, and, if the mode is not No CORS, an origin. Each image furthermore has an ignore higher-layer caching flag. User agents may copy entries from one Document object’s list of available images to another at any time (e.g., when the Document is created, user agents can add to it all the images that are loaded in other Documents), but must not change the keys of entries copied in this way when doing so, and must unset the ignore higher-layer caching flag for the copied entry. User agents may also remove images from such lists at any time (e.g., to save memory). User agents must remove entries in the list of available images as appropriate given higher-layer caching semantics for the resource (e.g., the HTTP Cache-Control response header) when the ignore higher-layer caching flag is unset. The list of available images is intended to enable synchronous switching when changing the src attribute to a URL that has previously been loaded, and to avoid re-downloading images in the same document even when they don’t allow caching per HTTP. It is not used to avoid re-downloading the same image while the previous image is still loading. For example, if a resource has the HTTP response header Cache-Control: must-revalidate, the user agent would remove it from the list of available images but could keep the image data separately, and use that if the server responds with a 204 No Content status. When the user agent is to update the image data of an img element, optionally with the restart animations flag set, it must run the following steps: 1. If the element’s node document is not the active document, then run these substeps: 1. Continue running this algorithm in parallel. 2. Wait until the element’s node document is the active document. 3. If another instance of this algorithm for this img element was started after this instance (even if it aborted and is no longer running), then abort these steps. 4. Queue a microtask to continue this algorithm. 2. If the user agent cannot support images, or its support for images has been disabled, then abort the image request for the current request and the pending request, set current request to the unavailable state, let pending request be null, and abort these steps. 3. If the element does not use srcset or picture and it does not have a parent or it has a parent but it is not a picture element, and it has a src attribute specified and its value is not the empty string, let selected source be the value of the element’s src attribute, and selected pixel density be 1.0. Otherwise, let selected source be null and selected pixel density be undefined. 4. Let the img element’s last selected source be selected source. 5. If selected source is not null, run these substeps: 1. Parse selected source, relative to the element’s node document. If that is not successful, then abort these inner set of steps. Otherwise, let urlString be the resulting URL string. 2. Let key be a tuple consisting of urlString, the img element’s crossorigin attribute’s mode, and, if that mode is not No CORS, the node document’s origin. 3. If the list of available images contains an entry for key, run these subsubsteps: 1. Set the ignore higher-layer caching flag for that entry. 2. Abort the image request for the current request and the pending request. 3. Let pending request be null. 4. Let current request be a new image request whose image data is that of the entry and whose state is set to the completely available state. 5. Update the presentation of the image appropriately. 6. Let the current request’s current pixel density be selected pixel density. 7. Queue a task to restart the animation if restart animation is set, change current request’s current URL to urlString, and then fire a simple event named load at the img element. 8. Abort the update the image data algorithm. 6. in parallel await a stable state, allowing the task that invoked this algorithm to continue. The synchronous section consists of all the remaining steps of this algorithm until the algorithm says the synchronous section has ended. (Steps in synchronous sections are marked with ⌛.) 7. ⌛ If another instance of this algorithm for this img element was started after this instance (even if it aborted and is no longer running), then abort these steps. Only the last instance takes effect, to avoid multiple requests when, for example, the src, srcset, and crossorigin attributes are all set in succession. 8. ⌛ Let selected source and selected pixel density be the URL and pixel density that results from selecting an image source, respectively. 9. ⌛ If selected source is null, run these substeps: 1. ⌛ Set the current request to the broken state, abort the image request for the current request and the pending request, and let pending request be null. 2. ⌛ Queue a task to change the current request’s current URL to the empty string, and then, if the element has a src attribute or it uses srcset or picture, fire a simple event named error at the img element. 3. ⌛ Abort this algorithm. 10. ⌛ Queue a task to fire a progress event named loadstart at the img element. ⌛ Parse selected source, relative to the element’s node document, and let urlString be the resulting URL string. If that is not successful, run these substeps: 1. ⌛ Abort the image request for the current request and the pending request. 2. ⌛ Set the current request to the broken state. 3. ⌛ Let pending request be null. 4. ⌛ Queue a task to change the current request’s current URL to selected source, fire a simple event named error at the img element and then fire a simple event named loadend at the img element. 5. ⌛ Abort the update the image data algorithm. 11. ⌛ If the pending request is not null, and urlString is the same as the pending request’s current URL, then abort these steps. ⌛ If urlString is the same as the current request’s current URL, and current request is in the partially available state, then abort the image request for the pending request, queue a task to restart the animation if restart animation is set, and abort these steps. ⌛ If the pending request is not null, abort the image request for the pending request. ⌛ Let image request be a new image request whose current URL is urlString. ⌛ If current request is in the unavailable state or the broken state, let the current request be image request. Otherwise, let the pending request be image request. ⌛ Let request be the result of creating a potential-CORS request given urlString and the current state of the element’s crossorigin content attribute. ⌛ Set request’s client to the element’s node document’s Window object’s environment settings object and type to "image". ⌛ If the element uses srcset or picture, set request’s initiator to "imageset". ⌛ Set request’s referrer policy to the current state of the element’s referrerpolicy attribute. ⌛ Fetch request. Let this instance of the fetching algorithm be associated with image request. The resource obtained in this fashion, if any, is image request’s image data. It can be either CORS-same-origin or CORS-cross-origin; this affects the origin of the image itself (e.g., when used on a canvas). Fetching the image must delay the load event of the element’s node document until the task that is queued by the networking task source once the resource has been fetched (defined below) has been run. This, unfortunately, can be used to perform a rudimentary port scan of the user’s local network (especially in conjunction with scripting, though scripting isn’t actually necessary to carry out such an attack). User agents may implement cross-origin access control policies that are stricter than those described above to mitigate this attack, but unfortunately such policies are typically not compatible with existing Web content. If the resource is CORS-same-origin, each task that is queued by the networking task source while the image is being fetched, if image request is the current request, must fire a progress event named progress at the img element. 12. End the synchronous section, continuing the remaining steps in parallel, but without missing any data from fetching. 13. As soon as possible, jump to the first applicable entry from the following list: If the resource type is multipart/x-mixed-replace The next task that is queued by the networking task source while the image is being fetched must run the following steps: 1. If image request is the pending request and at least one body part has been completely decoded, abort the image request for the current request, upgrade the pending request to the current request. 2. Otherwise, if image request is the pending request and the user agent is able to determine that image request’s image is corrupted in some fatal way such that the image dimensions cannot be obtained, abort the image request for the current request, upgrade the pending request to the current request and set the current request’s state to broken. 3. Otherwise, if image request is the current request, it is in the unavailable state, and the user agent is able to determine image request’s image’s width and height, set the current request’s state to partially available. 4. Otherwise, if image request is the current request, it is in the unavailable state, and the user agent is able to determine that image request’s image is corrupted in some fatal way such that the image dimensions cannot be obtained, set the current request’s state to broken. Each task that is queued by the networking task source while the image is being fetched must update the presentation of the image, but as each new body part comes in, it must replace the previous image. Once one body part has been completely decoded, the user agent must set the img element to the completely available state and queue a task to fire a simple event named load at the img element. The progress and loadend events are not fired for multipart/x-mixed-replace image streams. If the resource type and data corresponds to a supported image format, as described below The next task that is queued by the networking task source while the image is being fetched must run the following steps: 1. If the user agent is able to determine image request’s image’s width and height, and image request is pending request, set image request’s state to partially available. 2. Otherwise, if the user agent is able to determine image request’s image’s width and height, and image request is current request, update the img element’s presentation appropriately and set image request’s state to partially available. 3. Otherwise, if the user agent is able to determine that image request’s image is corrupted in some fatal way such that the image dimensions cannot be obtained, and image request is pending request, abort the image request for the current request and the pending request, upgrade the pending request to the current request, set current request to the broken state, fire a simple event named error at the img element, fire a simple event named loadend at the img element, and abort these steps. 4. Otherwise, if the user agent is able to determine that image request’s image is corrupted in some fatal way such that the image dimensions cannot be obtained, and image request is current request, abort the image request for image request, fire a simple event named error at the img element, fire a simple event named loadend at the img element, and abort these steps. That task, and each subsequent task, that is queued by the networking task source while the image is being fetched, if image request is the current request, must update the presentation of the image appropriately (e.g., if the image is a progressive JPEG, each packet can improve the resolution of the image). Furthermore, the last task that is queued by the networking task source once the resource has been fetched must additionally run these steps: 1. If image request is the pending request, abort the image request for the current request, upgrade the pending request to the current request and update the img element’s presentation appropriately. 2. Set image request to the completely available state. 3. Add the image to the list of available images using the key key, with the ignore higher-layer caching flag set. 4. Fire a progress event or simple event named load at the img element, depending on the resource in image request. 5. Fire a progress event or simple event named loadend at the img element, depending on the resource in image request. Otherwise The image data is not in a supported file format; the user agent must set image request to the broken state, abort the image request for the current request and the pending request, upgrade the pending request to the current request if image request is the pending request, and then queue a task to first fire a simple event named error at the img element and then fire a simple event named loadend at the img element. To abort the image request for an image request image request means to run the following steps: 1. Forget image request’s image data, if any. 2. Abort any instance of the fetching algorithm for image request, discarding any pending tasks generated by that algorithm. To upgrade the pending request to the current request for an img element means to run the following steps: 1. Let the img element’s current request be the pending request. 2. Let the img element’s pending request be null. To fire a progress event or simple event named type at an element e, depending on resource r, means to fire a progress event named type at e if r is CORS-same-origin, and otherwise fire a simple event named type at e. While a user agent is running the above algorithm for an element x, there must be a strong reference from the element’s node document to the element x, even if that element is not in its Document. An img element is said to use srcset or picture if it has a srcset attribute specified or if it has a parent that is a picture element. When an img element is in the completely available state and the user agent can decode the media data without errors, then the img element is said to be fully decodable. Whether the image is fetched successfully or not (e.g., whether the response status was an ok status) must be ignored when determining the image’s type and whether it is a valid image. This allows servers to return images with error responses, and have them displayed. The user agent should apply the image sniffing rules to determine the type of the image, with the image’s associated Content-Type headers giving the official type. If these rules are not applied, then the type of the image must be the type given by the image’s associated Content-Type headers. User agents must not support non-image resources with the img element (e.g., XML files whose document element is an HTML element). User agents must not run executable code (e.g., scripts) embedded in the image resource. User agents must only display the first page of a multipage resource (e.g., a PDF file). User agents must not allow the resource to act in an interactive fashion, but should honor any animation in the resource. This specification does not specify which image types are to be supported. ---------------------------------------------------------------------- An img element is associated with a source set. A source set is an ordered set of zero or more image sources and a source size. An image source is a URL, and optionally either a density descriptor, or a width descriptor. A source size is a . When a source size has a unit relative to the viewport, it must be interpreted relative to the img element’s document’s viewport. Other units must be interpreted the same as in Media Queries. [MEDIAQ] When asked to select an image source for a given img element el, user agents must do the following: 1. Update the source set for el. 2. If el’s source set is empty, return null as the URL and undefined as the pixel density and abort these steps. 3. Otherwise, take el’s source set and let it be source set. 4. If an entry b in source set has the same associated density descriptor as an earlier entry a in source set, then remove entry b. Repeat this step until none of the entries in source set have the same associated density descriptor as an earlier entry. 5. In a user agent-specific manner, choose one image source from source set. Let this be selected source. 6. Return selected source and its associated pixel density. When asked to update the source set for a given img element el, user agents must do the following: 1. Set el’s source set to an empty source set. 2. If el has a parent node and that is a picture element, let elements be an array containing el’s parent node’s child elements, retaining relative order. Otherwise, let elements be array containing only el. 3. If el has a width attribute, and parsing that attribute’s value using the rules for parsing dimension values doesn’t generate an error or a percentage value, then let width be the returned integer value. Otherwise, let width be null. 4. Iterate through elements, doing the following for each item child: 1. If child is el: 1. If child has a srcset attribute, parse child’s srcset attribute and let the returned source set be source set. Otherwise, let source set be an empty source set. 2. Parse child’s sizes attribute with the fallback width width, and let source set’s source size be the returned value. 3. If child has a src attribute whose value is not the empty string and source set does not contain an image source with a density descriptor value of 1, and no image source with a width descriptor, append child’s src attribute value to source set. 4. Normalize the source densities of source set. 5. Let el’s source set be source set. 6. Abort this algorithm. 2. If child is not a source element, continue to the next child. Otherwise, child is a source element. 3. If child does not have a srcset attribute, continue to the next child. 4. Parse child’s srcset attribute and let the returned source set be source set. 5. If source set has zero image sources, continue to the next child. 6. If child has a media attribute, and its value does not match the environment, continue to the next child. 7. Parse child’s sizes attribute with the fallback width width, and let source set’s source size be the returned value. 8. If child has a type attribute, and its value is an unknown or unsupported MIME type, continue to the next child. 9. Normalize the source densities of source set. 10. Let el’s source set be source set. 11. Abort this algorithm. Each img element independently considers its previous sibling source elements plus the img element itself for selecting an image source, ignoring any other (invalid) elements, including other img elements in the same picture element, or source elements that are following siblings of the relevant img element. When asked to parse a srcset attribute from an element, parse the value of the element’s srcset attribute as follows: 1. Let input be the value passed to this algorithm. 2. Let position be a pointer into input, initially pointing at the start of the string. 3. Let candidates be an initially empty source set. 4. Splitting loop: Collect a sequence of characters that are space characters or U+002C COMMA characters. If any U+002C COMMA characters were collected, that is a parse error. 5. If position is past the end of input, return candidates and abort these steps. 6. Collect a sequence of characters that are not space characters, and let that be url. 7. Let descriptors be a new empty list. 8. If url ends with a U+002C COMMA character (,), follow these substeps: 1. Remove all trailing U+002C COMMA characters from url. If this removed more than one character, that is a parse error. Otherwise, follow these substeps: 1. Descriptor tokenizer: Skip white space 2. Let current descriptor be the empty string. 3. Let state be in descriptor. 4. Let c be the character at position. Do the following depending on the value of state. For the purpose of this step, "EOF" is a special character representing that position is past the end of input. In descriptor Do the following, depending on the value of c: Space character If current descriptor is not empty, append current descriptor to descriptors and let current descriptor be the empty string. Set state to after descriptor. U+002C COMMA (,) Advance position to the next character in input. If current descriptor is not empty, append current descriptor to descriptors. Jump to the step labeled descriptor parser. U+0028 LEFT PARENTHESIS (() Append c to current descriptor. Set state to in parens. EOF If current descriptor is not empty, append current descriptor to descriptors. Jump to the step labeled descriptor parser. Anything else Append c to current descriptor. In parens Do the following, depending on the value of c: U+0029 RIGHT PARENTHESIS ()) Append c to current descriptor. Set state to in descriptor. EOF Append current descriptor to descriptors. Jump to the step labeled descriptor parser. Anything else Append c to current descriptor. After descriptor Do the following, depending on the value of c: Space character Stay in this state. EOF Jump to the step labeled descriptor parser. Anything else Set state to in descriptor. Set position to the previous character in input. Advance position to the next character in input. Repeat this substep. In order to be compatible with future additions, this algorithm supports multiple descriptors and descriptors with parens. 9. Descriptor parser: Let error be no. 10. Let width be absent. 11. Let density be absent. 12. Let future-compat-h be absent. 13. For each descriptor in descriptors, run the appropriate set of steps from the following list: If the descriptor consists of a valid non-negative integer followed by a U+0077 LATIN SMALL LETTER W character 1. If the user agent does not support the sizes attribute, let error be yes. A conforming user agent will support the sizes attribute. However, user agents typically implement and ship features in an incremental manner in practice. 2. If width and density are not both absent, then let error be yes. 3. Apply the rules for parsing non-negative integers to the descriptor. If the result is zero, let error be yes. Otherwise, let width be the result. If the descriptor consists of a valid floating-point number followed by a U+0078 LATIN SMALL LETTER X character 1. If width, density and future-compat-h are not all absent, then let error be yes. 2. Apply the rules for parsing floating-point number values to the descriptor. If the result is less than zero, let error be yes. Otherwise, let density be the result. If density is zero, the intrinsic dimensions will be infinite. User agents are expected to have limits in how big images can be rendered, which is allowed by the hardware limitations clause. If the descriptor consists of a valid non-negative integer followed by a U+0068 LATIN SMALL LETTER H character This is a parse error. 1. If future-compat-h and density are not both absent, then let error be yes. 2. Apply the rules for parsing non-negative integers to the descriptor. If the result is zero, let error be yes. Otherwise, let future-compat-h be the result. Anything else Let error be yes. 14. If future-compat-h is not absent and width is absent, let error be yes. 15. If error is still no, then append a new image source to candidates whose URL is url, associated with a width width if not absent and a pixel density density if not absent. Otherwise, there is a parse error. 16. Return to the step labeled splitting loop. When asked to parse a sizes attribute from an element, parse a comma-separated list of component values from the value of the element’s sizes attribute (or the empty string, if the attribute is absent), and let unparsed sizes list be the result. [CSS-SYNTAX-3] For each unparsed size in unparsed sizes list: 1. Remove all consecutive s from the end of unparsed size. If unparsed size is now empty, that is a parse error; continue to the next iteration of this algorithm. 2. If the last component value in unparsed size is a valid non-negative , let size be its value and remove the component value from unparsed size. Any CSS function other than the calc() function is invalid. Otherwise, there is a parse error; continue to the next iteration of this algorithm. 3. Remove all consecutive s from the end of unparsed size. If unparsed size is now empty, return size and exit this algorithm. If this was not the last item in unparsed sizes list, that is a parse error. 4. Parse the remaining component values in unparsed size as a . If it does not parse correctly, or it does parse correctly but the evaluates to false, continue to the next iteration of this algorithm. [MEDIAQ] 5. Return size and exit this algorithm. If the above algorithm exhausts unparsed sizes list without returning a size value, follow these steps: 1. If width is not null, return a with the value width and the unit px. 2. Return 100vw. A parse error for the algorithms above indicates a non-fatal mismatch between input and requirements. User agents are encouraged to expose parse errors somehow. While a valid source size list only contains a bare (without an accompanying ) as the last entry in the , the parsing algorithm technically allows such at any point in the list, and will accept it immediately as the size if the preceding entries in the list weren’t used. This is to enable future extensions, and protect against simple author errors such as a final trailing comma. An image source can have a density descriptor, a width descriptor, or no descriptor at all accompanying its URL. Normalizing a source set gives every image source a density descriptor. When asked to normalize the source densities of a source set source set, the user agent must do the following: 1. Let source size be source set’s source size. 2. For each image source in source set: 1. If the image source has a density descriptor, continue to the next image source. 2. Otherwise, if the image source has a width descriptor, replace the width descriptor with a density descriptor with a value of the width descriptor divided by the source size and a unit of x. If the source size is zero, the density would be infinity, which results in the intrinsic dimensions being zero by zero. 3. Otherwise, give the image source a density descriptor of 1x. The user agent may at any time run the following algorithm to update an img element’s image in order to react to changes in the environment. (User agents are not required to ever run this algorithm; for example, if the user is not looking at the page any more, the user agent might want to wait until the user has returned to the page before determining which image to use, in case the environment changes again in the meantime.) User agents are encouraged to run this algorithm in particular when the user changes the viewport’s size (e.g., by resizing the window or changing the page zoom), and when an img element is inserted into a document, so that the density-corrected intrinsic width and height match the new viewport, and so that the correct image is chosen when art direction is involved. 1. in parallel await a stable state. The synchronous section consists of all the remaining steps of this algorithm until the algorithm says the synchronous section has ended. (Steps in synchronous sections are marked with ⌛.) 2. ⌛ If the img element does not use srcset or picture, its node document is not the active document, has image data whose resource type is multipart/x-mixed-replace, or the pending request is not null, then abort this algorithm. 3. ⌛ Let selected source and selected pixel density be the URL and pixel density that results from selecting an image source, respectively. 4. ⌛ If selected source is null, then abort these steps. 5. ⌛ If selected source and selected pixel density are the same as the element’s last selected source and current pixel density, then abort these steps. 6. ⌛ Parse selected source, relative to the element’s node document, and let urlString be the resulting URL string. If that is not successful, abort these steps. 7. ⌛ Let corsAttributeState be the state of the element’s crossorigin content attribute. 8. ⌛ Let origin be the origin of the img element’s node document. 9. ⌛ Let client be the img element’s node document’s Window object’s environment settings object. 10. ⌛ Let key be a tuple consisting of urlString, corsAttributeState, and, if corsAttributeState is not No CORS, origin. 11. ⌛ Let image request be a new image request whose current URL is urlString 12. ⌛ Let the element’s pending request be image request. 13. End the synchronous section, continuing the remaining steps in parallel. 14. If the list of available images contains an entry for key, then set image request’s image data to that of the entry. Continue to the next step. Otherwise, run these substeps: 1. Let request be the result of creating a potential-CORS request given urlString and corsAttributeState. 2. Set request’s client to client, type to "image", and set request’s synchronous flag. 3. Set request’s referrer policy to the current state of the element’s referrerpolicy attribute. 4. Let response be the result of fetching request. 5. If response’s unsafe response is a network error or if the image format is unsupported (as determined by applying the image sniffing rules, again as mentioned earlier), or if the user agent is able to determine that image request’s image is corrupted in some fatal way such that the image dimensions cannot be obtained, or if the resource type is multipart/x-mixed-replace, then let pending request be null and abort these steps. 6. Otherwise, response’s unsafe response is image request’s image data. It can be either CORS-same-origin or CORS-cross-origin; this affects the origin of the image itself (e.g., when used on a canvas). 15. Queue a task to run the following substeps: 1. If the img element has experienced relevant mutations since this algorithm started, then let pending request be null and abort these steps. 2. Let the img element’s last selected source be selected source and the img element’s current pixel density be selected pixel density. 3. Set image request to the completely available state. 4. Add the image to the list of available images using the key key, with the ignore higher-layer caching flag set. 5. Upgrade the pending request to the current request. 6. Update the img element’s presentation appropriately. 7. Fire a simple event named load at the img element. ---------------------------------------------------------------------- The task source for the tasks queued by algorithms in this section is the DOM manipulation task source. ---------------------------------------------------------------------- What an img element represents depends on the src attribute and the alt attribute. If the src attribute is set and the alt attribute is set to the empty string The image is either decorative or supplemental to the rest of the content, redundant with some other information in the document. If the image is available and the user agent is configured to display that image, then the element represents the element’s image data. Otherwise, the element represents nothing, and may be omitted completely from the rendering. User agents may provide the user with a notification that an image is present but has been omitted from the rendering. If the src attribute is set and the alt attribute is set to a value that isn’t empty The image is a key part of the content; the alt attribute gives a textual equivalent or replacement for the image. If the image is available and the user agent is configured to display that image, then the element represents the element’s image data. Otherwise, the element represents the text given by the alt attribute. User agents may provide the user with a notification that an image is present but has been omitted from the rendering. If the src attribute is set and the alt attribute is not There is no textual equivalent of the image available. If the image is available and the user agent is configured to display that image, then the element represents the element’s image data. Otherwise, the user agent should display some sort of indicator that there is an image that is not being rendered, and may, if requested by the user, or if so configured, or when required to provide contextual information in response to navigation, provide caption information for the image, derived as follows: 1. If the image is a descendant of a figure element that has a child figcaption element, and, ignoring the figcaption element and its descendants, the figure element has no Text node descendants other than inter-element white space, and no embedded content descendant other than the img element, then the contents of the first such figcaption element are the caption information; abort these steps. 2. There is no caption information. If the src attribute is not set and either the alt attribute is set to the empty string or the alt attribute is not set at all The element represents nothing. Otherwise The element represents the text given by the alt attribute. The alt attribute does not represent advisory information. User agents must not present the contents of the alt attribute in the same way as content of the title attribute. User agents may always provide the user with the option to display any image, or to prevent any image from being displayed. User agents may also apply heuristics to help the user make use of the image when the user is unable to see it, e.g., due to a visual disability or because they are using a text terminal with no graphics capabilities. Such heuristics could include, for instance, optical character recognition (OCR) of text found within the image. In the case where an img without an alt attribute is the child of a figure element with a non-empty figcaption element, the image’s presence should be minimally conveyed to a user by Assistive Technology, typically by identifying the image role. While user agents are encouraged to repair cases of missing alt attributes, authors must not rely on such behavior. Requirements for providing text to act as an alternative for images are described in detail below. The contents of img elements, if any, are ignored for the purposes of rendering. ---------------------------------------------------------------------- The usemap attribute, if present, can indicate that the image has an associated image map. The ismap attribute, when used on an element that is a descendant of an a element with an href attribute, indicates by its presence that the element provides access to a server-side image map. This affects how events are handled on the corresponding a element. The ismap attribute is a boolean attribute. The attribute must not be specified on an element that does not have an ancestor a element with an href attribute. The usemap and ismap attributes can result in confusing behavior when used together with source elements with the media attribute specified in a picture element. The img element supports dimension attributes. The alt, src, srcset and sizes IDL attributes must reflect the respective content attributes of the same name. The crossOrigin IDL attribute must reflect the crossorigin content attribute. The useMap IDL attribute must reflect the usemap content attribute. The isMap IDL attribute must reflect the ismap content attribute. The referrerPolicy IDL attribute must reflect the referrerpolicy content attribute, limited to only known values. The longDesc IDL attribute is defined in [html-longdesc]. The IDL attribute must reflect the longdesc content attribute. image . width [ = value ] image . height [ = value ] These attributes return the actual rendered dimensions of the image, or zero if the dimensions are not known. They can be set, to change the corresponding content attributes. image . naturalWidth image . naturalHeight These attributes return the intrinsic dimensions of the image, or zero if the dimensions are not known. image . complete Returns true if the image has been completely downloaded or if no image is specified; otherwise, returns false. image . currentSrc Returns the image’s absolute URL. image = new Image( [ width [, height ] ] ) Returns a new img element, with the width and height attributes set to the values passed in the relevant arguments, if applicable. The IDL attributes width and height must return the rendered width and height of the image, in CSS pixels, if the image is being rendered, and is being rendered to a visual medium; or else the density-corrected intrinsic width and height of the image, in CSS pixels, if the image has intrinsic dimensions and is available but not being rendered to a visual medium; or else 0, if the image is not available or does not have intrinsic dimensions. [CSS-2015] On setting, they must act as if they reflected the respective content attributes of the same name. The IDL attributes naturalWidth and naturalHeight must return the density-corrected intrinsic width and height of the image, in CSS pixels, if the image has intrinsic dimensions and is available, or else 0. [CSS-2015] The IDL attribute complete must return true if any of the following conditions is true: * Both the src attribute and the srcset attribute are omitted. * The srcset attribute is omitted and the src attribute’s value is the empty string. * The final task that is queued by the networking task source once the resource has been fetched has been queued. * The img element is completely available. * The img element is broken. Otherwise, the attribute must return false. The value of complete can thus change while a script is executing. The currentSrc IDL attribute must return the img element’s current request’s current URL. A constructor is provided for creating HTMLImageElement objects (in addition to the factory methods from DOM such as createElement()): Image(width, height). When invoked as a constructor, this must return a new HTMLImageElement object (a new img element). If the width argument is present, the new object’s width content attribute must be set to width. If the height argument is also present, the new object’s height content attribute must be set to height. The element’s node document must be the active document of the browsing context of the Window object on which the interface object of the invoked constructor is found. 4.7.5.1. Requirements for providing text to act as an alternative for images Text alternatives, [WCAG20] are a primary way of making visual information accessible, because they can be rendered through many sensory modalities (for example, visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. For example, a person who cannot see a picture can hear the text alternative read aloud using synthesized speech. The alt attribute on images is a very important accessibility attribute. Authoring useful alt attribute content requires the author to carefully consider the context in which the image appears and the function that image may have in that context. The longdesc attribute on images is likely to be read far less often by users and is necessary for far fewer images. Nevertheless it provides an important way for users who cannot see an image or cannot see it clearly, and user agents that cannot automatically process images, to understand what it shows. The longdesc attribute’s use cases are more fully described in [html-longdesc] The guidance included here addresses the most common ways authors use images. Additional guidance and techniques are available in Resources on Alternative Text for Images. 4.7.5.1.1. Examples of scenarios where users benefit from text alternatives for images * They have a very slow connection and are browsing with images disabled. * They have a vision impairment and use text to speech software. * They have a cognitive impairment and use text to speech software. * They are using a text-only browser. * They are listening to the page being read out by a voice Web browser. * They have images disabled to save on download costs. * They have problems loading images or the source of an image is wrong. 4.7.5.1.2. General guidelines Except where otherwise specified, the alt attribute must be specified and its value must not be empty; the value must be an appropriate functional replacement for the image. The specific requirements for the alt attribute content depend on the image’s function in the page, as described in the following sections. To determine an appropriate text alternative it is important to think about why an image is being included in a page. What is its purpose? Thinking like this will help you to understand what is important about the image for the intended audience. Every image has a reason for being on a page, because it provides useful information, performs a function, labels an interactive element, enhances aesthetics or is purely decorative. Therefore, knowing what the image is for, makes writing an appropriate text alternative easier. 4.7.5.1.3. A link or button containing nothing but an image When an a element that is a hyperlink, or a button element, has no text content but contains one or more images, include text in the alt attribute(s) that together convey the purpose of the link or button. In this example, a portion of an editor interface is displayed. Each button has an icon representing an action a user can take on content they are editing. For users who cannot view the images, the action names are included within the alt attributes of the images: 5 buttons: bold, italic, strike through, bulleted list and numbered list.

    In this example, a link contains a logo. The link points to the W3C web site from an external site. The text alternative is a brief description of the link target. W3C logo used as link content. W3C web site This example is the same as the previous example, except that the link is on the W3C web site. The text alternative is a brief description of the link target. W3C logo used as link content. W3C home Depending on the context in which an image of a logo is used it could be appropriate to provide an indication, as part of the text alternative, that the image is a logo. Refer to section §4.7.5.1.19 Logos, insignia, flags, or emblems. In this example, a link contains a print preview icon. The link points to a version of the page with a print stylesheet applied. The text alternative is a brief description of the link target. Print preview icon used as link content. Print preview. In this example, a button contains a search icon. The button submits a search form. The text alternative is a brief description of what the button does. Search icon used as button content. In this example, a company logo for the PIP Corporation has been split into the following two images, the first containing the word PIP and the second with the abbreviated word CO. The images are the sole content of a link to the PIPCO home page. In this case a brief description of the link target is provided. As the images are presented to the user as a single entity the text alternative PIP CO home is in the alt attribute of the first image. Image containing the text 'PIP'.Image containing the text 'CO'. PIP CO home 4.7.5.1.4. Graphical Representations: Charts, diagrams, graphs, maps, illustrations Users can benefit when content is presented in graphical form, for example as a flowchart, a diagram, a graph, or a map showing directions. Users who are unable to view the image also benefit when content presented in a graphical form is provided in a text-based format. Software agents that process text content, but cannot automatically process images (e.g. translation services, many search engines), also benefit from a text-based description. In the following example we have an image of a pie chart, with text in the alt attribute representing the data shown in the pie chart: Browser Share: Internet Explorer 25%, Firefox 40%, Chrome 25%, Safari 6% and Opera 4%. Pie chart: Browser Share - Internet Explorer 25%, Firefox 40%, Chrome 25%, Safari 6% and Opera 4%. In the case where an image repeats the previous paragraph in graphical form. The alt attribute content labels the image and the longdesc attribute identifies it as a description.

    According to a recent study Firefox has a 40% browser share, Internet Explorer has 25%, Chrome has 25%, Safari has 6% and Opera has 4%.

    The browser shares as a pie chart.

    It can be seen that when the image is not available, for example because the src attribute value is incorrect, the text alternative provides the user with a brief description of the image content: Representation of the code snippet above. In cases where the text alternative is lengthy, more than a sentence or two, or would benefit from the use of structured markup, provide a brief description or label using the alt attribute, and an associated text alternative. Here’s an example of a flowchart image, with a short text alternative included in the alt attribute, in this case the text alternative is a description of the link target as the image is the sole content of a link. The link points to a description, within the same document, of the process represented in the flowchart. Flowchart: Dealing with a broken lamp. Flowchart: Dealing with a broken lamp. ... ...

    Dealing with a broken lamp

    1. Check if it’s plugged in, if not, plug it in.
    2. If it still doesn’t work; check if the bulb is burned out. If it is, replace the bulb.
    3. If it still doesn’t work; buy a new lamp.
    In this example, there is an image of a chart. It would be inappropriate to provide the information depicted in the chart as a plain text alternative in an alt attribute as the information is a data set. Instead a structured text alternative is provided below the image in the form of a data table using the data that is represented in the chart image. Bar Chart: average rainfall by Country and Season. Full description in Table below. Indications of the highest and lowest rainfall for each season have been included in the table, so trends easily identified in the chart are also available in the data table. Average rainfall in millimetres by country and season. +------------------------------------------------+ | | United Kingdom | Japan | Australia | |--------+----------------+-------+--------------| | Spring | 5.3 (highest) | 2.4 | 2 (lowest) | |--------+----------------+-------+--------------| | Summer | 4.5 (highest) | 3.4 | 2 (lowest) | |--------+----------------+-------+--------------| | Autumn | 3.5 (highest) | 1.8 | 1.5 (lowest) | |--------+----------------+-------+--------------| | Winter | 1.5 (highest) | 1.2 | 1 (lowest) | +------------------------------------------------+
    Rainfall Data
    Bar chart: average rainfall by Country and Season.
 Full description in Table below.
    Rainfall in millimetres by Country and Season.
    UK JapanAustralia
    Spring 5.5 (highest)2.4 2 (lowest)
    Summer 4.5 (highest)3.42 (lowest)
    Autumn 3.5 (highest) 1.8 1.5 (lowest)
    Winter 1.5 (highest) 1.2 1 lowest
    The figure element is used to group the Bar Chart image and data table. The figcaption element provides a caption for the grouped content. For any of the examples in this section the details and summary elements could be used so that the text descriptions for the images are only displayed on demand: Details element in the closed state. Details element in the open state with list content displayed.
    Flowchart: Dealing with a broken lamp.
    Dealing with a broken lamp
    1. Check if it’s plugged in, if not, plug it in.
    2. If it still doesn’t work; check if the bulb is burned out. If it is, replace the bulb.
    3. If it still doesn’t work; buy a new lamp.
    The details and summary elements are not currently well supported by browsers, until such times they are supported, if used, you will need to use scripting to provide the functionality. There are a number of scripted Polyfills and scripted custom controls available, in popular JavaScript UI widget libraries, which provide similar functionality. 4.7.5.1.5. Images of text Sometimes, an image only contains text, and the purpose of the image is to display text using visual effects and /or fonts. It is strongly recommended that text styled using CSS be used, but if this is not possible, provide the same text in the alt attribute as is in the image. This example shows an image of the text "Get Happy!" written in a fancy multi colored freehand style. The image makes up the content of a heading. In this case the text alternative for the image is "Get Happy!". Get Happy!

    Get Happy!

    In this example we have an advertising image consisting of text, the phrase "The BIG sale" is repeated 3 times, each time the text gets smaller and fainter, the last line reads "...ends Friday" In the context of use, as an advertisement, it is recommended that the image’s text alternative only include the text "The BIG sale" once as the repetition is for visual effect and the repetition of the text for users who cannot view the image is unnecessary and could be confusing. The big sale ...ends Friday.

    The BIG sale ...ends Friday.

    In situations where there is also a photo or other graphic along with the image of text, ensure that the words in the image text are included in the text alternative, along with any other description of the image that conveys meaning to users who can view the image, so the information is also available to users who cannot view the image. When an image is used to represent a character that cannot otherwise be represented in Unicode, for example gaiji, itaiji, or new characters such as novel currency symbols, the alternative text should be a more conventional way of writing the same thing, e.g., using the phonetic hiragana or katakana to give the character’s pronunciation. In this example from 1997, a new-fangled currency symbol that looks like a curly E with two bars in the middle instead of one is represented using an image. The alternative text gives the character’s pronunciation. Only euro5.99!

    Only euro 5.99! An image should not be used if Unicode characters would serve an identical purpose. Only when the text cannot be directly represented using Unicode, e.g., because of decorations or because the character is not in the Unicode character set (as in the case of gaiji), would an image be appropriate. If an author is tempted to use an image because their default system font does not support a given character, then Web Fonts are a better solution than images. An illuminated manuscript might use graphics for some of its letters. The text alternative in such a situation is just the character that the image represents. Once upon a time and a long long time ago...

    Once upon a time and a long long time ago... Where the design of the illuminated letter is important, the primary text alternative in is the character that the image represents, and longdesc can provide a link to a more detailed description: Once upon a time and a long long time ago...

    Once upon a time and a long long time ago... 4.7.5.1.6. Images that include text Sometimes, an image consists of a graphics such as a chart and associated text. In this case it is recommended that the text in the image is included in the text alternative. Consider an image containing a pie chart and associated text. It is recommended wherever possible to provide any associated text as text, not an image of text. If this is not possible include the text in the text alternative along with the pertinent information conveyed in the image. Figure 1. Distribution of Articles by Journal Category. Pie chart: Language=68%, Education=14% and Science=18%.

    Figure 1. Distribution of Articles by Journal Category.
 Pie chart: Language=68%, Education=14% and Science=18%.

    Here’s another example of the same pie chart image, showing a short text alternative included in the alt attribute and a longer text alternative in text. The figure and figcaption elements are used to associate the longer text alternative with the image. The alt attribute is used to label the image.
    Figure 1
    Figure 1. Distribution of Articles by Journal Category. Pie chart: Language=68%, Education=14% and Science=18%.
    The advantage of this method over the previous example is that the text alternative is available to all users at all times. It also allows structured mark up to be used in the text alternative, where as a text alternative provided using the alt attribute does not. 4.7.5.1.7. Images that enhance the themes or subject matter of the page content An image that isn’t discussed directly by the surrounding text but still has some relevance can be included in a page using the img element. Such images are more than mere decoration, they may augment the themes or subject matter of the page content and so still form part of the content. In these cases, it is recommeneded that a text alternative be provided. Here is an example of an image closely related to the subject matter of the page content but not directly discussed. An image of a painting inspired by a poem, on a page reciting that poem. The following snippet shows an example. The image is a painting titled the "Lady of Shallot", it is inspired by the poem and its subject matter is derived from the poem. Therefore it is strongly recommended that a text alternative is provided. There is a short description of the content of the image in the alt attribute and a link below the image to a longer description located at the bottom of the document. At the end of the longer description there is also a link to further information about the painting. A painting inspired by Alfred Tennyson’s poem The Lady of Shalott

    The Lady of Shalott

    A poem by Alfred Lord Tennyson

    Painting - a young woman with long hair, sitting in a wooden boat. Full description below.

    Description of the painting.

    ... ... ...

    The woman in the painting is wearing a flowing white dress. A large piece of intricately patterned fabric is draped over the side. In her right hand she holds the chain mooring the boat. Her expression is mournful. She stares at a crucifix lying in front of her. Beside it are three candles. Two have blown out. Further information about the painting.

    This example illustrates the provision of a text alternative identifying an image as a photo of the main subject of a page. Portrait photo(black and white) of Robin, accompanied by a heading 'Robin Berjon' and a question 'what more needs to be said?' Portrait photo(black and white) of Robin.

    Robin Berjon

    What more needs to be said?

    It is not always easy to write a useful text alternative for an image, another option is to provide a link to a description or further information about the image when one is available. In this example of the same image, there is a short text alternative included in the alt attribute, and there is a link after the image. The link points to a page containing information about the painting. The Lady of Shalott A poem by Alfred Lord Tennyson. Painting of a woman in a white flowing dress, sitting in a small boat. About this painting Full recitation of Alfred, Lord Tennyson’s poem.

    The Lady of Shalott

    A poem by Alfred Lord Tennyson

    Painting: a woman in a white flowing dress, sitting in a small boat.

    About this painting: The Lady of Shalott.

    4.7.5.1.8. A graphical representation of some of the surrounding text In many cases, the image is actually just supplementary, and its presence merely reinforces the surrounding text. In these cases, the alt attribute must be present but its value must be the empty string. In general, an image falls into this category if removing the image doesn’t make the page any less useful, but including the image makes it a lot easier for users of visual browsers to understand the concept. This example includes a screenshot of part of a text editor with the file described in the instruction, displayed: In the text file, add SleepMode=1 under [options], then save and close.

    In the text file, add SleepMode=1 under [options], then save and close.

    4.7.5.1.9. A purely decorative image that doesn’t add any information Purely decorative images are visual enhancements, decorations or embellishments that provide no function or information beyond aesthetics to users who can view the images. Mark up purely decorative images so they can be ignored by assistive technology by using an empty alt attribute (alt=""). While it is not unacceptable to include decorative images inline, it is recommended if they are purely decorative to include the image using CSS. Here’s an example of an image being used as a decorative banner for a person’s blog, the image offers no information and so an empty alt attribute is used. Clara’s Blog Welcome to my blog...

    Clara’s Blog

    Welcome to my blog...

    4.7.5.1.10. Inline images When images are used inline as part of the flow of text in a sentence, provide a word or phrase as a text alternative which makes sense in the context of the sentence it is apart of. I love you. I love you. My heart breaks. My heart breaks. 4.7.5.1.11. A group of images that form a single larger picture with no links When a picture has been sliced into smaller image files that are then displayed together to form the complete picture again, include a text alternative for one of the images using the alt attribute as per the relevant relevant guidance for the picture as a whole, and then include an empty alt attribute on the other images. In this example, a picture representing a company logo for the PIP Corporation has been split into two pieces, the first containing the letters "PIP" and the second with the word "CO". The text alternatve PIP CO is in the alt attribute of the first image. Image containing the text 'PIP'.Image containing the text 'CO'. PIP CO In the following example, a rating is shown as three filled stars and two empty stars. While the text alternative could have been "★★★☆☆", the author has instead decided to more helpfully give the rating in the form "3 out of 5". That is the text alternative of the first image, and the rest have empty alt attributes. 3 out of 5.

    Rating: 3 out of 5

    4.7.5.1.12. Image maps If an img element has a usemap attribute which references a map element containing area elements that have href attributes, the img is considered to be interactive content. In such cases, always provide a text alternative for the image using the alt attribute. Consider the following image which is a map of Katoomba, it has 2 interactive regions corresponding to the areas of North and South Katoomba: Map of Katoomba. The text alternative is a brief description of the image. The alt attribute on each of the area elements provides text describing the content of the target page of each linked region:

    View houses for sale in North Katoomba or South Katoomba:

    Map of Katoomba Houses in North Katoomba Houses in South Katoomba 4.7.5.1.13. A group of images that form a single larger picture with links Sometimes, when you create a composite picture from multiple images, you may wish to link one or more of the images. Provide an alt attribute for each linked image to describe the purpose of the link. In the following example, a composite picture is used to represent a "crocoduck"; a fictional creature which defies evolutionary principles by being part crocodile and part duck. You are asked to interact with the crocoduck, but you need to exercise caution... crocodile’s angry, chomping headduck’s soft, feathery body

    The crocoduck

    You encounter a strange creature called a "crocoduck". The creature seems angry! Perhaps some friendly stroking will help to calm it, but be careful not to stroke any crocodile parts. This would just enrage the beast further.

    Stroke crocodile’s angry, chomping head Stroke duck’s soft, feathery body 4.7.5.1.14. Images of Pictures Images of pictures or graphics include visual representations of objects, people, scenes, abstractions, etc. This non-text content, [WCAG20] can convey a significant amount of information visually or provide a specific sensory experience, [WCAG20] to a sighted person. Examples include photographs, paintings, drawings and artwork. An appropriate text alternative for a picture is a brief description, or name [WCAG20]. As in all text alternative authoring decisions, writing suitable text alternatives for pictures requires human judgment. The text value is subjective to the context where the image is used and the page author’s writing style. Therefore, there is no single "right" or "correct" piece of alt text for any particular image. In addition to providing a short text alternative that gives a brief description of the non-text content, also providing supplemental content through another means when appropriate may be useful. This first example shows an image uploaded to a photo-sharing site. The photo is of a cat, sitting in the bath. The image has a text alternative provided using the img element’s alt attribute. It also has a caption provided by including the img element in a figure element and using a figcaption element to identify the caption text. Lola the cat sitting under an umbrella in the bath tub. Lola prefers a bath to a shower.
    Lola the cat sitting under an umbrella in the bath tub.
    Lola prefers a bath to a shower.
    This example is of an image that defies a complete description, as the subject of the image is open to interpretation. The image has a text alternative in the alt attribute which gives users who cannot view the image a sense of what the image is. It also has a caption provided by including the img element in a figure element and using a figcaption element to identify the caption text. An abstract, freeform, vertically symmetrical, black inkblot on a light background. The first of the ten cards in the Rorschach test.
    An abstract, freeform, vertically symmetrical, black inkblot on a light background.
    The first of the ten cards in the Rorschach test.
    4.7.5.1.15. Webcam images Webcam images are static images that are automatically updated periodically. Typically the images are from a fixed viewpoint, the images may update on the page automatically as each new image is uploaded from the camera or the user may be required to refresh the page to view an updated image. Examples include traffic and weather cameras. This example is fairly typical; the title and a time stamp are included in the image, automatically generated by the webcam software. It would be better if the text information was not included in the image, but as it is part of the image, include it as part of the text alternative. A caption is also provided using the figure and figcaption elements. As the image is provided to give a visual indication of the current weather near a building, a link to a local weather forecast is provided, as with automatically generated and uploaded webcam images it may be impractical to provide such information as a text alternative. The text of the alt attribute includes a prose version of the timestamp, designed to make the text more understandable when announced by text to speech software. The text alternative also includes a description of some aspects of what can be seen in the image which are unchanging, although weather conditions and time of day change. Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds. In the foreground are the safety rails on the flat part of the roof. Nearby ther are low rize industrial buildings, beyond those are block of flats. In the distance there’s a church steeple. View from the top of Sopwith house, looking towards North Kingston. This image is updated every hour. View the latest weather details for Kingston upon Thames.
    Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds.
   In the foreground are the safety rails on the flat part of the roof. Nearby there are low rize industrial buildings,
   beyond are blocks of flats. In the distance there’s a church steeple.
    View from Sopwith house, looking towards north Kingston. This image is updated every hour.

    View the latest weather details for Kingston upon Thames.

    4.7.5.1.16. When a text alternative is not available at the time of publication In some cases an image is included in a published document, but the author is unable to provide an appropriate text alternative. In such cases the minimum requirement is to provide a caption for the image using the figure and figcaption elements under the following conditions: * The img element is in a figure element * The figure element contains a figcaption element * The figcaption element contains content other than inter-element white space * Ignoring the figcaption element and its descendants, the figure element has no Text node descendants other than inter-element white space, and no embedded content descendant other than the img element. In other words, the only content of the figure is an img element and a figcaption element, and the figcaption element must include (caption) content. Such cases are to be kept to an absolute minimum. If there is even the slightest possibility of the author having the ability to provide real alternative text, then it would not be acceptable to omit the alt attribute. In this example, a person uploads a photo, as part of a bulk upload of many images, to a photo sharing site. The user has not provided a text alternative or a caption for the image. The site’s authoring tool inserts a caption automatically using whatever useful information it has for the image. In this case it’s the file name and date the photo was taken. The caption text in the example below is not a suitable text alternative and is not conforming to the Web Accessibility Guidelines 2.0. [WCAG20] no text alternative provided clara.jpg, taken on 12/11/2010.
    clara.jpg, taken on 12/11/2010.
    Notice that even in this example, as much useful information as possible is still included in the figcaption element. In this second example, a person uploads a photo to a photo sharing site. She has provided a caption for the image but not a text alternative. This may be because the site does not provide users with the ability to add a text alternative in the alt attribute. no text alternative provided Eloisa with Princess Belle
    Eloisa with Princess Belle
    Sometimes the entire point of the image is that a textual description is not available, and the user is to provide the description. For example, software that displays images and asks for alternative text precisely for the purpose of then writing a page with correct alternative text. Such a page could have a table of images, like this:
    Image Description
    Image 640 by 100, filename 'banner.gif'
    Image 200 by 480, filename 'ad3.gif'
    Since some users cannot use images at all (e.g., because they are blind) the alt attribute is only allowed to be omitted when no text alternative is available and none can be made available, as in the above examples. 4.7.5.1.17. An image not intended for the user Generally authors should avoid using img elements for purposes other than showing images. If an img element is being used for purposes other than showing an image, e.g., as part of a service to count page views, use an empty alt attribute. An example of an img element used to collect web page statistics. The alt attribute is empty as the image has no meaning. It is recommended for the example use above the width and height attributes be set to zero. Another example use is when an image such as a spacer.gif is used to aid positioning of content. The alt attribute is empty as the image has no meaning. It is recommended that CSS be used to position content instead of img elements. 4.7.5.1.18. Icon Images An icon is usually a simple picture representing a program, action, data file or a concept. Icons are intended to help users of visual browsers to recognize features at a glance. Use an empty alt attribute when an icon is supplemental to text conveying the same meaning. In this example, we have a link pointing to a site’s home page, the link contains a house icon image and the text "home". The image has an empty alt text. A house icon next to the word 'home'. Home Where images are used in this way, it would also be appropriate to add the image using CSS. #home:before { content: url(home.png); } Home In this example, there is a warning message, with a warning icon. The word "Warning!" is in emphasized text next to the icon. As the information conveyed by the icon is redundant the img element is given an empty alt attribute. Warning! Warning! Your session is about to expire.

    Warning! Your session is about to expire

    When an icon conveys additional information not available in text, provide a text alternative. In this example, there is a warning message, with a warning icon. The icon emphasizes the importance of the message and identifies it as a particular type of content. Warning! Your session is about to expire.

    Warning! Your session is about to expire

    4.7.5.1.19. Logos, insignia, flags, or emblems Many pages include logos, insignia, flags, or emblems, which stand for a company, organization, project, band, software package, country, or other entity. What can be considered as an appropriate text alternative depends upon, like all images, the context in which the image is being used and what function it serves in the given context. If a logo is the sole content of a link, provide a brief description of the link target in the alt attribute. This example illustrates the use of the HTML5 logo as the sole content of a link to the HTML specification. HTML 5.1 Nightly specification HTML 5.1 specification If a logo is being used to represent the entity, e.g., as a page heading, provide the name of the entity being represented by the logo as the text alternative. This example illustrates the use of the WebPlatform.org logo being used to represent itself. WebPlatform.org and other developer resources

    WebPlatform.org and other developer resources

    The text alternative in the example above could also include the word "logo" to describe the type of image content. If so, it is suggested that square brackets be used to delineate this information: alt="[logo] WebPlatform.org". If a logo is being used next to the name of the what that it represents, then the logo is supplemental. Include an empty alt attribute as the text alternative is already provided. This example illustrates the use of a logo next to the name of the organization it represents. WebPlatform.org WebPlatform.org If the logo is used alongside text discussing the subject or entity the logo represents, then provide a text alternative which describes the logo. This example illustrates the use of a logo next to text discussing the subject the logo represents. HTML5 logo: Shaped like a shield with the text 'HTML' above and the numeral '5' prominent on the face of the shield. HTML is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the latest revision of the HTML specification (originally created in 1990 and most recently standardized as HTML 4.01 in 1997) and currently remains under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers etc.).

    HTML5 logo: Shaped like a shield with the
 text 'HTML' above and the numeral '5' prominent on the face of the shield.

    Information about HTML 4.7.5.1.20. CAPTCHA Images CAPTCHA stands for "Completely Automated Public Turing test to tell Computers and Humans Apart". CAPTCHA images are used for security purposes to confirm that content is being accessed by a person rather than a computer. This authentication is done through visual verification of an image. CAPTCHA typically presents an image with characters or words in it that the user is to re-type. The image is usually distorted and has some noise applied to it to make the characters difficult to read. To improve the accessibility of CAPTCHA provide text alternatives that identify and describe the purpose of the image, and provide alternative forms of the CAPTCHA using output modes for different types of sensory perception. For instance provide an audio alternative along with the visual image. Place the audio option right next to the visual one. This helps but is still problematic for people without sound cards, the deaf-blind, and some people with limited hearing. Another method is to include a form that asks a question along with the visual image. This helps but can be problematic for people with cognitive impairments. It is strongly recommended that alternatives to CAPTCHA be used, as all forms of CAPTCHA introduce unacceptable barriers to entry for users with disabilities. Further information is available in Inaccessibility of CAPTCHA. This example shows a CAPTCHA test which uses a distorted image of text. The text alternative in the alt attribute provides instructions for a user in the case where she cannot access the image content. captcha containing the words 'aides' and 'sprucest'. The letters are distorted and the color of the letters and background is partially inverted, Example code: If you cannot view this image an audio challenge is provided. 4.7.5.1.21. An image in a picture element The picture element and any source elements it contains have no semantics for users, only the img element or its text alternative is displayed to users. Provide a text alternative for an img element without regard to it being within a picture element. Refer to Requirements for providing text to act as an alternative for images for more information on how to provide useful alt text for images. Art directed images that rely on picture need to depict the same content (irrespective of size, pixel density, or any other discriminating factor). Therefore the appropriate text alternative for an image will always be the same irrespective of which source file ends up being chosen by the browser.

    Is it a ghost?

    Reflection of a girls face in a train window. The large and small versions (both versions are displayed for demonstration purposes) of the image portray the same scene: Reflection of a girls face in a train window, while the small version (displayed on smaller screens) is cropped, this does not effect the subject matter or the appropriateness of the alt text. Reflection of a girls face in a train window. Reflection of a girls face in a train window. 4.7.5.1.22. Guidance for markup generators Markup generators (such as WYSIWYG authoring tools) should, wherever possible, obtain alternative text from their users. However, it is recognized that in many cases, this will not be possible. For images that are the sole contents of links, markup generators should examine the link target to determine the title of the target, or the URL of the target, and use information obtained in this manner as the alternative text. For images that have captions, markup generators should use the figure and figcaption elements to provide the image’s caption. As a last resort, implementors should either set the alt attribute to the empty string, under the assumption that the image is a purely decorative image that doesn’t add any information but is still specific to the surrounding content, or omit the alt attribute altogether, under the assumption that the image is a key part of the content. Markup generators may specify a generator-unable-to-provide-required-alt attribute on img elements for which they have been unable to obtain a text alternative and for which they have therefore omitted the alt attribute. The value of this attribute must be the empty string. Documents containing such attributes are not conforming, but conformance checkers will silently ignore this error. This is intended to avoid markup generators from being pressured into replacing the error of omitting the alt attribute with the even more egregious error of providing phony text alternatives, because state-of-the-art automated conformance checkers cannot distinguish phony text alternatives from correct text alternatives. Markup generators should generally avoid using the image’s own file name as the text alternative. Similarly, markup generators should avoid generating text alternatives from any content that will be equally available to presentation user agents (e.g., Web browsers). This is because once a page is generated, it will typically not be updated, whereas the browsers that later read the page can be updated by the user, therefore the browser is likely to have more up-to-date and finely-tuned heuristics than the markup generator did when generating the page. 4.7.5.1.23. Guidance for conformance checkers A conformance checker must report the lack of an alt attribute as an error unless one of the conditions listed below applies: * The img element is in a figure element that satisfies the conditions described above. * The img element has a (non-conforming) generator-unable-to-provide-required-alt attribute whose value is the empty string. A conformance checker that is not reporting the lack of an alt attribute as an error must also not report the presence of the empty generator-unable-to-provide-required-alt attribute as an error. (This case does not represent a case where the document is conforming, only that the generator could not determine appropriate alternative text — validators are not required to show an error in this case, because such an error might encourage markup generators to include bogus alternative text purely in an attempt to silence validators. Naturally, conformance checkers may report the lack of an alt attribute as an error even in the presence of the generator-unable-to-provide-required-alt attribute; for example, there could be a user option to report all conformance errors even those that might be the more or less inevitable result of using a markup generator.) 4.7.6. The iframe element Categories: Flow content. Phrasing content. Embedded content. Interactive content. Palpable content. Contexts in which this element can be used: Where embedded content is expected. Content model: Text that conforms to the requirements given in the prose. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes src - Address of the resource srcdoc - A document to render in the iframe name - Name of nested browsing context sandbox - Security rules for nested content allowfullscreen - Whether to allow the iframe’s contents to use requestFullscreen() allowpaymentrequest - Whether the iframe’s contents are allowed to use the PaymentRequest interface to make payment requests width - Horizontal dimension height - Vertical dimension referrerpolicy - Referrer policy for fetches initiated by the element Allowed ARIA role attribute values: application, document, or img. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: interface HTMLIFrameElement : HTMLElement { attribute DOMString src; attribute DOMString srcdoc; attribute DOMString name; [SameObject, PutForwards=value] readonly attribute DOMTokenList sandbox; attribute boolean allowFullscreen; attribute boolean allowPaymentRequest; attribute DOMString width; attribute DOMString height; attribute DOMString referrerPolicy; readonly attribute Document? contentDocument; readonly attribute WindowProxy? contentWindow; }; The iframe element represents a nested browsing context. The src attribute gives the address of a page that the nested browsing context is to contain. The attribute, if present, must be a valid non-empty URL potentially surrounded by spaces. The srcdoc attribute gives the content of the page that the nested browsing context is to contain. The value of the attribute is the source of an iframe srcdoc document. The srcdoc attribute, if present, must have a value using the HTML syntax that consists of the following syntactic components, in the given order: 1. Any number of comments and space characters. 2. Optionally, a DOCTYPE. 3. Any number of comments and space characters. 4. The document element, in the form of an html element. 5. Any number of comments and space characters. For iframe elements in XML documents, the srcdoc attribute, if present, must have a value that matches the production labeled document in the XML specification. [XML] Here a blog uses the srcdoc attribute in conjunction with the sandbox attributes described below to provide users of user agents that support this feature with an extra layer of protection from script injection in the blog post comments:

    I got my own magazine!

    After much effort, I’ve finally found a publisher, and so now I have my own magazine! Isn’t that awesome?! The first issue will come out in September, and we have articles about getting food, and about getting in boxes, it’s going to be great!

    Written by cap, 1 hour ago.

    Thirteen minutes ago, ch wrote:
    Nine minutes ago, cap wrote:
    Five minutes ago, ch wrote:
    Notice the way that quotes have to be escaped (otherwise the srcdoc attribute would end prematurely), and the way raw ampersands (e.g., in URLs or in prose) mentioned in the sandboxed content have to be doubly escaped — once so that the ampersand is preserved when originally parsing the srcdoc attribute, and once more to prevent the ampersand from being misinterpreted when parsing the sandboxed content. Furthermore, notice that since the DOCTYPE is optional in iframe srcdoc documents, and the html, head, and body elements have optional start and end tags, and the title element is also optional in iframe srcdoc documents, the markup in a srcdoc attribute can be relatively succinct despite representing an entire document, since only the contents of the body element need appear literally in the syntax. The other elements are still present, but only by implication. In the HTML syntax, authors need only remember to use U+0022 QUOTATION MARK characters (") to wrap the attribute contents and then to escape all U+0026 AMPERSAND (&) and U+0022 QUOTATION MARK (") characters, and to specify the sandbox attribute, to ensure safe embedding of content. Due to restrictions of the XHTML syntax, in XML the U+003C LESS-THAN SIGN character (<) needs to be escaped as well. In order to prevent attribute-value normalization, some of XML’s white space characters — specifically U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED (LF), and U+000D CARRIAGE RETURN (CR) — also need to be escaped. [XML] If the src attribute and the srcdoc attribute are both specified together, the srcdoc attribute takes priority. This allows authors to provide a fallback URL for legacy user agents that do not support the srcdoc attribute. ---------------------------------------------------------------------- When an iframe element is inserted into a document that has a browsing context, the user agent must create a nested browsing context, and then process the iframe attributes for the "first time". When an iframe element is removed from a document, the user agent must discard the nested browsing context, if any. This happens without any unload events firing (the nested browsing context and its Document are discarded, not unloaded). Whenever an iframe element with a nested browsing context has its srcdoc attribute set, changed, or removed, the user agent must process the iframe attributes. Similarly, whenever an iframe element with a nested browsing context but with no srcdoc attribute specified has its src attribute set, changed, or removed, the user agent must process the iframe attributes. When the user agent is to process the iframe attributes, it must run the first appropriate steps from the following list: If the srcdoc attribute is specified Navigate the element’s child browsing context to a new response whose url list consists of about:srcdoc, header list consists of Content-Type/text/html, body is the value of the attribute, CSP list is the CSP list of the iframe element’s node document, and HTTPS state is the HTTPS state of the iframe element’s node document. The resulting Document must be considered an iframe srcdoc document. Otherwise, if the element has no src attribute specified, and the user agent is processing the iframe’s attributes for the "first time" Queue a task to run the iframe load event steps. The task source for this task is the DOM manipulation task source. Otherwise Run the otherwise steps for iframe or frame elements. The otherwise steps for iframe or frame elements are as follows: 1: If the element has no src attribute specified, or its value is the empty string, let url be the URL "about:blank". Otherwise, parse the value of the src attribute, relative to the element’s node document. If that is not successful, then let url be the URL "about:blank". Otherwise, let url be the resulting URL record. 2. If there exists an ancestor browsing context whose active document’s URL, ignoring fragments, is equal to url, then abort these steps. 3. Let resource be a new request whose url is URL and whose referrer policy is the current state of the element’s referrerpolicy content attribute. 4. Navigate the element’s child browsing context to resource. Furthermore, if the active document of the element’s child browsing context before such a navigation was not completely loaded at the time of the new navigation, then the navigation must be completed with replacement enabled. Similarly, if the child browsing context’s session history contained only one Document when the process the iframe attributes algorithm was invoked, and that was the about:blank Document created when the child browsing context was created, then any navigation required of the user agent in that algorithm must be completed with replacement enabled. When a Document in an iframe is marked as completely loaded, the user agent must run the iframe load event steps in parallel. A load event is also fired at the iframe element when it is created if no other data is loaded in it. Each Document has an iframe load in progress flag and a mute iframe load flag. When a Document is created, these flags must be unset for that Document. The iframe load event steps are as follows: 1. Let child document be the active document of the iframe element’s nested browsing context. 2. If child document has its mute iframe load flag set, abort these steps. 3. Set child document’s iframe load in progress flag. 4. Fire a simple event named load at the iframe element. 5. Unset child document’s iframe load in progress flag. This, in conjunction with scripting, can be used to probe the URL space of the local network’s HTTP servers. User agents may implement cross-origin access control policies that are stricter than those described above to mitigate this attack, but unfortunately such policies are typically not compatible with existing Web content. When the iframe’s browsing context’s active document is not ready for post-load tasks, and when anything in the iframe is delaying the load event of the iframe’s browsing context’s active document, and when the iframe’s browsing context is in the delaying load events mode, the iframe must delay the load event of its document. If, during the handling of the load event, the browsing context in the iframe is again navigated, that will further delay the load event. If, when the element is created, the srcdoc attribute is not set, and the src attribute is either also not set or set but its value cannot be parsed, the browsing context will remain at the initial about:blank page. If the user navigates away from this page, the iframe’s corresponding WindowProxy object will proxy new Window objects for new Document objects, but the src attribute will not change. ---------------------------------------------------------------------- The name attribute, if present, must be a valid browsing context name. The given value is used to name the nested browsing context. When the browsing context is created, if the attribute is present, the browsing context name must be set to the value of this attribute; otherwise, the browsing context name must be set to the empty string. Whenever the name attribute is set, the nested browsing context’s name must be changed to the new value. If the attribute is removed, the browsing context name must be set to the empty string. ---------------------------------------------------------------------- The sandbox attribute, when specified, enables a set of extra restrictions on any content hosted by the iframe. Its value must be an unordered set of unique space-separated tokens that are ASCII case-insensitive. The allowed values are allow-forms, allow-pointer-lock, allow-popups, allow-presentation, allow-same-origin, allow-scripts, and allow-top-navigation. When the attribute is set, the content is treated as being from a unique origin, forms, scripts, and various potentially annoying APIs are disabled, links are prevented from targeting other browsing contexts, and plugins are secured. The allow-same-origin keyword causes the content to be treated as being from its real origin instead of forcing it into a unique origin; the allow-top-navigation keyword allows the content to navigate its top-level browsing context; and the allow-forms, allow-pointer-lock, allow-popups, allow-presentation and allow-scripts keywords re-enable forms, the pointer lock API, popups, the presentation API, and scripts respectively. [POINTERLOCK] [PRESENTATION-API] Setting both the allow-scripts and allow-same-origin keywords together when the embedded page has the same origin as the page containing the iframe allows the embedded page to simply remove the sandbox attribute and then reload itself, effectively breaking out of the sandbox altogether. These flags only take effect when the nested browsing context of the iframe is navigated. Removing them, or removing the entire sandbox attribute, has no effect on an already-loaded page. Potentially hostile files should not be served from the same server as the file containing the iframe element. Sandboxing hostile content is of minimal help if an attacker can convince the user to just visit the hostile content directly, rather than in the iframe. To limit the damage that can be caused by hostile HTML content, it should be served from a separate dedicated domain. Using a different domain ensures that scripts in the files are unable to attack the site, even if the user is tricked into visiting those pages directly, without the protection of the sandbox attribute. When an iframe element with a sandbox attribute has its nested browsing context created (before the initial about:blank Document is created), and when an iframe element’s sandbox attribute is set or changed while it has a nested browsing context, the user agent must parse the sandboxing directive using the attribute’s value as the input, the iframe element’s nested browsing context’s iframe sandboxing flag set as the output, and, if the iframe has an allowfullscreen attribute, the allow fullscreen flag. When an iframe element’s sandbox attribute is removed while it has a nested browsing context, the user agent must empty the iframe element’s nested browsing context’s iframe sandboxing flag set as the output. In this example, some completely-unknown, potentially hostile, user-provided HTML content is embedded in a page. Because it is served from a separate domain, it is affected by all the normal cross-site restrictions. In addition, the embedded page has scripting disabled, plugins disabled, forms disabled, and it cannot navigate any frames or windows other than itself (or any frames or windows it itself embeds).

    We’re not scared of you! Here is your content, unedited:

    It is important to use a separate domain so that if the attacker convinces the user to visit that page directly, the page doesn’t run in the context of the site’s origin, which would make the user vulnerable to any attack found in the page. In this example, a gadget from another site is embedded. The gadget has scripting and forms enabled, and the origin sandbox restrictions are lifted, allowing the gadget to communicate with its originating server. The sandbox is still useful, however, as it disables plugins and popups, thus reducing the risk of the user being exposed to malware and other annoyances. Suppose a file A contained the following fragment: Suppose that file B contained an iframe also: Further, suppose that file C contained a link: Link For this example, suppose all the files were served as text/html. Page C in this scenario has all the sandboxing flags set. Scripts are disabled, because the iframe in A has scripts disabled, and this overrides the allow-scripts keyword set on the iframe in B. Forms are also disabled, because the inner iframe (in B) does not have the allow-forms keyword set. Suppose now that a script in A removes all the sandbox attributes in A and B. This would change nothing immediately. If the user clicked the link in C, loading page D into the iframe in B, page D would now act as if the iframe in B had the allow-same-origin and allow-forms keywords set, because that was the state of the nested browsing context in the iframe in A when page B was loaded. Generally speaking, dynamically removing or changing the sandbox attribute is ill-advised, because it can make it quite hard to reason about what will be allowed and what will not. ---------------------------------------------------------------------- The allowfullscreen attribute is a boolean attribute. When specified, it indicates that Document objects in the iframe element’s browsing context are to be allowed to use requestFullscreen() (if it’s not blocked for other reasons, e.g., there is another ancestor iframe without this attribute set). Here, an iframe is used to embed a player from a video site. The allowfullscreen attribute is needed to enable the player to show its video fullscreen. ---------------------------------------------------------------------- The allowpaymentrequest attribute is a boolean attribute. When specified, it indicates that Document objects in the iframe element’s browsing context are to be allowed to use the PaymentRequest interface to make payment requests. To determine whether a Document object document is allowed to use the feature indicated by attribute name allowattribute, run these steps: 1. If document has no browsing context, then return false. 2. If document’s browsing context is a top-level browsing context, then return true. 3. If document’s browsing context has a browsing context container that is an iframe element with an allowattribute attribute specified, and whose node document is allowed to use the feature indicated by allowattribute, then return true. 4. Return false. ---------------------------------------------------------------------- The iframe element supports dimension attributes for cases where the embedded content has specific dimensions (e.g., ad units have well-defined dimensions). An iframe element never has fallback content, as it will always create a nested browsing context, regardless of whether the specified initial contents are successfully used. The referrerpolicy attribute is a referrer policy attribute. Its purpose is to set the referrer policy used when processing the iframe attributes. [REFERRERPOLICY] ---------------------------------------------------------------------- Descendants of iframe elements represent nothing. (In legacy user agents that do not support iframe elements, the contents would be parsed as markup that could act as fallback content.) When used in HTML documents, the allowed content model of iframe elements is text, except that invoking the HTML fragment parsing algorithm with the iframe element as the context element and the text contents as the input must result in a list of nodes that are all phrasing content, with no parse errors having occurred, with no script elements being anywhere in the list or as descendants of elements in the list, and with all the elements in the list (including their descendants) being themselves conforming. The iframe element must be empty in XML documents. The HTML parser treats markup inside iframe elements as text. ---------------------------------------------------------------------- The IDL attributes src, srcdoc, name, and sandbox must reflect the respective content attributes of the same name. The supported tokens for sandbox's DOMTokenList are the allowed values defined in the sandbox attribute and supported by the user agent. The allowFullscreen IDL attribute must reflect the allowfullscreen content attribute. The allowPaymentRequest IDL attribute must reflect the allowpaymentrequest content attribute. The referrerPolicy IDL attribute must reflect the referrerpolicy content attribute, limited to only known values. The contentDocument IDL attribute must return the Document object of the active document of the iframe element’s nested browsing context, if any and if its origin is the same origin-domain as the origin specified by the incumbent settings object, or null otherwise. The contentWindow IDL attribute must return the WindowProxy object of the iframe element’s nested browsing context, if any, or null otherwise. Here is an example of a page using an iframe to include advertising from an advertising broker: 4.7.7. The embed element Categories: Flow content. Phrasing content. Embedded content. Interactive content. Palpable content. Contexts in which this element can be used: Where embedded content is expected. Content model: Nothing. Tag omission in text/html: No end tag Content attributes: Global attributes src - Address of the resource type - Type of embedded resource width - Horizontal dimension height- Vertical dimension Any other attribute that has no namespace (see prose). Allowed ARIA role attribute values: application, document or img or presentation. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: interface HTMLEmbedElement : HTMLElement { attribute DOMString src; attribute DOMString type; attribute DOMString width; attribute DOMString height; legacycaller any (any... arguments); }; Depending on the type of content instantiated by the embed element, the node may also support other interfaces. The embed element provides an integration point for an external (typically non-HTML) application or interactive content. The src attribute gives the address of the resource being embedded. The attribute, if present, must contain a valid non-empty URL potentially surrounded by spaces. The type attribute, if present, gives the MIME type by which the plugin to instantiate is selected. The value must be a valid mime type. If both the type attribute and the src attribute are present, then the type attribute must specify the same type as the explicit Content-Type metadata of the resource given by the src attribute. While any of the following conditions are occurring, any plugin instantiated for the element must be removed, and the embed element represents nothing: * The element has neither a src attribute nor a type attribute. * The element has a media element ancestor. * The element has an ancestor object element that is not showing its fallback content. An embed element is said to be potentially active when the following conditions are all met simultaneously: * The element is in a Document or was in a Document the last time the event loop reached step 1. * The element’s node document is fully active. * The element has either a src attribute set or a type attribute set (or both). * The element’s src attribute is either absent or its value is not the empty string. * The element is not a descendant of a media element. * The element is not a descendant of an object element that is not showing its fallback content. * The element is being rendered, or was being rendered the last time the event loop reached step 1. Whenever an embed element that was not potentially active becomes potentially active, and whenever a potentially active embed element that is remaining potentially active and has its src attribute set, changed, or removed or its type attribute set, changed, or removed, the user agent must queue a task using the embed task source to run the embed element setup steps. The embed element setup steps are as follows: 1. If another task has since been queued to run the embed element setup steps for this element, then abort these steps. 2. If the element has a src attribute set The user agent must parse the value of the element’s src attribute, relative to the element. If that is successful, the user agent should run these steps: 1. Let request be a new request whose URL is the resulting URL string, client is the element’s node document’s Window object’s environment settings object, destination is "unknown", omit-Origin-header flag is set if the element doesn’t have a browsing context scope origin, credentials mode is "include", and whose use-URL-credentials flag is set. 2. Fetch request. The task that is queued by the networking task source once the resource has been fetched must run the following steps: 1. If another task has since been queued to run the embed element setup steps for this element, then abort these steps. 2. Determine the type of the content being embedded, as follows (stopping at the first substep that determines the type): 1. If the element has a type attribute, and that attribute’s value is a type that a plugin supports, then the value of the type attribute is the content’s type. 2. Otherwise, if applying the URL parser algorithm to the URL of the specified resource (after any redirects) results in a URL record whose path component matches a pattern that a plugin supports, then the content’s type is the type that the plugin can handle. For example, a plugin might say that it can handle resources with path components that end with the four character string ".swf". 3. Otherwise, if the specified resource has explicit Content-Type metadata, then that is the content’s type. 4. Otherwise, the content has no type and there can be no appropriate plugin for it. 3. If the previous step determined that the content’s type is image/svg+xml, then run the following substeps: 1. If the embed element is not associated with a nested browsing context, associate the element with a newly created nested browsing context, and, if the element has a name attribute, set the browsing context name of the element’s nested browsing context to the value of this attribute. 2. Navigate the nested browsing context to the fetched resource, with replacement enabled, and with the embed element’s node document’s browsing context as the source browsing context. (The src attribute of the embed element doesn’t get updated if the browsing context gets further navigated to other locations.) 3. The embed element now represents its associated nested browsing context. 4. Otherwise, find and instantiate an appropriate plugin based on the content’s type, and hand that plugin the content of the resource, replacing any previously instantiated plugin for the element. The embed element now represents this plugin instance. 5. Once the resource or plugin has completely loaded, queue a task to fire a simple event named load at the element. Whether the resource is fetched successfully or not (e.g., whether the response status was an ok status) must be ignored when determining the content’s type and when handing the resource to the plugin. This allows servers to return data for plugins even with error responses (e.g., HTTP 500 Internal Server Error codes can still contain plugin data). Fetching the resource must delay the load event of the element’s node document. If the element has no src attribute set The user agent should find and instantiate an appropriate plugin based on the value of the type attribute. The embed element now represents this plugin instance. Once the plugin is completely loaded, queue a task to fire a simple event named load at the element. The embed element has no fallback content. If the user agent can’t find a suitable plugin when attempting to find and instantiate one for the algorithm above, then the user agent must use a default plugin. This default could be as simple as saying "Unsupported Format". Whenever an embed element that was potentially active stops being potentially active, any plugin that had been instantiated for that element must be unloaded. When a plugin is to be instantiated but it cannot be secured and the sandboxed plugins browsing context flag is set on the embed element’s node document’s active sandboxing flag set, then the user agent must not instantiate the plugin, and must instead render the embed element in a manner that conveys that the plugin was disabled. The user agent may offer the user the option to override the sandbox and instantiate the plugin anyway; if the user invokes such an option, the user agent must act as if the conditions above did not apply for the purposes of this element. Plugins that cannot be secured are disabled in sandboxed browsing contexts because they might not honor the restrictions imposed by the sandbox (e.g., they might allow scripting even when scripting in the sandbox is disabled). User agents should convey the danger of overriding the sandbox to the user if an option to do so is provided. When an embed element represents a nested browsing context: if the embed element’s nested browsing context’s active document is not ready for post-load tasks, and when anything is delaying the load event of the embed element’s browsing context’s active document, and when the embed element’s browsing context is in the delaying load events mode, the embed must delay the load event of its document. The task source for the tasks mentioned in this section is the DOM manipulation task source. Any namespace-less attribute other than name, align, hspace, and vspace may be specified on the embed element, so long as its name is XML-compatible and contains no uppercase ASCII letters. These attributes are then passed as parameters to the plugin. All attributes in HTML documents get lowercased automatically, so the restriction on uppercase letters doesn’t affect such documents. The four exceptions are to exclude legacy attributes that have side-effects beyond just sending parameters to the plugin. The user agent should pass the names and values of all the attributes of the embed element that have no namespace to the plugin used, when one is instantiated. The HTMLEmbedElement object representing the element must expose the scriptable interface of the plugin instantiated for the embed element, if any. At a minimum, this interface must implement the legacy caller operation. (It is suggested that the default behavior of this legacy caller operation, e.g., the behavior of the default plugin’s legacy caller operation, be to throw a NotSupportedError exception.) The embed element supports dimension attributes. The IDL attributes src and type each must reflect the respective content attributes of the same name. Here’s a way to embed a resource that requires a proprietary plugin, like Flash: If the user does not have the plugin (for example if the plugin vendor doesn’t support the user’s platform), then the user will be unable to use the resource. To pass the plugin a parameter "quality" with the value "high", an attribute can be specified: This would be equivalent to the following, when using an object element instead: 4.7.8. The object element Categories: Flow content. Phrasing content. Embedded content. listed, submittable, and reassociateable form-associated element. Palpable content. Contexts in which this element can be used: Where embedded content is expected. Content model: Zero or more param elements, then, transparent. Tag omission in text/html: Neither tag is omissible. Content attributes: Global attributes data - Address of the resource type - Type of embedded resource typemustmatch - Whether the type attribute and the Content-Type value need to match for the resource to be used name - Name of nested browsing context form - Associates the control with a form element width - Horizontal dimension height - Vertical dimension Allowed ARIA role attribute values: application, document or img or presentation. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: interface HTMLObjectElement : HTMLElement { attribute DOMString data; attribute DOMString type; attribute boolean typeMustMatch; attribute DOMString name; readonly attribute HTMLFormElement? form; attribute DOMString width; attribute DOMString height; readonly attribute Document? contentDocument; readonly attribute WindowProxy? contentWindow; readonly attribute boolean willValidate; readonly attribute ValidityState validity; readonly attribute DOMString validationMessage; boolean checkValidity(); boolean reportValidity(); void setCustomValidity(DOMString error); legacycaller any (any... arguments); }; Depending on the type of content instantiated by the object element, the node also supports other interfaces. The object element can represent an external resource, which, depending on the type of the resource, will either be treated as an image, as a nested browsing context, or as an external resource to be processed by a plugin. The data attribute, if present, specifies the address of the resource. If present, the attribute must be a valid non-empty URL potentially surrounded by spaces. Authors who reference resources from other origins that they do not trust are urged to use the typemustmatch attribute defined below. Without that attribute, it is possible in certain cases for an attacker on the remote host to use the plugin mechanism to run arbitrary scripts, even if the author has used features such as the Flash "allowScriptAccess" parameter. The type attribute, if present, specifies the type of the resource. If present, the attribute must be a valid mime type. At least one of either the data attribute or the type attribute must be present. The typemustmatch attribute is a boolean attribute whose presence indicates that the resource specified by the data attribute is only to be used if the value of the type attribute and the Content-Type of the aforementioned resource match. The typemustmatch attribute must not be specified unless both the data attribute and the type attribute are present. The name attribute, if present, must be a valid browsing context name. The given value is used to name the nested browsing context, if applicable. Whenever one of the following conditions occur: * the element is created, * the element is popped off the stack of open elements of an HTML parser or XML parser, * the element is not on the stack of open elements of an HTML parser or XML parser, and it is either inserted into a document or removed from a document, * the element’s node document changes whether it is fully active, * one of the element’s ancestor object elements changes to or from showing its fallback content, * the element’s classid attribute is set, changed, or removed, * the element’s classid attribute is not present, and its data attribute is set, changed, or removed, * neither the element’s classid attribute nor its data attribute are present, and its type attribute is set, changed, or removed, * the element changes from being rendered to not being rendered, or vice versa, ...the user agent must queue a task to run the following steps to (re)determine what the object element represents. This task being queued or actively running must delay the load event of the element’s node document. 1. If the user has indicated a preference that this object element’s fallback content be shown instead of the element’s usual behavior, then jump to the step below labeled fallback. For example, a user could ask for the element’s fallback content to be shown because that content uses a format that the user finds more accessible. 2. If the element has an ancestor media element, or has an ancestor object element that is not showing its fallback content, or if the element is not in a Document with a browsing context, or if the element’s node document is not fully active, or if the element is still in the stack of open elements of an HTML parser or XML parser, or if the element is not being rendered, or if the Should element be blocked a priori by Content Security Policy? algorithm returns "Blocked" when executed on the element, then jump to the step below labeled fallback. [CSP3]. 3. If the classid attribute is present, and has a value that isn’t the empty string, then: if the user agent can find a plugin suitable according to the value of the classid attribute, and either plugins aren’t being sandboxed or that plugin can be secured, then that plugin should be used, and the value of the data attribute, if any, should be passed to the plugin. If no suitable plugin can be found, or if the plugin reports an error, jump to the step below labeled fallback. 4. If the data attribute is present and its value is not the empty string, then: 1. If the type attribute is present and its value is not a type that the user agent supports, and is not a type that the user agent can find a plugin for, then the user agent may jump to the step below labeled fallback without fetching the content to examine its real type. 2. Parse the URL specified by the data attribute, relative to the element. 3. If that failed, fire a simple event named error at the element, then jump to the step below labeled fallback. 4. Let request be a new request whose URL is the resulting URL string, client is the element’s node document’s Window object’s environment settings object, destination is "unknown", omit-Origin-header flag is set if the element doesn’t have a browsing context scope origin, credentials mode is "include", and whose use-URL-credentials flag is set. 5. Fetch request. Fetching the resource must delay the load event of the element’s node document until the task that is queued by the networking task source once the resource has been fetched (defined next) has been run. 6. If the resource is not yet available (e.g., because the resource was not available in the cache, so that loading the resource required making a request over the network), then jump to the step below labeled fallback. The task that is queued by the networking task source once the resource is available must restart this algorithm from this step. Resources can load incrementally; user agents may opt to consider a resource "available" whenever enough data has been obtained to begin processing the resource. 7. If the load failed (e.g., there was an HTTP 404 error, there was a DNS error), fire a simple event named error at the element, then jump to the step below labeled fallback. 8. Determine the resource type, as follows: 1. Let the resource type be unknown. 2. If the object element has a type attribute and a typemustmatch attribute, and the resource has associated Content-Type metadata, and the type specified in the resource’s Content-Type metadata is an ASCII case-insensitive match for the value of the element’s type attribute, then let resource type be that type and jump to the step below labeled handler. 3. If the object element has a typemustmatch attribute, jump to the step below labeled handler. 4. If the user agent is configured to strictly obey Content-Type headers for this resource, and the resource has associated Content-Type metadata, then let the resource type be the type specified in the resource’s Content-Type metadata, and jump to the step below labeled handler. This can introduce a vulnerability, wherein a site is trying to embed a resource that uses a particular plugin, but the remote site overrides that and instead furnishes the user agent with a resource that triggers a different plugin with different security characteristics. 5. If there is a type attribute present on the object element, and that attribute’s value is not a type that the user agent supports, but it is a type that a plugin supports, then let the resource type be the type specified in that type attribute, and jump to the step below labeled handler. 6. Run the appropriate set of steps from the following list: If the resource has associated Content-Type metadata 1. Let binary be false. 2. If the type specified in the resource’s Content-Type metadata is "text/plain", and the result of applying the rules for distinguishing if a resource is text or binary to the resource is that the resource is not text/plain, then set binary to true. 3. If the type specified in the resource’s Content-Type metadata is "application/octet-stream", then set binary to true. 4. If binary is false, then let the resource type be the type specified in the resource’s Content-Type metadata, and jump to the step below labeled handler. 5. If there is a type attribute present on the object element, and its value is not application/octet-stream, then run the following steps: 1. If the attribute’s value is a type that a plugin supports, or the attribute’s value is a type that starts with "image/" that is not also an XML MIME type, then let the resource type be the type specified in that type attribute. 2. Jump to the step below labeled handler. Otherwise, if the resource does not have associated Content-Type metadata 1. If there is a type attribute present on the object element, then let the tentative type be the type specified in that type attribute. Otherwise, let tentative type be the computed type of the resource. 2. If tentative type is not application/octet-stream, then let resource type be tentative type and jump to the step below labeled handler. 7. If applying the URL parser algorithm to the URL of the specified resource (after any redirects) results in a URL record whose path component matches a pattern that a plugin supports, then let resource type be the type that the plugin can handle. For example, a plugin might say that it can handle resources with path components that end with the four character string ".swf". It is possible for this step to finish, or for one of the substeps above to jump straight to the next step, with resource type still being unknown. In both cases, the next step will trigger fallback. 9. Handler: Handle the content as given by the first of the following cases that matches: If the resource type is not a type that the user agent supports, but it is a type that a plugin supports If plugins are being sandboxed and the plugin that supports resource type cannot be secured, jump to the step below labeled fallback. Otherwise, the user agent should use the plugin that supports resource type and pass the content of the resource to that plugin. If the plugin reports an error, then jump to the step below labeled fallback. If the resource type is an XML MIME type, or if the resource type does not start with "image/" The object element must be associated with a newly created nested browsing context, if it does not already have one. If the URL of the given resource is not about:blank, the element’s nested browsing context must then be navigated to that resource, with replacement enabled, and with the object element’s node document’s browsing context as the source browsing context. (The data attribute of the object element doesn’t get updated if the browsing context gets further navigated to other locations.) If the URL of the given resource is about:blank, then, instead, the user agent must queue a task to fire a simple event named load at the object element. No load event is fired at the about:blank document itself. The object element represents the nested browsing context. If the name attribute is present, the browsing context name must be set to the value of this attribute; otherwise, the browsing context name must be set to the empty string. If the resource type starts with "image/", and support for images has not been disabled Apply the image sniffing rules to determine the type of the image. The object element represents the specified image. The image is not a nested browsing context. If the image cannot be rendered, e.g., because it is malformed or in an unsupported format, jump to the step below labeled fallback. Otherwise The given resource type is not supported. Jump to the step below labeled fallback. If the previous step ended with the resource type being unknown, this is the case that is triggered. 10. The element’s contents are not part of what the object element represents. 11. Abort these steps. Once the resource is completely loaded, queue a task to fire a simple event named load at the element. 5. If the data attribute is absent but the type attribute is present, and the user agent can find a plugin suitable according to the value of the type attribute, and either plugins aren’t being sandboxed or the plugin can be secured, then that plugin should be used. If these conditions cannot be met, or if the plugin reports an error, jump to the step below labeled fallback. Otherwise abort these steps; once the plugin is completely loaded, queue a task to fire a simple event named load at the element. 6. Fallback: The object element represents the element’s children, ignoring any leading param element children. This is the element’s fallback content. If the element has an instantiated plugin, then unload it. When the algorithm above instantiates a plugin, the user agent should pass to the plugin used the names and values of all the attributes on the element, in the order they were added to the element, with the attributes added by the parser being ordered in source order, followed by a parameter named "PARAM" whose value is null, followed by all the names and values of parameters given by param elements that are children of the object element, in tree order. If the plugin supports a scriptable interface, the HTMLObjectElement object representing the element should expose that interface. The object element represents the plugin. The plugin is not a nested browsing context. Plugins are considered sandboxed for the purpose of an object element if the sandboxed plugins browsing context flag is set on the object element’s node document’s active sandboxing flag set. Due to the algorithm above, the contents of object elements act as fallback content, used only when referenced resources can’t be shown (e.g., because it returned a 404 error). This allows multiple object elements to be nested inside each other, targeting multiple user agents with different capabilities, with the user agent picking the first one it supports. When an object element represents a nested browsing context: if the object element’s nested browsing context’s active document is not ready for post-load tasks, and when anything is delaying the load event of the object element’s browsing context’s active document, and when the object element’s browsing context is in the delaying load events mode, the object must delay the load event of its document. The task source for the tasks mentioned in this section is the DOM manipulation task source. Whenever the name attribute is set, if the object element has a nested browsing context, its name must be changed to the new value. If the attribute is removed, if the object element has a browsing context, the browsing context name must be set to the empty string. The form attribute is used to explicitly associate the object element with its form owner. Constraint validation: object elements are always barred from constraint validation. The object element supports dimension attributes. The IDL attributes data, type and name each must reflect the respective content attributes of the same name. The typeMustMatch IDL attribute must reflect the typemustmatch content attribute. The contentDocument IDL attribute must return the Document object of the active document of the object element’s nested browsing context, if any and if its origin is the same origin-domain as the origin specified by the incumbent settings object, or null otherwise. The contentWindow IDL attribute must return the WindowProxy object of the object element’s nested browsing context, if it has one; otherwise, it must return null. The willValidate, validity, and validationMessage attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the constraint validation API. The form IDL attribute is part of the element’s forms API. All object elements have a legacy caller operation. If the object element has an instantiated plugin that supports a scriptable interface that defines a legacy caller operation, then that must be the behavior of the object’s legacy caller operation. Otherwise, the object’s legacy caller operation must be to throw a NotSupportedError exception. In the following example, a Java applet is embedded in a page using the object element. (Generally speaking, it is better to avoid using applets like these and instead use native JavaScript and HTML to provide the functionality, since that way the application will work on all Web browsers without requiring a third-party plugin. Many devices, especially embedded devices, do not support third-party technologies like Java.)

    You do not have Java available, or it is disabled.

    My Java Clock
    In this example, an HTML page is embedded in another using the object element.
    My HTML Clock
    The following example shows how a plugin can be used in HTML (in this case the Flash plugin, to show a video file). Fallback is provided for users who do not have Flash enabled, in this case using the video element to show the video for those using user agents that support video, and finally providing a link to the video for those who have neither Flash nor a video-capable browser.

    Look at my video:

    4.7.9. The param element Categories: None. Contexts in which this element can be used: As a child of an object element, before any flow content. Content model: Nothing. Tag omission in text/html: No end tag Content attributes: Global attributes name - Name of parameter value - Value of parameter Allowed ARIA role attribute values: None Allowed ARIA state and property attributes: Global aria-* attributes DOM interface: interface HTMLParamElement : HTMLElement { attribute DOMString name; attribute DOMString value; }; The param element defines parameters for plugins invoked by object elements. It does not represent anything on its own. The name attribute gives the name of the parameter. The value attribute gives the value of the parameter. Both attributes must be present. They may have any value. If both attributes are present, and if the parent element of the param is an object element, then the element defines a parameter with the given name-value pair. If either the name or value of a parameter defined by a param element that is the child of an object element that represents an instantiated plugin changes, and if that plugin is communicating with the user agent using an API that features the ability to update the plugin when the name or value of a parameter so changes, then the user agent must appropriately exercise that ability to notify the plugin of the change. The IDL attributes name and value must both reflect the respective content attributes of the same name. The following example shows how the param element can be used to pass a parameter to a plugin, in this case the O3D plugin. O3D Utah Teapot

    When O3D renders the Utah Teapot, it appears as a squat
           teapot with a shiny metallic finish on which the
           surroundings are reflected, with a faint shadow caused by
           the lighting.

    To see the teapot actually rendered by O3D on your computer, please download and install the O3D plugin.

    4.7.10. The video element Categories: Flow content. Phrasing content. Embedded content. If the element has a controls attribute: interactive content. Palpable content. Contexts in which this element can be used: Where embedded content is expected. Content model: If the element has a src attribute: zero or more track elements, then transparent, but with no media element descendants. If the element does not have a src attribute: zero or more source elements, then zero or more track elements, then transparent, but with no media element descendants. Tag omission in text/html: Neither tag is omissible Content attributes: Global attributes src - Address of the resource crossorigin - How the element handles crossorigin requests poster - Poster frame to show prior to video playback preload - Hints how much buffering the media resource will likely need autoplay - Hint that the media resource can be started automatically when the page is loaded loop - Whether to loop the media resource muted - Whether to mute the media resource by default controls - Show user agent controls width - Horizontal dimension height - Vertical dimension Allowed ARIA role attribute values: application. Allowed ARIA state and property attributes: Global aria-* attributes Any aria-* attributes applicable to the allowed roles. DOM interface: interface HTMLVideoElement : HTMLMediaElement { attribute unsigned long width; attribute unsigned long height; readonly attribute unsigned long videoWidth; readonly attribute unsigned long videoHeight; attribute DOMString poster; }; A video element is used for playing videos or movies, and audio files with captions. Content may be provided inside the video element. User agents should not show this content to the user; it is intended for older Web browsers which do not support video, so that legacy video plugins can be tried, or to show text to the users of these older browsers informing them of how to access the video contents. In particular, this content is not intended to address accessibility concerns. To make video content accessible to people with disabilities, a variety of features are available. Captions and sign language tracks can be embedded in the video stream, or as external files using the track element. Audio descriptions can be provided, either as a separate track embedded in the video stream, or by referencing a WebVTT file with the track element that the user agent can present as synthesized speech. WebVTT can also be used to provide chapter titles. For users who would rather not use a media element at all, transcripts or other textual alternatives can be provided by simply linking to them in the prose near the video element. [WEBVTT] The video element is a media element whose media data is ostensibly video data, possibly with associated audio data. The src, preload, autoplay, loop, muted, and controls attributes are the attributes common to all media elements. The poster content attribute gives the address of an image file that the user agent can show while no video data is available. The attribute, if present, must contain a valid non-empty URL potentially surrounded by spaces. If the specified resource is to be used, then, when the element is created or when the poster attribute is set, changed, or removed, the user agent must run the following steps to determine the element’s poster frame (regardless of the value of the element’s show poster flag): 1. If there is an existing instance of this algorithm running for this video element, abort that instance of this algorithm without changing the poster frame. 2. If the poster attribute’s value is the empty string or if the attribute is absent, then there is no poster frame; abort these steps. 3. Parse the poster attribute’s value relative to the element. If this fails, then there is no poster frame; abort these steps. 4. Let request be a new request whose URL is the resulting URL string, client is the element’s node document’s Window object’s environment settings object, type is "image", destination is "subresource", credentials mode is "include", and whose use-URL-credentials flag is set. 5. Fetch request. This must delay the load event of the element’s node document. 6. If an image is thus obtained, the poster frame is that image. Otherwise, there is no poster frame. The image given by the poster attribute, the poster frame, is intended to be a representative frame of the video (typically one of the first non-blank frames) that gives the user an idea of what the video is like. ---------------------------------------------------------------------- A video element represents what is given for the first matching condition in the list below: When no video data is available (the element’s readyState attribute is either HAVE_NOTHING, or HAVE_METADATA but no video data has yet been obtained at all, or the element’s readyState attribute is any subsequent value but the media resource does not have a video channel) The video element represents its poster frame, if any, or else transparent black with no intrinsic dimensions. When the video element is paused, the current playback position is the first frame of video, and the element’s show poster flag is set The video element represents its poster frame, if any, or else the first frame of the video. When the video element is paused, and the frame of video corresponding to the current playback position is not available (e.g., because the video is seeking or buffering) When the video element is neither potentially playing nor paused (e.g., when seeking or stalled) The video element represents the last frame of the video to have been rendered. When the video element is paused The video element represents the frame of video corresponding to the current playback position. Otherwise (the video element has a video channel and is potentially playing) The video element represents the frame of video at the continuously increasing "current" position. When the current playback position changes such that the last frame rendered is no longer the frame corresponding to the current playback position in the video, the new frame must be rendered. Frames of video must be obtained from the video track that was selected when the event loop last reached step 1. Which frame in a video stream corresponds to a particular playback position is defined by the video stream’s format. The video element also represents any text track cues whose text track cue active flag is set and whose text track is in the showing mode, and any audio from the media resource, at the current playback position. Any audio associated with the media resource must, if played, be played synchronized with the current playback position, at the element’s effective media volume. The user agent must play the audio from audio tracks that were enabled when the event loop last reached step 1. In addition to the above, the user agent may provide messages to the user (such as "buffering", "no video loaded", "error", or more detailed information) by overlaying text or icons on the video or other areas of the element’s playback area, or in another appropriate manner. User agents that cannot render the video may instead make the element represent a link to an external video playback utility or to the video data itself. When a video element’s media resource has a video channel, the element provides a paint source whose width is the media resource’s intrinsic width, whose height is the media resource’s intrinsic height, and whose appearance is the frame of video corresponding to the current playback position, if that is available, or else (e.g., when the video is seeking or buffering) its previous appearance, if any, or else (e.g., because the video is still loading the first frame) blackness. ---------------------------------------------------------------------- video . videoWidth video . videoHeight These attributes return the intrinsic dimensions of the video, or zero if the dimensions are not known. The intrinsic width and intrinsic height of the media resource are the dimensions of the resource in CSS pixels after taking into account the resource’s dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for