Table of contents

  1. 1 Introduction
    1. 1.1 Where does this specification fit?
    2. 1.2 Is this HTML5?
    3. 1.3 Background
    4. 1.4 Audience
    5. 1.5 Scope
    6. 1.6 History
    7. 1.7 Design notes
      1. 1.7.1 Serialisability of script execution
      2. 1.7.2 Compliance with other specifications
      3. 1.7.3 Extensibility
    8. 1.8 HTML vs XHTML
    9. 1.9 Structure of this specification
      1. 1.9.1 How to read this specification
      2. 1.9.2 Typographic conventions
    10. 1.10 Privacy concerns
    11. 1.11 A quick introduction to HTML
      1. 1.11.1 Writing secure applications with HTML
      2. 1.11.2 Common pitfalls to avoid when using the scripting APIs
      3. 1.11.3 How to catch mistakes when writing HTML: validators and conformance checkers
    12. 1.12 Conformance requirements for authors
      1. 1.12.1 Presentational markup
      2. 1.12.2 Syntax errors
      3. 1.12.3 Restrictions on content models and on attribute values
    13. 1.13 Suggested reading
  2. 2 Common infrastructure
    1. 2.1 Terminology
      1. 2.1.1 Resources
      2. 2.1.2 XML
      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 Lists of integers
        6. 2.4.4.6 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 Local 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 Colours
      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 Resolving 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 CORS-enabled fetch
    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 HTMLAllCollection
        2. 2.7.2.2 HTMLFormControlsCollection
        3. 2.7.2.3 HTMLOptionsCollection
        4. 2.7.2.4 HTMLPropertiesCollection
      3. 2.7.3 DOMStringMap
      4. 2.7.4 DOMElementMap
      5. 2.7.5 Transferable objects
      6. 2.7.6 Safe passing of structured data
      7. 2.7.7 Callbacks
      8. 2.7.8 Garbage collection
    8. 2.8 Namespaces
  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
      4. 3.1.4 Loading XML documents
    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 id attribute
        2. 3.2.5.2 The title attribute
        3. 3.2.5.3 The lang and xml:lang attributes
        4. 3.2.5.4 The translate attribute
        5. 3.2.5.5 The xml:base attribute (XML only)
        6. 3.2.5.6 The dir attribute
        7. 3.2.5.7 The class attribute
        8. 3.2.5.8 The style attribute
        9. 3.2.5.9 Embedding custom non-visible data with the data-* attributes
      6. 3.2.6 Requirements relating to the bidirectional algorithm
        1. 3.2.6.1 Authoring conformance criteria for bidirectional-algorithm formatting characters
        2. 3.2.6.2 User agent conformance criteria
      7. 3.2.7 WAI-ARIA
  4. 4 The elements of HTML
    1. 4.1 The root 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
      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 hgroup element
      8. 4.3.8 The header element
      9. 4.3.9 The footer element
      10. 4.3.10 The address element
      11. 4.3.11 Headings and sections
        1. 4.3.11.1 Creating an outline
        2. 4.3.11.2 Sample outlines
      12. 4.3.12 Usage summary
        1. 4.3.12.1 Article or section?
    4. 4.4 Grouping content
      1. 4.4.1 The p element
      2. 4.4.2 The hr element
      3. 4.4.3 The pre element
      4. 4.4.4 The blockquote element
      5. 4.4.5 The ol element
      6. 4.4.6 The ul element
      7. 4.4.7 The li element
      8. 4.4.8 The dl element
      9. 4.4.9 The dt element
      10. 4.4.10 The dd element
      11. 4.4.11 The figure element
      12. 4.4.12 The figcaption element
      13. 4.4.13 The main element
      14. 4.4.14 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 rt element
      12. 4.5.12 The rp element
      13. 4.5.13 The data element
      14. 4.5.14 The time element
      15. 4.5.15 The code element
      16. 4.5.16 The var element
      17. 4.5.17 The samp element
      18. 4.5.18 The kbd element
      19. 4.5.19 The sub and sup elements
      20. 4.5.20 The i element
      21. 4.5.21 The b element
      22. 4.5.22 The u element
      23. 4.5.23 The mark element
      24. 4.5.24 The bdi element
      25. 4.5.25 The bdo element
      26. 4.5.26 The span element
      27. 4.5.27 The br element
      28. 4.5.28 The wbr element
      29. 4.5.29 Usage summary
    6. 4.6 Links
      1. 4.6.1 Introduction
      2. 4.6.2 Links created by a and area elements
      3. 4.6.3 Following hyperlinks
      4. 4.6.4 Downloading resources
        1. 4.6.4.1 Hyperlink auditing
      5. 4.6.5 Link types
        1. 4.6.5.1 Link type "alternate"
        2. 4.6.5.2 Link type "author"
        3. 4.6.5.3 Link type "bookmark"
        4. 4.6.5.4 Link type "external"
        5. 4.6.5.5 Link type "help"
        6. 4.6.5.6 Link type "icon"
        7. 4.6.5.7 Link type "license"
        8. 4.6.5.8 Link type "nofollow"
        9. 4.6.5.9 Link type "noreferrer"
        10. 4.6.5.10 Link type "pingback"
        11. 4.6.5.11 Link type "prefetch"
        12. 4.6.5.12 Link type "search"
        13. 4.6.5.13 Link type "sidebar"
        14. 4.6.5.14 Link type "stylesheet"
        15. 4.6.5.15 Link type "tag"
        16. 4.6.5.16 Sequential link types
          1. 4.6.5.16.1 Link type "next"
          2. 4.6.5.16.2 Link type "prev"
        17. 4.6.5.17 Other link types
    7. 4.7 Edits
      1. 4.7.1 The ins element
      2. 4.7.2 The del element
      3. 4.7.3 Attributes common to ins and del elements
      4. 4.7.4 Edits and paragraphs
      5. 4.7.5 Edits and lists
      6. 4.7.6 Edits and tables
    8. 4.8 Embedded content
      1. 4.8.1 Introduction
      2. 4.8.2 Dependencies
      3. 4.8.3 The picture element
      4. 4.8.4 The source element when used with the picture element
      5. 4.8.5 The img element
        1. 4.8.5.1 Requirements for providing text to act as an alternative for images
          1. 4.8.5.1.1 General guidelines
          2. 4.8.5.1.2 A link or button containing nothing but the image
          3. 4.8.5.1.3 A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations
          4. 4.8.5.1.4 A short phrase or label with an alternative graphical representation: icons, logos
          5. 4.8.5.1.5 Text that has been rendered to a graphic for typographical effect
          6. 4.8.5.1.6 A graphical representation of some of the surrounding text
          7. 4.8.5.1.7 A purely decorative image that doesn't add any information
          8. 4.8.5.1.8 A group of images that form a single larger picture with no links
          9. 4.8.5.1.9 A group of images that form a single larger picture with links
          10. 4.8.5.1.10 A key part of the content
          11. 4.8.5.1.11 An image not intended for the user
          12. 4.8.5.1.12 An image in an e-mail or private document intended for a specific person who is known to be able to view images
          13. 4.8.5.1.13 Guidance for markup generators
          14. 4.8.5.1.14 Guidance for conformance checkers
      6. 4.8.6 The iframe element
      7. 4.8.7 The embed element
      8. 4.8.8 The object element
      9. 4.8.9 The param element
      10. 4.8.10 The video element
      11. 4.8.11 The audio element
      12. 4.8.12 The source element
      13. 4.8.13 The track element
      14. 4.8.14 Media elements
        1. 4.8.14.1 Error codes
        2. 4.8.14.2 Location of the media resource
        3. 4.8.14.3 MIME types
        4. 4.8.14.4 Network states
        5. 4.8.14.5 Loading the media resource
        6. 4.8.14.6 Offsets into the media resource
        7. 4.8.14.7 Ready states
        8. 4.8.14.8 Playing the media resource
        9. 4.8.14.9 Seeking
        10. 4.8.14.10 Media resources with multiple media tracks
          1. 4.8.14.10.1 AudioTrackList and VideoTrackList objects
          2. 4.8.14.10.2 Selecting specific audio and video tracks declaratively
        11. 4.8.14.11 Synchronising multiple media elements
          1. 4.8.14.11.1 Introduction
          2. 4.8.14.11.2 Media controllers
          3. 4.8.14.11.3 Assigning a media controller declaratively
        12. 4.8.14.12 Timed text tracks
          1. 4.8.14.12.1 Text track model
          2. 4.8.14.12.2 Sourcing in-band text tracks
          3. 4.8.14.12.3 Sourcing out-of-band text tracks
          4. 4.8.14.12.4 Guidelines for exposing cues in various formats as text track cues
          5. 4.8.14.12.5 Text track API
          6. 4.8.14.12.6 Text tracks describing chapters
          7. 4.8.14.12.7 Event handlers for objects of the text track APIs
          8. 4.8.14.12.8 Best practices for metadata text tracks
        13. 4.8.14.13 User interface
        14. 4.8.14.14 Time ranges
        15. 4.8.14.15 The TrackEvent interface
        16. 4.8.14.16 Event summary
        17. 4.8.14.17 Security and privacy considerations
        18. 4.8.14.18 Best practices for authors using media elements
        19. 4.8.14.19 Best practices for implementors of media elements
      15. 4.8.15 The map element
      16. 4.8.16 The area element
      17. 4.8.17 Image maps
        1. 4.8.17.1 Authoring
        2. 4.8.17.2 Processing model
      18. 4.8.18 MathML
      19. 4.8.19 SVG
      20. 4.8.20 Dimension attributes
    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 Table sorting model
      14. 4.9.14 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 Improving the user experience on mobile devices
        7. 4.10.1.7 The difference between the field type, the autofill field name, and the input modality
        8. 4.10.1.8 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 and Time state (type=datetime)
          8. 4.10.5.1.8 Date state (type=date)
          9. 4.10.5.1.9 Month state (type=month)
          10. 4.10.5.1.10 Week state (type=week)
          11. 4.10.5.1.11 Time state (type=time)
          12. 4.10.5.1.12 Local Date and Time state (type=datetime-local)
          13. 4.10.5.1.13 Number state (type=number)
          14. 4.10.5.1.14 Range state (type=range)
          15. 4.10.5.1.15 Colour state (type=color)
          16. 4.10.5.1.16 Checkbox state (type=checkbox)
          17. 4.10.5.1.17 Radio Button state (type=radio)
          18. 4.10.5.1.18 File Upload state (type=file)
          19. 4.10.5.1.19 Submit Button state (type=submit)
          20. 4.10.5.1.20 Image Button state (type=image)
          21. 4.10.5.1.21 Reset Button state (type=reset)
          22. 4.10.5.1.22 Button state (type=button)
        2. 4.10.5.2 Implemention 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 keygen element
      13. 4.10.13 The output element
      14. 4.10.14 The progress element
      15. 4.10.15 The meter element
      16. 4.10.16 The fieldset element
      17. 4.10.17 The legend element
      18. 4.10.18 Form control infrastructure
        1. 4.10.18.1 A form control's value
        2. 4.10.18.2 Mutability
        3. 4.10.18.3 Association of controls and forms
      19. 4.10.19 Attributes common to form controls
        1. 4.10.19.1 Naming form controls: the name attribute
        2. 4.10.19.2 Submitting element directionality: the dirname attribute
        3. 4.10.19.3 Limiting user input length: the maxlength attribute
        4. 4.10.19.4 Setting minimum input length requirements: the minlength attribute
        5. 4.10.19.5 Enabling and disabling form controls: the disabled attribute
        6. 4.10.19.6 Form submission
          1. 4.10.19.6.1 Autofocusing a form control: the autofocus attribute
        7. 4.10.19.7 Input modalities: the inputmode attribute
        8. 4.10.19.8 Autofill
          1. 4.10.19.8.1 Autofilling form controls: the autocomplete attribute
          2. 4.10.19.8.2 Processing model
          3. 4.10.19.8.3 User interface for bulk autofill
          4. 4.10.19.8.4 The AutocompleteErrorEvent interface
      20. 4.10.20 APIs for the text field selections
      21. 4.10.21 Constraints
        1. 4.10.21.1 Definitions
        2. 4.10.21.2 Constraint validation
        3. 4.10.21.3 The constraint validation API
        4. 4.10.21.4 Security
      22. 4.10.22 Form submission
        1. 4.10.22.1 Introduction
        2. 4.10.22.2 Implicit submission
        3. 4.10.22.3 Form submission algorithm
        4. 4.10.22.4 Constructing the form data set
        5. 4.10.22.5 Selecting a form submission encoding
        6. 4.10.22.6 URL-encoded form data
        7. 4.10.22.7 Multipart form data
        8. 4.10.22.8 Plain text form data
      23. 4.10.23 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 The menu element
      4. 4.11.4 The menuitem element
      5. 4.11.5 Context menus
        1. 4.11.5.1 Declaring a context menu
        2. 4.11.5.2 Processing model
        3. 4.11.5.3 The RelatedEvent interfaces
      6. 4.11.6 Commands
        1. 4.11.6.1 Facets
        2. 4.11.6.2 Using the a element to define a command
        3. 4.11.6.3 Using the button element to define a command
        4. 4.11.6.4 Using the input element to define a command
        5. 4.11.6.5 Using the option element to define a command
        6. 4.11.6.6 Using the menuitem element to define a command
        7. 4.11.6.7 Using the command attribute on menuitem elements to define a command indirectly
        8. 4.11.6.8 Using the accesskey attribute on a label element to define a command
        9. 4.11.6.9 Using the accesskey attribute on a legend element to define a command
        10. 4.11.6.10 Using the accesskey attribute to define a command on other elements
      7. 4.11.7 The dialog element
        1. 4.11.7.1 Anchor points
    12. 4.12 Scripting
      1. 4.12.1 The script element
        1. 4.12.1.1 Scripting languages
        2. 4.12.1.2 Restrictions for contents of script elements
        3. 4.12.1.3 Inline documentation for external scripts
        4. 4.12.1.4 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 Proxying canvases to workers
        2. 4.12.4.2 The 2D rendering context
          1. 4.12.4.2.1 Implementation notes
          2. 4.12.4.2.2 The canvas state
          3. 4.12.4.2.3 DrawingStyle objects
          4. 4.12.4.2.4 Line styles
          5. 4.12.4.2.5 Text styles
          6. 4.12.4.2.6 Building paths
          7. 4.12.4.2.7 Path2D objects
          8. 4.12.4.2.8 Transformations
          9. 4.12.4.2.9 Image sources for 2D rendering contexts
          10. 4.12.4.2.10 Fill and stroke styles
          11. 4.12.4.2.11 Drawing rectangles to the bitmap
          12. 4.12.4.2.12 Drawing text to the bitmap
          13. 4.12.4.2.13 Drawing paths to the canvas
          14. 4.12.4.2.14 Drawing images
          15. 4.12.4.2.15 Hit regions
          16. 4.12.4.2.16 Pixel manipulation
          17. 4.12.4.2.17 Compositing
          18. 4.12.4.2.18 Image smoothing
          19. 4.12.4.2.19 Shadows
          20. 4.12.4.2.20 Drawing model
          21. 4.12.4.2.21 Best practices
          22. 4.12.4.2.22 Examples
        3. 4.12.4.3 Colour spaces and colour correction
        4. 4.12.4.4 Serialising bitmaps to a file
        5. 4.12.4.5 Security with canvas elements
    13. 4.13 Common idioms without dedicated elements
      1. 4.13.1 The main part of the content
      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 Microdata
    1. 5.1 Introduction
      1. 5.1.1 Overview
      2. 5.1.2 The basic syntax
      3. 5.1.3 Typed items
      4. 5.1.4 Global identifiers for items
      5. 5.1.5 Selecting names when defining vocabularies
      6. 5.1.6 Using the microdata DOM API
    2. 5.2 Encoding microdata
      1. 5.2.1 The microdata model
      2. 5.2.2 Items
      3. 5.2.3 Names: the itemprop attribute
      4. 5.2.4 Values
      5. 5.2.5 Associating names with items
      6. 5.2.6 Microdata and other namespaces
    3. 5.3 Microdata DOM API
    4. 5.4 Sample microdata vocabularies
      1. 5.4.1 vCard
        1. 5.4.1.1 Conversion to vCard
        2. 5.4.1.2 Examples
      2. 5.4.2 vEvent
        1. 5.4.2.1 Conversion to iCalendar
        2. 5.4.2.2 Examples
      3. 5.4.3 Licensing works
        1. 5.4.3.1 Examples
    5. 5.5 Converting HTML to other formats
      1. 5.5.1 JSON
  6. 6 User interaction
    1. 6.1 The hidden attribute
    2. 6.2 Inert subtrees
    3. 6.3 Activation
    4. 6.4 Focus
      1. 6.4.1 Introduction
      2. 6.4.2 Data model
      3. 6.4.3 The tabindex attribute
      4. 6.4.4 Processing model
      5. 6.4.5 Sequential focus navigation
      6. 6.4.6 Focus management APIs
    5. 6.5 Assigning keyboard shortcuts
      1. 6.5.1 Introduction
      2. 6.5.2 The accesskey attribute
      3. 6.5.3 Processing model
    6. 6.6 Editing
      1. 6.6.1 Making document regions editable: The contenteditable content attribute
      2. 6.6.2 Making entire documents editable: The designMode IDL attribute
      3. 6.6.3 Best practices for in-page editors
      4. 6.6.4 Editing APIs
      5. 6.6.5 Spelling and grammar checking
    7. 6.7 Drag and drop
      1. 6.7.1 Introduction
      2. 6.7.2 The drag data store
      3. 6.7.3 The DataTransfer interface
        1. 6.7.3.1 The DataTransferItemList interface
        2. 6.7.3.2 The DataTransferItem interface
      4. 6.7.4 The DragEvent interface
      5. 6.7.5 Drag-and-drop processing model
      6. 6.7.6 Events summary
      7. 6.7.7 The draggable attribute
      8. 6.7.8 The dropzone attribute
      9. 6.7.9 Security risks in the drag-and-drop model
  7. 7 Loading Web pages
    1. 7.1 Browsing contexts
      1. 7.1.1 Nested browsing contexts
        1. 7.1.1.1 Navigating nested browsing contexts in the DOM
      2. 7.1.2 Auxiliary browsing contexts
        1. 7.1.2.1 Navigating auxiliary browsing contexts in the DOM
      3. 7.1.3 Secondary browsing contexts
      4. 7.1.4 Security
      5. 7.1.5 Groupings of browsing contexts
      6. 7.1.6 Browsing context names
    2. 7.2 The Window object
      1. 7.2.1 Security
      2. 7.2.2 APIs for creating and navigating browsing contexts by name
      3. 7.2.3 Accessing other browsing contexts
      4. 7.2.4 Named access on the Window object
      5. 7.2.5 Garbage collection and browsing contexts
      6. 7.2.6 Closing browsing contexts
      7. 7.2.7 Browser interface elements
      8. 7.2.8 The WindowProxy object
    3. 7.3 Origin
      1. 7.3.1 Relaxing the same-origin restriction
    4. 7.4 Sandboxing
    5. 7.5 Session history and navigation
      1. 7.5.1 The session history of browsing contexts
      2. 7.5.2 The History interface
      3. 7.5.3 The Location interface
        1. 7.5.3.1 Security
      4. 7.5.4 Implementation notes for session history
    6. 7.6 Browsing the Web
      1. 7.6.1 Navigating across documents
      2. 7.6.2 Page load processing model for HTML files
      3. 7.6.3 Page load processing model for XML files
      4. 7.6.4 Page load processing model for text files
      5. 7.6.5 Page load processing model for multipart/x-mixed-replace resources
      6. 7.6.6 Page load processing model for media
      7. 7.6.7 Page load processing model for content that uses plugins
      8. 7.6.8 Page load processing model for inline content that doesn't have a DOM
      9. 7.6.9 Navigating to a fragment identifier
      10. 7.6.10 History traversal
        1. 7.6.10.1 The PopStateEvent interface
        2. 7.6.10.2 The HashChangeEvent interface
        3. 7.6.10.3 The PageTransitionEvent interface
      11. 7.6.11 Unloading documents
        1. 7.6.11.1 The BeforeUnloadEvent interface
      12. 7.6.12 Aborting a document load
    7. 7.7 Offline Web applications
      1. 7.7.1 Introduction
        1. 7.7.1.1 Supporting offline caching for legacy applications
        2. 7.7.1.2 Event summary
      2. 7.7.2 Application caches
      3. 7.7.3 The cache manifest syntax
        1. 7.7.3.1 Some sample manifests
        2. 7.7.3.2 Writing cache manifests
        3. 7.7.3.3 Parsing cache manifests
      4. 7.7.4 Downloading or updating an application cache
      5. 7.7.5 The application cache selection algorithm
      6. 7.7.6 Changes to the networking model
      7. 7.7.7 Expiring application caches
      8. 7.7.8 Disk space
      9. 7.7.9 Application cache API
      10. 7.7.10 Browser state
  8. 8 Web application APIs
    1. 8.1 Scripting
      1. 8.1.1 Introduction
      2. 8.1.2 Enabling and disabling scripting
      3. 8.1.3 Processing model
        1. 8.1.3.1 Definitions
        2. 8.1.3.2 Script settings for browsing contexts
        3. 8.1.3.3 Calling scripts
        4. 8.1.3.4 Creating scripts
        5. 8.1.3.5 Killing scripts
        6. 8.1.3.6 Runtime script errors
          1. 8.1.3.6.1 Runtime script errors in documents
          2. 8.1.3.6.2 The ErrorEvent interface
      4. 8.1.4 Event loops
        1. 8.1.4.1 Definitions
        2. 8.1.4.2 Processing model
        3. 8.1.4.3 Generic task sources
      5. 8.1.5 Events
        1. 8.1.5.1 Event handlers
        2. 8.1.5.2 Event handlers on elements, Document objects, and Window objects
          1. 8.1.5.2.1 IDL definitions
        3. 8.1.5.3 Event firing
        4. 8.1.5.4 Events and the Window object
    2. 8.2 Base64 utility methods
    3. 8.3 Dynamic markup insertion
      1. 8.3.1 Opening the input stream
      2. 8.3.2 Closing the input stream
      3. 8.3.3 document.write()
      4. 8.3.4 document.writeln()
    4. 8.4 Timers
    5. 8.5 User prompts
      1. 8.5.1 Simple dialogs
      2. 8.5.2 Printing
      3. 8.5.3 Dialogs implemented using separate documents
    6. 8.6 System state and capabilities
      1. 8.6.1 The Navigator object
        1. 8.6.1.1 Client identification
        2. 8.6.1.2 Language preferences
        3. 8.6.1.3 Custom scheme and content handlers
          1. 8.6.1.3.1 Security and privacy
          2. 8.6.1.3.2 Sample user interface
        4. 8.6.1.4 Manually releasing the storage mutex
        5. 8.6.1.5 Plugins
      2. 8.6.2 The External interface
    7. 8.7 Images
  9. 9 Communication
    1. 9.1 The MessageEvent interfaces
    2. 9.2 Server-sent events
      1. 9.2.1 Introduction
      2. 9.2.2 The EventSource interface
      3. 9.2.3 Processing model
      4. 9.2.4 Parsing an event stream
      5. 9.2.5 Interpreting an event stream
      6. 9.2.6 Authoring notes
      7. 9.2.7 Connectionless push and other features
      8. 9.2.8 Garbage collection
      9. 9.2.9 Implementation advice
      10. 9.2.10 IANA considerations
        1. 9.2.10.1 text/event-stream
        2. 9.2.10.2 Last-Event-ID
    3. 9.3 Web sockets
      1. 9.3.1 Introduction
      2. 9.3.2 The WebSocket interface
      3. 9.3.3 Feedback from the protocol
      4. 9.3.4 Ping and Pong frames
      5. 9.3.5 Parsing WebSocket URLs
      6. 9.3.6 The CloseEvent interfaces
      7. 9.3.7 Garbage collection
    4. 9.4 Cross-document messaging
      1. 9.4.1 Introduction
      2. 9.4.2 Security
        1. 9.4.2.1 Authors
        2. 9.4.2.2 User agents
      3. 9.4.3 Posting messages
    5. 9.5 Channel messaging
      1. 9.5.1 Introduction
        1. 9.5.1.1 Examples
        2. 9.5.1.2 Ports as the basis of an object-capability model on the Web
        3. 9.5.1.3 Ports as the basis of abstracting out service implementations
      2. 9.5.2 Message channels
      3. 9.5.3 Message ports
      4. 9.5.4 Broadcasting to many ports
      5. 9.5.5 Ports and garbage collection
    6. 9.6 Broadcasting to other browsing contexts
  10. 10 Web workers
    1. 10.1 Introduction
      1. 10.1.1 Scope
      2. 10.1.2 Examples
        1. 10.1.2.1 A background number-crunching worker
        2. 10.1.2.2 Worker used for background I/O
        3. 10.1.2.3 Shared workers introduction
        4. 10.1.2.4 Shared state using a shared worker
        5. 10.1.2.5 Delegation
      3. 10.1.3 Tutorials
        1. 10.1.3.1 Creating a dedicated worker
        2. 10.1.3.2 Communicating with a dedicated worker
        3. 10.1.3.3 Shared workers
    2. 10.2 Infrastructure
      1. 10.2.1 The global scope
        1. 10.2.1.1 The WorkerGlobalScope common interface
        2. 10.2.1.2 Dedicated workers and the DedicatedWorkerGlobalScope interface
        3. 10.2.1.3 Shared workers and the SharedWorkerGlobalScope interface
      2. 10.2.2 The event loop
      3. 10.2.3 The worker's lifetime
      4. 10.2.4 Processing model
      5. 10.2.5 Runtime script errors
      6. 10.2.6 Creating workers
        1. 10.2.6.1 The AbstractWorker abstract interface
        2. 10.2.6.2 Script settings for workers
        3. 10.2.6.3 Dedicated workers and the Worker interface
        4. 10.2.6.4 Shared workers and the SharedWorker interface
    3. 10.3 APIs available to workers
      1. 10.3.1 Importing scripts and libraries
      2. 10.3.2 The WorkerNavigator object
      3. 10.3.3 Worker locations
  11. 11 Web storage
    1. 11.1 Introduction
    2. 11.2 The API
      1. 11.2.1 The Storage interface
      2. 11.2.2 The sessionStorage attribute
      3. 11.2.3 The localStorage attribute
      4. 11.2.4 The storage event
        1. 11.2.4.1 The StorageEvent interface
      5. 11.2.5 Threads
    3. 11.3 Disk space
    4. 11.4 Privacy
      1. 11.4.1 User tracking
      2. 11.4.2 Sensitivity of data
    5. 11.5 Security
      1. 11.5.1 DNS spoofing attacks
      2. 11.5.2 Cross-directory attacks
      3. 11.5.3 Implementation risks
  12. 12 The HTML syntax
    1. 12.1 Writing HTML documents
      1. 12.1.1 The DOCTYPE
      2. 12.1.2 Elements
        1. 12.1.2.1 Start tags
        2. 12.1.2.2 End tags
        3. 12.1.2.3 Attributes
        4. 12.1.2.4 Optional tags
        5. 12.1.2.5 Restrictions on content models
        6. 12.1.2.6 Restrictions on the contents of raw text and escapable raw text elements
      3. 12.1.3 Text
        1. 12.1.3.1 Newlines
      4. 12.1.4 Character references
      5. 12.1.5 CDATA sections
      6. 12.1.6 Comments
    2. 12.2 Parsing HTML documents
      1. 12.2.1 Overview of the parsing model
      2. 12.2.2 The input byte stream
        1. 12.2.2.1 Parsing with a known character encoding
        2. 12.2.2.2 Determining the character encoding
        3. 12.2.2.3 Character encodings
        4. 12.2.2.4 Changing the encoding while parsing
        5. 12.2.2.5 Preprocessing the input stream
      3. 12.2.3 Parse state
        1. 12.2.3.1 The insertion mode
        2. 12.2.3.2 The stack of open elements
        3. 12.2.3.3 The list of active formatting elements
        4. 12.2.3.4 The element pointers
        5. 12.2.3.5 Other parsing state flags
      4. 12.2.4 Tokenization
        1. 12.2.4.1 Data state
        2. 12.2.4.2 Character reference in data state
        3. 12.2.4.3 RCDATA state
        4. 12.2.4.4 Character reference in RCDATA state
        5. 12.2.4.5 RAWTEXT state
        6. 12.2.4.6 Script data state
        7. 12.2.4.7 PLAINTEXT state
        8. 12.2.4.8 Tag open state
        9. 12.2.4.9 End tag open state
        10. 12.2.4.10 Tag name state
        11. 12.2.4.11 RCDATA less-than sign state
        12. 12.2.4.12 RCDATA end tag open state
        13. 12.2.4.13 RCDATA end tag name state
        14. 12.2.4.14 RAWTEXT less-than sign state
        15. 12.2.4.15 RAWTEXT end tag open state
        16. 12.2.4.16 RAWTEXT end tag name state
        17. 12.2.4.17 Script data less-than sign state
        18. 12.2.4.18 Script data end tag open state
        19. 12.2.4.19 Script data end tag name state
        20. 12.2.4.20 Script data escape start state
        21. 12.2.4.21 Script data escape start dash state
        22. 12.2.4.22 Script data escaped state
        23. 12.2.4.23 Script data escaped dash state
        24. 12.2.4.24 Script data escaped dash dash state
        25. 12.2.4.25 Script data escaped less-than sign state
        26. 12.2.4.26 Script data escaped end tag open state
        27. 12.2.4.27 Script data escaped end tag name state
        28. 12.2.4.28 Script data double escape start state
        29. 12.2.4.29 Script data double escaped state
        30. 12.2.4.30 Script data double escaped dash state
        31. 12.2.4.31 Script data double escaped dash dash state
        32. 12.2.4.32 Script data double escaped less-than sign state
        33. 12.2.4.33 Script data double escape end state
        34. 12.2.4.34 Before attribute name state
        35. 12.2.4.35 Attribute name state
        36. 12.2.4.36 After attribute name state
        37. 12.2.4.37 Before attribute value state
        38. 12.2.4.38 Attribute value (double-quoted) state
        39. 12.2.4.39 Attribute value (single-quoted) state
        40. 12.2.4.40 Attribute value (unquoted) state
        41. 12.2.4.41 Character reference in attribute value state
        42. 12.2.4.42 After attribute value (quoted) state
        43. 12.2.4.43 Self-closing start tag state
        44. 12.2.4.44 Bogus comment state
        45. 12.2.4.45 Markup declaration open state
        46. 12.2.4.46 Comment start state
        47. 12.2.4.47 Comment start dash state
        48. 12.2.4.48 Comment state
        49. 12.2.4.49 Comment end dash state
        50. 12.2.4.50 Comment end state
        51. 12.2.4.51 Comment end bang state
        52. 12.2.4.52 DOCTYPE state
        53. 12.2.4.53 Before DOCTYPE name state
        54. 12.2.4.54 DOCTYPE name state
        55. 12.2.4.55 After DOCTYPE name state
        56. 12.2.4.56 After DOCTYPE public keyword state
        57. 12.2.4.57 Before DOCTYPE public identifier state
        58. 12.2.4.58 DOCTYPE public identifier (double-quoted) state
        59. 12.2.4.59 DOCTYPE public identifier (single-quoted) state
        60. 12.2.4.60 After DOCTYPE public identifier state
        61. 12.2.4.61 Between DOCTYPE public and system identifiers state
        62. 12.2.4.62 After DOCTYPE system keyword state
        63. 12.2.4.63 Before DOCTYPE system identifier state
        64. 12.2.4.64 DOCTYPE system identifier (double-quoted) state
        65. 12.2.4.65 DOCTYPE system identifier (single-quoted) state
        66. 12.2.4.66 After DOCTYPE system identifier state
        67. 12.2.4.67 Bogus DOCTYPE state
        68. 12.2.4.68 CDATA section state
        69. 12.2.4.69 Tokenizing character references
      5. 12.2.5 Tree construction
        1. 12.2.5.1 Creating and inserting nodes
        2. 12.2.5.2 Parsing elements that contain only text
        3. 12.2.5.3 Closing elements that have implied end tags
        4. 12.2.5.4 The rules for parsing tokens in HTML content
          1. 12.2.5.4.1 The "initial" insertion mode
          2. 12.2.5.4.2 The "before html" insertion mode
          3. 12.2.5.4.3 The "before head" insertion mode
          4. 12.2.5.4.4 The "in head" insertion mode
          5. 12.2.5.4.5 The "in head noscript" insertion mode
          6. 12.2.5.4.6 The "after head" insertion mode
          7. 12.2.5.4.7 The "in body" insertion mode
          8. 12.2.5.4.8 The "text" insertion mode
          9. 12.2.5.4.9 The "in table" insertion mode
          10. 12.2.5.4.10 The "in table text" insertion mode
          11. 12.2.5.4.11 The "in caption" insertion mode
          12. 12.2.5.4.12 The "in column group" insertion mode
          13. 12.2.5.4.13 The "in table body" insertion mode
          14. 12.2.5.4.14 The "in row" insertion mode
          15. 12.2.5.4.15 The "in cell" insertion mode
          16. 12.2.5.4.16 The "in select" insertion mode
          17. 12.2.5.4.17 The "in select in table" insertion mode
          18. 12.2.5.4.18 The "in template" insertion mode
          19. 12.2.5.4.19 The "after body" insertion mode
          20. 12.2.5.4.20 The "in frameset" insertion mode
          21. 12.2.5.4.21 The "after frameset" insertion mode
          22. 12.2.5.4.22 The "after after body" insertion mode
          23. 12.2.5.4.23 The "after after frameset" insertion mode
        5. 12.2.5.5 The rules for parsing tokens in foreign content
      6. 12.2.6 The end
      7. 12.2.7 Coercing an HTML DOM into an infoset
      8. 12.2.8 An introduction to error handling and strange cases in the parser
        1. 12.2.8.1 Misnested tags: <b><i></b></i>
        2. 12.2.8.2 Misnested tags: <b><p></b></p>
        3. 12.2.8.3 Unexpected markup in tables
        4. 12.2.8.4 Scripts that modify the page as it is being parsed
        5. 12.2.8.5 The execution of scripts that are moving across multiple documents
        6. 12.2.8.6 Unclosed formatting elements
    3. 12.3 Serialising HTML fragments
    4. 12.4 Parsing HTML fragments
    5. 12.5 Named character references
  13. 13 The XHTML syntax
    1. 13.1 Writing XHTML documents
    2. 13.2 Parsing XHTML documents
    3. 13.3 Serialising XHTML fragments
    4. 13.4 Parsing XHTML fragments
  14. 14 Rendering
    1. 14.1 Introduction
    2. 14.2 The CSS user agent style sheet and presentational hints
    3. 14.3 Non-replaced elements
      1. 14.3.1 Hidden elements
      2. 14.3.2 The page
      3. 14.3.3 Flow content
      4. 14.3.4 Phrasing content
      5. 14.3.5 Bidirectional text
      6. 14.3.6 Quotes
      7. 14.3.7 Sections and headings
      8. 14.3.8 Lists
      9. 14.3.9 Tables
      10. 14.3.10 Margin collapsing quirks
      11. 14.3.11 Form controls
      12. 14.3.12 The hr element
      13. 14.3.13 The fieldset and legend elements
    4. 14.4 Replaced elements
      1. 14.4.1 Embedded content
      2. 14.4.2 Images
      3. 14.4.3 Attributes for embedded content and images
      4. 14.4.4 Image maps
    5. 14.5 Bindings
      1. 14.5.1 Introduction
      2. 14.5.2 The button element
      3. 14.5.3 The details element
      4. 14.5.4 The input element as a text entry widget
      5. 14.5.5 The input element as domain-specific widgets
      6. 14.5.6 The input element as a range control
      7. 14.5.7 The input element as a colour well
      8. 14.5.8 The input element as a checkbox and radio button widgets
      9. 14.5.9 The input element as a file upload control
      10. 14.5.10 The input element as a button
      11. 14.5.11 The marquee element
      12. 14.5.12 The meter element
      13. 14.5.13 The progress element
      14. 14.5.14 The select element
      15. 14.5.15 The textarea element
      16. 14.5.16 The keygen element
    6. 14.6 Frames and framesets
    7. 14.7 Interactive media
      1. 14.7.1 Links, forms, and navigation
      2. 14.7.2 The title attribute
      3. 14.7.3 Editing hosts
      4. 14.7.4 Text rendered in native user interfaces
    8. 14.8 Print media
    9. 14.9 Unstyled XML documents
  15. 15 Obsolete features
    1. 15.1 Obsolete but conforming features
      1. 15.1.1 Warnings for obsolete but conforming features
    2. 15.2 Non-conforming features
    3. 15.3 Requirements for implementations
      1. 15.3.1 The applet element
      2. 15.3.2 The marquee element
      3. 15.3.3 Frames
      4. 15.3.4 Other elements, attributes and APIs
  16. 16 IANA considerations
    1. 16.1 text/html
    2. 16.2 multipart/x-mixed-replace
    3. 16.3 application/xhtml+xml
    4. 16.4 application/x-www-form-urlencoded
    5. 16.5 text/cache-manifest
    6. 16.6 text/ping
    7. 16.7 application/microdata+json
    8. 16.8 Ping-From
    9. 16.9 Ping-To
    10. 16.10 web+ scheme prefix
  17. Index
    1. Elements
    2. Element content categories
    3. Attributes
    4. Element Interfaces
    5. All Interfaces
    6. Events
    7. MIME Types
  18. References
  19. Acknowledgements

1 Introduction

1.1 Where does this specification fit?

This specification defines a big part of the Web platform, in lots of detail. Its place in the Web platform specification stack relative to other specifications can be best summed up as follows:

It consists of everything else, above such core technologies as HTTP, URI/IRIs, DOM, XML, Unicode, and ECMAScript; below presentation-layer technologies like CSS and the NPAPI; and to the side of technologies like Geolocation, SVG, MathML, and XHR.

1.2 Is this HTML5?

This section is non-normative.

In short: Yes.

In more length: The term "HTML5" is widely used as a buzzword to refer to modern Web technologies, many of which (though by no means all) are developed at the WHATWG. This document is one such; others are available from the WHATWG specification index.

Although we have asked them to stop doing so, the W3C also republishes some parts of this specification as separate documents. There are numerous differences between this specification and the W3C forks; some minor, some major. Unfortunately these are not currently accurately documented anywhere, so there is no way to know which are intentional and which are not.

1.3 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.4 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.5 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.6 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. HTML4 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 HTML4 in XML, known as XHTML 1.0, which added no new features except the new serialisation, 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 XHTML2.

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 HTML4'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 HTML5 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 HTML5 specification include what had previously been specified in three separate documents: HTML4, XHTML1, and DOM2 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 HTML5 after all, and in 2007 formed a working group chartered to work with the WHATWG on the development of the HTML5 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. In 2011, however, the groups came to the conclusion that they had different goals: the W3C wanted to publish a "finished" version of "HTML5", while the WHATWG wanted to continue working on a Living Standard for HTML, continuously maintaining the specification rather than freezing it in a state with known problems, and adding new features as needed to evolve the platform.

Since then, the WHATWG has been working on this specification (amongst others), and the W3C has been copying fixes made by the WHATWG into their fork of the document, as well as making other changes, some intentional and some not, with no documentation listing or explaining the differences.

1.7 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.7.1 Serialisability 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 serialising the execution of all scripts in all browsing contexts.

The navigator.yieldForStorageUpdates() method, in this model, is equivalent to allowing other scripts to run while the calling script is blocked.

1.7.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.7.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:

1.8 HTML vs XHTML

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 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 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.9 Structure of this specification

This section is non-normative.

This specification is divided into the following major sections:

Introduction
Non-normative materials providing a context for the HTML standard.
Common infrastructure
The conformance classes, algorithms, definitions, and the common underpinnings of the rest of the specification.
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.
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.
Microdata
This specification introduces a mechanism for adding machine-readable annotations to documents, so that tools can extract trees of name-value pairs from the document. This section describes this mechanism and some algorithms that can be used to convert HTML documents into other formats. This section also defines some sample Microdata vocabularies for contact information, calendar events, and licensing works.
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.
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.
Web application APIs
This section introduces basic features for scripting of applications in HTML.
Web workers
This section defines an API for background threads in JavaScript.
The communication APIs
This section describes some mechanisms that applications written in HTML can use to communicate with other applications from different domains running on the same client. It also introduces a server-push event stream mechanism known as Server Sent Events or EventSource, and a two-way full-duplex socket protocol for scripts known as Web Sockets.
Web storage
This section defines a client-side storage mechanism based on name-value pairs.
The HTML syntax
The XHTML syntax
All of these features would be for naught if they couldn't be represented in a serialised 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.
Rendering
This section defines the default rendering rules for Web browsers.

There are also some appendices, listing obsolete features and IANA considerations, and several indices.

1.9.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.9.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.

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.10 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 anonymise 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 minimise 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 or less by definition. 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:

1.11 A quick introduction to HTML

This section is non-normative.

A basic HTML document looks like this:

<!DOCTYPE html>
<html>
 <head>
  <title>Sample page</title>
 </head>
 <body>
  <h1>Sample page</h1>
  <p>This is a <a href="demo.html">simple</a> sample.</p>
  <!-- this is a comment -->
 </body>
</html>

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:

<p>This is <em>very <strong>wrong</em>!</strong></p>
<p>This <em>is <strong>correct</strong>.</em></p>

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:

<a href="demo.html">simple</a>

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.

<!-- empty attributes -->
<input name=address disabled>
<input name=address disabled="">

<!-- attributes with a value -->
<input name=address maxlength=200>
<input name=address maxlength='200'>
<input name=address maxlength="200">

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:

The root element of this tree is the html element, which is the element always found at the root of 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 whitespace before head start tag ends up being dropped silently, and all the whitespace 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":

<form name="main">
 Result: <output name="result"></output>
 <script>
  document.forms.main.elements.result.value = 'Hello World';
 </script>
</form>

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 synthesiser, 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.

<!DOCTYPE html>
<html>
 <head>
  <title>Sample styled page</title>
  <style>
   body { background: navy; color: yellow; }
  </style>
 </head>
 <body>
  <h1>Sample styled page</h1>
  <p>This page is just a demo.</p>
 </body>
</html>

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.11.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 whitelist-based, allowing known-safe constructs and disallowing all other input. Blacklist-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:

<ul>
 <li><a href="message.cgi?say=Hello">Say Hello</a>
 <li><a href="message.cgi?say=Welcome">Say Welcome</a>
 <li><a href="message.cgi?say=Kittens">Say Kittens</a>
</ul>

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 whitelist filters:

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.11.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 asynchronously and 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:

<img src="games.png" alt="Games" onload="gamesLogoHasLoaded(event)">

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:

<script>
 var img = new Image();
 img.src = 'games.png';
 img.alt = 'Games';
 img.onload = gamesLogoHasLoaded;
 // img.addEventListener('load', gamesLogoHasLoaded, false); // would work also
</script>

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:

<!-- Do not use this style, it has a race condition! -->
 <img id="games" src="games.png" alt="Games">
 <!-- the 'load' event might fire here while the parser is taking a
      break, in which case you will not see it! -->
 <script>
  var img = document.getElementById('games');
  img.onload = gamesLogoHasLoaded; // might never fire!
 </script>

1.11.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 WHATWG maintains a list of such tools at: http://validator.whatwg.org/

1.12 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.12.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 work for more users (e.g. 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 colour of a site that uses <font color=""> 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; HTML4 deprecated presentational markup many years ago and provided a mode (HTML4 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.12.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:

<table><hr>...
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 <table><hr>... 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 comments never containing two consecutive hyphens, 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.

Errors that result in disproportionally poor performance

Certain syntax constructs can result in disproportionally 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:

<p><i>He dreamt.
<p><i>He dreamt that he ate breakfast.
<p><i>Then lunch.
<p><i>And finally dinner.

The resulting DOM for this fragment would be:

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":

<a href="?bill&ted">Bill and Ted</a>

In the following fragment, however, the attribute's value is actually "?art©", not the intended "?art&copy", because even without the final semicolon, "&copy" is handled the same as "&copy;" and thus gets interpreted as "©":

<a href="?art&copy">Art and Copy</a>

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:

<a href="?bill&ted">Bill and Ted</a> <!-- &ted is ok, since it's not a named character reference -->
<a href="?art&amp;copy">Art and Copy</a> <!-- the & has to be escaped, since &copy is a named character reference -->
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. [UTF7]

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:

<h1>Contact details</h2>
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 <capton> 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.12.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.

<hr role="cell">
<input type=radio role=progressbar>

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:

<p>Welcome. <form><label>Name:</label> <input></form>

It is parsed exactly like the following:

<p>Welcome. </p><form><label>Name:</label> <input></form>
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 serialisation), 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 serialisation, 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 queries use only valid media queries reinforces the importance of following the conformance rules of that specification.

1.13 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 Standard 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 [UTR36]

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 [WCAG]

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 [ATAG]

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 [UAAG]

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.

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 serialised 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. [DOM] (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.

The term "transparent black" refers to the colour 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] [MQ]

A string is a valid MIME type if it matches the media-type rule defined in section 3.1.1.1 "Media Type" of RFC 7231. 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 defined in section 3.1.1.1 "Media Type" of RFC 7231, 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

To ease migration from HTML to XHTML, UAs 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". [RFC3023]

2.1.3 DOM trees

The root element of a Document object is that Document's first element child, if any. If it does not have one then the Document has no root element.

The term root element, when not referring to a Document object's root element, means the furthest ancestor element node of whatever node is being discussed, or the node itself if it has no ancestors. When the node is a part of the document, then the node's root element is indeed the document's root element; however, if the node is not currently part of the document tree, the root element will be an orphaned node.

When an element's root element is the root element of a Document object, it is said to be in a Document. An element is said to have been inserted into a document when its root element changes and is now the document's root element. Analogously, an element is said to have been removed from a document when its root element changes from being the document's root element to being another element.

A node's home subtree is the subtree rooted at that node's root element. When a node is in a Document, its home subtree is that Document's tree.

The Document of a Node (such as an element) is the Document that the Node's ownerDocument IDL attribute returns. When a Node is in a Document then that Document is always the Node's Document, and the Node's ownerDocument IDL attribute thus always returns that Document.

The Document of a content attribute is the Document of the attribute's element.

The term tree order means a pre-order, depth-first traversal of DOM nodes involved (through the parentNode/childNodes relationship).

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 of 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).

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 initialised to true. [DOM]

2.1.5 Plugins

The term plugin refers to a user-agent defined set of content handlers used by the user agent that 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 UAs 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 those in the user agent.

Since different users having differents 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 WHATWG Encoding standard. An encoding has an encoding name and one or more encoding labels, referred to as the encoding's name and labels in the Encoding standard. [ENCODING]

An ASCII-compatible character encoding is a single-byte or variable-length encoding in which the bytes 0x09, 0x0A, 0x0C, 0x0D, 0x20 - 0x22, 0x26, 0x27, 0x2C - 0x3F, 0x41 - 0x5A, and 0x61 - 0x7A, ignoring bytes that are the second and later bytes of multibyte sequences, all correspond to single-byte sequences that map to the same Unicode characters as those bytes in Windows-1252. [ENCODING]

This includes such encodings as Shift_JIS, HZ-GB-2312, and variants of ISO-2022, even though it is possible in these encodings for bytes like 0x70 to be part of longer sequences that are unrelated to their interpretation as ASCII. It excludes UTF-16 variants, as well as obsolete legacy encodings such as UTF-7, GSM03.38, and EBCDIC variants.

The term a UTF-16 encoding refers to any variant of UTF-16: UTF-16LE or UTF-16BE, regardless of the presence or absence of a BOM. [ENCODING]

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", "SHOULD", "SHOULD NOT", "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 UAs) and overhead displays (dynamic UAs). It is expected that most static non-interactive presentation user agents will also opt to lack scripting support.

A non-interactive but dynamic presentation UA 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 UA 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 colour 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 the rendering section that that section defines as 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 that when the user uses a tool for inserting contact information for a section, that the user really is doing that and not inserting something else instead.

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 WHATWG Encoding standard 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 WHATWG Encoding standard: [ENCODING]

The UTF-8 decoder is distinct from the UTF-8 decode algorithm. The latter first strips a Byte Order Mark (BOM), if any, and then invokes the former.

For readability, character encodings are sometimes referenced in this specification with a case that differs from the canonical case given in the WHATWG Encoding standard. (For example, "UTF-16LE" instead of "utf-16le".)

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 serialisation with namespaces. [XML] [XMLNS]

The attribute with the tag name xml:space in the XML namespace is defined by the XML specification. [XML]

This specification also references the <?xml-stylesheet?> processing instruction, defined in the Associating Style Sheets with XML documents specification. [XMLSSPI]

This specification also non-normatively mentions the XSLTProcessor interface and its transformToFragment() and transformToDocument() methods.

URLs

The following terms are defined in the WHATWG URL standard: [URL]

A number of schemes and protocols are referenced by this specification also:

HTTP and related specifications

The following terms are defined in the HTTP specifications: [HTTP]

The following term is defined in the Web Origin specification: [ORIGIN]

The following terms are defined in the Cookie specification: [COOKIES]

The following term is defined in the Web Linking specification: [WEBLINK]

Fetch

The following terms are defined in the WHATWG Fetch specification: [FETCH]

This specification does not yet use the "fetch" algorithm from the WHATWG Fetch specification. It will be updated to do so in due course. Some of the terms mentioned above are obsolete; this will be fixed when the spec is updated to use the new algorithm.

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:

The Web IDL specification also defines the following types that are used in Web IDL fragments in this specification:

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. [ECMA262]

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 term JavaScript global environment refers to the global environment concept defined in the ECMAScript specification.

The ECMAScript SyntaxError and TypeError exceptions are also defined in the ECMAScript specification. [ECMA262]

The ArrayBuffer and related object types and underlying concepts from the ECMAScript Specification are used for several features in this specification. [ECMA262]

The following helper IDL is used for referring to ArrayBuffer-related types:

typedef (Int8Array or Uint8Array or Uint8ClampedArray or
         Int16Array or Uint16Array or
         Int32Array or Uint32Array or
         Float32Array or Float64Array or
         DataView) ArrayBufferView;

In particular, the Uint8ClampedArray type is used by some 2D canvas APIs, and the WebSocket API uses ArrayBuffer objects for handling binary frames.

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. [DOM]

Implementations must support DOM and the events defined in DOM Events, because this specification is defined in terms of the DOM, and some of the features are defined as extensions to the DOM interfaces. [DOM] [DOMEVENTS]

In particular, the following features are defined in the DOM specification: [DOM]

The term throw in this specification is used as defined in the DOM specification. The following DOMException types are defined in the DOM specification: [DOM]

  1. IndexSizeError
  2. HierarchyRequestError
  3. WrongDocumentError
  4. InvalidCharacterError
  5. NoModificationAllowedError
  6. NotFoundError
  7. NotSupportedError
  8. InvalidStateError
  9. SyntaxError
  10. InvalidModificationError
  11. NamespaceError
  12. InvalidAccessError
  13. SecurityError
  14. NetworkError
  15. AbortError
  16. URLMismatchError
  17. QuotaExceededError
  18. TimeoutError
  19. InvalidNodeTypeError
  20. DataCloneError

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 DOM Events specification: [DOMEVENTS]

The following features are defined in the Touch Events specification: [TOUCH]

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: [DOMPARSING]

The Selection interface is defined in the HTML Editing APIs specification. [EDITING]

User agents are encouraged to implement the features described in the HTML Editing APIs specification. [EDITING]

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]

File API

This specification uses the following features defined in the File API specification: [FILEAPI]

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]

Media Queries

Implementations must support the Media Queries language. [MQ]

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 <color> 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. [CSSCOLOR] [CSS]

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 colour value, the close parenthesis is implied by this error handling rule, and a value is obtained (the colour '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 term CSS element reference identifier is used as defined in the CSS Image Values and Replaced Content specification to define the API that declares identifiers for use with the CSS 'element()' function. [CSSIMAGES]

Similarly, the term provides a 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. [CSSIMAGES]

The term default object size is also defined in the CSS Image Values and Replaced Content specification. [CSSIMAGES]

Implementations that support scripting must support the CSS Object Model. The following features and terms are defined in the CSSOM specifications: [CSSOM] [CSSOMVIEW]

The term environment encoding is defined in the CSS Syntax specifications. [CSSSYNTAX]

The term CSS styling attribute is defined in the CSS Style Attributes specification. [CSSATTR]

The CanvasRenderingContext2D object's use of fonts depends on the features described in the CSS Fonts and Font Load Events specifications, including in particular FontLoader. [CSSFONTS] [CSSFONTLOAD]

SVG

The following interface is defined in the SVG specification: [SVG]

WebGL

The following interface is defined in the WebGL specification: [WEBGL]

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:

The WebSocket protocol

The following terms are defined in the WebSocket protocol specification: [WSP]

ARIA

The terms strong native semantics is used as defined in the ARIA specification. The term default implicit ARIA semantics has the same meaning as the term implicit WAI-ARIA semantics as used in the ARIA specification. [ARIA]

The role attribute is defined in the ARIA specification, as are the following roles: [ARIA]

In addition, the following aria-* content attributes are defined in the ARIA specification: [ARIA]

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:

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 recognise 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 that 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.


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. [XPATH10]


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 serialise the output are unaffected.) [XSLT10]


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 tailoirings. [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 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 whitespace 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 whitespace 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 whitespace 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 whitespace 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 whitespace 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 whitespace.

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.

<label><input type=checkbox checked name=cheese disabled> Cheese</label>

This could be equivalently written as this:

<label><input type=checkbox checked=checked name=cheese disabled=disabled> Cheese</label>

You can also mix styles; the following is still equivalent:

<label><input type='checkbox' checked name=cheese disabled=""> Cheese</label>

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 whitespace.

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 whitespace.

  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.
      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 applying the JavaScript operator ToString to n. The JavaScript operator ToString is not uniquely determined. When there are multiple possible strings that could be obtained from the JavaScript operator 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 whitespace.

  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: 21024 and −21024.

  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 21024 and −21024 are considered to have even significands for this purpose.)

  17. If rounded-value is 21024 or −21024, 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 1.0, or an error; if a number is returned, then it is further categorised 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 whitespace.

  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. Collect a sequence of characters that are U+0030 DIGIT ZERO (0) characters, and discard them.

  7. If position is past the end of input, return an error.

  8. If the character indicated by position is not one of U+0031 DIGIT ONE (1) to U+0039 DIGIT NINE (9), then return an error.

  9. Collect a sequence of characters that are ASCII digits, and interpret the resulting sequence as a base-ten integer. Let value be that number.

  10. If position is past the end of input, return value as a length.

  11. 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.

  12. If position is past the end of input, return value as a length.

  13. If the character indicated by position is a U+0025 PERCENT SIGN character (%), return value as a percentage.

  14. Return value as a length.

2.4.4.5 Lists of integers

A valid list of integers is a number of valid integers 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 integers that can be given, or on the range of values allowed.

The rules for parsing a list of integers 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 integers. This list will be the result of this algorithm.

  4. If there is a character in the string input at position position, and it is either a U+0020 SPACE, U+002C COMMA, or U+003B SEMICOLON character, then advance position to the next character in input, or to beyond the end of the string if there are no more characters.

  5. If position points to beyond the end of input, return numbers and abort.

  6. If the character in the string input at position position is a U+0020 SPACE, U+002C COMMA, or U+003B SEMICOLON character, then return to step 4.

  7. Let negated be false.

  8. Let value be 0.

  9. Let started be false. This variable is set to true when the parser sees a number or a U+002D HYPHEN-MINUS character (-).

  10. Let got number be false. This variable is set to true when the parser sees a number.

  11. Let finished be false. This variable is set to true to switch parser into a mode where it ignores characters until the next separator.

  12. Let bogus be false.

  13. Parser: If the character in the string input at position position is:

    A U+002D HYPHEN-MINUS character

    Follow these substeps:

    1. If got number is true, let finished be true.
    2. If finished is true, skip to the next step in the overall set of steps.
    3. If started is true, let negated be false.
    4. Otherwise, if started is false and if bogus is false, let negated be true.
    5. Let started be true.
    An ASCII digit

    Follow these substeps:

    1. If finished is true, skip to the next step in the overall set of steps.
    2. Multiply value by ten.
    3. Add the value of the digit, interpreted in base ten, to value.
    4. Let started be true.
    5. Let got number be true.
    A U+0020 SPACE character
    A U+002C COMMA character
    A U+003B SEMICOLON character

    Follow these substeps:

    1. If got number is false, return the numbers list and abort. This happens if an entry in the list has no digits, as in "1,2,x,4".
    2. If negated is true, then negate value.
    3. Append value to the numbers list.
    4. Jump to step 4 in the overall set of steps.
    A character in the range U+0001 to U+001F, U+0021 to U+002B, U+002D to U+002F, U+003A, U+003C to U+0040, U+005B to U+0060, U+007b to U+007F (i.e. any other non-alphabetic ASCII character)

    Follow these substeps:

    1. If got number is true, let finished be true.
    2. If finished is true, skip to the next step in the overall set of steps.
    3. Let negated be false.
    Any other character

    Follow these substeps:

    1. If finished is true, skip to the next step in the overall set of steps.
    2. Let negated be false.
    3. Let bogus be true.
    4. If started is true, then return the numbers list, and abort. (The value in value is not appended to the list first; it is dropped.)
  14. Advance position to the next character in input, or to beyond the end of the string if there are no more characters.

  15. If position points to a character (and not to beyond the end of input), jump to the big Parser step above.

  16. If negated is true, then negate value.

  17. If got number is true, then append value to the numbers list.

  18. Return the numbers list and abort.

2.4.4.6 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 10length.

        3. Increment value by fraction.

    8. Skip whitespace.

    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

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]

The use of the Gregorian calendar as the wire format in this specification is an arbitrary choice resulting from the cultural biases of those involved in the decision. See also the section discussing date, time, and number formats in forms (for authors), implemention notes regarding localization of form controls, and the time element.

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

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

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.

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.

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 the collected string be second instead of its previous value.

  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 Local dates and times

A local 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 local 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 normalised local 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 local 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:

This format allows for time-zone offsets from -23:59 to +23:59. Right now, in practice, 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, since time zones are used as political footballs and are thus subject to very whimsical policy decisions.

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 timezonehours and timezoneminutes. 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 timezonehours hours and timezoneminutes 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 timezonehours be 0.

    2. Let timezoneminutes 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 timezonehours.

      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 timezoneminutes.

      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 timezonehours.

      2. Interpret the last two characters of s as a base-ten integer. Let that number be the timezoneminutes.

      Otherwise, fail.

    5. If timezonehours is not a number in the range 0 ≤ timezonehours ≤ 23, then fail.
    6. If sign is "negative", then negate timezonehours.
    7. If timezoneminutes is not a number in the range 0 ≤ timezoneminutes ≤ 59, then fail.
    8. If sign is "negative", then negate timezoneminutes.

    Otherwise, fail.

  2. Return timezonehours and timezoneminutes.

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 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 interpeted 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 in areas using London time on the birthday of Nero (the Roman Emperor). 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:

A string is a valid normalised forced-UTC 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 timezonehours and timezoneminutes. 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 timezonehours hours and timezoneminutes minutes. That moment in time is a moment in the UTC time zone.

  10. Let timezone be timezonehours hours and timezoneminutes 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:

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 whitespace.

  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 whitespace.

  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 whitespace, 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 10length.

      5. Increment N by fraction.

      6. Skip whitespace.

      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 whitespace, 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 whitespace.

  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:


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 timezonehours and timezoneminutes. 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 timezonehours hours and timezoneminutes minutes, that moment in time being a moment in the UTC time zone; let timezone be timezonehours hours and timezoneminutes minutes from UTC; and return time and timezone.

2.4.6 Colours

A simple colour consists of three 8-bit numbers in the range 0..255, representing the red, green, and blue components of the colour respectively, in the sRGB colour space. [SRGB]

A string is a valid simple colour 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 colour if it is a valid simple colour 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 colour 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 colour 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 colour.

  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 serialising simple colour values given a simple colour 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 colour.


Some obsolete legacy attributes parse colours in a more complicated manner, using the rules for parsing a legacy colour 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 colour 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 whitespace 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 keywords listed in the SVG color keywords section of the CSS3 Color specification, then return the simple colour corresponding to that keyword. [CSSCOLOR]

    CSS2 System Colors are not recognised.

  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 colour.

    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 colour.

  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.


The 2D graphics context has a separate colour syntax that also handles opacity.

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 whitespace

  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 whitespace

  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 whitespace 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 whitespace 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 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 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 if it matches the media_query_list production of the Media Queries specification. [MQ]

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 that matches the user's environment according to the definitions given in the Media Queries specification. [MQ]

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 standard. [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 whitespace 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 whitespace 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. [ABOUT]

This specification defines the URL about:srcdoc as a reserved, though unresolvable, about: URL, that is used as the document's address of iframe srcdoc documents. [ABOUT]

The fallback base URL of a Document object is the absolute URL obtained by running these substeps:

  1. If the Document is an iframe srcdoc document, then return the document base URL of the Document's browsing context's browsing context container's Document and abort these steps.

  2. If the document's address is about:blank, and the Document's browsing context has a creator browsing context, then return the document base URL of the creator Document, and abort these steps.

  3. Return the document's address.

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 Resolving URLs

Resolving a URL is the process of taking a relative URL and obtaining the absolute URL that it implies.

To resolve a URL to an absolute URL relative to either another absolute URL or an element, the user agent must use the following steps. Resolving a URL can result in an error, in which case the URL is not resolvable.

  1. Let url be the URL being resolved.

  2. Let encoding be determined as follows:

    If the URL had a character encoding defined when the URL was created or defined or when this algorithm was invoked
    The URL character encoding is as defined.
    If the URL came from a script (e.g. as an argument to a method)
    The URL character encoding is the API URL character encoding specified by the script's settings object.
    If the URL came from a DOM node (e.g. from an element)
    The node has a Document, and the URL character encoding is the document's character encoding.
  3. If encoding is a UTF-16 encoding, then change the value of encoding to UTF-8.

  4. If the algorithm was invoked with an absolute URL to use as the base URL, let base be that absolute URL.

    Otherwise, let base be the element's base URL.

  5. Apply the URL parser to url, with base as the base URL, with encoding as the encoding.

  6. If this returns failure, then abort these steps with an error.

  7. Let parsed URL be the result of the URL parser.

  8. Let serialised URL be the result of apply the URL serialiser to parsed URL.

  9. Return serialised URL as the resulting absolute URL and parsed URL as the resulting parsed URL.

Given an element, the element's base URL is the base URI of the element, as defined by the XML Base specification, with the base URI of the document entity being defined as the document base URL of the Document that owns the element. [XMLBASE]

For the purposes of the XML Base specification, user agents must act as if all Document objects represented XML documents.

It is possible for xml:base attributes to be present even in HTML fragments, as such attributes can be added dynamically using script. (Such scripts would not be conforming, however, as xml:base attributes are not allowed in HTML documents.)

2.5.3 Dynamic changes to base URLs

When an xml:base attribute is set, changed, or removed, the attribute's element, and all descendant elements, are affected by a base URL change.

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 absolute 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 re-resolved relative to the element and the UI updated appropriately.

For example, the CSS :link/:visited pseudo-classes might have been affected.

If the hyperlink has a ping attribute and its absolute URL(s) are being shown to the user, then the ping attribute's tokens should be re-resolved relative to the element and the UI updated appropriately.

If the element is a q, blockquote, ins, or del element with a cite attribute

If the absolute 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 re-resolved relative to the element 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.

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 the document's address of document.

  6. Clean referrer: Apply the URL parser to referrer and let parsed referrer be the resulting parsed URL.

  7. Let referrer be the result of applying the URL serialiser 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 asynchronously.

  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 to be obtained from an application cache, then use the data from that application cache, as if it had been obtained in the manner appropriate given its URL.

    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, then the user agent must run the following substeps:

    1. Wait until ownership of the storage mutex can be taken by this instance of the fetching algorithm.

    2. Take ownership of the storage mutex.

    3. Update the cookies. [COOKIES] (This is a fingerprinting vector.)

    4. Release the storage mutex so that it is once again free.

  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 application cache processing model introduces some changes to the networking model to handle the returning of cached resources.

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.

Anything in this specification that refers to HTTP also applies to HTTP-over-TLS, as represented by URLs using the https: scheme. [HTTPS]

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 sniffed type of a resource must be found in a manner consistent with the requirements given in the MIME Sniffing specification for finding the sniffed 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
anonymous Anonymous Cross-origin CORS requests for the element will have the omit credentials flag set.
use-credentials Use Credentials Cross-origin CORS requests for the element will not have the omit credentials flag set.

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 CORS-enabled fetch

When the user agent is required to perform a potentially CORS-enabled fetch of an absolute URL URL with a mode mode that is either "No CORS", "Anonymous", or "Use Credentials", optionally using a referrer source referrer source, with an origin origin, and with a default origin behaviour default which is either "taint" or "fail", it must run the first applicable set of steps from the following list. The default origin behaviour is only used if mode is "No CORS". This algorithm wraps the fetch algorithm above, and labels the obtained resource as either CORS-same-origin or CORS-cross-origin, or blocks the resource entirely.

If the URL has the same origin as origin
If the URL is a data: URL
If the URL is about:blank

Run these substeps:

  1. Fetch URL, using referrer source if one was specified, with the manual redirect flag set.

  2. Loop: Wait for the fetch algorithm to know if the result is a redirect or not.

  3. Follow the first appropriate steps from the following list:

    If the result of the fetch is a redirect, and the origin of the target URL of the redirect is not the same origin as origin

    Set URL to the target URL of the redirect and return to the top of the potentially CORS-enabled fetch algorithm (this time, one of the other branches below might be taken, based on the value of mode).

    If the result of the fetch is a redirect

    The origin of the target URL of the redirect is the same origin as origin.

    Transparently follow the redirect and jump to the step labeled loop above.

    Otherwise

    The resource is available, it is not a redirect, and its origin is the same origin as origin.

    The tasks from the fetch algorithm are queued normally, and for the purposes of the calling algorithm, the obtained resource is CORS-same-origin.

If mode is "No CORS" and default is taint

The URL does not have the same origin as origin.

Fetch URL, using referrer source if one was specified.

The tasks from the fetch algorithm are queued normally, but for the purposes of the calling algorithm, the obtained resource is CORS-cross-origin. The user agent may report a cross-origin resource access failure to the user (e.g. in a debugging console).

If mode is "No CORS"

The URL does not have the same origin as origin, and default is fail.

Discard any data fetched as part of this algorithm, and prevent any tasks from such invocations of the fetch algorithm from being queued. For the purposes of the calling algorithm, the user agent must act as if there was a fatal network error and no resource was obtained. The user agent may report a cross-origin resource access failure to the user (e.g. in a debugging console).

If mode is "Anonymous" or "Use Credentials"

The URL does not have the same origin as origin.

Run these steps:

  1. Perform a cross-origin request with the request URL set to URL, with the CORS referrer source set to referrer source if one was specified, the source origin set to origin, and with the omit credentials flag set if mode is "Anonymous" and not set otherwise. [FETCH]

  2. Wait for the CORS cross-origin request status to have a value.

  3. Jump to the appropriate step from the following list:

    If the CORS cross-origin request status is not success

    Discard all fetched data and prevent any tasks from the fetch algorithm from being queued. For the purposes of the calling algorithm, the user agent must act as if there was a fatal network error and no resource was obtained. If a CORS resource sharing check failed, the user agent may report a cross-origin resource access failure to the user (e.g. in a debugging console).

    If the CORS cross-origin request status is success

    The tasks from the fetch algorithm are queued normally, and for the purposes of the calling algorithm, the obtained resource is CORS-same-origin.

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 DOMString attribute whose content attribute is defined to contain a URL, then on getting, the IDL attribute must resolve the value of the content attribute relative to the element and return the resulting absolute URL if that was successful, or the empty string otherwise; and on setting, must set the content attribute to the specified literal value. If the content attribute is absent, the IDL attribute must return the default value, if the content attribute has one, or else the empty string.

If a reflecting IDL attribute is a DOMString attribute whose content attribute is defined to contain one or more URLs, then on getting, the IDL attribute must split the content attribute on spaces and return the concatenation of resolving each token URL to an absolute URL relative to the element, with a single U+0020 SPACE character between each URL, ignoring any tokens that did not resolve successfully. If the content attribute is absent, the IDL attribute must return the default value, if the content attribute has one, or else the empty string. On setting, the IDL attribute must set the content attribute to the specified literal 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 DOMString 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 or DOMSettableTokenList, then on getting it must return a DOMTokenList or DOMSettableTokenList object (as appropriate) whose associated element is the element in question and whose associated attribute's local name is the name of the attribute in question. The same DOMTokenList or DOMSettableTokenList object must be returned every time for each attribute.

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 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 home subtree as the element of the attribute being set, and the given element is the first element in that home subtree 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 HTMLAllCollection, HTMLFormControlsCollection, HTMLOptionsCollection, and HTMLPropertiesCollection interfaces are collections derived from the HTMLCollection interface.

2.7.2.1 HTMLAllCollection

The HTMLAllCollection interface is used for the legacy document.all attribute. It operates similarly to HTMLCollection; the main differences are that its namedItem() method returns an HTMLCollection object when there are multiple matching elements, and that its item() method can be used as a synonym for its namedItem() method.

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.

interface HTMLAllCollection : HTMLCollection {
  // inherits length and 'getter'
  Element? item(unsigned long index);
  (HTMLCollection or Element)? item(DOMString name);
  legacycaller getter (HTMLCollection or Element)? namedItem(DOMString name); // shadows inherited namedItem()
};
collection . length

Returns the number of elements in the collection.

element = collection . item(index)
collection[index]

Returns the item with index index from the collection. The items are sorted in tree order.

element = collection . item(name)
collection = collection . item(name)
element = collection . namedItem(name)
collection = collection . namedItem(name)
element = collection(name)
collection = collection(name)
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.

Only button, form, iframe, input, map, meta, object, select, and textarea elements can have a name for the purpose of this method; their name is given by the value of their name attribute.

The object's supported property indices are as defined for HTMLCollection objects.

The item() method, when invoked with a numeric argument, must act like the item() method inherited from HTMLCollection.

The following elements are "all"-named elements: a, applet, button, embed, form, frame, frameset, iframe, img, input, map, meta, object, select, and textarea

The supported property names consist of the non-empty values of all the id attributes of all the elements represented by the collection, and the non-empty values of all the name attributes of all the "all"-named 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 item(name) and namedItem(name) methods must act according to the following algorithm:

  1. If name is the empty string, return null and stop the algorithm.
  2. Let collection be an HTMLCollection object rooted at the same Document as the HTMLAllCollection object on which the method was invoked, whose filter matches only elements that are either:

  3. If, at the time the method is called, there is exactly one node in collection, then return that node and stop the algorithm.
  4. Otherwise, if, at the time the method is called, collection is empty, return null and stop the algorithm.
  5. Otherwise, return collection.
2.7.2.2 HTMLFormControlsCollection

The HTMLFormControlsCollection interface is used for collections of listed elements in form and fieldset elements.

interface HTMLFormControlsCollection : HTMLCollection {
  // inherits length and item()
  legacycaller 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)
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)
collection[name]
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, or if it is an element with no value attribute, return the empty string.

  3. Otherwise, return the value of element's value attribute.

On setting, the value IDL attribute must run 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 value content attribute is present and equal to the new value, if any. Otherwise, let it be null.

  2. If element is not null, then set its checkedness to true.

2.7.2.3 HTMLOptionsCollection

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()
           attribute unsigned long length; // shadows inherited length
  legacycaller HTMLOptionElement? (DOMString name);
  setter creator 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)
collection[index]

Returns the item with index index from the collection. The items are sorted in tree order.

element = collection . namedItem(name)
nodeList = collection . namedItem(name)
collection[name]
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 . 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.

The legacy caller of the HTMLOptionsCollection interface must act like the namedItem() method on the ancestor HTMLCollection interface.

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. Act as if the DOM insertBefore() method was invoked on the parent node, with element as the first argument and reference as the second argument.

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.2.4 HTMLPropertiesCollection

The HTMLPropertiesCollection interface is used for collections of elements that add name-value pairs to a particular item in the microdata model.

interface HTMLPropertiesCollection : HTMLCollection {
  // inherits length and item()
  getter PropertyNodeList? namedItem(DOMString name); // shadows inherited namedItem()
  readonly attribute DOMString[] names;
};

typedef sequence<any> PropertyValueArray;

interface PropertyNodeList : NodeList {
  PropertyValueArray getValues();
};
collection . length

Returns the number of elements in the collection.

element = collection . item(index)
collection[index]

Returns the element with index index from the collection. The items are sorted in tree order.

propertyNodeList = collection . namedItem(name)

Returns a PropertyNodeList object containing any elements that add a property named name.

collection[name]

Returns a PropertyNodeList object containing any elements that add a property named name. The name index has to be one of the values listed in the names list.

collection . names

Returns an array with the property names of the elements in the collection.

propertyNodeList . getValues()

Returns an array of the various values that the relevant elements have.

The object's supported property indices are as defined for HTMLCollection objects.

The supported property names consist of the property names of all the elements represented by the collection, in tree order, ignoring later duplicates.

The properties exposed in this way must be unenumerable.

The names attribute must return a live read only array object giving the property names of all the elements represented by the collection, listed in tree order, but with duplicates removed, leaving only the first occurrence of each name. The same object must be returned each time.

The namedItem(name) method must return a PropertyNodeList object representing a live view of the HTMLPropertiesCollection object, further filtered so that the only nodes in the PropertyNodeList object are those that have a property name equal to name. The nodes in the PropertyNodeList object must be sorted in tree order, and the same object must be returned each time a particular name is queried.


Members of the PropertyNodeList interface inherited from the NodeList interface must behave as they would on a NodeList object.

The getValues method the PropertyNodeList object must return a newly constructed array whose values are the values obtained from the itemValue IDL attribute of each of the elements represented by the object, in tree order.

2.7.3 DOMStringMap

The DOMStringMap interface represents a set of name-value pairs. It exposes these using the scripting language's native mechanisms for property access.

When a DOMStringMap object is instantiated, it is associated with three algorithms, one for getting the list of name-value pairs, one for setting names to certain values, and one for deleting names.

[OverrideBuiltins, Exposed=Window,Worker]
interface DOMStringMap {
  getter DOMString (DOMString name);
  setter creator void (DOMString name, DOMString value);
  deleter void (DOMString name);
};

The supported property names on a DOMStringMap object at any instant are the names of each pair returned from the algorithm for getting the list of name-value pairs at that instant, in the order returned.

To determine the value of a named property name in a DOMStringMap, the user agent must return the value component of the name-value pair whose name component is name in the list returned by the algorithm for getting the list of name-value pairs.

To set the value of a new or existing named property name to value value, the algorithm for setting names to certain values must be run, passing name as the name and the result of converting value to a DOMString as the value.

To delete an existing named property name, the algorithm for deleting names must be run, passing name as the name.

The DOMStringMap interface definition here is only intended for JavaScript environments. Other language bindings will need to define how DOMStringMap is to be implemented for those languages.

The dataset attribute on elements exposes the data-* attributes on the element.

Given the following fragment and elements with similar constructions:

<img class="tower" id="tower5" data-x="12" data-y="5"
     data-ai="robotarget" data-hp="46" data-ability="flames"
     src="towers/rocket.png alt="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
  }
}

2.7.4 DOMElementMap

The DOMElementMap interface represents a set of name-element mappings. It exposes these using the scripting language's native mechanisms for property access.

When a DOMElementMap object is instantiated, it is associated with three algorithms, one for getting the list of name-element mappings, one for mapping a name to a certain element, and one for deleting mappings by name.

interface DOMElementMap {
  getter Element (DOMString name);
  setter creator void (DOMString name, Element value);
  deleter void (DOMString name);
};

The supported property names on a DOMElementMap object at any instant are the names for each mapping returned from the algorithm for getting the list of name-element mappings at that instant, in the order returned.

To determine the value of a named property name in a DOMElementMap, the user agent must return the element component of the name-element mapping whose name component is name in the list returned by the algorithm for getting the list of name-element mappings.

To set the value of a new or existing named property name to value value, the algorithm for mapping a name to a certain element must be run, passing name as the name value as the element.

To delete an existing named property name, the algorithm for deleting mappings must be run, passing name as the name component of the mapping to be deleted.

The DOMElementMap interface definition here is only intended for JavaScript environments. Other language bindings will need to define how DOMElementMap is to be implemented for those languages.

2.7.5 Transferable objects

Some objects support being copied and closed in one operation. This is called transferring the object, and is used in particular to transfer ownership of unsharable or expensive resources across worker boundaries.

The following Transferable types exist:

The following IDL block formalizes this:

typedef (ArrayBuffer or CanvasProxy or MessagePort) Transferable;

To transfer a Transferable object to a new owner, the user agent must run the steps defined for the type of object in question. The steps will return a new object of the same type, and will permanently neuter the original object. (This is an irreversible and non-idempotent operation; once an object has been transferred, it cannot be transferred, or indeed used, again.)

To transfer an ArrayBuffer object old to a new owner owner, a user agent must create a new ArrayBuffer object pointing at the same underlying data as old, thus obtaining new, must neuter the old object, and must finally return new. [ECMA262]

Rules for how to transfer a CanvasProxy object and how to transfer a MessagePort object are given in the relevant sections of this specification.

2.7.6 Safe passing of structured data

When a user agent is required to obtain a structured clone of a value, optionally with a transfer map, it must run the following algorithm, which either returns a separate value, or throws an exception. If a transfer map is provided, it consists of an association list of Transferable objects to placeholder objects.

  1. Let input be the value being cloned.

  2. Let transfer map be the transfer map passed to the algorithm, if any, or the empty list otherwise.

  3. Let memory be an association list of pairs of objects, initially empty. This is used to handle duplicate references. In each pair of objects, one is called the source object and the other the destination object.

  4. For each mapping in transfer map, add a mapping from the Transferable object (the source object) to the placeholder object (the destination object) to memory.

  5. Let output be the value resulting from calling the internal structured cloning algorithm with input as the "input" argument, and memory as the "memory" argument.

  6. Return output.

The internal structured cloning algorithm is always called with two arguments, input and memory, and its behavior is as follows:

  1. If input is the source object of a pair of objects in memory, then return the destination object in that pair of objects and abort these steps.

  2. If input is a primitive value, then return that value and abort these steps.

  3. Let deep clone be none.

  4. The input value is an object. Jump to the appropriate step below:

    If input is a Boolean object

    Let output be a newly constructed Boolean object with the same value as input.

    If input is a Number object

    Let output be a newly constructed Number object with the same value as input.

    If input is a String object

    Let output be a newly constructed String object with the same value as input.

    If input is a Date object

    Let output be a newly constructed Date object with the same value as input.

    If input is a RegExp object

    Let output be a newly constructed RegExp object with the same pattern and flags as input.

    The value of the lastIndex property is not copied.

    If input is a Blob object

    If input has been disabled through the close() method, throw a DataCloneError exception and abort the overall structured clone algorithm. Otherwise, let output be a newly constructed object of the same class as input, corresponding to the same underlying data.

    If input is a FileList object

    Let output be a newly constructed FileList object containing a list of newly constructed File objects corresponding to the same underlying data as those in input, maintaining their relative order.

    If input is an ImageData object

    Let output be a newly constructed ImageData object whose width and height have values equal to the corresponding attributes on input, and whose data attribute has the value obtained from invoking the internal structured cloning algorithm recursively with the value of the data attribute on input as the new "input" argument and memory as the new "memory" argument.

    If input is an ImageBitmap object

    Let output be a newly constructed ImageBitmap object whose bitmap data is a copy of input's bitmap data.

    If input is an ArrayBuffer object

    If input has been neutered, throw a DataCloneError exception and abort the overall structured clone algorithm. Otherwise, let output be a newly constructed ArrayBuffer object whose contents are a copy of input's contents, with the same length.

    If input is an object with a [[DataView]] internal slot

    Let output be a newly constructed object of the same class as input, with its [[DataView]] internal property present, its [[ViewedArrayBuffer]] internal property set to the value obtained from invoking the internal structured cloning algorithm recursively with the value of the internal property on input as the new "input" argument and memory as the new "memory" argument, and with the [[ByteLength]] and [[ByteOffset]] internal properties set to the same value as their counterparts on input.

    If input is an Array object

    Let output be a newly constructed empty Array object whose length is equal to the length of input, and set deep clone to own.

    This means that the length of sparse arrays is preserved.

    If input is an Object object

    Let output be a newly constructed empty Object object, and set deep clone to own.

    If input is a Map object

    Let output be a newly constructed empty Map object, and set deep clone to map.

    If input is a Set object

    Let output be a newly constructed empty Set object, and set deep clone to set.

    If input is an object that another specification defines how to clone

    Let output be a clone of the object as defined by the other specification.

    If input is another native object type (e.g. Error, Function)
    If input is a host object (e.g. a DOM node)

    Throw a DataCloneError exception and abort the overall structured clone algorithm.

    For the purposes of the algorithm above, an object is a particular type of object class if its [[Class]] internal property is equal to class.

    For example, "input is an Object object" if input's [[Class]] internal property is equal to the string "Object".

  5. Add a mapping from input (the source object) to output (the destination object) to memory.

  6. If deep clone is set to map, then run these substeps. These substeps use the terminology and typographic conventions used in the JavaScript specification's definition of Maps. [ECMA262]

    1. Let source be the List that is the value of input's [[MapData]] internal slot, if any. If there is no such slot, then instead throw a DataCloneError exception and abort the overall structured clone algorithm. [ECMA262]

    2. Let target be the List that is the value of output's [[MapData]] internal slot.

    3. For each Record {[[key]], [[value]]} entry that is an element of source, run the following substeps:

      1. Let key have the value obtained from invoking the internal structured cloning algorithm recursively with entry.[[key]] as the new "input" argument and memory as the new "memory" argument.

      2. Let value have the value obtained from invoking the internal structured cloning algorithm recursively with entry.[[value]] as the new "input" argument and memory as the new "memory" argument.

      3. Let new entry be the Record {[[key]]: key, [[value]]: value}.

      4. Append new entry as the last element of target.

    4. Set deep clone to own.

  7. If deep clone is set to set, then run these substeps. These substeps use the terminology and typographic conventions used in the JavaScript specification's definition of Sets. [ECMA262]

    1. Let source be the List that is the value of input's [[SetData]] internal slot, if any. If there is no such slot, then instead throw a DataCloneError exception and abort the overall structured clone algorithm. [ECMA262]

    2. Let target be the List that is the value of output's [[SetData]] internal slot.

    3. For each entry that is an element of source that is not empty, run the following substeps:

      1. Let new entry have the value obtained from invoking the internal structured cloning algorithm recursively with entry as the new "input" argument and memory as the new "memory" argument.

      2. Append new entry as the last element of target.

    4. Set deep clone to own.

  8. If deep clone is set to own, then, for each enumerable own property in input, run the following steps:

    1. Let name be the name of the property.

    2. Let source value be the result of calling the [[Get]] internal method of input with the argument name. If the [[Get]] internal method of a property involved executing script, and that script threw an uncaught exception, then abort the overall structured clone algorithm, with that exception being passed through to the caller.

    3. Let cloned value be the result of invoking the internal structured cloning algorithm recursively with source value as the "input" argument and memory as the "memory" argument. If this results in an exception, then abort the overall structured clone algorithm, with that exception being passed through to the caller.

    4. Add a new property to output having the name name, and having the value cloned value.

    The order of the properties in the input and output objects must be the same, and any properties whose [[Get]] internal method involves running script must be processed in that same order.

    This does not walk the prototype chain.

    Property descriptors, setters, getters, and analogous features are not copied in this process. For example, the property in the input could be marked as read-only, but in the output it would just have the default state (typically read-write, though that could depend on the scripting environment).

    Properties of Array objects are not treated any differently than those of other Objects. In particular, this means that non-index properties of arrays are copied as well.

  9. Return output.

This algorithm preserves cycles and preserves the identity of duplicate objects in graphs.

2.7.7 Callbacks

The following callback function type is used in various APIs that interact with File objects:

callback FileCallback = void (File file);

2.7.8 Garbage collection

There is an implied strong reference from any IDL attribute that returns a pre-existing object to that object.

For example, the document.location attribute means that there is a strong reference from a Document object to its Location object. Similarly, there is always a strong reference from a Document to any descendant nodes, and from any node to its owner 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 analogues 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.

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. [DOM]

The document's address is the URL associated with a Document (as defined in the DOM standard). It is initially set when the Document is created, but that can change during the lifetime of the Document; for example, it changes when the user navigates to a fragment identifier on the page and when the pushState() method is called with a new URL. [DOM]

Interactive user agents typically expose the document's address 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's address is the same as the document's address of the responsible document specified by the script's settings object, and the Document is both ready for post-load tasks and completely loaded immediately.

The document's referrer is an absolute 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 address.

  3. Navigate the browsing context to a resource whose source is source, with replacement enabled and exceptions 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.

    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" };

[OverrideBuiltins]
partial /*sealed*/ interface Document {
  // resource metadata management
  [PutForwards=href, Unforgeable] readonly attribute Location? location;
           attribute DOMString domain;
  readonly attribute DOMString referrer;
           attribute DOMString cookie;
  readonly attribute DOMString lastModified;
  readonly attribute DocumentReadyState readyState;

  // DOM tree accessors
  getter object (DOMString name);
           attribute DOMString title;
           attribute DOMString dir;
           attribute HTMLElement? body;
  readonly attribute HTMLHeadElement? head;
  readonly attribute HTMLCollection images;
  readonly attribute HTMLCollection embeds;
  readonly attribute HTMLCollection plugins;
  readonly attribute HTMLCollection links;
  readonly attribute HTMLCollection forms;
  readonly attribute HTMLCollection scripts;
  NodeList getElementsByName(DOMString elementName);
  NodeList getItems(optional DOMString typeNames = ""); // microdata
  readonly attribute DOMElementMap cssElementMap;
  readonly attribute HTMLScriptElement? currentScript;

  // 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);
  void close();
  void write(DOMString... text);
  void writeln(DOMString... text);

  // user interaction
  readonly attribute WindowProxy? defaultView;
  readonly attribute Element? activeElement;
  boolean hasFocus();
           attribute DOMString designMode;
  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);
  readonly attribute HTMLCollection commands;

  // special event handler IDL attributes that only apply to Document objects
  [LenientThis] attribute EventHandler onreadystatechange;

  // also has obsolete members
};
Document implements GlobalEventHandlers;

3.1.2 Resource metadata management

document . referrer

Returns the address 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.

In the case of HTTP, the referrer IDL attribute will match the Referer (sic) header that was sent when fetching the current page.

Typically user agents are configured to not report referrers in the case where the referrer uses an encrypted protocol and the current page does not (e.g. when navigating from an https: page to an http: page).


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 exception will be thrown on getting and setting.

The cookie attribute represents the cookies of the resource identified by the document's address.

A Document object that falls into one of the following conditions is a cookie-averse Document object:

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 not a scheme/host/port tuple, the user agent must throw a SecurityError exception. Otherwise, the user agent must first obtain the storage mutex and then return the cookie-string for the document's address for a "non-HTTP" API, decoded using the UTF-8 decoder. [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 not a scheme/host/port tuple, the user agent must throw a SecurityError exception. Otherwise, the user agent must obtain the storage mutex and then act as it would when receiving a set-cookie-string for the document's address 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.


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 a simple 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 the document's root element, if there is one and it's an html element, or 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 root element is an svg element in the SVG namespace, then let value be a concatenation of the data of all the child Text nodes of the first title element in the SVG namespace that is a child of the root element. [SVG]

  2. Otherwise, let value be a concatenation of the data of all the child Text nodes of the title element, in tree order, or the empty string if the title element is null.

  3. Strip and collapse whitespace in value.

  4. Return value.

On setting, the steps corresponding to the first matching condition in the following list must be run:

If the root element is an svg element in the SVG namespace [SVG]
  1. Let element be the first title element in the SVG namespace that is a child of the root element, if any. If there isn't one, create a title element in the SVG namespace, append it to the root element, and let element be that element. [SVG]

  2. Act as if the textContent IDL attribute of element was set to the new value being assigned.

If the root 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 null, then create a new title element and append it to the head element, and let element be the newly created element; otherwise, let element be the title element.

  3. 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 exception.

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 exception 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 that element with the new value in the DOM, as if the root element's replaceChild() method had been called with the new value and the incumbent body element as its two arguments respectively, then abort these steps.
  4. Otherwise, if there is no root element, throw a HierarchyRequestError exception and abort these steps.
  5. Otherwise, the body element is null, but there's a root element. Append the new value to the root 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.


element . cssElementMap

Returns a DOMElementMap object for the Document representing the current CSS element reference identifiers.

The cssElementMap IDL attribute allows authors to define CSS element reference identifiers, which are used in certain CSS features to override the normal ID-based mapping. [CSSIMAGES]

When a Document is created, it must be associated with an initially-empty CSS ID overrides list, which consists of a list of mappings each of which consists of a string name mapped to an Element node.

Each entry in the CSS ID overrides list, while it is in the list and is either in the Document or is an img, video, or canvas element, defines a CSS element reference identifier mapping the given name to the given Element. [CSSIMAGES]

On getting, the cssElementMap IDL attribute must return a DOMElementMap object, associated with the following algorithms, which expose the current mappings:

The algorithm for getting the list of name-element mappings

Return the Document's CSS ID overrides list, maintaining the order in which the entries were originally added to the list.

The algorithm for mapping a name to a certain element

Let name be the name passed to the algorithm and element be the Element passed to the algorithm.

If element is null, run the algorithm for deleting mappings by name, passing it name.

Otherwise, if there is an entry in the Document's CSS ID overrides list whose name is name, replace its current value with element.

Otherwise, add a mapping to the Document's CSS ID overrides list whose name is name and whose element is element.

The algorithm for deleting mappings by name

If there is an entry in the Document's CSS ID overrides list whose name is the name passed to this algorithm, remove it. This also undefines the CSS element reference identifier for that name. [CSSIMAGES]

The same object must be returned each time.


document . currentScript

Returns the script element that is currently executing. 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 (e.g. because the running script is an event handler, or a timeout).

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 initialised to null.


The Document interface supports named properties. The supported property names at any moment consist of the values of the name content attributes of all the applet, exposed embed, form, iframe, img, and exposed object elements in the Document that have non-empty name content attributes, and the values of the id content attributes of all the applet and exposed object elements in the Document that have non-empty id content attributes, and the values of the id content attributes of all the img elements in the Document that have both non-empty name content attributes and non-empty id content attributes. The supported property names must be in tree order, ignoring later duplicates, with values from id attributes coming before values from name attributes when the same element contributes both.

To determine the value of a named property name when the Document object is indexed for property retrieval, 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 in the Document.

    There will be at least one such element, by definition.

  2. If elements has only one element, and that element is an iframe element, then return the WindowProxy object of the nested browsing context represented by that iframe element, and abort these steps.

  3. Otherwise, if elements has only one element, return that element and abort these steps.

  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:

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.1.4 Loading XML documents

partial interface XMLDocument {
  boolean load(DOMString url);
};

The load(url) method must run the following steps:

  1. Let document be the XMLDocument object on which the method was invoked.

  2. Resolve the method's first argument, relative to the API base URL specified by the entry settings object. If this is not successful, throw a SyntaxError exception and abort these steps. Otherwise, let url be the resulting absolute URL.

  3. If the origin of url is not the same as the origin of document, throw a SecurityError exception and abort these steps.

  4. Remove all child nodes of document, without firing any mutation events.

  5. Set the current document readiness of document to "loading".

  6. Run the remainder of these steps asynchronously, and return true from the method.

  7. Let result be a Document object.

  8. Let success be false.

  9. Fetch url from the origin of document, using the API referrer source specified by the entry settings object, with the synchronous flag set and the force same-origin flag set.

  10. If the fetch attempt was successful, and the resource's Content-Type metadata is an XML MIME type, then run these substeps:

    1. Create a new XML parser associated with the result document.

    2. Pass this parser the fetched document.

    3. If there is an XML well-formedness or XML namespace well-formedness error, then remove all child nodes from result. Otherwise let success be true.

  11. Queue a task to run the following steps.

    1. Set the current document readiness of document to "complete".

    2. Replace all the children of document by the children of result (even if it has no children), firing mutation events as if a DocumentFragment containing the new children had been inserted.

    3. Fire a simple event named load at document.

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, such as Web browsers or search engines, to present and use documents and applications in a wide variety of contexts that the author might not have considered.

As a simple example, consider a Web page written by an author who only considered desktop computer Web browsers:

<!DOCTYPE HTML>
<html>
 <head>
  <title>My Page</title>
 </head>
 <body>
  <h1>Welcome to my page</h1>
  <p>I like cars and lorries and have a big Jeep!</p>
  <h2>Where I live</h2>
  <p>I live in a small hut on a mountain!</p>
 </body>
</html>

Because HTML conveys meaning, rather than presentation, the same page can also be used by a small browser on a mobile phone, without any change to the page. Instead of headings being in large letters as on the desktop, for example, the browser on the mobile phone might use the same size text for the whole the page, but with the headings in bold.

But it goes further than just differences in screen size: the same page could equally be used by a blind user using a browser based around speech synthesis, which instead of displaying the page on a screen, reads the page to the user, e.g. using headphones. Instead of large text for the headings, the speech browser might use a different volume or a slower voice.

That's not all, either. Since the browsers know which parts of the page are the headings, they can create a document outline that the user can use to quickly navigate around the document, using keys for "jump to next heading" or "jump to previous heading". Such features are especially common with speech browsers, where users would otherwise find quickly navigating a page quite difficult.

Even beyond browsers, software can make use of this information. Search engines can use the headings to more effectively index a page, or to provide quick links to subsections of the page from their results. Tools can use the headings to create a table of contents (that is in fact how this very specification's table of contents is generated).

This example has focused on headings, but the same principle applies to all of the semantics in HTML.

Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose, as doing so prevents software from correctly processing the page.

For example, the following snippet, intended to represent the heading of a corporate site, is non-conforming because the second line is not intended to be a heading of a subsection, but merely a subheading or subtitle (a subordinate heading for the same section).

<body>
 <h1>ACME Corporation</h1>
 <h2>The leaders in arbitrary fast delivery since 1920</h2>
 ...

The hgroup element is intended for these kinds of situations:

<body>
 <hgroup>
  <h1>ACME Corporation</h1>
  <h2>The leaders in arbitrary fast delivery since 1920</h2>
 </hgroup>
 ...

The document in this next example is similarly non-conforming, despite being syntactically correct, because the data placed in the cells is clearly not tabular data, and the cite element mis-used:

<!DOCTYPE HTML>
<html lang="en-GB">
 <head> <title> Demonstration </title> </head>
 <body>
  <table>
   <tr> <td> My favourite animal is the cat. </td> </tr>
   <tr>
    <td>
     —<a href="http://example.org/~ernest/"><cite>Ernest</cite></a>,
     in an essay from 1992
    </td>
   </tr>
  </table>
 </body>
</html>

This would make software that relies on these semantics fail: for example, a speech browser that allowed a blind user to navigate tables in the document would report the quote above as a table, confusing the user; similarly, a tool that extracted titles of works from pages would extract "Ernest" as the title of a work, even though it's actually a person's name, not a title.

A corrected version of this document might be:

<!DOCTYPE HTML>
<html lang="en-GB">
 <head> <title> Demonstration </title> </head>
 <body>
  <blockquote>
   <p> My favourite animal is the cat. </p>
  </blockquote>
  <p>
   —<a href="http://example.org/~ernest/">Ernest</a>,
   in an essay from 1992
  </p>
 </body>
</html>

Authors must not use elements, attributes, or attribute values that are not permitted by this specification or other applicable specifications, as doing so makes it significantly harder for the language to be extended in the future.

In the next example, there is a non-conforming attribute value ("carpet") and a non-conforming attribute ("texture"), which is not permitted by this specification:

<label>Carpet: <input type="carpet" name="c" texture="deep pile"></label>

Here would be an alternative and correct way to mark this up:

<label>Carpet: <input type="text" class="carpet" name="c" data-texture="deep pile"></label>

Through scripting and using other mechanisms, the values of attributes, text, and indeed the entire structure of the document may change dynamically while a user agent is processing it. The semantics of a document at an instant in time are those represented by the state of the document at that instant in time, and the semantics of a document can therefore change over time. User agents must update their presentation of the document as this occurs.

HTML has a progress element that describes a progress bar. If its "value" attribute is dynamically updated by a script, the UA would update the rendering to show the progress changing.

3.2.2 Elements in the DOM

The nodes representing HTML elements in the DOM must implement, and expose to scripts, the interfaces listed for them in the relevant sections of this specification. This includes HTML elements in XML documents, even when those documents are in another context (e.g. inside an XSLT transform).

Elements in the DOM represent things; that is, they have intrinsic meaning, also known as semantics.

For example, an ol element represents an ordered list.

The basic interface, from which all the HTML elements' interfaces inherit, and which must be used by elements that have no additional requirements, is the HTMLElement interface.

interface HTMLElement : Element {
  // metadata attributes
           attribute DOMString title;
           attribute DOMString lang;
           attribute boolean translate;
           attribute DOMString dir;
  readonly attribute DOMStringMap dataset;

  // microdata
           attribute boolean itemScope;
  [PutForwards=value] readonly attribute DOMSettableTokenList itemType;
           attribute DOMString itemId;
  [PutForwards=value] readonly attribute DOMSettableTokenList itemRef;
  [PutForwards=value] readonly attribute DOMSettableTokenList itemProp;
  readonly attribute HTMLPropertiesCollection properties;
           attribute any itemValue; // acts as DOMString on setting

  // user interaction
           attribute boolean hidden;
  void click();
           attribute long tabIndex;
  void focus();
  void blur();
           attribute DOMString accessKey;
  readonly attribute DOMString accessKeyLabel;
           attribute boolean draggable;
  [PutForwards=value] readonly attribute DOMSettableTokenList dropzone;
           attribute DOMString contentEditable;
  readonly attribute boolean isContentEditable;
           attribute HTMLMenuElement? contextMenu;
           attribute boolean spellcheck;
  void forceSpellCheck();

  // command API
  readonly attribute DOMString? commandType;
  readonly attribute DOMString? commandLabel;
  readonly attribute DOMString? commandIcon;
  readonly attribute boolean? commandHidden;
  readonly attribute boolean? commandDisabled;
  readonly attribute boolean? commandChecked;
};
HTMLElement implements GlobalEventHandlers;

interface HTMLUnknownElement : HTMLElement { };

The HTMLElement interface holds methods and attributes related to a number of disparate features, and the members of this interface are therefore described in various different sections of this specification.

The HTMLUnknownElement interface must be used for HTML elements that are not defined by this specification (or other applicable specifications).

3.2.3 Element definitions

Each element in this specification has a definition that includes the following information:

Categories

A list of categories to which the element belongs. These are used when defining the content models for each element.

Contexts in which this element can be used

A non-normative description of where the element can be used. This information is redundant with the content models of elements that allow this one as a child, and is provided only as a convenience.

For simplicity, only the most specific expectations are listed. For example, an element that is both flow content and phrasing content can be used anywhere that either flow content or phrasing content is expected, but since anywhere that flow content is expected, phrasing content is also expected (since all phrasing content is flow content), only "where phrasing content is expected" will be listed.

Content model

A normative description of what content must be included as children and descendants of the element.

Tag omission in text/html

A non-normative description of whether, in the text/html syntax, the start and end tags can be omitted. This information is redundant with the normative requirements given in the optional tags section, and is provided in the element definitions only as a convenience.

Content attributes

A normative list of attributes that may be specified on the element (except where otherwise disallowed), along with non-normative descriptions of those attributes. (The content to the left of the dash is normative, the content to the right of the dash is not.)

DOM interface

A normative definition of a DOM interface that such elements must implement.

This is then followed by a description of what the element represents, along with any additional normative conformance criteria that may apply to authors and implementations. Examples are sometimes also included.

3.2.3.1 Attributes

Except where otherwise specified, attributes on HTML elements may have any string value, including the empty string. Except where explicitly stated, there is no restriction on what text can be specified in such attributes.

3.2.4 Content models

Each element defined in this specification has a content model: a description of the element's expected contents. An HTML element must have contents that match the requirements described in the element's content model. The contents of an element are its children in the DOM, except for template elements, where the children are those in the template contents (a separate DocumentFragment assigned to the element when the element is created).

The space characters are always allowed between elements. User agents represent these characters between elements in the source markup as Text nodes in the DOM. Empty Text nodes and Text nodes consisting of just sequences of those characters are considered inter-element whitespace.

Inter-element whitespace, comment nodes, and processing instruction nodes must be ignored when establishing whether an element's contents match the element's content model or not, and must be ignored when following algorithms that define document and element semantics.

Thus, an element A is said to be preceded or followed by a second element B if A and B have the same parent node and there are no other element nodes or Text nodes (other than inter-element whitespace) between them. Similarly, a node is the only child of an element if that element contains no other nodes other than inter-element whitespace, comment nodes, and processing instruction nodes.

Authors must not use HTML elements anywhere except where they are explicitly allowed, as defined for each element, or as explicitly required by other specifications. For XML compound documents, these contexts could be inside elements from other namespaces, if those elements are defined as providing the relevant contexts.

For example, the Atom specification defines a content element. When its type attribute has the value xhtml, the Atom specification requires that it contain a single HTML div element. Thus, a div element is allowed in that context, even though this is not explicitly normatively stated by this specification. [ATOM]

In addition, HTML elements may be orphan nodes (i.e. without a parent node).

For example, creating a td element and storing it in a global variable in a script is conforming, even though td elements are otherwise only supposed to be used inside tr elements.

var data = {
  name: "Banana",
  cell: document.createElement('td'),
};
3.2.4.1 The "nothing" content model

When an element's content model is nothing, the element must contain no Text nodes (other than inter-element whitespace) and no element nodes.

Most HTML elements whose content model is "nothing" are also, for convenience, void elements (elements that have no end tag in the HTML syntax). However, these are entirely separate concepts.

3.2.4.2 Kinds of content

Each element in HTML falls into zero or more categories that group elements with similar characteristics together. The following broad categories are used in this specification:

Some elements also fall into other categories, which are defined in other parts of this specification.

These categories are related as follows:

Sectioning content, heading content, phrasing content, embedded content, and interactive content are all types of flow content. Metadata is sometimes flow content. Metadata and interactive content are sometimes phrasing content. Embedded content is also a type of phrasing content, and sometimes is interactive content.

Other categories are also used for specific purposes, e.g. form controls are specified using a number of categories to define common requirements. Some elements have unique requirements and do not fit into any particular category.

3.2.4.2.1 Metadata content

Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information.

Elements from other namespaces whose semantics are primarily metadata-related (e.g. RDF) are also metadata content.

Thus, in the XML serialisation, one can use RDF, like this:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:r="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
 <head>
  <title>Hedral's Home Page</title>
  <r:RDF>
   <Person xmlns="http://www.w3.org/2000/10/swap/pim/contact#"
           r:about="http://hedral.example.com/#">
    <fullName>Cat Hedral</fullName>
    <mailbox r:resource="mailto:hedral@damowmow.com"/>
    <personalTitle>Sir</personalTitle>
   </Person>
  </r:RDF>
 </head>
 <body>
  <h1>My home page</h1>
  <p>I like playing with string, I guess. Sister says squirrels are fun
  too so sometimes I follow her to play with them.</p>
 </body>
</html>

This isn't possible in the HTML serialisation, however.

3.2.4.2.2 Flow content

Most elements that are used in the body of documents and applications are categorised as flow content.

3.2.4.2.3 Sectioning content

Sectioning content is content that defines the scope of headings and footers.

Each sectioning content element potentially has a heading and an outline. See the section on headings and sections for further details.

There are also certain elements that are sectioning roots. These are distinct from sectioning content, but they can also have an outline.

3.2.4.2.4 Heading content

Heading content defines the header of a section (whether explicitly marked up using sectioning content elements, or implied by the heading content itself).

3.2.4.2.5 Phrasing content

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.

Most elements that are categorised as phrasing content can only contain elements that are themselves categorised as phrasing content, not any flow content.

Text, in the context of content models, means either nothing, or Text nodes. Text is sometimes used as a content model on its own, but is also phrasing content, and can be inter-element whitespace (if the Text nodes are empty or contain just space characters).

Text nodes and attribute values must consist of Unicode characters, must not contain U+0000 characters, must not contain permanently undefined Unicode characters (noncharacters), and must not contain control characters other than space characters. This specification includes extra constraints on the exact value of Text nodes and attribute values depending on their precise context.

3.2.4.2.6 Embedded content

Embedded content is content that imports another resource into the document, or content from another vocabulary that is inserted into the document.

Elements that are from namespaces other than the HTML namespace and that convey content but not metadata, are embedded content for the purposes of the content models defined in this specification. (For example, MathML, or SVG.)

Some embedded content elements can have fallback content: content that is to be used when the external resource cannot be used (e.g. because it is of an unsupported format). The element definitions state what the fallback is, if any.

3.2.4.2.7 Interactive content

Interactive content is content that is specifically intended for user interaction.

The tabindex attribute can also make any element into interactive content.

3.2.4.2.8 Palpable content

As a general rule, elements whose content model allows any flow content or phrasing content should have at least one node in its contents that is palpable content and that does not have the hidden attribute specified.

This requirement is not a hard requirement, however, as there are many cases where an element can be empty legitimately, for example when it is used as a placeholder which will later be filled in by a script, or when the element is part of a template and would on most pages be filled in but on some pages is not relevant.

Conformance checkers are encouraged to provide a mechanism for authors to find elements that fail to fulfill this requirement, as an authoring aid.

The following elements are palpable content:

3.2.4.2.9 Script-supporting elements

Script-supporting elements are those that do not represent anything themselves (i.e. they are not rendered), but are used to support scripts, e.g. to provide functionality for the user.

The following elements are script-supporting elements:

3.2.4.3 Transparent content models

Some elements are described as transparent; they have "transparent" in the description of their content model. The content model of a transparent element is derived from the content model of its parent element: the elements required in the part of the content model that is "transparent" are the same elements as required in the part of the content model of the parent of the transparent element in which the transparent element finds itself.

For instance, an ins element inside a ruby element cannot contain an rt element, because the part of the ruby element's content model that allows ins elements is the part that allows phrasing content, and the rt element is not phrasing content.

In some cases, where transparent elements are nested in each other, the process has to be applied iteratively.

Consider the following markup fragment:

<p><object><param><ins><map><a href="/">Apples</a></map></ins></object></p>

To check whether "Apples" is allowed inside the a element, the content models are examined. The a element's content model is transparent, as is the map element's, as is the ins element's, as is the part of the object element's in which the ins element is found. The object element is found in the p element, whose content model is phrasing content. Thus, "Apples" is allowed, as text is phrasing content.

When a transparent element has no parent, then the part of its content model that is "transparent" must instead be treated as accepting any flow content.

3.2.4.4 Paragraphs

The term paragraph as defined in this section is used for more than just the definition of the p element. The paragraph concept defined here is used to describe how to interpret documents. The p element is merely one of several ways of marking up a paragraph.

A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping. For instance, an address is also a paragraph, as is a part of a form, a byline, or a stanza in a poem.

In the following example, there are two paragraphs in a section. There is also a heading, which contains phrasing content that is not a paragraph. Note how the comments and inter-element whitespace do not form paragraphs.

<section>
  <h1>Example of paragraphs</h1>
  This is the <em>first</em> paragraph in this example.
  <p>This is the second.</p>
  <!-- This is not a paragraph. -->
</section>

Paragraphs in flow content are defined relative to what the document looks like without the a, ins, del, and map elements complicating matters, since those elements, with their hybrid content models, can straddle paragraph boundaries, as shown in the first two examples below.

Generally, having elements straddle paragraph boundaries is best avoided. Maintaining such markup can be difficult.

The following example takes the markup from the earlier example and puts ins and del elements around some of the markup to show that the text was changed (though in this case, the changes admittedly don't make much sense). Notice how this example has exactly the same paragraphs as the previous one, despite the ins and del elements — the ins element straddles the heading and the first paragraph, and the del element straddles the boundary between the two paragraphs.

<section>
  <ins><h1>Example of paragraphs</h1>
  This is the <em>first</em> paragraph in</ins> this example<del>.
  <p>This is the second.</p></del>
  <!-- This is not a paragraph. -->
</section>

Let view be a view of the DOM that replaces all a, ins, del, and map elements in the document with their contents. Then, in view, for each run of sibling phrasing content nodes uninterrupted by other types of content, in an element that accepts content other than phrasing content as well as phrasing content, let first be the first node of the run, and let last be the last node of the run. For each such run that consists of at least one node that is neither embedded content nor inter-element whitespace, a paragraph exists in the original DOM from immediately before first to immediately after last. (Paragraphs can thus span across a, ins, del, and map elements.)

Conformance checkers may warn authors of cases where they have paragraphs that overlap each other (this can happen with object, video, audio, and canvas elements, and indirectly through elements in other namespaces that allow HTML to be further embedded therein, like svg or math).

A paragraph is also formed explicitly by p elements.

The p element can be used to wrap individual paragraphs when there would otherwise not be any content other than phrasing content to separate the paragraphs from each other.

In the following example, the link spans half of the first paragraph, all of the heading separating the two paragraphs, and half of the second paragraph. It straddles the paragraphs and the heading.

<header>
 Welcome!
 <a href="about.html">
  This is home of...
  <h1>The Falcons!</h1>
  The Lockheed Martin multirole jet fighter aircraft!
 </a>
 This page discusses the F-16 Fighting Falcon's innermost secrets.
</header>

Here is another way of marking this up, this time showing the paragraphs explicitly, and splitting the one link element into three:

<header>
 <p>Welcome! <a href="about.html">This is home of...</a></p>
 <h1><a href="about.html">The Falcons!</a></h1>
 <p><a href="about.html">The Lockheed Martin multirole jet
 fighter aircraft!</a> This page discusses the F-16 Fighting
 Falcon's innermost secrets.</p>
</header>

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

<section>
 <h1>My Cats</h1>
 You can play with my cat simulator.
 <object data="cats.sim">
  To see the cat simulator, use one of the following links:
  <ul>
   <li><a href="cats.sim">Download simulator file</a>
   <li><a href="http://sims.example.com/watch?v=LYds5xY4INU">Use online simulator</a>
  </ul>
  Alternatively, upgrade to the Mellblom Browser.
 </object>
 I'm quite proud of it.
</section>

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:

<section>
 <h1>My Cats</h1>
 <p>You can play with my cat simulator.</p>
 <object data="cats.sim">
  <p>To see the cat simulator, use one of the following links:</p>
  <ul>
   <li><a href="cats.sim">Download simulator file</a>
   <li><a href="http://sims.example.com/watch?v=LYds5xY4INU">Use online simulator</a>
  </ul>
  <p>Alternatively, upgrade to the Mellblom Browser.</p>
 </object>
 <p>I'm quite proud of it.</p>
</section>

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):

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.

<div xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
 <bogus xmlns="http://example.net/ns" dir="ltr">
  <span xmlns="http://www.w3.org/1999/xhtml">
  </span>
 </bogus>
</div>

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). [ARIA]


The following event handler content attributes may be specified on any HTML element:

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 XHTML 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 whitespace. [XML]

There is no way to serialise the xml:space attribute on HTML elements in the text/html syntax.

3.2.5.1 The id attribute

The id attribute specifies its element's unique identifier (ID). [DOM]

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

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 identifiers, 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.

3.2.5.2 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:

<p>My logs show that there was some interest in <abbr title="Hypertext
Transport Protocol">HTTP</abbr> today.</p>

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, abbr, or menuitem element, 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.3 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.


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 neither the node nor any of the node's ancestors, including the root element, 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.

If the resulting value is not a recognised 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.4 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 root 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 the name of a computer program.

The following attributes are translatable attributes:

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:

<!DOCTYPE HTML>
<html> <!-- default on the root element is translate=yes -->
 <head>
  <title>The Bee Game</title> <!-- implied translate=yes inherited from ancestors -->
 </head>
 <body>
  <p>The Bee Game is a text adventure game in English.</p>
  <p>When the game launches, the first thing you should do is type
  <kbd translate=no>eat honey</kbd>. The game will respond with:</p>
  <pre><samp translate=no>Yum yum! That was some good honey!</samp></pre>
 </body>
</html>
3.2.5.5 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.6 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 root 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 root 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:

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 root 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:


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.

<p dir=auto class="u1"><b><bdi>Student</bdi>:</b> How do you write "What's your name?" in Arabic?</p>
<p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> ما اسمك؟</p>
<p dir=auto class="u1"><b><bdi>Student</bdi>:</b> Thanks.</p>
<p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> That's written "شكرًا".</p>
<p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> Do you know how to write "Please"?</p>
<p dir=auto class="u1"><b><bdi>Student</bdi>:</b> "من فضلك", right?</p>

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.7 The class attribute

Every HTML element may have a class attribute specified.

The attribute, if specified, must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.

The classes that an HTML element has assigned to it consists of all the classes returned when the value of the class attribute is split on spaces. (Duplicates are ignored.)

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.


The className and classList IDL attributes, defined in the DOM specification, reflect the class content attribute. [DOM]

3.2.5.8 The style attribute

All HTML elements may have the style content attribute set. This is a CSS styling attribute as defined by the CSS Styling Attribute Syntax specification. [CSSATTR]

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 CSS styling attributes. [CSSATTR]

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 colours are marked up using the span element and the style attribute to make those words show up in the relevant colours in visual media.

<p>My sweat suit is <span style="color: green; background:
transparent">green</span> and my eyes are <span style="color: blue;
background: transparent">blue</span>.</p>
3.2.5.9 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 standardised 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.

<ol>
 <li data-length="2m11s">Beyond The Sea</li>
 ...
</ol>

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:

<p>The third <span data-mytrans-de="Anspruch">claim</span> covers the case of <span
translate="no">HTML</span> markup.</p>

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.


element . dataset

Returns a DOMStringMap object for the element's data-* attributes.

Hyphenated names become camel-cased. 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 object, associated with the following algorithms, which expose these attributes on their element:

The algorithm for getting the list of name-value pairs
  1. Let list be an empty list of name-value pairs.
  2. For each content attribute on the 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 converted to ASCII uppercase.
  4. Return list.
The algorithm for setting names to certain values
  1. Let name be the name passed to the algorithm.
  2. Let value be the value passed to the algorithm.
  3. If name contains a U+002D HYPHEN-MINUS character (-) followed by a lowercase ASCII letter, throw a SyntaxError exception and abort these steps.
  4. 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 converted to ASCII lowercase.
  5. Insert the string data- at the front of name.
  6. Set the value of the attribute with the name name, to the value value, replacing any previous value if the attribute already existed. If setAttribute() would have thrown an exception when setting an attribute with the name name, then this must throw the same exception.
The algorithm for deleting names
  1. Let name be the name passed to the algorithm.
  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 converted to ASCII lowercase.
  3. Insert the string data- at the front of name.
  4. Remove the attribute with the name name, if such an attribute exists. Do nothing otherwise.

This algorithm will only get invoked by the Web IDL specification for names that are given by the earlier algorithm for getting the list of name-value pairs. [WEBIDL]

The same object must be returned each time.

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:

<div class="spaceship" data-ship-id="92432"
     data-weapons="laser 2" data-shields="50%"
     data-x="30" data-y="10" data-z="90">
 <button class="fire"
         onclick="spaceships[this.parentNode.dataset.shipId].fire()">
  Fire
 </button>
</div>

Notice how the hyphenated attribute name becomes camel-cased in the API.

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).

3.2.6 Requirements relating to the bidirectional algorithm

3.2.6.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). However, the use of these characters is restricted so that any embedding or overrides generated by these characters do not start and end with different parent elements, and so that all such embeddings and overrides are explicitly terminated by a U+202C POP DIRECTIONAL FORMATTING character. This helps reduce incidences of text being reused in a manner that has unforeseen effects on the bidirectional algorithm. [BIDI]

The aforementioned restrictions are defined by specifying that certain parts of documents form bidirectional-algorithm formatting character ranges, and then imposing a requirement on such ranges.

The strings resulting from applying the following algorithm to an HTML element element are bidirectional-algorithm formatting character ranges:

  1. Let output be an empty list of strings.

  2. Let string be an empty string.

  3. Let node be the first child node of element, if any, or null otherwise.

  4. Loop: If node is null, jump to the step labeled end.

  5. Process node according to the first matching step from the following list:

    If node is a Text node

    Append the text data of node to string.

    If node is a br element
    If node is an HTML element that is flow content but that is not also phrasing content

    If string is not the empty string, push string onto output, and let string be empty string.

    Otherwise
    Do nothing.
  6. Let node be node's next sibling, if any, or null otherwise.

  7. Jump to the step labeled loop.

  8. End: If string is not the empty string, push string onto output.

  9. Return output as the bidirectional-algorithm formatting character ranges.

The value of a namespace-less attribute of an HTML element is a bidirectional-algorithm formatting character range.

Any strings that, as described above, are bidirectional-algorithm formatting character ranges must match the string production in the following ABNF, the character set for which is Unicode. [ABNF]

string        = *( plaintext ( embedding / override / isolation ) ) plaintext
embedding     = ( lre / rle ) string pdf
override      = ( lro / rlo ) string pdf
isolation     = ( lri / rli / fsi ) string pdi
lre           = %x202A ; U+202A LEFT-TO-RIGHT EMBEDDING
rle           = %x202B ; U+202B RIGHT-TO-LEFT EMBEDDING
lro           = %x202D ; U+202D LEFT-TO-RIGHT OVERRIDE
rlo           = %x202E ; U+202E RIGHT-TO-LEFT OVERRIDE
pdf           = %x202C ; U+202C POP DIRECTIONAL FORMATTING
lri           = %x2066 ; U+2066 LEFT-TO-RIGHT ISOLATE
rli           = %x2067 ; U+2067 RIGHT-TO-LEFT ISOLATE
fsi           = %x2068 ; U+2068 FIRST STRONG ISOLATE
pdi           = %x2069 ; U+2069 POP DIRECTIONAL ISOLATE
plaintext     = *( %x0000-2029 / %x202F-2065 / %x206A-10FFFF )
                ; any string with no bidirectional-algorithm formatting characters

While the U+2069 POP DIRECTIONAL ISOLATE character implicitly also ends open embeddings and overrides, text that relies on this implicit scope closure is not conforming to this specification. All strings of embeddings, overrides, and isolations need to be explicitly terminated to conform to this section's requirements.

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.6.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. [CSSWM] [CSSGC]

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):

3.2.7 WAI-ARIA

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 strong native semantics or are equal to the default implicit ARIA semantics described below. 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. [ARIA]

Authors must not set the ARIA role and aria-* attributes in a manner that conflicts with the semantics described in the following table, except that the presentation role may always be used. Authors must not set the ARIA role and aria-* attributes to values that match the default implicit ARIA semantics defined in the following two tables.

User agents must implement ARIA semantics on all HTML elements, as defined in the ARIA specifications. The default implicit ARIA semantics defined below must be recognised by implementations for the purposes of ARIA processing. [ARIAIMPL]

The ARIA attributes defined in the ARIA specifications, and the strong native semantics and default implicit ARIA semantics defined below, 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.

The following table defines the strong native semantics and corresponding default implicit ARIA semantics that apply to HTML elements. Each language feature (element or attribute) in a cell in the first column implies the ARIA semantics (any role, states, and properties) given in the cell in the second column of the same row. When multiple rows apply to an element, the role from the last row to define a role must be applied, and the states and properties from all the rows must be combined.

Language feature Strong native semantics and default implicit ARIA semantics
area element that creates a hyperlink link role
base element No role
datalist element listbox role, with the aria-multiselectable property set to "false"
details element aria-expanded state set to "true" if the element's open attribute is present, and set to "false" otherwise
dialog element without an open attribute The aria-hidden state set to "true"
fieldset element group role
head element No role, with the aria-hidden state set to "true"
hgroup element heading role, with the aria-level property set to the element's outline depth
hr element separator role
html element No role
img element whose alt attribute's value is empty presentation role
input element with a type attribute in the Checkbox state aria-checked state set to "mixed" if the element's indeterminate IDL attribute is true, or "true" if the element's checkedness is true, or "false" otherwise
input element with a type attribute in the Colour state No role
input element with a type attribute in the Date state No role, with the aria-readonly property set to "true" if the element has a readonly attribute
input element with a type attribute in the Date and Time state No role, with the aria-readonly property set to "true" if the element has a readonly attribute
input element with a type attribute in the Local Date and Time state No role, with the aria-readonly property set to "true" if the element has a readonly attribute
input element with a type attribute in the E-mail state with no suggestions source element textbox role, with the aria-readonly property set to "true" if the element has a readonly attribute
input element with a type attribute in the File Upload state No role
input element with a type attribute in the Hidden state No role
input element with a type attribute in the Month state No role, with the aria-readonly property set to "true" if the element has a readonly attribute
input element with a type attribute in the Number state spinbutton role, with the aria-readonly property set to "true" if the element has a readonly attribute, the aria-valuemax property set to the element's maximum, the aria-valuemin property set to the element's minimum, and, if the result of applying the rules for parsing floating-point number values to the element's value is a number, with the aria-valuenow property set to that number
input element with a type attribute in the Password state textbox role, with the aria-readonly property set to "true" if the element has a readonly attribute
input element with a type attribute in the Radio Button state aria-checked state set to "true" if the element's checkedness is true, or "false" otherwise
input element with a type attribute in the Range state and the multiple attribute not specified slider role, with the aria-valuemax property set to the element's maximum, the aria-valuemin property set to the element's minimum, and the aria-valuenow property set to the result of applying the rules for parsing floating-point number values to the element's value, if that results in a number, or the default value otherwise
input element with a type attribute in the Range state and the multiple attribute not specified aria-valuemax property set to the element's maximum, and the aria-valuemin property set to the element's minimum
input element with a type attribute in the Reset Button state button role
input element with a type attribute in the Search state with no suggestions source element textbox role, with the aria-readonly property set to "true" if the element has a readonly attribute
input element with a type attribute in the Submit Button state button role
input element with a type attribute in the Telephone state with no suggestions source element textbox role, with the aria-readonly property set to "true" if the element has a readonly attribute
input element with a type attribute in the Text state with no suggestions source element textbox role, with the aria-readonly property set to "true" if the element has a readonly attribute
input element with a type attribute in the Text, Search, Telephone, URL, or E-mail states with a suggestions source element combobox role, with the aria-owns property set to the same value as the list attribute, and the aria-readonly property set to "true" if the element has a readonly attribute
input element with a type attribute in the Time state No role, with the aria-readonly property set to "true" if the element has a readonly attribute
input element with a type attribute in the URL state with no suggestions source element textbox role, with the aria-readonly property set to "true" if the element has a readonly attribute
input element with a type attribute in the Week state No role, with the aria-readonly property set to "true" if the element has a readonly attribute
input element that is required The aria-required state set to "true"
keygen element No role
label element No role
link element that creates a hyperlink link role
menu element with a type attribute in the popup menu state No role
meta element No role
meter element No role
nav element navigation role
noscript element No role, with the aria-hidden state set to "true"
optgroup element No role
option element that is in a list of options aria-selected and aria-checked states set to "true" if the element's selectedness is true, and "false" otherwise
option element that represents a suggestion in a datalist element or that is in a list of options of a select element with a multiple attribute or a display size greater than 1 option role
param element No role
progress element progressbar role, with, if the progress bar is determinate, the aria-valuemax property set to the maximum value of the progress bar, the aria-valuemin property set to zero, and the aria-valuenow property set to the current value of the progress bar
script element No role, with the aria-hidden state set to "true"
select element with a multiple attribute listbox role, with the aria-multiselectable property set to "true"
select element with no multiple attribute and with a display size equal to 1 aria-multiselectable property set to "false"
select element with no multiple attribute and with a display size greater than 1 listbox role, with the aria-multiselectable property set to "false"
select element with a required attribute The aria-required state set to "true"
source element No role
style element No role, with the aria-hidden state set to "true"
summary element No role
table element grid role with the aria-readonly property set to "true"
tbody element rowgroup role
td element gridcell role
template element No role, with the aria-hidden state set to "true"
textarea element textbox role, with the aria-multiline property set to "true", and the aria-readonly property set to "true" if the element has a readonly attribute
textarea element with a required attribute The aria-required state set to "true"
tfoot element rowgroup role
thead element rowgroup role
th element that is a sorting-capable th element whose column key ordinality is 1 columnheader role, with the aria-sort state set to "ascending" if the element's column sort direction is normal, and "descending" otherwise.
title element No role
tr element row role
Element that is disabled The aria-disabled state set to "true"
Element that is inert The aria-hidden state set to "true"
Element with a hidden attribute The aria-hidden state set to "true"
Element that is a candidate for constraint validation but that does not satisfy its constraints The aria-invalid state set to "true"

Some HTML elements have native semantics that can be overridden. The following table lists these elements and their default implicit ARIA semantics, along with the restrictions that apply to those elements. Each language feature (element or attribute) in a cell in the first column implies, unless otherwise overridden, the ARIA semantic (role, state, or property) given in the cell in the second column of the same row, but this semantic may be overridden under the conditions listed in the cell in the third column of that row. In addition, any element may be given the presentation role, regardless of the restrictions below.

Language feature Default implicit ARIA semantic Restrictions
a element that creates a hyperlink link role Role must be either link, menuitem, tab, or treeitem
address element No role If specified, role must be contentinfo
article element article role Role must be either article, document, application, or main
aside element complementary role Role must be either complementary, note, or search
audio element No role If specified, role must be application
button element button role Role must be either button, menuitem
details element group role Role must be a role that supports aria-expanded
dialog element dialog role Role must be either alert, alertdialog, application, contentinfo, dialog, document, log, main, marquee, region, search, or status
embed element No role If specified, role must be either application, document, or img
footer element No role If specified, role must be contentinfo
h1 element that does not have an hgroup ancestor heading role, with the aria-level property set to the element's outline depth Role must be either heading or tab
h2 element that does not have an hgroup ancestor heading role, with the aria-level property set to the element's outline depth Role must be either heading or tab
h3 element that does not have an hgroup ancestor heading role, with the aria-level property set to the element's outline depth Role must be either heading or tab
h4 element that does not have an hgroup ancestor heading role, with the aria-level property set to the element's outline depth Role must be either heading or tab
h5 element that does not have an hgroup ancestor heading role, with the aria-level property set to the element's outline depth Role must be either heading or tab
h6 element that does not have an hgroup ancestor heading role, with the aria-level property set to the element's outline depth Role must be either heading or tab
header element No role If specified, role must be banner
iframe element No role If specified, role must be either application, document, or img
img element whose alt attribute's value is absent img role No restrictions
img element whose alt attribute's value is present and not empty img role No restrictions
input element with a type attribute in the Button state button role Role must be either button, menuitem
input element with a type attribute in the Checkbox state checkbox role Role must be either checkbox or menuitemcheckbox
input element with a type attribute in the Image Button state button role Role must be either button, menuitem
input element with a type attribute in the Radio Button state radio role Role must be either radio or menuitemradio
li element whose parent is an ol or ul element listitem role Role must be either listitem, menuitemcheckbox, menuitemradio, option, tab, or treeitem
main element main role Role must be either document, application, or main
menu element with a type attribute in the toolbar state toolbar role Role must be either directory, list, listbox, menu, menubar, tablist, toolbar, or tree
object element No role If specified, role must be either application, document, or img
ol element list role Role must be either directory, group, list, listbox, menu, menubar, tablist, toolbar, or tree
option element that is in a list of options of a select element with no multiple attribute and with a display size equal to 1 option role Role must be either option, menuitem, menuitemradio, or separator
output element status role No restrictions
section element region role Role must be either alert, alertdialog, application, contentinfo, dialog, document, log, main, marquee, region, search, or status
select element with no multiple attribute and with a display size equal to 1 listbox role Role must be either listbox or menu
th element that is not a sorting-capable th element or whose column key ordinality is not 1 gridcell role Role must be either columnheader, rowheader, or gridcell
ul element list role Role must be either directory, group, list, listbox, menu, menubar, tablist, toolbar, or tree
video element No role If specified, role must be application
The body element document role Role must be either document or application

The entry "no role", when used as a strong native semantic, means that no role other than presentation can be used. When used as a default implicit ARIA semantic, it means the user agent has no default mapping to ARIA roles. (However, it probably will have its own mappings to the accessibility layer.)

Conformance checkers are encouraged to phrase errors such that authors are encouraged to use more appropriate elements rather than remove accessibility annotations. For example, if an a element is marked as having the button role, a conformance checker could say "Use a more appropriate element to represent a button, for example a button element or an input element" rather than "The button role cannot be used with a elements".

These features can be used to make accessibility tools render content to their users in more useful ways. For example, ASCII art, which is really an image, appears to be text, and in the absence of appropriate annotations would end up being rendered by screen readers as a very painful reading of lots of punctuation. Using the features described in this section, one can instead make the ATs skip the ASCII art and just read the caption:

<figure role="img" aria-labelledby="fish-caption"> 
 <pre>
 o           .'`/
     '      /  (
   O    .-'` ` `'-._      .')
      _/ (o)        '.  .' /
      )       )))     ><  <
      `\  |_\      _.'  '. \
        '-._  _ .-'       '.)
    jgs     `\__\
 </pre>
 <figcaption id="fish-caption">
  Joan G. Stark, "<cite>fish</cite>".
  October 1997. ASCII on electrons. 28×8.
 </figcaption>
</figure>
   

4 The elements of HTML

4.1 The root element

4.1.1 The html element

Categories:
None.
Contexts in which this element can be used:
As the root element of a document.
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
manifestApplication cache manifest
DOM interface:
interface HTMLHtmlElement : HTMLElement {
  // also has obsolete members
};

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 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 resolving of relative 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.

The html element in the following example declares that the document's language is English.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Swapping Songs</title>
</head>
<body>
<h1>Swapping Songs</h1>
<p>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.</p>
</body>
</html>

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 can 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 can be omitted if the head element is not immediately followed by a space character or a comment.
Content attributes:
Global 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:

<!doctype html>
<html>
 <head>
  <title>A document with a short head</title>
 </head>
 <body>
 ...

Here is an example of a longer one:

<!DOCTYPE HTML>
<HTML>
 <HEAD>
  <META CHARSET="UTF-8">
  <BASE HREF="http://www.example.com/">
  <TITLE>An application with a long head</TITLE>
  <LINK REL="STYLESHEET" HREF="default.css">
  <LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text">
  <SCRIPT SRC="support.js"></SCRIPT>
  <META NAME="APPLICATION-NAME" CONTENT="Long headed application">
 </HEAD>
 <BODY>
 ...

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.

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 whitespace.
Tag omission in text/html:
Neither tag is omissible.
Content attributes:
Global 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 contents of the element, ignoring child nodes that aren't Text nodes.

Can be set, to replace the element's children with the given value.

The IDL attribute text must return a concatenation of the contents of all the Text nodes that are children of the title element (ignoring any other nodes such as comments or elements), in tree order. 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.

  <title>Introduction to The Mating Rituals of Bees</title>
    ...
  <h1>Introduction</h1>
  <p>This companion guide to the highly successful
  <cite>Introduction to Medieval Bee-Keeping</cite> 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:

  <title>Dances used during bee mating rituals</title>
    ...
  <h1>The Dances</h1>

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
hrefDocument base URL
target — Default browsing context for hyperlink navigation and form submission
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 resolving relative 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 particular Document has a frozen base URL. The frozen base URL must be set, synchronously, whenever any of the following situations occur:

To set the frozen base URL, resolve the value of the element's href content attribute relative to the Document's fallback base URL; if this is successful, set the frozen base URL to the resulting absolute URL, otherwise, set the frozen base URL to the fallback base URL.

The href IDL attribute, on getting, must return the result of running the following algorithm:

  1. If the base element has no href content attribute, then return the document base URL and abort these steps.

  2. Let fallback base url be the Document's fallback base URL.

  3. Let url be the value of the href attribute of the base element.

  4. Resolve url relative to fallback base url (thus, the base href attribute isn't affected by xml:base attributes or base elements).

  5. If the previous step was successful, return the resulting absolute URL and abort these steps.

  6. Otherwise, return the empty string.

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:

<!DOCTYPE html>
<html>
    <head>
        <title>This is an example for the &lt;base&gt; element</title>
        <base href="http://www.example.com/news/index.html">
    </head>
    <body>
        <p>Visit the <a href="archives.html">archives</a>.</p>
    </body>
</html>

The link in the above example would be a link to "http://www.example.com/news/archives.html".

Categories:
Metadata content.
If the itemprop attribute is present: flow content.
If the itemprop attribute is present: 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 itemprop attribute is present: 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 between the document containing the hyperlink and the destination resource
media — Applicable media
hreflang — Language of the linked resource
type — Hint for the type of the referenced resource
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.
DOM interface:
interface HTMLLinkElement : HTMLElement {
           attribute DOMString href;
           attribute DOMString crossOrigin;
           attribute DOMString rel;
  readonly attribute DOMTokenList relList;
           attribute DOMString media;
           attribute DOMString hreflang;
           attribute DOMString type;
  [PutForwards=value] readonly attribute DOMSettableTokenList sizes;

  // also has obsolete members
};
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.

A link element must have either a rel attribute or an itemprop attribute, but not both.

If the rel attribute is used, the element is restricted to the head element. When used with the itemprop attribute, the element can be used both in the head element and in the body of the page, subject to the constraints of the microdata model.

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.

Two categories of links can be created using the link element: Links to external resources and hyperlinks. The 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):

<link rel="author license" href="/about">

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.

The crossorigin attribute is a CORS settings attribute. It is intended for use with external resource links.

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).

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. Resolve the URL given by the href attribute, relative to the element.

  3. If the previous step fails, then abort these steps.

  4. Do a potentially CORS-enabled fetch of the resulting absolute URL, with the mode being the current state of the element's crossorigin content attribute, the origin being the origin of the link element's Document, and the default origin behaviour set to taint.

    The resource obtained in this fashion can be either CORS-same-origin or CORS-cross-origin.

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 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.)


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:

User agents could also include other information, such as the type of the resource (as given by the type attribute).

Hyperlinks created with the link element and its rel attribute apply to the whole page. 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 media attribute says which media the resource applies to. The value must be a valid media query.

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 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.

The default, if the media attribute is omitted, is "all", meaning that by default links apply to all media.

The hreflang attribute on the link element has the same semantics as the hreflang attribute on a and area elements.

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. If the 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 UA does not support the given MIME type for the given link relationship, then the UA should not obtain the resource; if the UA does support the given MIME type for the given link relationship, then the UA 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.

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:

<link rel="stylesheet" href="A" type="text/plain">
<link rel="stylesheet" href="B" type="text/css">
<link rel="stylesheet" href="C">

...then a compliant UA 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.

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 is used with the icon link type. The attribute must not be specified on link elements that do not have a rel attribute that specifies the icon keyword.

The activation behavior of link elements that create hyperlinks is to run the following steps:

  1. If the link element's Document is not fully active, then abort these steps.

  2. Follow the hyperlink created by the link element.

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 to be processed according to the rules given in the relevant specifications. [HTTP] [WEBLINK]

Registration of relation types in HTTP Link: headers is distinct from HTML link types, and thus their semantics can be different from same-named HTML types.

The IDL attributes href, rel, media, hreflang, type, and sizes each must reflect the respective content attributes of the same name.

The crossOrigin IDL attribute must reflect the crossorigin content attribute, limited to only known values.

The IDL attribute relList must reflect the rel content attribute.

The LinkStyle interface is also implemented by this element. [CSSOM]

Here, a set of link elements provide some style sheets:

<!-- a persistent style sheet -->
<link rel="stylesheet" href="default.css">

<!-- the preferred alternate style sheet -->
<link rel="stylesheet" href="green.css" title="Green styles">

<!-- some alternate style sheets -->
<link rel="alternate stylesheet" href="contrast.css" title="High contrast">
<link rel="alternate stylesheet" href="big.css" title="Big fonts">
<link rel="alternate stylesheet" href="wide.css" title="Wide screen">

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:

<link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML">
<link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML">
<link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="English HTML (for printing)">
<link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)">
<link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="English PDF">
<link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF">

4.2.5 The meta element

Categories:
Metadata content.
If the itemprop attribute is present: flow content.
If the itemprop attribute is present: phrasing 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.
If the itemprop attribute is present: where metadata content is expected.
If the itemprop attribute is present: where phrasing 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
charsetCharacter encoding declaration
DOM interface:
interface HTMLMetaElement : HTMLElement {
           attribute DOMString name;
           attribute DOMString httpEquiv;
           attribute DOMString content;

  // also has obsolete members
};

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 serialised 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, charset, and itemprop attributes must be specified.

If either name, http-equiv, or itemprop 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.

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 root 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:

<meta name=generator content="Frontweaver 8.2">
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:

<!DOCTYPE HTML>
<html>
 <head>
  <title>Typefaces on UK motorways</title>
  <meta name="keywords" content="british,type face,font,fonts,highway,highways">
 </head>
 <body>
  ...

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.

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 must 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 rejected 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 whitespace.

  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 almost, but not quite, entirely unlike the HTTP Content-Language header of the same name. [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, but elements with an http-equiv attribute in that state must not be used in XML documents.

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 last step of this list of steps), 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 whitespace.

  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. Skip whitespace.

  9. Let url be the address of the current page.

  10. If the character in input pointed to by position is a U+003B SEMICOLON character (;) or a U+002C COMMA character (,), then advance position to the next character. Otherwise, jump to the last step.

  11. Skip whitespace.

  12. 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 last step.

  13. 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 last step.

  14. 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 last step.

  15. Skip whitespace.

  16. 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 last step.

  17. Skip whitespace.

  18. 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.

  19. Let url be equal to the substring of input from the character at position to the end of the string.

  20. 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.

  21. Strip any trailing space characters from the end of url.

  22. Strip any U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED (LF), and U+000D CARRIAGE RETURN (CR) characters from url.

  23. Resolve the url value to an absolute URL, relative to the meta element. If this fails, abort these steps.

  24. Perform one or more of the following steps:

    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:

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:

<meta http-equiv="Refresh" content="300">

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:

<meta http-equiv="Refresh" content="20; URL=page4.html">
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. Obtain the storage mutex.

  3. Act as if receiving a set-cookie-string for the document's address via a "non-HTTP" API, consisting of the value of the element's content attribute encoded as UTF-8. [COOKIES] [ENCODING]

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:

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 character 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 character 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]

Encodings in which a series of bytes in the range 0x20 to 0x7E can encode characters other than the corresponding characters in the range U+0020 to U+007E represent a potential security vulnerability: a user agent that does not support the encoding (or does not support the label used to declare the encoding, or does not use the same mechanism to detect the encoding of unlabeled content as another user agent) might end up interpreting technically benign plain text content as HTML tags and JavaScript. Authors should therefore not use these encodings. For example, this applies to encodings in which the bytes corresponding to "<script>" in ASCII can encode a different string. Authors should not use such encodings, which are known to include JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB (Windows code page 1361), encodings based on ISO-2022, and encodings based on EBCDIC. Furthermore, authors must not use the CESU-8, UTF-7, BOCU-1 and SCSU encodings, which also fall into this category; these encodings were never intended for use for Web content. [RFC1345] [RFC1842] [RFC1468] [RFC2237] [RFC1554] [CP50220] [RFC1922] [RFC1557] [CESU8] [UTF7] [BOCU1] [SCSU]

Authors should not use UTF-32, as the encoding detection algorithms described in this specification intentionally do not distinguish it from UTF-16. [UNICODE]

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):

<meta charset="utf-8">

In XML, the XML declaration would be used instead, at the very top of the markup:

<?xml version="1.0" encoding="utf-8"?>

4.2.6 The style element

Categories:
Metadata content.
If the scoped attribute is present: flow content.
Contexts in which this element can be used:
If the scoped attribute is absent: where metadata content is expected.
If the scoped attribute is absent: in a noscript element that is a child of a head element.
If the scoped attribute is present: where flow content is expected, but before any other flow content other than inter-element whitespace and style elements, and not as the child of an element whose content model is transparent.
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
type — Type of embedded resource
scoped — Whether the styles apply to the entire document or just the parent subtree
Also, the title attribute has special semantics on this element: Alternative style sheet set name.
DOM interface:
interface HTMLStyleElement : HTMLElement {
           attribute DOMString media;
           attribute DOMString type;
           attribute boolean scoped;
};
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. 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.

The scoped attribute is a boolean attribute. If present, it indicates that the styles are intended just for the subtree rooted at the style element's parent element, as opposed to the whole Document.

If the scoped attribute is present and the element has a parent element, then the style element must precede any flow content in its parent element other than inter-element whitespace and other style elements, and the parent element's content model must not have a transparent component.

This implies that scoped style elements cannot be children of, e.g., a or ins elements, even when those are used as flow content containers.

A style element without a scoped attribute is restricted to appearing in the head of the document.

A style sheet declared by a style element that has a scoped attribute and has a parent node that is an element is scoped, with the scoping root being the style element's parent element. [CSSSCOPED]

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       = "<!--"
no-c-end      = < any string that doesn't contain a substring that matches c-end >
c-end         = "-->"

Whenever one of the following conditions occur:

...the user agent must queue a task to invoke the update a style block algorithm that applies for the style sheet language specified by the element's type attribute, passing it the element's style data.

For styling languages that consist of pure text (as opposed to XML), a style element's style data is the concatenation of the contents of all the Text nodes that are children 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. 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.

    location
    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 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]

The media, type and scoped 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.

<!DOCTYPE html>
<html lang="en-US">
 <head>
  <title>My favorite book</title>
  <style>
   body { color: black; background: white; }
   em { font-style: normal; color: red; }
  </style>
 </head>
 <body>
  <p>My <em>favorite</em> book of all time has <em>got</em> to be
  <cite>A Cat's Life</cite>. It is a book by P. Rahmel that talks
  about the <i lang="la">Felis Catus</i> in modern human society.</p>
 </body>
</html>

4.2.7 Interactions of styling and scripting

Style sheets, whether added by a link element, a style element, an <?xml-stylesheet?> 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 synchronously 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 that contributes to the styling processing model 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 colour 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 colour is), and might thus make poor choices (e.g. deciding to use black as the colour 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 can 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 can 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
onstorage
onunload
DOM interface:
interface HTMLBodyElement : HTMLElement {

  // also has obsolete members
};
HTMLBodyElement implements WindowEventHandlers;

The body element represents the main 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:

<!DOCTYPE HTML>
<html>
 <head>
  <title>Online or offline?</title>
  <script>
   function update(online) {
     document.getElementById('status').textContent =
       online ? 'Online' : 'Offline';
   }
  </script>
 </head>
 <body ononline="update(true)"
       onoffline="update(false)"
       onload="update(navigator.onLine)">
  <p>You are: <span id="status">(Unknown)</span></p>
 </body>
</html>

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.
Tag omission in text/html:
Neither tag is omissible.
Content attributes:
Global attributes
DOM interface:
Uses HTMLElement.

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

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 that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

Author information associated with an article element (q.v. the address element) does not apply to nested article elements.

When used specifically with content to be redistributed in syndication, the article element is similar in purpose to the entry element in Atom. [ATOM]

The schema.org microdata vocabulary can be used to provide the publication date for an article element, using one of the CreativeWork subtypes.

When the main content of the page (i.e. excluding footers, headers, navigation blocks, and sidebars) is all one single self-contained composition, that content may be marked with an article, but it is technically redundant in that case (since it's self-evident that the page is a single composition, as it is a single document).

This example shows a blog post using the article element, with some schema.org annotations:

<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h1 itemprop="headline">The Very First Rule of Life</h1>
  <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <footer>
  <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
 </footer>
</article>

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

<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h1 itemprop="headline">The Very First Rule of Life</h1>
  <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <section>
  <h1>Comments</h1>
  <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1">
   <link itemprop="url" href="#c1">
   <footer>
    <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">George Washington</span>
    </span></p>
    <p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p>
   </footer>
   <p>Yeah! Especially when talking about your lobbyist friends!</p>
  </article>
  <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2">
   <link itemprop="url" href="#c2">
   <footer>
    <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">George Hammond</span>
    </span></p>
    <p><time itemprop="commentTime" datetime="2009-10-10">5 minutes ago</time></p>
   </footer>
   <p>Hey, you have the same first name as me.</p>
  </article>
 </section>
</article>

Notice the use of footer to give the information for each comment (such as who wrote it and when): the footer element can appear at the start of its section when appropriate, such as in this case. (Using header in this case wouldn't be wrong either; it's mostly a matter of authoring preference.)

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
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, typically with a heading.

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 it would make sense to syndicate the contents of the element.

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.

In the following example, we see an article (part of a larger Web page) about apples, containing two short sections.

<article>
 <hgroup>
  <h1>Apples</h1>
  <h2>Tasty, delicious fruit!</h2>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h1>Red Delicious</h1>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
 </section>
 <section>
  <h1>Granny Smith</h1>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
 </section>
</article>

Notice how the use of section means that the author can use h1 elements throughout, without having to worry about whether a particular section is at the top level, the second level, the third level, and so on.

Here is a graduation programme 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 minimise the amount of inter-element whitespace.)

<!DOCTYPE Html>
<Html
 ><Head
   ><Title
     >Graduation Ceremony Summer 2022</Title
   ></Head
 ><Body
   ><H1
     >Graduation</H1
   ><Section
     ><H1
       >Ceremony</H1
     ><P
       >Opening Procession</P
     ><P
       >Speech by Validactorian</P
     ><P
       >Speech by Class President</P
     ><P
       >Presentation of Diplomas</P
     ><P
       >Closing Speech by Headmaster</P
   ></Section
   ><Section
     ><H1
       >Graduates</H1
     ><Ul
       ><Li
         >Molly Carpenter</Li
       ><Li
         >Anastasia Luccio</Li
       ><Li
         >Ebenezar McCoy</Li
       ><Li
         >Karrin Murphy</Li
       ><Li
         >Thomas Raith</Li
       ><Li
         >Susan Rodriguez</Li
     ></Ul
   ></Section
 ></Body
></Html>

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.

<article class="book">
 <style>
  section { border: double medium; margin: 2em; }
  section.chapter h1 { font: 2em Roboto, Helvetica Neue, sans-serif; }
  section.appendix h1 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
 </style>
 <header>
  <hgroup>
   <h1>My Book</h1>
   <h2>A sample with not much content</h2>
  </hgroup>
  <p><small>Published by Dummy Publicorp Ltd.</small></p>
 </header>
 <section class="chapter">
  <h1>My First Chapter</h1>
  <p>This is the first of my chapters. It doesn't say much.</p>
  <p>But it has two paragraphs!</p>
 </section>
 <section class="chapter">
  <h1>It Continutes: The Second Chapter</h1>
  <p>Bla dee bla, dee bla dee bla. Boom.</p>
 </section>
 <section class="chapter">
  <h1>Chapter Three: A Further Example</h1>
  <p>It's not like a battle between brightness and earthtones would go
  unnoticed.</p>
  <p>But it might ruin my story.</p>
 </section>
 <section class="appendix">
  <h1>Appendix A: Overview of Examples</h1>
  <p>These are demonstrations.</p>
 </section>
 <section class="appendix">
  <h1>Appendix B: Some Closing Remarks</h1>
  <p>Hopefully this long example shows that you <em>can</em> style
  sections, so long as they are used to indicate actual sections.</p>
 </section>
</article>

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
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.

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.

<body>
 <h1>The Wiki Center Of Exampland</h1>
 <nav>
  <ul>
   <li><a href="/">Home</a></li>
   <li><a href="/events">Current Events</a></li>
   ...more...
  </ul>
 </nav>
 <article>
  <header>
   <h1>Demos in Exampland</h1>
   <p>Written by A. N. Other.</p>
  </header>
  <nav>
   <ul>
    <li><a href="#public">Public demonstrations</a></li>
    <li><a href="#destroy">Demolitions</a></li>
    ...more...
   </ul>
  </nav>
  <div>
   <section id="public">
    <h1>Public demonstrations</h1>
    <p>...more...</p>
   </section>
   <section id="destroy">
    <h1>Demolitions</h1>
    <p>...more...</p>
   </section>
   ...more...
  </div>
  <footer>
   <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
  </footer>
 </article>
 <footer>
  <p><small>© copyright 1998 Exampland Emperor</small></p>
 </footer>
</body>

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

<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
  <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h1 itemprop="headline">My Day at the Beach</h1>
   </header>
   <main itemprop="articleBody">
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </main>
   <footer>
    <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="copyrightHolder">The Example Company</span>
  </p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>

Notice the main elements being used to wrap all the contents of the page other than the header and footer, and all the contents of the blog entry other than its 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:

<nav>
 <h1>Navigation</h1>
 <p>You are on my home page. To the north lies <a href="/blog">my
 blog</a>, from whence the sounds of battle can be heard. To the east
 you can see a large mountain, upon which many <a
 href="/school">school papers</a> are littered. Far up thus mountain
 you can spy a little figure who appears to be me, desperately
 scribbling a <a href="/school/thesis">thesis</a>.</p>
 <p>To the west are several exits. One fun-looking exit is labeled <a
 href="http://games.example.com/">"games"</a>. Another more
 boring-looking exit is labeled <a
 href="http://isp.example.net/">ISP™</a>.</p>
 <p>To the south lies a dark and dank <a href="/about">contacts
 page</a>. Cobwebs cover its disused entrance, and at one point you
 see a rat run quickly out of the page.</p>
</nav>

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
DOM interface:
Uses HTMLElement.

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, 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 page.

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.

<aside>
 <h1>Switzerland</h1>
 <p>Switzerland, a land-locked country in the middle of geographic
 Europe, has not joined the geopolitical European Union, though it is
 a signatory to a number of European treaties.</p>
</aside>

The following example shows how an aside is used to mark up a pull quote in a longer article.

...

<p>He later joined a large company, continuing on the same work.
<q>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.</q></p>

<aside>
 <q> 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. </q>
</aside>

<p>Of course his work — or should that be hobby? —
isn't his only passion. He also enjoys other pleasures.</p>

...

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

<body>
 <header>
  <h1>My wonderful blog</h1>
  <p>My tagline</p>
 </header>
 <aside>
  <!-- this aside contains two sections that are tangentially related
  to the page, namely, links to other blogs, and links to blog posts
  from this blog -->
  <nav>
   <h1>My blogroll</h1>
   <ul>
    <li><a href="http://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
  <nav>
   <h1>Archives</h1>
   <ol reversed>
    <li><a href="/last-post">My last post</a>
    <li><a href="/first-post">My first post</a>
   </ol>
  </nav>
 </aside>
 <aside>
  <!-- this aside is tangentially related to the page also, it
  contains twitter messages from the blog author -->
  <h1>Twitter Feed</h1>
  <blockquote cite="http://twitter.example.net/t31351234">
   I'm on vacation, writing my blog.
  </blockquote>
  <blockquote cite="http://twitter.example.net/t31219752">
   I'm going to go on vacation soon.
  </blockquote>
 </aside>
 <article>
  <!-- this is a blog post -->
  <h1>My last post</h1>
  <p>This is my last post.</p>
  <footer>
   <p><a href="/last-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <article>
  <!-- this is also a blog post -->
  <h1>My first post</h1>
  <p>This is my first post.</p>
  <aside>
   <!-- this aside is about the blog post, since it's inside the
   <article> element; it would be wrong, for instance, to put the
   blogroll here, since the blogroll isn't really related to this post
   specifically, only to the page as a whole -->
   <h1>Posting</h1>
   <p>While I'm thinking about it, I wanted to say something about
   posting. Posting is fun!</p>
  </aside>
  <footer>
   <p><a href="/first-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <footer>
  <nav>
   <a href="/archives">Archives</a> —
   <a href="/about">About me</a> —
   <a href="/copyright">Copyright</a>
  </nav>
 </footer>
</body>

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:
As a child of an hgroup element.
Where flow content is expected.
Content model:
Phrasing content.
Tag omission in text/html:
Neither tag is omissible.
Content attributes:
Global attributes
DOM interface:
interface HTMLHeadingElement : HTMLElement {
  // also has obsolete members
};

These elements represent headings for their sections.

The semantics and meaning of these elements are defined in the section on headings and sections.

These elements have a rank given by the number in their name. The h1 element is said to have the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank.

As far as their respective document outlines (their heading and section structures) are concerned, these two snippets are semantically equivalent:

<body>
<h1>Let's call it a draw(ing surface)</h1>
<h2>Diving in</h2>
<h2>Simple shapes</h2>
<h2>Canvas coordinates</h2>
<h3>Canvas coordinates diagram</h3>
<h2>Paths</h2>
</body>
<body>
 <h1>Let's call it a draw(ing surface)</h1>
 <section>
  <h1>Diving in</h1>
 </section>
 <section>
  <h1>Simple shapes</h1>
 </section>
 <section>
  <h1>Canvas coordinates</h1>
  <section>
   <h1>Canvas coordinates diagram</h1>
  </section>
 </section>
 <section>
  <h1>Paths</h1>
 </section>
</body>

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. This third snippet again has the same outline as the previous two:

<body>
 <h1>Let's call it a draw(ing surface)</h1>
 <section>
  <h2>Diving in</h2>
 </section>
 <section>
  <h2>Simple shapes</h2>
 </section>
 <section>
  <h2>Canvas coordinates</h2>
  <section>
   <h3>Canvas coordinates diagram</h3>
  </section>
 </section>
 <section>
  <h2>Paths</h2>
 </section>
</body>

4.3.7 The hgroup element

Categories:
Flow content.
Heading content.
Palpable content.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
One or more h1, h2, h3, h4, h5, h6, and template elements.
Tag omission in text/html:
Neither tag is omissible.
Content attributes:
Global attributes
DOM interface:
Uses HTMLElement.

The hgroup element represents the heading of a section, which consists of all the h1h6 element children of the hgroup element. The element is used to group a set of h1h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

The rank of an hgroup element is the rank of the highest-ranked h1h6 element descendant of the hgroup element, if there are any such elements, or otherwise the same as for an h1 element (the highest rank). Other elements of heading content in the hgroup element indicate subheadings or subtitles.

The section on headings and sections defines how hgroup elements are assigned to individual sections.

Here are some examples of valid headings.

<hgroup>
 <h1>The reality dysfunction</h1>
 <h2>Space is not the only void</h2>
</hgroup>
<hgroup>
 <h1>Dr. Strangelove</h1>
 <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
</hgroup>

The point of using hgroup in these examples is to mask the h2 element (which acts as a secondary title) from the outline algorithm.

How a user agent exposes such multi-level headings in user interfaces (e.g. in tables of contents or search results) is left open to implementors, as it is a user interface issue. The first example above could be rendered as:

The reality dysfunction: Space is not the only void

Alternatively, it could look like this:

The reality dysfunction (Space is not the only void)

In interfaces where a title can be rendered on multiple lines, it could be rendered as follows, maybe with the first line in a bigger font size:

The reality dysfunction
Space is not the only void

4.3.8 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 header, footer, or main element descendants.
Tag omission in text/html:
Neither tag is omissible.
Content attributes:
Global attributes
DOM interface:
Uses HTMLElement.

The header element represents a group of introductory or navigational aids.

A header element is intended to usually contain the section's heading (an h1h6 element or an hgroup 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:

<header>
 <p>Welcome to...</p>
 <h1>Voidwars!</h1>
</header>

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

<header>
 <hgroup>
  <h1>Scalable Vector Graphics (SVG) 1.2</h1>
  <h2>W3C Working Draft 27 October 2004</h2>
 </hgroup>
 <dl>
  <dt>This version:</dt>
  <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/">http://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd>
  <dt>Previous version:</dt>
  <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20040510/">http://www.w3.org/TR/2004/WD-SVG12-20040510/</a></dd>
  <dt>Latest version of SVG 1.2:</dt>
  <dd><a href="http://www.w3.org/TR/SVG12/">http://www.w3.org/TR/SVG12/</a></dd>
  <dt>Latest SVG Recommendation:</dt>
  <dd><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></dd>
  <dt>Editor:</dt>
  <dd>Dean Jackson, W3C, <a href="mailto:dean@w3.org">dean@w3.org</a></dd>
  <dt>Authors:</dt>
  <dd>See <a href="#authors">Author List</a></dd>
 </dl>
 <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notic ...
</header>

The header element is not sectioning content; it doesn't introduce a new section.

In this example, the page has a page heading given by the h1 element, and two subsections whose headings are given by h2 elements. The content after the header element is still part of the last subsection started in the header element, because the header element doesn't take part in the outline algorithm.

<body>
 <header>
  <h1>Little Green Guys With Guns</h1>
  <nav>
   <ul>
    <li><a href="/games">Games</a>
    <li><a href="/forum">Forum</a>
    <li><a href="/download">Download</a>
   </ul>
  </nav>
  <h2>Important News</h2> <!-- this starts a second subsection -->
  <!-- this is part of the subsection entitled "Important News" -->
  <p>To play today's games you will need to update your client.</p>
  <h2>Games</h2> <!-- this starts a third subsection -->
 </header>
 <p>You have three active games:</p>
 <!-- this is still part of the subsection entitled "Games" -->
 ...
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 header, footer, or main element descendants.
Tag omission in text/html:
Neither tag is omissible.
Content attributes:
Global attributes
DOM interface:
Uses HTMLElement.

The footer element represents a footer for its nearest ancestor 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.

When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.

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). The primary purpose of these elements is merely to help the author write self-explanatory markup that is easy to maintain and style; they are not intended to impose specific structures on authors.

Footers don't necessarily have to appear at the end of a section, though they usually do.

When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.

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:

<body>
 <footer><a href="../">Back to index...</a></footer>
 <hgroup>
  <h1>Lorem ipsum</h1>
  <h2>The ipsum of all lorems</h2>
 </hgroup>
 <p>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.</p>
 <footer><a href="../">Back to index...</a></footer>
</body>

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

<!DOCTYPE HTML>
<HTML><HEAD>
<TITLE>The Ramblings of a Scientist</TITLE>
<BODY>
<H1>The Ramblings of a Scientist</H1>
<ARTICLE>
 <H1>Episode 15</H1>
 <VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD>
  <P><A HREF="/fm/015.ogv">Download video</A>.</P>
 </VIDEO>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-10-21T18:26-07:00">on 2009/10/21 at 6:26pm</TIME></P>
 </FOOTER>
</ARTICLE>
<ARTICLE>
 <H1>My Favorite Trains</H1>
 <P>I love my trains. My favorite train of all time is a Köf.</P>
 <P>It is fun to see them pull some coal cars because they look so
 dwarfed in comparison.</P>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-09-15T14:54-07:00">on 2009/09/15 at 2:54pm</TIME></P>
 </FOOTER>
</ARTICLE>
<FOOTER> <!-- site wide footer -->
 <NAV>
  <P><A HREF="/credits.html">Credits</A> —
     <A HREF="/tos.html">Terms of Service</A> —
     <A HREF="/index.html">Blog Index</A></P>
 </NAV>
 <P>Copyright © 2009 Gordon Freeman</P>
</FOOTER>
</BODY>
</HTML>

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":

...
 <footer>
  <nav>
   <section>
    <h1>Articles</h1>
    <p><img src="images/somersaults.jpeg" alt=""> Go to the gym with
    our somersaults class! Our teacher Jim takes you through the paces
    in this two-part article. <a href="articles/somersaults/1">Part
    1</a> · <a href="articles/somersaults/2">Part 2</a></p>
    <p><img src="images/kindplus.jpeg"> Tired of walking on the edge of
    a clif<!-- sic -->? Our guest writer Lara shows you how to bumble
    your way through the bars. <a href="articles/kindplus/1">Read
    more...</a></p>
    <p><img src="images/crisps.jpeg"> The chips are down, now all
    that's left is a potato. What can you do with it? <a
    href="articles/crisps/1">Read more...</a></p>
   </section>
   <ul>
    <li> <a href="/about">About us...</a>
    <li> <a href="/feedback">Send feedback!</a>
    <li> <a href="/sitemap">Sitemap</a>
   </ul>
  </nav>
  <p><small>Copyright © 2015 The Snacker —
  <a href="/tos">Terms of Service</a></small></p>
 </footer>
</body>

4.3.10 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
DOM interface:
Uses HTMLElement.

The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.

For example, a page at the W3C Web site related to HTML might include the following contact information:

<ADDRESS>
 <A href="../People/Raggett/">Dave Raggett</A>,
 <A href="../People/Arnaud/">Arnaud Le Hors</A>,
 contact persons for the <A href="Activity">W3C HTML Activity</A>
</ADDRESS>

The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information. (The p element is the appropriate element for marking up postal addresses in general.)

The address element must not contain information other than contact information.

For example, the following is non-conforming use of the address element:

<ADDRESS>Last Modified: 1999/12/24 23:37:50</ADDRESS>

Typically, the address element would be included along with other information in a footer element.

The contact information for a node node is a collection of address elements defined by the first applicable entry from the following list:

If node is an article element
If node is a body element

The contact information consists of all the address elements that have node as an ancestor and do not have another body or article element ancestor that is a descendant of node.

If node has an ancestor element that is an article element
If node has an ancestor element that is a body element

The contact information of node is the same as the contact information of the nearest article or body element ancestor, whichever is nearest.

If node's Document has a body element

The contact information of node is the same as the contact information of the body element of the Document.

Otherwise

There is no contact information for node.

User agents may expose the contact information of a node to the user, or use it for other purposes, such as indexing sections based on the sections' contact information.

In this example the footer contains contact information and a copyright notice.

<footer>
 <address>
  For more details, contact
  <a href="mailto:js@example.com">John Smith</a>.
 </address>
 <p><small>© copyright 2038 Example Corp.</small></p>
</footer>

4.3.11 Headings and sections

The h1h6 elements and the hgroup element are headings.

The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.

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.

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:

<body>
 <h1>Foo</h1>
 <h2>Bar</h2>
 <blockquote>
  <h3>Bla</h3>
 </blockquote>
 <p>Baz</p>
 <h2>Quux</h2>
 <section>
  <h3>Thud</h3>
 </section>
 <p>Grunt</p>
</body>

...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 any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements 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:

<body>
 <h4>Apples</h4>
 <p>Apples are fruit.</p>
 <section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
  <h6>Sweet</h6>
  <p>Red apples are sweeter than green ones.</p>
  <h1>Colour</h1>
  <p>Apples come in various colours.</p>
 </section>
</body>

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

<body>
 <h1>Apples</h1>
 <p>Apples are fruit.</p>
 <section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
  <section>
   <h3>Sweet</h3>
   <p>Red apples are sweeter than green ones.</p>
  </section>
 </section>
 <section>
  <h2>Colour</h2>
  <p>Apples come in various colours.</p>
 </section>
</body>

Both of the documents above are semantically identical and would produce the same outline in compliant user agents.

This third example is also semantically identical, and might be easier to maintain (e.g. if sections are often moved around in editing):

<body>
 <h1>Apples</h1>
 <p>Apples are fruit.</p>
 <section>
  <h1>Taste</h1>
  <p>They taste lovely.</p>
  <section>
   <h1>Sweet</h1>
   <p>Red apples are sweeter than green ones.</p>
  </section>
 </section>
 <section>
  <h1>Colour</h1>
  <p>Apples come in various colours.</p>
 </section>
</body>

This final example would need explicit style rules to be rendered well in legacy browsers. Legacy browsers without CSS support would render all the headings as top-level headings.

4.3.11.1 Creating an outline

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.

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 sections. 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:

<body>
 <h1>A</h1>
 <p>B</p>
 <h2>C</h2>
 <p>D</p>
 <h2>E</h2>
 <p>F</p>
</body>

...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 target 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. Initialise 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 target 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 target onto the stack.

    2. Let current outline target be the element that is being entered.

    3. Let current section be a newly created section for the current outline target element.

    4. Associate current outline target with current section.

    5. Let there be a new outline for the new current outline target, initialised 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 target be that element.

    3. Let current section be the last section in the outline of the current outline target 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 target is not null, push current outline target onto the stack.

    2. Let current outline target be the element that is being entered.

    3. Let current outline target's parent section be current section.

    4. Let current section be a newly created section for the current outline target element.

    5. Let there be a new outline for the new current outline target, initialised 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 target's parent section.

    3. Pop the top element from the stack, and let the current outline target be that element.

    When exiting a sectioning content element or a sectioning root element (when the stack is empty)

    The current outline target 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 element being entered has a rank equal to or higher than the heading of the last section of the outline of the current outline target, or if the heading of the last section of the outline of the current outline target is an implied heading, then create a new section and append it to the outline of the current outline target 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 target.

    4. Let candidate section be new candida