{"id":5325,"date":"2012-04-26T08:15:18","date_gmt":"2012-04-26T12:15:18","guid":{"rendered":"http:\/\/blog.shareaholic.com\/?p=5325"},"modified":"2014-05-09T12:52:12","modified_gmt":"2014-05-09T16:52:12","slug":"10-html-tags-all-new-bloggers-should-learn","status":"publish","type":"post","link":"https:\/\/www.shareaholic.com\/blog\/10-html-tags-all-new-bloggers-should-learn\/","title":{"rendered":"10 HTML Tags All New Bloggers Should Learn"},"content":{"rendered":"<p><em><a href=\"https:\/\/www.shareaholic.com\/blog\/wp-content\/uploads\/2012\/04\/WORDPRESS-IMAGE-3-e1335394932357.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft  wp-image-5448\" title=\"WORDPRESS IMAGE 3\" alt=\"\" src=\"https:\/\/www.shareaholic.com\/blog\/wp-content\/uploads\/2012\/04\/WORDPRESS-IMAGE-3-150x150.png\" width=\"49\" height=\"49\" \/><\/a>Are you \u00a0a new WordPress blogger? Get the easiest-to-install social media buttons.\u00a0<strong>Use\u00a0<a href=\"https:\/\/www.shareaholic.com\/publishers\/sharing?utm_campaign=Shareaholic_Blog&amp;utm_source=Blog_CTA&amp;utm_medium=Top_CTA&amp;utm_content=10_Wordpress_Themes_That_Look_Like_Tumblr\">Shareaholic for WordPress<\/a>.<\/strong><\/em><\/p>\n<p>If there&#8217;s one thing that&#8217;s intimidating as a new blogger, it&#8217;s learning the basic HTML tags. \u00a0While there are several short cuts to creating these HTML tags on WordPress, shortcuts aren&#8217;t always enough. \u00a0When adding content to your sidebar, author profiles and even your blog posts these HTML tags will help you get the functionality and look you&#8217;re going for. \u00a0All of the codes below can be entered in the HTML tab of WordPress as circled below.<\/p>\n<p align=\"center\"><a href=\"https:\/\/www.shareaholic.com\/blog\/wp-content\/uploads\/2012\/04\/Picture-41.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-5462\" title=\"HTML Tab of WordPress\" alt=\"HTML Tab of WordPress\" src=\"https:\/\/www.shareaholic.com\/blog\/wp-content\/uploads\/2012\/04\/Picture-41.png\" width=\"520\" height=\"222\" srcset=\"https:\/\/www.shareaholic.com\/blog\/wp-content\/uploads\/2012\/04\/Picture-41.png 520w, https:\/\/www.shareaholic.com\/blog\/wp-content\/uploads\/2012\/04\/Picture-41-300x128.png 300w, https:\/\/www.shareaholic.com\/blog\/wp-content\/uploads\/2012\/04\/Picture-41-400x171.png 400w\" sizes=\"(max-width: 520px) 100vw, 520px\" \/><\/a><\/p>\n<h3 class=\"subheader\">1. Hyperlink<\/h3>\n<p style=\"text-align: center;\"><span style=\"color: #ff0000;\"><strong>&lt;a href=&#8221;http:\/\/www.website.com&#8221;&gt;keyword rich anchor text&lt;\/a&gt;<\/strong><\/span><\/p>\n<p>Let&#8217;s start with perhaps the easiest AND most important tag for new bloggers. \u00a0While it&#8217;s easy to highlight your keyword and click the &#8220;hyperlink&#8221; button, not all of your content will be uploaded in the posts or pages section. \u00a0For example, if you use an &#8220;Author Bio&#8221; plugin or want to link to a website in your own User Profile, you&#8217;ll need to use the above HTML tag so the link comes out looking clean and correct.<\/p>\n<h3 class=\"subheader\">2. Embedding Images via HTML<\/h3>\n<h4 style=\"text-align: center;\"><strong><span style=\"color: #ff0000;\">&lt;img src=&#8221;http:\/\/www.website.com\/imagefile.jpg&#8221; width = &#8220;400&#8221; height \u00a0= &#8220;400&#8221; alt=&#8221;keyboard description&#8221;&gt;<\/span><\/strong><\/h4>\n<p>Apart from the obvious benefit of being able to format the picture the way you want, using an alt tag in your image tags allows search engines to find your pics.<\/p>\n<h3 class=\"subheader\">3. Make Images into a Link<\/h3>\n<p style=\"text-align: center;\"><span style=\"color: #ff0000;\"><strong>&lt;a href=http:\/\/www.WheretTheClickWillTakeYou.com&gt;&lt;img src=http:\/\/www.LinktoImageFileUploadedtoCMS.png alt=\u201dkeyword of what your pic is about\u201d&gt;&lt;\/a&gt;<\/strong><\/span><\/p>\n<p>If you&#8217;re a blogger who wants widgets in your sidebar (including advertisements or call to action buttons), then you need this tag! \u00a0Or, if you&#8217;re a blogger who promotes products use this tag to connect to the retailer via an affiliate link. Make your images come to life in 3 steps:<\/p>\n<ul>\n<li>Step 1 is to include the url of where people will end up when they click your picture.<\/li>\n<li>Step 2 is to upload the image to your WordPress Media Gallery, then copy the URL which tells us where the image is stored. Put the ULR into the second part of the tag as seen above.<\/li>\n<li>And lastly, don&#8217;t forget an alt tag so search engines know what your picture is.<\/li>\n<\/ul>\n<p>Close the tag and you have an image that also serves as a link- neat!<\/p>\n<h3 class=\"subheader\">4. How to Center an Image<\/h3>\n<p style=\"text-align: center;\"><span style=\"color: #ff0000;\"><strong>&lt;p align=&#8221;center&#8221;&gt;centered object&lt;\/p&gt;<\/strong><\/span><\/p>\n<p>Great blogs have editorial standards that keep posts looking uniform. \u00a0One of those standards might be centering all blog images. Although you can click &#8220;center&#8221; when inserting the image into a page or post, it doesn&#8217;t always stick. \u00a0Add this tag in the HTML tab around the image file (which will look like the tag in #3).<\/p>\n<h3 class=\"subheader\">5. Sub-Headings<\/h3>\n<p style=\"text-align: center;\"><span style=\"color: #ff0000;\"><strong>&lt;h3&gt;Your Compelling Header Here&lt;\/h3&gt;<\/strong><\/span><\/p>\n<p>Another great editorial standard to adopt is writing posts with sub-headings. \u00a0Not only will they organize your content, sub-headings make it much easier for readers to skim your article and get to the &#8220;good stuff&#8221; fast. I recommend using the sub-heading HTML tag often in your posts!<\/p>\n<p style=\"text-align: left;\"><em style=\"text-align: left;\"><strong>Want a short cut?<\/strong><\/em><span style=\"text-align: left;\"> \u00a0Highlight your header text then use the drop down menu circled below to select Header 1 or Header 2 (depending on how big you want it). \u00a0Note: I don&#8217;t recommend using more than 2 header sizes in one post though!<\/span><\/p>\n<p style=\"text-align: left;\"><a href=\"https:\/\/www.shareaholic.com\/blog\/wp-content\/uploads\/2012\/04\/Picture-51.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-5468\" title=\"How to make Headers in WordPress\" alt=\"How to make Headers in WordPress\" src=\"https:\/\/www.shareaholic.com\/blog\/wp-content\/uploads\/2012\/04\/Picture-51-e1335440047718.png\" width=\"522\" height=\"253\" srcset=\"https:\/\/www.shareaholic.com\/blog\/wp-content\/uploads\/2012\/04\/Picture-51-e1335440047718.png 522w, https:\/\/www.shareaholic.com\/blog\/wp-content\/uploads\/2012\/04\/Picture-51-e1335440047718-300x145.png 300w, https:\/\/www.shareaholic.com\/blog\/wp-content\/uploads\/2012\/04\/Picture-51-e1335440047718-400x194.png 400w\" sizes=\"(max-width: 522px) 100vw, 522px\" \/><\/a><\/p>\n<h3 class=\"subheader\">6. Blockquote<\/h3>\n<h4 style=\"text-align: center;\"><strong><span style=\"color: #ff0000;\">&lt;blockquote&gt;Separate a quote in your context using this.&lt;\/blockquote&gt;<\/span><\/strong><\/h4>\n<p>Blockquotes are perfect for the creative blogger who likes to interpret quotes, poetry or song lyrics. \u00a0I also recommend using the Blockquote tag when quoting an authority figure on a subject matter. \u00a0Using this HTML tag gives your post visual fair because it separates the quoted text from the body of your post. Block quotes will add to the aesthetics of your blog, making your content even easier to digest.<\/p>\n<h3 class=\"subheader\">7. Nofollow Link<\/h3>\n<p style=\"text-align: center;\"><strong><span style=\"color: #ff0000;\">&lt;a href=http:\/\/www.example.com\/\u00a0rel=&#8221;nofollow&#8221;&gt;website examples&lt;\/a&gt;<\/span><\/strong><\/p>\n<p style=\"text-align: left;\">This tag looks just like #1, EXCEPT that it has the addition of <strong>rel=&#8221;nofollow&#8221;<\/strong>. No Follow links are used for SEO purposes when you don&#8217;t want Search Engines to follow that link. \u00a0According to <a href=\"http:\/\/support.google.com\/webmasters\/bin\/answer.py?hl=en&amp;answer=96569\" target=\"_blank\">Google&#8217;s Webmaster Support<\/a> page, no follow links should be used in 3 cases, when linking to:<\/p>\n<ol>\n<li><strong>Untrusted Content. \u00a0<\/strong>Comment spammers are all over the internet and using no follow links on your site for blog comments may discourage spammers from messing with your site. \u00a0You can always remove the no follow once comments are approved to reward quality community members and contributors.<\/li>\n<li><strong>Paid Links.<\/strong> \u00a0While paid links are definitely not illegal, they aren&#8217;t favored by Google either. \u00a0Google urges webmasters to use the no follow tag on paid links so that paid links won&#8217;t influence search engines rankings.<\/li>\n<li><strong>Pages Google bots can&#8217;t enter.<\/strong> \u00a0For example search engines have no purpose for reading a sign in page or &#8220;register here&#8221; landing page, so those pages are good to use a no follow with.<\/li>\n<\/ol>\n<h3 class=\"subheader\">8. Ordered list<\/h3>\n<h4 style=\"text-align: center;\"><strong><span style=\"color: #ff0000;\">&lt;ol&gt;<\/span><\/strong><\/h4>\n<h4 style=\"text-align: center;\"><strong><span style=\"color: #ff0000;\">&lt;li&gt;list item 1&lt;li&gt;<\/span><\/strong><\/h4>\n<h4 style=\"text-align: center;\"><strong><span style=\"color: #ff0000;\">&lt;li&gt;list item 2&lt;li&gt;<\/span><\/strong><\/h4>\n<h4 style=\"text-align: center;\"><strong><span style=\"color: #ff0000;\">&lt;\/ol&gt;<\/span><\/strong><\/h4>\n<p>When first starting out, many bloggers do not understand the value of lists as we do not want to feel like we&#8217;re writing a college essay for our readers. However, numbered lists are great for drawing readers&#8217; attention to important points and allows them to follow your post easily.<\/p>\n<h3 class=\"subheader\">9. Unordered List<\/h3>\n<h4 style=\"text-align: center;\"><strong><span style=\"color: #ff0000;\">&lt;ul&gt;<\/span><\/strong><\/h4>\n<h4 style=\"text-align: center;\"><strong><span style=\"color: #ff0000;\">&lt;li&gt;bullet point 1&lt;\/li&gt;<\/span><\/strong><\/h4>\n<h4 style=\"text-align: center;\"><strong><span style=\"color: #ff0000;\">&lt;li&gt;bullet point 2&lt;\/li&gt;<\/span><\/strong><\/h4>\n<h4 style=\"text-align: center;\"><strong><span style=\"color: #ff0000;\">&lt;\/ul&gt;<\/span><\/strong><\/h4>\n<p>Unordered lists are the same as ordered lists with one exception: bullets are used instead of numbers. Both numbered and bulleted lists are an effective way to organize content and make for easy reading.<\/p>\n<h3 class=\"subheader\">10. Font Styling<\/h3>\n<p style=\"text-align: center;\"><strong><span style=\"color: #ff0000;\">&lt;b&gt;Bold&lt;\/b&gt;\u00a0<\/span><\/strong><\/p>\n<p style=\"text-align: center;\"><strong><span style=\"color: #ff0000;\">&lt;i&gt;italic&lt;\/i&gt;<\/span><\/strong><\/p>\n<p style=\"text-align: center;\"><strong><span style=\"color: #ff0000;\">&lt;s&gt;strike through text&lt;\/s&gt;<\/span><\/strong><\/p>\n<p>We can&#8217;t leave this post without a little old fashioned HTML font styling! \u00a0Use the tags above to make your font <strong>bold<\/strong>, <em>italicized<\/em> or <s>strike through<\/s>!<\/p>\n<p><strong><em>Which HTML tags do you use the most? \u00a0Are there any other functions you&#8217;d like us to cover? \u00a0Please leave us a comment below!<\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you \u00a0a new WordPress blogger? Get the easiest-to-install social media buttons.\u00a0Use\u00a0Shareaholic for WordPress. If there&#8217;s one thing that&#8217;s intimidating as a new blogger, it&#8217;s&hellip;&nbsp;<br \/><a class=\"continue-reading\" href=\"https:\/\/www.shareaholic.com\/blog\/10-html-tags-all-new-bloggers-should-learn\/\">Continue Reading<\/a><\/p>\n","protected":false},"author":29,"featured_media":5379,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[522],"tags":[295,358],"_links":{"self":[{"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/posts\/5325"}],"collection":[{"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/comments?post=5325"}],"version-history":[{"count":0,"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/posts\/5325\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/media\/5379"}],"wp:attachment":[{"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/media?parent=5325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/categories?post=5325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/tags?post=5325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}