HTML beginners guide for bloggers: easy tips to grasp HTML skills

    A Simple and Non-Scary Guide to HTML for Bloggers

    27th May 2018
    • +0
    Share on
    close
    • +0
    Share on
    close
    Share on
    close
    image

    Learning programming language is certainly not an easy task but the good news is that HTML uses common words that can now make it fairly straightforward and simple to pick up. From the small business owner to individuals working on a blog or personal project online, HTML knowledge is incredibly useful.

    Well, I am Chandan Chakraborty a freelance website developer in Kolkata, India.  I am professional Blogger and I write, speak about Website design and development. I share my tips and technics by blogs.  Here I am sharing  HTML Beginners Guide for Bloggers how bloggers can easily learn and apply few valuable codes to their blogs.  

    Many bloggers think HTML is complicated. A simple know how of HTML code & tags can make it an easier language for any blogger. In this guide we cover the HTML basics in an easy-to-understand manner, perfect for the absolute beginner. The article explains the basic know how of what HTML is, what it looks like, how it works, and why it’s important for bloggers.

    Explaining HTML and its Work

    Hypertext Markup Language, HTML is a standardized system for tagging text files to achieve font, color, bold or italic sections, graphics, hyperlink effects and much more on websites. It is basically a format for creating documents and web pages.

    World Wide Web browsers use HTML tags to interpret & display the content of the page. You need just a basic understanding of HTML & you can create your own Website.

    This is how an HTML Code Look Like

    Look at an example of HTML:

    <p>For a limited time, you can buy this novel online for <strong>just 499 INR</strong>.</p>

    This is how this sentence would look live on the website: 

    For a limited time, you can buy this novel online for just 499 INR.

    What are these codes used for:

    The <p> and </p> start and end the paragraph.

    The <strong> and </strong> start and end the section of bold text.

    The <p>, </p>, <strong> and </strong> are called ‘tags’.

    Remember- Each ‘element’ in HTML must have an opening tag and a closing tag as shown above.

    How to View the HTML Version Of Your Blog Posts

    The editor you usually use for writing your blog is “WYSIWYG” (“What You See Is What You Get”). This lets you see your post formatted in the same way it will appear on your website.

    But you can easily switch to the HTML view of your post by:

    Editing an existing post (or creating a new one)

    Clicking the ‘Text’ tab at the top of the posting box (next to the ‘Visual’ tab).

    Creating an HTML Version of Your Blog Post

    If you’re guest posting for a blog that needs posts in HTML format, you can simply create your post as a draft on your own blog using the ‘Visual’ tab as normal. Then click the ‘Text’ tab and copy the HTML version into Notepad document as plain text.

    Let’s Learn the Examples of Different HTML Tags

    Here are some more tags you must know. Create a draft post or page on your blog, and start using these tags to gain HTML expertise:

    Line break: <br/>

    This tag is opened and closed all in one, which is why it has a forward slash at the end. The <br/> creates a single line break (not a paragraph break). You might use it if you’re writing poetry.

    I

    Am

    Separating

    These

    Words

    By

    Line

    Breaks

    In the visual editor, you can hold down Shift while hitting Enter to create a line break.

    Horizontal Rule: <hr/>

    This is another tag that is opened and closed all in one. The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).

    The <hr> element is used to separate content (or define a change) in an HTML page.

    Let’s learn it with an example:

    <html>

    <body>

    <h1>HTML</h1>

    <p>HTML is a language for describing web pages.</p>

    <hr>

    <h1>CSS</h1>

    <p>CSS defines how to display HTML elements.</p>

    </body>

    </html>

    The above HTML code will be displayed as:

    HTML

     HTML is a language for describing web pages.

    CSS

     CSS defines how to display HTML elements.

    Lists: <ul> or <ol> and <li>

    In HTML, these lists are called:

    Unordered lists: <ul> (with bullet points – like this list)

    Ordered lists: <ol> (with numbers)

    Take a look at this example:

    <p>I have just brought :</p>

    <html>

    <body>

    <h2>An unordered HTML list</h2>

    <ul>

    <li>Coffee</li>

    <li>Tea</li>

    <li>Milk</li>

    </ul>

    </body>

    </html>

    This HTML would create a list that looks like this:

    I have just brought:

    Coffee

    Tea

    Milk

    If you wanted to number the items on the list, you can simply replace <ul> and </ul> with <ol> and </ol> respectively.

    Links: <a> Anchor Tags

    The HTML tag to create a link looks a little bit more complicated than the others that we’ve looked at. That’s because the tag includes the actual link.

    Here’s an example:

    In HTML, links are defined with the <a> tag:

    <html>

    <body>

    <h2>HTML Links</h2>

    <p><a href="https://www.wordpress.com/ ">For more info visit my site here</a></p>

    </body>

    </html>

    The above HTML anchor tag will look like:

    For more info visit my site here

    What After Learning Basic HTML?

    Now when you have learned the basic HTML it’s time to start using it on your blogs. To validate your learning, check your HTML coding on web tutorial sites like W3Schools.com or CodeAcademy.com. Just remember practicing HTML daily is the only way you can acquire proficiency on to this language. This is just an initial learning, there’s a lot more you can do with HTML, including creating ‘styles’ for your different elements, color fonts etc.

    We wish you all the best in embracing this new skill. Who knows if this is the skill that will take you further & open the doors of success in your professional life?

  • Facebook Icon
  • Twitter Icon
  • LinkedIn Icon
  • WhatsApp Icon
  • Facebook Icon
  • Twitter Icon
  • LinkedIn Icon
  • WhatsApp Icon
  • Share on
    close
    This is a YourStory community post, written by one of our readers.The images and content in this post belong to their respective owners. If you feel that any content posted here is a violation of your copyright, please write to us at mystory@yourstory.com and we will take it down. There has been no commercial exchange by YourStory for the publication of this article.
    Report an issue
    Authors

    Related Tags