Journalistic Writing and Layout
May 25, 2012
Posted by on
HTML was born in an academic surrounding, and had markup for the needs of the academic writing style: six levels of headers, lots of different lists, special markup for quotes and the contact information of the author, and not much else. On the whole, not all too much has changed. Netscape re-invented HTML as a content-independent layout language, something very much frowned upon by the powers that be, mainly the W3C, who worked hard at replacing all the Netscape tags with there sometimes superior, but often horribly impractical and absurd CSS layout model.
This academic legacy is quite a drawback, for there is a different way of structuring and presenting text used in magazines and a wide range of non-fiction books, including many technical and scientific books intended not for a small group of peers but for a wider audience. It, too, uses a number of standardized elements and would have been a far better model for web layout:
- The header: There is only one real header, for the whole article or feature. It is typically very large, often in a narrow or condensed font, often in a color different from the text proper.
- An introductory paragraph and/or tagline: The tagline approximately correlates with the HTML title tag. The introductory paragraph gives a short overview of what the article is about, a sort of abstract. This is the text that would normally go into a newsfeed. It is usually set in a font much larger than the text of the article, possibly in a different color. It can be positioned above or below the header.
- The article text: This is the main text. It is typically set in columns 40–50 characters wide. It does not have a background color different from the body of the page, or a border. The beginning of the text is marked with a large initial, which functions not so much as decoration but as an optical anchor, so that it can be found at first glance.
- Optical anchors: This is optional, but longer articles often have something resembling subheaders. They do not indicate a change of topic and do not interrupt the flow of the article. They usually highlight a part that follows immediately afterwards. They serve as optical anchors when scanning the text looking for parts especially interesting for the reader.
- Images with captions: These are separate units of information, unless the article is very long, it is usually irrelevant where exactly they are placed.
- Boxes: Background information, quotes, short interviews. These are asides, marked with a border and/or different color scheme, and can be placed anywhere.
One big advantage of this style is that it is rather flexible. The layout could easily be adjusted by the browser according to the graphics display of the device: In one long column for a handheld, in several for a wide screen. To a certain degree this can be achieved with CSS in newer browsers, it’s still a pity that HTML wasn’t designed with this concept in mind.