Hey, congratulations! If you've worked your way through this entire series, you've learned how to use all of these HTML elements in your blog posts:
With all that under your belt, you can write the average blog post in straight HTML. There are just a few more elements to learn before you're done. These remaining elements are simple enough that they don't require full tutorials all to themselves, especially now that you're comfortable with writing HTML in your posts!
So, today I'm going to give you quick rundowns of the remaining elements. Then, tomorrow, I'll set you up with some recommended reading in case you've fallen in love with HTML and want to go further into the wonderful world of web development!
So, here we go:
Links
I've glossed over making links in previous installments of this series, but let's take a closer look at how a link is built.
Here's a basic HTML link:
<a href="http://www.example.com">Link text here</a>
The "a" stands for "anchor", and the "href" stands for "hypertext reference". Here's how that link would look in the browser:
You can also link to email addresses, like so:
<a href="mailto:info@example.com">info@example.com</a>
Here's how that looks in the browser:
Your links will look different depending on your blog's CSS styling. There's an excellent, comprehensive guide to styling links at Smashing Magazine.
<q> - Quote
Use a <q> tag to mark up a very short quote. By default, most modern browsers wrap that text in quotation marks — last I checked, Internet Explorer does not.
Here's how to use the <q> tags:
<q>Curiouser and curiouser!</q>
And here's how that looks in the browser:
Curiouser and curiouser!
If you're using a modern browser, you should see quotation marks around that quote. If you don't, it's probably time to switch browsers ;)
<blockquote> - Longer Quotes
Use <blockquote> tags to mark up extended quotes. The <blockquote> element does not automatically add quotation marks like the <q> element, so you'll need to add them manually if you'd like to use them with the quote.
If your blockquote is one paragraph, you don't need to use paragraph tags inside the blockquote. If it's 2 or more paragraphs, use paragraph tags, like so:
<blockquote> <p>"Well, it must be removed," said the King very decidedly, and he called the Queen, who was passing at the moment, "My dear! I wish you would have this cat removed!"</p> <p>The Queen had only one way of settling all difficulties, great or small. "Off with his head!" she said, without even looking round.</p> </blockquote>
Here's how blockquotes look on my blog:
"Well, it must be removed," said the King very decidedly, and he called the Queen, who was passing at the moment, "My dear! I wish you would have this cat removed!"
The Queen had only one way of settling all difficulties, great or small. "Off with his head!" she said, without even looking round.
I've styled my blockquotes with a larger font size and a left border. Yours will look different depending on the CSS in your blog's theme. Some blog templates have very creative styling for blockquotes, while others are quite plain. If you want to see just how creative you can get with blockquote CSS, check out this awesome gallery of blockquote styling examples from Codrops.
<cite> - Citation
Use a <cite> tag to cite the source of your quotes, or to reference a published or artistic work. By default, browsers italicize text inside <cite> tags. Here's a very basic example of how to use a cite tag:
We went to look at the <cite>Mona Lisa</cite>.
Here's how that looks in the browser:
We went to look at the Mona Lisa.
I'll show an example of a citation with a link to the source in the example for the next element, <pre>.
<pre> - Pre-formatted
Use the <pre> element for pre-formatted text when exact linebreaks are vital, like in a poem. Here's how I would mark up William Carlos Williams' "This is Just to Say" using a heading, <pre> tags, and a <cite> tag with a link to the source:
<h3>This Is Just To Say</h3> <pre> I have eaten the plums that were in the icebox and which you were probably saving for breakfast Forgive me they were delicious so sweet and so cold </pre> <cite>- <a href="http://www.poets.org/viewmedia.php/prmMID/15535">William Carlos Williams</a></cite>
And this is how that would look in the browser:
This Is Just To SayI have eaten the plums that were in the icebox and which you were probably saving for breakfast Forgive me they were delicious so sweet and so cold- William Carlos Williams
By default, most browsers set text in a <pre> element in a monospaced font. You can, of course, change that with CSS.
<small> - Small text
Though HTML's <big> tag has been removed from the HTML5 specification, <small> lives on. There's some controversy in the web development world over whether it's semantically correct to use <small> or if we should only use CSS to make text smaller. Personally, I use <small> fairly often to add "fine print" to my posts.
You can create a <small> element like this:
<small>This is small text </small>
Here's how that looks in the browser:
This is small text
Exactly how small that small text is will vary depending on your blog's CSS and/or your reader's browser settings.
You made it!
That was the last lesson in this series. You're ready to write all your blog posts in HTML! If you're ready to learn more, check out Practical HTML for Bloggers - Further Reading.
Title cards for this series designed by the lovely & talented Jenna from Little Bit Heart.
