Using appropriate elements in blog posts

13 Jul

Using appropriate elements in blog posts

Most often, I see blog posts where blogs without use of appropriate elements such as headings, tables etc. So thought let me write some tips that one should consider while writing a blog post.

  1. Never copy and paste from a word processing document or internet page
  2. Use appropriate heading structure if your post has sub sections; for instance, ideally, your post name would be heading level 1 and uses
    <h1>

    so next level heading would be

    <h2>

    and next level to

    <h2>

    would be

    <h3>

    and so on.

  3. If you insert an informative image; don’t forget to add text description to it. Sample code:
    <img src="folder/filename.gif" alt="This is a sample image" >

    if you use an image that is for decorative purpose, provide a null alt attribute. Sample code:

    <img src="folder/filename.gif" alt="" >
  4. If you use a data table, use semantic markup including table summary, caption and associate headers. Sample table code:
    <table summary="This table consist of HTML elements and their use">
    <thead>
    <tr>
    <th> Attribute;</th>
    <th> Description;</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>h1, h2, h3...</td>
    <td >Headings </td>
    </tr>
    <tr>
    <td>a href</td>
    <td> Hyper link </td>
    </tr>
    </tbody>
    </table>

    and here is the output:

    Attribute Description
    h1, h2, h3… Headings
    a href Hyper link
  5. Use appropriate list attributes: If you want to use an unordered list, use
    <ul>
    	<li>
    <ol>

    attribute for ordered list. Here is the sample code:

  6. Unordered list:
    <ul>
    	<li>First bullet list item</li>
    	<li>Second bullet list item</li>
    	<li>Third bullet list item</li>
    </ul>

    Output:

    • First bullet list item
    • Second bullet list item
    • Third bullet list item
  7. Ordered list:
    <ol>
    	<li>First numbered list item</li>
    	<li>Second numbered list item</li>
    	<li>Third numbered list item</li>
    </ol>

    Output:

    1. First numbered list item
    2. Second numbered list item
    3. Third numbered list item

attributes and

</ul>

More later! Enjoy writing effective blog posts!

Related Posts with Thumbnails

BySrinivasu Chakravarthula

I am an enthusiast of accessibility and classical music.

%d bloggers like this: