How to mark data using schema.org and JSON-LD on a

Recently i read a lot about marking structured data using schema.org, the first question is , is it recommended to use json-ld at all? because it seems to be new and is not fully supported yet. My second question is on a home page or archive pages ( generally the pages that we have more than 1 article or product or blog post in them ) how do i use schema.org? for example for a page like this :

<!DOCTYPE html>
<html>
    <head>
        <title>Blog Home Page</title>
    </head>

    <body>
        <h1>Blog title</h1>


        <!-- this needs schema.org -->
        <article>
            <h2>Article title</h2>
            Writtem by <span>Authorname</span> on <time datetime="">21 april</time>

            <p>
                Some text
            </p>

            Rated : 
            <div class="star-rate">
                <span class="star full">
                <span class="star full">
                <span class="star full">
                <span class="star half">
                <span class="star empty">
            </div>

            By <span>5</span> users.
        </article>

        <article>
            <h2>Article title</h2>
            Writtem by <span>Authorname</span> on <time datetime="">21 april</time>

            <p>
                Some text
            </p>

            Rated : 
            <div class="star-rate">
                <span class="star full">
                <span class="star full">
                <span class="star full">
                <span class="star half">
                <span class="star empty">
            </div>

            By <span>5</span> users.
        </article>
        <!-- and more articles to go -->
    </body>
</html>

How can i mark structured data using josn-ld and how to relate json objects to <article> tags.

Some consumers support JSON-LD, some don’t. There can’t be a general answer to this, it depends on which consumers/features you want to support. For example, the consumer Google recommends JSON-LD for some of their features, but doesn’t support it for some of their other features.

If you have multiple entities on a page (like your two articles from the example), you’d simply provide multiple nodes. There are various ways how to achieve this:

You could provide a separate script element for each node:

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "CreativeWork"
}
</script>

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "CreativeWork"
}
</script>

You could provide one script element and use an array as value for @graph (sharing the @context for all nodes):

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@graph": 
  [
    {
       "@type": "CreativeWork"
    },
    {
       "@type": "CreativeWork"
    }
  ]
}
</script>

To allow others to differentiate the nodes (and make their own statements about them), you could give each node a URI with the @id keyword.