Making beautiful business applications

Paragraphs, headings and breaks – A coffee discussion

coffeetext You are lazy and prefer to code rather than spend 10 minutes to prepare your coffee. Some people reach a point in their lives where they want to explore coffee that is more exotic and hand crafted. They have done the instant coffee and filter coffee, but have a craving for the finer art of the barista and coffee connoisseur. Fonts, typography and text layout is like the upgrade from instant coffee to a full choice of the barista menu: with coffee you can choose between americano, cafe latte, cappuccino, espresso and so forth, and with HTML text related tags you can choose between headers, paragraphs, breaks, horizontal rules, to name a few. Understanding that people would like a visual aide to understanding these, I would like to group these into three distinct sections:

Text layout

In Html, these tags are used for telling the browser what is seen as a header, a paragraph and quote. Google is also most interested in this, because it tells them what is the thing that it is reading. As in the image on the right, we use an “h” to say this is a header, and a “p” to show it’s a paragraph. as noted in the previous blog post here, we use opening and closing tags.









<h1>This is a heading. Big coffee bean</h1>
<p>This is a paragraph. many small ideas/coffeebeans</p>

<p>This is a paragraph. many other small ideas/coffeebeans</p>

Result:

This is a heading. Big coffee bean

This is a paragraph. many small ideas/coffeebeans

This is a paragraph. many other small ideas/coffeebeans

You can use up to 6 header tags: h1, h2, h3,h4, h5,h6, but only the one p. Note that the output is exactly the same for now. Once we have some knowledge on styling we can make that piece green!

Text formatting

Spans
Okay, so what’s up with the green bean? Sometimes in a paragraph, we would want to style something differently – but only one word. Or we want to add an image or an icon inside of the text. This happens quite often! Incoming – the SPAN. the span is a really cool way for catering for small changes in a paragraph or header. If you are an Adobe InDesign user, think of it as paragraph styles and character styles. The following does make perfect sense:
<h1>This is a heading. Big coffee bean</h1>
<p><span>This</span> is a paragraph. many small ideas/coffeebeans</p>

<p>This is a paragraph. many other small ideas/coffeebeans</p>

Result:

This is a heading. Big coffee bean

This is a paragraph. many small ideas/coffeebeans

This is a paragraph. many other small ideas/coffeebeans

We would still be required from time to time to make some enhancements to our layout – things like bold, italics, top and bottom scripts: superscript, subscript: subscript.
<i>i stands for italic</i>

<b>b stands for bold</b>

coffee<sub>sub coffee</sub>

coffee<sup>sup coffee</sup>

Result:

i stands for italic b stands for bold coffeesub coffee coffeesup coffee
these would be used in a normal paragraph: boldCoffee

Text spacing

This sections is about sections – sometimes you want a bit more spacing in your text, or all a line to split different sets of content. You can do this with elements like break tags and horizontal rules. these are difficult to explain. So here goes: the break tag is like the shift + enter button on your keyboard. It breaks to a new line, but doesn’t create a new paragraph altogether. Sometimes in paragraphs you want it to be part of the same paragraph. the horizontal rule adds a line to split content. Say, you are ranting about Arabica coffee, and you want to now rant about Robusta coffee. It might make sense to not to add a new header.
I love arabica
I really love arabica

<hr />

did I mention vietnamese robusta is amazing?

Result:

I love arabica I really love arabica
did I mention vietnamese robusta is amazing?

Leave a Reply

Your email address will not be published. Required fields are marked *