Putting the fun back into HTML
Fiddling With the Basics
Phrasing
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.
Structuring
- 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,actionanddata. - Shorthand sourcerefs for filenames
- Using sourceref notation for paths to
!include,!enclosureand!usefiles. - 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.
Documents
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,titleandbodysemantax. - 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.
Hyperlinks
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
areaandmapto define clickable hotspots to more than one document.
Tables
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
trandtdsemantax. - 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
Glossaries
Definition lists are for glossaries.
- Definition lists
- Creating a list of terms and definitions.
Callouts and hidden details
- Blockquotes
- 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.
Images
- 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.
Figures
- 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.
- Remarks
- Using multi-line remarks in your manuscript.
- Replies
- Using remarks and replies to create a threaded conversation.
- Placeholders
- Using placeholders as graynotes
Communication between author and editor
- Signatures
- Adding signatures to graynotes
Showing and hiding graynotes
- Temporary text
- Emitting placeholders as temporary text
- Removing graynotes
- Removing graynotes from the emitted document