Intrinsic Vocabulary?
In the context of markup:
A vocabulary is a specific set of elements and attributes (e.g., HTML, SVG, etc.) along with their various rules for their use.
From Merriam-Webster:
intrinsic (adjective): belonging to the essential nature of a thing : occurring as a natural part of something
In the context of the Web:
An intrinsic vocabulary is one that is provided or expected by all implementations of the Open Web Platform (O
HTML5 establishes these three vocabularies as intrinsic.
pointy brackets- a midlife crisis?
From markup's assorted beginnings:
it is a 45 year old idea.
We still struggle with:
and that's just naming a few things...
But it is about as good as it gets...
HTML (hypertext) is the interface to the Web by which we view, navigate, and manipulate information.
HTML is markup with a long heritage...
We expect more!
<p>This is a paragraph.</p> ⇐ an element <img src="http://site.com/a.png"> ⇐ an empty element (no end tag) ⇑ an attribute with a quoted literal value <ol> <li>Item One</li>⇐ nested element <li>Item Two</li> </ol>
Basic document structure
<!DOCTYPE html> ⇐ This is the new HTML5 prolog. <html lang="en"> <head> <title>My First HTML Document</title> ⇐ Lots of things happen here but they don't render! </head> <body> <p>So exciting!</p> ⇐ Things you see go here. </body> </html>
<html> <head><title>Example</title></head> <body> <article> <header> <h1>Document Object Model</h1> </header> <section> <p>This is my first paragraph</p> <p>My second paragraph has a list: <ul> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ul> </p> <p>This is the third paragraph</p> </section> </article> </body> </html>
id
attributes<div id="important">something important <div>
Allows elements to be:
http://www.example.com/mydocument.html#important
The fragment is interpreted by the client and never sent to the server.
⇓ protocol http://www.example.com/mydocument.html#important ⇑ domain ⇑ path ⇑ fragment
A fragment identifier is simple string of characters typically associated with the identity of a particular location in the document format.
Structural | Content | Text | Embedded |
---|---|---|---|
article | p | a | img |
section | div | em | iframe |
header | pre | cite | audio |
footer | blockquote | q | video |
nav | ol | dfn | svg |
aside | ul | code | math |
address | figure | span | |
table | main | sub /sup |
MathML and SVG are there as part of HTML5!
As SVG is intrinsic, you can just embed images.
<h3>A smiley</h3> <svg version="1.1" width="400" height="400" ...> ... </svg>
MathML is not consistently implemented across the various browsers.
MathJAX is one way to fix this.
HTML5 has two serializations as HTML and XHTML syntax.
Namespaces: no such thing in HTML
<html xmlns="http://www.w3.org/1999/xhtml">...</html>
Empty elements have their own syntax in XHTML:
<img src="example.png"> vs <img src="example.png"/>
Boolean attributes:
<input type="checkbox" checked ...> vs <input type="checkbox" checked="checked" .../>
text/html
vs application/xhtml+xml
I prefer XHTML because I typically use an XML tool chain.