Text is probably the most important part of your blog, and yet the HTML behind it probably isn’t something you’ve thought about. In our first post about HTML, we covered formatting like bold, italic and underlining, but today’s post is about paragraphs, quotes and headers.
Paragraphs
So, there are two different tags involved with paragraphs that you probably already know about. They are <p> and <br>. <p> is the one that we use to create a paragraph, and you would close the paragraph with </p>. <p> can be combined with other commands to change the colour, size, and style of the text which is pretty useful to know! It can also be used as a way to name a section of text for use in CSS – but that’s something for a later post!
<br> is the tag that you use to move to the next line in your text without breaking the paragraph. That’s how we’ve moved this section to a new line without creating a new paragraph.
Headings
We briefly touched on headings in this post about improving the readability of your posts but let’s look at them a bit more. Headings help you break up a blog post, help with your searchability and help people with screen readers to understand what sections are where. They should be used sparingly – if you mark your whole blog post as a heading, then it loses its effectiveness.
There are six levels of headings, from <h1> to <h6>. You need to close the heading once done, in the same way as you would with any other tag – obviously, this depends on which heading you’re using.
<h1> is the heading tag used for the main headings in your post – you would normally use this for your post titles. The headings used in this post are <h2> since they are subheadings in the post, then you would use <h3> to <h6> for further subsections.
Quoting
Sometimes you might want to highlight a section of text – perhaps it’s a quote from a book, or a famous saying? For a short (think one or two sentence sized), then you could use the <q> tag. This can sit within a paragraph, with the <q> tag putting the phrase in quotation marks (although not all browsers do that – this is why it’s not as popular as the <blockquote> tag). Here’s how that would look (the tag is around “leading UK independent blogger help guide” so you can see whether this works on your browser):
Bonjour, Blogger! is the leading UK independent blogger help guide
that’s all about helping you with your blog
If you’ve got a bigger section of text to highlight, then <blockquote> is used. This breaks it into a new section
Bonjour, Blogger! is the leading UK independent blogger help guide that’s all about helping you with your blog – whether you’re brand new to blog life, or you’ve been blogging for ages, you’ll find all the information you need on this site.
Using the tags mentioned in this post will help to break up your posts to make them easy to read!
