Text, special characters and small tags
Tags that sit in a line of writing, how to mark up quotes, code, dates and short forms, how to type characters HTML would swallow, and the attributes every tag can take.
By the end you can
- Tell the two kinds of tag apart, and pick the right wrapper
- Mark up quotes, code, dates, short forms and addresses
- Write characters that HTML would otherwise eat
- Use the attributes that work on any tag, and check your page with a free tool
Easier if you did first
step 1 of 4
Two kinds of tag, and two empty ones
Every tag you can see behaves in one of two ways.
Some tags take a whole line to themselves, like a new paragraph in a book. A heading does this. A paragraph does this. They are called block tags.
Other tags sit inside a line, like a highlighted word in a sentence. A link does this. Bold text does this. They are called inline tags.
That is why you cannot put a paragraph inside a sentence and expect it to stay there. A block tag always breaks the line.
Now, sometimes you need to wrap something and no tag describes it. HTML gives you two blank wrappers for that. <div> is the blank block, taking a whole line. <span> is the blank inline, staying inside the sentence.
A span is how you mark part of a sentence so you can colour it later, or change it with code: a price, a name, one word you want to highlight.
One more. <hr> draws a line across the page, but what it really means is 'the subject changes here', like a gap between two scenes in a story. It is a meaning, not decoration. Do not use it to draw a border.
On the right, wrap the price in a span, and separate the two parts of the page.
a block takes the line, an inline stays in it
<p>Starter plan is <span class="price">GHS 600</span> a year.</p>
<hr />
<div class="card">
<p>A div wraps whole blocks. A span wraps words.</p>
</div>What these words mean
- block tag
- Takes a whole line: p, div, h1, ul, table, section.
- inline tag
- Sits inside a line: a, span, strong, em, img, code.
- div
- A blank block wrapper, when no real tag fits.
- span
- A blank inline wrapper, for part of a sentence.
- hr
- The subject changes here. It has no closing tag.
- CSS
- The language that decides how things look. It can change any of this behaviour.
Easy to get wrong
<p>Some text <div>more</div></p>
<p>Some text</p><div>more</div>
A div is not allowed inside a paragraph. The browser quietly closes the paragraph first, so what you wrote and what the page contains are two different things, which is very hard to debug.
<hr /> to draw a line under a heading
A border in CSS
An hr is read out as a separator, and tells a blind visitor the topic has changed. For decoration use a border, and leave the meaning alone.
What we check
- The price is a span inside the paragraph
- The span wraps the price itself, not the whole sentence
- A thematic break separates the two sections