Code can be very scary if you’re not familiar with it. HTML is a great place to start – its simple and intuitive.
Let Start with the Basics:
HTML (Hyper Text Mark Up Language) is made up of tags. Each of these tags tell the browsers how to display content contained within. Without HTML, browsers would have no idea what’s an image or text – HTML is what they use to figure out what’s what.
HTML tags are sounded in angle brackets (the characters on the comma and period keys of your keyboard) and come in pairs: one to start and one to close. The “close” tag uses a slash to close the tag – see below.
<tagname>content goes here </tagname>
Important HTML Tags for Bloggers:
Most of your HTML will be done through your blogging platform – WordPress, Blogger, Tumblr, etc. all have simple text editors where you can format easily – but being more familiar with how it works and some simple tags can empower you have more control over your blog and copy.
Here are some common HTML tags used when writing blog posts.
Paragraph Tag
Your workhorse text tag – most of your content will be found in these <p> tags.
Example tag:
<p>This is some plain text.</p>
Within paragraph tags you can also use Strong (renders as bold text) Tags and Em (renders as italic) Tags.
<p><strong>Bold Text </strong></p>
<p><em> Italic Text </em></p>
Which will look like:
Link Tag
If you want to add a link on our page or in your post you use the handy dandy <a> tag to define them. In that tag, in addition to your link text, you can add a title to further describe the link.
<a href=”http://www.example.com” title=”title of link” target=”_blank”>Link Text</a>
Tip – adding “target=”_blank” “ in the starting <a> tag makes is so the link opens new tab or browser so your readers can come back to your blog in their browser later.
Heading Tags
HTML headings use <h1> to <h6> tags define to browsers the headings of a page with <h1> being the most important and <h6> being least important. Most pages or posts will only require an <h1> tag, however <h2> or <h3> tags may also be useful for a page with many subheadings.
Code:
<h1> heading 1</h1>
<h2> heading 2</h2>
<h3> heading 3</h3>
<h4> heading 4</h4>
<h5> heading 5</h5>
<h6> heading 6</h6>
Browser Result – Without any styling:
Tip – You can use multiple <h2> or <h3> tags on one page but use only one <h1> heading on the page for the most important content.
Keep Learning!
There are many more tags out there but now you know the basics and few important tags – its time to practice!
HTML Education Resources
If you want to learn more and practice outside of your website W3C has a great resources for to learn and practice HTML.
W3C School HTML
Codecademy HTML 101
