HTML or HyperText Markup Language is the basic building block for translating your content into a viewable website. Most blog platforms and themes use visual editors that allow you to format the look of your layout and text with ease, but HTML still comes in handy sometimes.
You may occasionally want to customize your blog with HTML code snippets to adjust the appearance manually. This mini guide will walk you through the basics of adding basic HTML to your website, focusing on what’s is probably most useful for bloggers to know.
Contents
Add a Header
<H1>: Add a header. The number proceeding H can be between 1-6 with 1 being the largest and most important, 6 being the smallest and least important.
<H1>This is My Blog Post Title</H1>
<H2>And My Blog Post Subtitle</H2>
<H3>Plus A Subtitle Subsection</H3>And My Blog Post Subtitle
Plus A Subtitle Subsection
Make Text Bold
<STRONG>: Create bold text. <B> also works but is no longer preferred.
<STRONG>I'm feeling bold!</STRONG>I’m feeling bold!
Make Text Italic
<EM>: Emphasize text with italics. Sometimes <I> is used as well.
<EM>Emphasize with italics!</EM>Emphasize with italics!
Underline Your Text
<U>: Surround your text with these tags to underline it!
<U>I'd like to underline this.</U>Use Smaller Text
<SMALL>: This tag can be used to make text a bit smaller than your default size.
This is my normal text. <SMALL>But now it's smaller!</SMALL>Creating Website Links
Use <A HREF=“page-url-address-goes-here”>text for link goes here</A> to link another page or website by clicking on the text within. Optionally add a target to the code as shown below to open the link in a new window.
<A HREF=“https://www.kyrah.com” TARGET=“_blank”>Check out my blog!</A>Linking an Email Address
Email links work a little differently. Your code includes ‘mailto’ inside the quotation marks: <A HREF=“mailto:email-address-goes-here”>email address or link text goes here</A>. To avoid spam bots that collect email addresses, I recommend also using the Email Address Encoder tool.
<A HREF=“mailto:test@kyrah.com”>test@kyrah.com</A>Line Breaks & Paragraphs
Use the <BR> tag to create a line break and move your text down a single line. Use <P> for paragraph if you’d rather have a double space. Notice the <P> tag must be closed while <BR> does not.
I like writing blog posts.<BR>
I also like reading blog posts.
<P>Can you recommend a good blog?</P>I also like reading blog posts.
Can you recommend a good blog?
Create an Item List
List elements should always begin and end with either the <UL> tag for bullet points or the <OL> tag for a numbered list. Then the <LI> tag is placed around each item in the list.
<UL>
<LI>This is my first item.</LI>
<LI>This is my second item.</LI>
<LI>This is my third item.</LI>
</UL>- This is my first item.
- This is my second item.
- This is my third item.
<OL>
<LI>This is my first item.</LI>
<LI>This is my second item.</LI>
<LI>This is my third item.</LI>
</OL>- This is my first item.
- This is my second item.
- This is my third item.
Indented Quotations
Make your important quotes stand out with the <BLOCKQUOTE> tag. This will indent, italicize, and enlarge your text (unless styled otherwise using CSS).
<BLOCKQUOTE>Once upon a midnight dreary...</BLOCKQUOTE>Once upon a midnight dreary…
There’s plenty more HTML you can learn beyond what I’ve covered here. To make an entire website from scratch or learn more HTML tricks, check out Khan Academy for free introductory lessons. W3Schools is also a fantastic comprehensive resource with excellent examples and hands-on exercises.