I'd like to use some semantic [X]HTML tags instead of <div>s: <article>, <product>, <footer> etc. Some of them are already presented in the upcoming HTML5, however, it's not fully supported.
Which are the possible cons I might face when Rendering? Using CSS, JS?
The one I remember is: IE6 can't clone tags it doesn't know.
Adding the following JavaScript fix makes custom HTML5 tags work in IE. In fact they work in every other browser I have tried. I have built my website using HTML5, and although it doesn't look great in IE6&7, it still works. Here is the code you put in your template header:
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <style type="text/css"> .clear { zoom: 1;display: block;} </style> <![endif]-->
Using HTML5 tags gives you increased control using CSS due to their semantic nature. It is actually a lot easier making sites, as they are easier to understand if you use the tags correctly.
Using divs everywhere is fine, because if they have appropriate ID's and classes, they are still semantic, but with the HTML5 tags, you can recognize page structure a lot faster.