MDN HTML Guides
I want to read the MDN HTML Guides (https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories) because they look informative.
References
- MDN HTML Guides (Look at Sidebar Guides)
Notes
Content Categories
Most HTML elements are a member of one or more content categories - these categories group elements that share common characteristics. This is a loose grouping (it doesn't actually create a relationship among elements of these categories), but they help define and describe the categories' shared behavior and their associated rules, especially when you come upon their intricate details.
There are three types of content categories:
- Main content categories, which describe common rules shared by many elements
- Form-related content categories, which describe rules common to form-related elements
- Specific content categories, which describe rare categories shared only by a few elements, sometimes only in a specific context
Main Content Categories
Metadata Content
Elements belonging to the metadata content category modify the presentation or the behavior of the rest of the document, set up links to other documents, or convey other out-of-band information. Everything in the <head> is metadata content. Some of these elements belong to more than one content category.
Flow Content
Flow content is a broad category that encompasses most elements that can go inside the <body> element, including heading elements, sectioning elements, phrasing elements, embedding elements, interactive elements, and form-related elements.
Sectioning Content
Sectioning content, a subset of flow content, creates a section in the current outline defining the scope of <header> and <footer> elements. These elements are article, aside, nav, and section.
Heading Content
Heading content, a subset of flow content, defines the title of a section. This definition applies both to sections marked by an explicit sectioning content elements and to those implicitly defined by the heading content itself.
Phrasing Content
Phrasing content, a subset of flow content, refers to the text and the markup within a document. Sequences of phrasing content make up paragraphs.
Embedded Content
Embedded content, a subset of flow content, imports another resource or inserts content from another markup language or namespace into the document.
Interactive Content
Interactive content, a subset of flow content, includes elements that are specifically defined for user interaction.
Palpable Content
Content is palpable when it's neither empty nor hidden; its content that is rendered and is substantive. Elements whose model is flow content should have at least one node which is palpable.
Form-associated Content
Form-associated content is a subset of flow content comprising elements that have a form owner, exposed by a form attribute, and can be used anywhere flow content is expected. A form owner is either the containing <form> element or the element whose id is specified in the form attribute.
Secondary Content Categories
Script-Supporting Elements
Script-supporting elements are elements that don't directly contribute to a document's rendered output. Instead, they serve to support scripts, either by containing or specifying script code directly or by specifying data that will be used by scripts.
Transport Content Model
If an element has a transparent content model, then its contents must be structured such that they would be valid HTML, even if the transparent element were removed and replaced by the child elements. <ins>, <del>
Block-level Elements
In CSS, content that participates in block layout is called block-level content. In block content, boxes are laid out one after the other, vertically, beginning at the top of the containing block. Each box's left outer edge touches the left edge of the containing block. A block-level element always starts on a new line.
Inline Elements
In CSS, content that participates in inline layout is called inline-level content. Most text sequences, replaced elements, and generated content are inline-level by default. In inline layout, a mixed stream of text, replaced elements, and other inline boxes are laid out by fragmenting them into a stack of line boxes. Within each line box, inline-level boxes are aligned to each other vertically or horizontally, depending on the writing mode.
Quirks Mode and Standards Mode
There are now three modes used by the layout engines in web browsers: quirks mode, limited quirks mode, and no-quirks mode. In quirks mode, layout emulates behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. In no-quirks mode, the behavior is the desired behavior described the modern HTML and CSS specifications. In limited-quirks mode, there are only a very small number of quirks implemented.
For HTML documents, browsers use a doctype in the beginning of the document to decide whether to handle it in quirks mode or standards mode. The doctype <!doctype html> is the one recommended by current HTML standards.
Date and Time Formats used in HTML
Certain HTML elements use date and/or time values. HTML uses a variation of the IDO 8601 standard for its date and time strings. Date and time strings are always strings which use the ACII character set. The HTML specification requires that all years be given using the modern Gregorian calendar.
A week string specifies a week within a particular year. A valid week string consists of a valid year number, followed by a hyphen, then the capital letter W, followed by a two-digit week of the year value.
A valid month string consists of a valid year number, followed by a hyphen, followed by a two-digit numeric month number. A valid date string consists of a month string, followed by a hyphen, followed by the day of the month.
Constraint Validation
HTML5 introduced new mechanisms for forms: it added new semantic types for <input> element and constraint validation to ease the work of checking the form content on the client side. Basic, usual constraints can be checked, without the need for JavaScript, by setting new attributes, more complex constraints can be tested using the Constraint Validation API.
Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, or the <form> element itself. The constraint validation is done in the following ways:
- By a call to the
checkValidity()orreportValidity()method of a form-associated DOM interface, which evaluates the constraints only on this element, allowing a script to get this information. - By a call to the
checkValidity()orreportValidity()method on theHTMLFormElementinterface - By submitting the form itself
Using JavaScript and the Constraint API, it is possible to implement more complex constraints, for example, constraints combing several fields, or constraints involving complex calculations. The idea is to trigger JavaScript on some field event (like onchange) to calculate whether the constraint is violated, and then to use the method field.setCustomValidity() to set the result of the validation: an empty string means the constraint is satisfied, sand any other string means there is an error and this string is the error message to display to the user.
Microdata
Microdata is part of the WHATWG HTML Standard and is used to nest metadata within existing content on web pages. Search engines and web crawlers can extract and process microdata from a webpage and use it to provide a richer browsing experience for users. Search engines benefit greatly from direct access to this structured data because it allows search engines to understand the information on web pages and provide more relevant results to users.
At a high level, microdata consists of a group name-value pairs. The groups are called items, and each name-value pair is a property. Items and properties are represented by regular elements.
- To create an item, the
itemscopeattribute is used - To add a property to an item, the
itempropattribute is used on one of the item's descendants
Google and other major search engines support the Schema.org vocabulary for structured data.
Microformats
Microformats are standards used to embed semantics and structured data in HTML, and provide an API to be used by social web applications, search engines, aggregators, and other tools. The minimal patterns of HGTML are used for marking up entities that range from fundamental to domain-specific information, such as people, events, and locations.
Microformats use supporting vocabularies to describe objects and name-value pairs to assign values to their properties. The properties are carried in class attributes that can be added to any HTML element, while the data values re-use HTML element content and semantic attributes.
Microformats have numerous use cases:
- the Webmention standard uses microformats to provide a way in which messages and comments can be sent from one site to another
- They allow for easy syndication across sites
- All major search engines support reading and interpreting microformats
Allowing cross-origin use of images and canvas
HTML provides acrossoriginattribute for images that, in combination with an appropriate CORS header, allows images defined by the<img>element that are loaded from foreign origins to be used in a <canvas> as if they had been loaded from the current origin.
Comments
You can read more about how comments are sorted in this blog post.
User Comments
There are currently no comments for this article.