Putting the fun back into HTML

Fiddling With the Basics


BLUEPHRASE syntax is simply a nesting of phrases, one within the other, building up the author's written words into a complete document.

Using the nomenclature of BLUEPHRASE — paragraphs automatically become basic phrases . . . sections of a document become containers . . . and emphasized words become terms.

Types of phrases
The three types of phrases: basic, container, and term.
Nesting terms within terms
Placing a term phrase within another term phrase works as expected.
Containers within containers
Dividing and subdividing a composition for organization and structure.

Semantic tags

HTML semantic tags are called semantax within BLUEPHRASE. This distinguishes simple unadorned mnemonics, like table, from more convoluted opening and closing mnemonics, like <table> and </table>.

Implicit semantax
Omitting semantax when it can be determined through context.

Headings and text

Headings h1 to h6
Building a sectional hierarchy through an implied structure outline.
Ambiguous paragraphs
Explicit and implicit paragraphs.


Articles and sections
Dividing a document into articles and sections in a typical approach to organization.
Floating aside
Placing a parenthetical remark in a right-hand floating frame.

Typographic terms

Bold versus strong
Applying a heavy-weight font for signaling strong importance, urgency or seriousness.
Italics versus emphasis
Applying an italicized font or suggesting that the reader use an emphatic tone of voice.
Underlined/unarticulated versus inserted
Underlining a phrase to flag it for the reader's attention or marking it as significant versus signaling the addition of new text.
Quotes, cites and blockquotes
Three ways to signify someone else's words.
Strikethrough versus delete
Words that are no longer relevant versus signaling the removal of old text.
Span and mark
Highlighting notable words and styling a span of text.
Keyboard and code
Indicating text that is typed by the user and showing computer code.
Small, subscript and superscript
Adding fine print, chemical formulas, and exponents.

Shorthand notation

Shorthand identifiers
Using identifier shorthand notation (#) to assign an ID to a phrase.
Shorthand class names
Using classname shorthand notation(.) to assign CSS class attributes to a phrase.
Shorthand sourcerefs for URLs
Using sourceref notation for href, src, action and data.
Shorthand sourcerefs for filenames
Using sourceref notation for paths to !include, !enclosure and !use files.
Shorthand styles
Using style shorthand notation (^) to add CSS rules to a phrase.
Shorthand attributes
Using attribute shorthand notation (*) for HTML element attributes.
Shorthand RDFa properties
Using RDFa shorthand notation (?) to assign schema.org semantic vocabulary properties.
Shorthand ARIA roles
Using ARIA role shorthand notation (+) to assign WAI accessibility roles to a phrase.


Every HTML document must be wrapped in an <html> tag, and must have a <title> tag for identification purposes. But sometimes it's convenient to write a composition without thinking about these rules, leaving compliance up to the BLUEPROCESSOR. The --fragment pragma can determine whether or not these missing tags should be added.

Four essential HTML tags
The html, head, title and body semantax.
HTML fragments
Explicitly omitting the essential HTML tags to create a document fragment.
Automatic HTML compliance
Implicitly adding the essential HTML tags when missing.
Structuring a web page
A classic web page layout with header, footer and navigation.


The venerable anchor tag is the easiest way to link one document to another. But images, buttons, and submissions can do the trick too. And for the adventurous, the area and map tags provide a touch of sophistication.

Text-based hyperlinks
Turning text into a link to another document.
Image-based hyperlinks
Turning an image into a clickable link to another document.
Button-based actions
Using a button to call a JavaScript function.
Form-based actions
Using a submit button to send form data to a server.
Clickable areas of an image
Using area and map to define clickable hotspots to more than one document.


Tables are a classic for displaying similar data in a scannable format.

Basics of tables
Using rows and columns to format data.
Tables with implied semantax
Omitting the tr and td semantax.
Compact table syntax
An alternate syntax for table rows and columns.
Captioning tables
Placing a caption above a table.
Header and footer rows
Applying column headers and footers to tables.
Setting column attributes
Setting background colors and widths for table columns.

Ordered Lists

Ordered lists are for sequenced steps.

Ordered lists
Creating numbered (1, 2, 3, ...) lists.
Continuing interrupted lists
Numbered lists that don't start with 1.
List numbering schemes
Using roman numbers, letters, and other numbering schemes.

Bullets Lists

Bullet lists are for a hodge-podge of ideas.

Unordered lists
Creating a bullet list.
Bulleted list symbols
Using other symbols in place of ordinary bullets.
Nesting lists
Placing a list within another list


Definition lists are for glossaries.

Definition lists
Creating a list of terms and definitions.

Callouts and hidden details

Capturing the casual reader's attention with a featured callout.
Details and summary
Keeping long-winded passages hidden until the user wants to reveal them.


Inline images
Adding images within the flow of text.
Block-framed images
Adding images that cleanly separate the flow of text.
Positioning images
Adding images with adjacent floating text.


Captioning figures
Placing a caption under a drawing or chart.

Line breaking & hyphenation

Horizontal rule
Creating a break in the flow of a composition.
Breaking a paragraph
Forcing the middle of a paragraph to start on a new line.
Hyphenating a long word
Breaking a word at a designated point by providing a hint to the automatic hyphenator.

Preformatted text

Pre-formatted text blocks
Adding lines of text that retain the author-provided spacing and line breaks.

Escapes and Unicode characters

Escape sequences
Preventing the BLUEPROCESSOR from interpreting a character as an instruction, and forcing it to treat a character as itself.
Spaces, dashes, and Unicode symbols
Using extra narrow and extra wide spaces, dashes, and other special Unicode symbols.

Comments, remarks, replies & placeholders

Keeping notes about a composition as close as possible to its context is a good way to avoid loosing stray thoughts. BLUEPHRASE has four syntactic forms for doing this.

Single line comments
Using single-line comments in your manuscript.
Using multi-line remarks in your manuscript.
Using remarks and replies to create a threaded conversation.
Using placeholders as graynotes

Communication between author and editor

Adding signatures to graynotes

Showing and hiding graynotes

Temporary text
Emitting placeholders as temporary text
Removing graynotes
Removing graynotes from the emitted document

Putting the fun back into HTML

🔗 🔎