Hello my dear bookworms! I hope that amidst all this terrible time, you are all healthy and safe!
If you are anything like me: must be doing something at all times or will feel like she’s being unproductive, this quarantine is hitting you hard. There is only so many times I can reorganize my closet, clean my bookshelves and vacuum my floors….
Today’s post will be a quick mini-tutorial on, somewhat useful or just plain ol fun, HTML for book bloggers!
Now, I haven’t used many of these on my own blog, yet, because I’m still working out the layout I want to have BUT many of these snippets can help you with your design vision!
HTML for Book Bloggers
Borders
Adding borders to your posts can be a fun way to break up the text. Not to mention, they can be used to highlight something important or to signal a side note!
SOLID
<p style="border: 3px; border-style: solid; border-color: #ae94ba; padding: 2em;">SOLID</p>DOUBLED
<p style="border: 3px; border-style: double; border-color: #ae94ba; padding: 2em;">DOUBLED</p>DOTTED
<p style="border: 3px; border-style: dotted; border-color: #ae94ba; padding: 2em;">DOTTED</p>LINED
<p style="border: 3px; border-style: dashed; border-color: #ae94ba; padding: 2em;">LINED</p>Mixed: DASHED DOTTED SOLID and DOUBLED
<p style="border: 3px; border-style: dotted dashed solid double; border-color: #ae94ba; padding: 2em;">Mixed: DASHED DOTTED SOLID and DOUBLED</p>INSET
<p style="border: 3px; border-style: inset; border-color: #ae94ba; padding: 2em;">INSET</p>RIDGE
<p style="border: 3px; border-style: ridge; border-color: #ae94ba; padding: 2em;">RIDGE</p>GROOVE
<p style="border: 3px; border-style: groove; border-color: #ae94ba; padding: 2em;">GROOVE</p>Show/Hide
These are great for hiding tidbits of information like spoilers OR for breaking up a long post into sections in which the reader can choose what they want to read.
Spoiler ALERT
Today will never come again<details><summary>Spoiler ALERT </summary> Today will never come again</details>Link to a section of a page
Linking to a section of a page or Jumping can be super helpful if you have one of those TLDR posts and want to offer the reader a way to just JUMP to the good stuff.
This is done with two code snippets.
The first code snippet should be placed where you want the reader to click. In the href =, type in the section name, after the hashtag , of the place they will be jumping to.
Let’s Jump!<a href="#SECTIONNAME">Let's jump!</aThe second code snippet should be placed where you want the reader to jump to. In the id =, type in the section name that you used in the first part, remove the hashtag, so that the first code links to it.
<div id="SECTIONNAME">You Jumped! Awesome!</div>Example:
Back to the top!Adding a No Follow tag
Fun Fact: Did you know that if you have affiliate links or sponsored links, you MUST have the no follow tag in the URL according to FTC.
No? Me either until very recently! 😀
Adding a No Follow Tag to your link prevents other websites out there from capitalizing on your links! Not to mention, it’s very useful as far as SEO goes.
The No Follow tag tells search engines not to count links to other pages as “votes” in favor of that content. This helps avoid problems with search engines thinking you are involved in schemes or selling influence to your viewers, two things that are bad SEO practices.
<a href="LINKHERE" rel="nofollow">I'm A link to your affiliate item!/a>Level UP: Adding Tables
**Tables are a little more complex as they require many more tags than the examples I’ve shared so far.
Adding a table can be a good way to organize information or pictures on your post. I haven’t used one yet in all honesty since well…….I’m lazy and haven’t made a reusable block for it but I’ve seen some bloggers use it and it’s made a difference in their post!
Column 1 |
Column 2 |
|---|---|
| Row 1: Cell 1 | Row 1: Cell 2 |
| Row 2: Cell 1 | Row 2: Cell 2 |
<table border="1">
<thead>
<tr>
<th><h5>Column 1</h5></th>
<th><h5>Column 2</h5></th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1: Cell 1</td>
<td>Row 1: Cell 2</td>
</tr>
<tr>
<td>Row 2: Cell 1</td>
<td>Row 2: Cell 2</td>
</tr>
</tbody>
</table>Pro Tip: Add some border styling to the Table, th, and td tags to add some pazzaz to your table!
The 5 are just a small cluster of the many html code you can use to spice up your website or blog posts. If you are inclined to learn more, a great resource is W3Schools.
FreeCodeCamp is another website that is an amazing resource, they even have a course on building a wordpress template. 😉
Take note, that not all website providers will allow all HTML to work so play around with it! 🙂
I hope this post proves helpful or gives you ideas on what you can use on your posts/website! Thank you so much for reading <3
XOXOXO,
Jeimy
Aaaah this is such a helpful post Jeimy, I’m always on the look out for ways to spice up my blog posts and make the formatting better just with HTML. Since on free wordpress I can use CSS which sucks majorly, thank you so much for sharing all of these you’re a star!
No worries!! I’ve been trying to be more of a resource in the bookish community and since I’m a web developer, I thought why not share code! I’m glad you enjoyed this post and it was useful to you <3 There will be more code posts in the future :*
I will save this one and read it carefully on a later time, because this post is super helpful and I don’t want it to get lost. I want to experiment a little too whilst reading, but I don’t have time for that now.
this is a v helpful post! <3 imma share it with some blogging groups
Thank you! I’m glad you found it helpful!
Thank you for reading <3
[…] Jeimy @ A Novel Idea shares A Tutorial On HTML For Book Bloggers […]
[…] Post: Jeimy @ A Novel Idea has A Tutorial On HTML For Book Bloggers which is how come I have cute boxes now, so shout out to Jeimy for putting the post […]
[…] This post is a little old, but it’s a guide on HTML for bloggers which is extremely helpful and Jeimy created it! […]
Thank you – this was really useful, especially the part on borders!
Im glad it was helpful!! <3
Thank you for reading, lark!
[…] Blog Post/s: A Tutorial On HTML For Book Bloggers and A Tutorial On CSS For Book Bloggersboth posts are total lifesavers for us book bloggers since, […]
[…] A Tutorial on HTML for Book Bloggers (Jai @ anovelidea) […]
[…] @ A Novel Idea’s posts were and still are for me. A Tutorial On CSS For Book Bloggers and A Tutorial On HTML For Book Bloggers are both super helpful posts to […]
Thanks for this post, it’s really a lifesaver for someone with little HTML experience. 😅 Do you happen to know, what HTML code can I use to customise a horizontal line? I’m on free WordPress.com and I’d like to add a horizontal line that is coloured and kind of bold. I’ve been trying for hours but nothing seems to work. 😪
Hey Morgan! I just realized I never added the one I used the most, the horizontal line! You can use this code: *Remove the /* < / hr width="500px;" style="border:none; border-top:20px dotted #000;" >
Oh, thank you so much!!