Five Crucial HTML Tags Every Blogger Should Know - DailyBlogTips

---

Five Crucial HTML Tags Every Blogger Should Know Posted: 09 Jan 2014 07:00 AM PST A couple of weeks ago, I explained the basics of HTML and why you might want to use it. In today's post, I'll go through some simple HTML tags that every blogger should know about. You can add extra information within some tags, too, as you'll see in the examples – for instance if you want position an image centrally, or make a link open up in a new tab. Keep in mind that you don’t need to type these tags when creating posts in WordPress: you can use the buttons in the visual editor instead. (Or you can copy your post in from Word, with formatting already in place.) <p> The <p> tag indicates a paragraph. Each paragraph needs to start with <p> and end with </p> so that your browser knows where to put the line breaks. (HTML code doesn't recognise spaces, except the space between two words.) In WordPress, <p> tags are added automatically by your blog's code and don't appear in the Text editor. (You can also choose to add them automatically in widgets.) If you go to a post on your blog and click "View source" in your browser, you'll see the <p> and </p> wrapped around each paragraph: <h1>, <h2>, <h3> … and more HTML has special tags for headers and subheaders, which are: <h1> — the biggest, "Heading 1" <h2> — the next biggest (this is what I’m using for subheadings in this post) … and so on down to <h6> Normally, you won't use <h1> in your content as that's used for the title of your blog post or page. To use a header tag, simply wrap it around your subheading like this: <h2>Your Next Steps</h2> <a href> – Creates a Link The "a href" tag creates a hyperlink. If a link ever goes awry, it's useful to know what the code looks like so you can fix it. Here’s a link and the code for it: DailyBlogTips <a href="http://www.dailyblogtips.com">DailyBlogTips</a> You can add extra features to your link. For instance: <a href="http://www.dailyblogtips.com" target="_blank" title="This link opens in a new window/tab">DailyBlogTips</a> This produces a link like this (hover your cursor over it to see the title): DailyBlogTips If your link doesn't work… Check that you've used straight quotes not curly (smart) quotes. Check that you haven't missed one of the quotation marks. Check that the URL starts with http:// <img> – shows an image The "img" tag shows an image, like this one (me and my daughter Kitty on Christmas Eve): In its simplest form, as for the image above, it looks like this: <img src="http://www.dailyblogtips.com/wp-content/uploads/ Xmas-Eve.jpg"/> You can add extras to your image too, e.g. title text (which appears when the user hovers over the image). If you want to center an image in WordPress, use class=aligncenter. <img src="http://www.dailyblogtips.com/wp-content/uploads/ Xmas-Eve.jpg" class="aligncenter" title="Ali and her daughter Kitty on Christmas Eve"/> Note: This tag is opened and closed in one. The forward slash at the very end of the tag closes it. <ul>, <ol> and <li> – Creating Lists Here's an "unordered list" in HTML: <ul><li>Bread</li> <li>Milk</li> <li>Carrots</li> <li>Potatoes</li></ul> This displays as: Bread Milk Carrots Potatoes Note how each list item has <li> at the start and </li> at the end, and the whole list has <ul> at the start and </ul> at the end. To use numbers instead of bullet points, simply switch the <ul> and </ul> for <ol> and </ol>. You’ll get an "ordered list" like this: Bread Milk Carrots Potatoes   Do you have a sixth essential tag to add – or other HTML tips to share? Let us know in the comments.   Wanna learn how to make more money with your website? Check the Online Profits training program!

You are subscribed to email updates from Daily Blog Tips To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610