quickredfox/Balise article HTML5, CSSizée aux piments

## Balise article HTML5, CSSizée aux piments
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">

<title>Page Title</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
/* Le CSS */
	body{
		line-height:1.5em;
		font-size:16px;
		font-family:sans-serif;
	}
	p:first-letter{
		/* corrige grammaire */
		text-transform:capitalize;
	}

	article{
		font-size:1em;
		display:block;
		width:30em;
		padding:0.5em 0.75em;
		border:1px solid #ccc;
	}
	article:before,article header{
		content:attr(title);
		font-size:1.25em;
	}
	article:after,article footer{
		content:"publié: " attr(pubdate);
		font-weight:bold;
		font-size:0.8em;
	}
	article[data-scriptEnhanced]:before,
	article[data-scriptEnhanced]:after{
		display:none;
	}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">

  $(function() {
    $('article').each(function() {
      var $a = $(this),
        $link = $('<a>').attr(
          {
            href: $a.attr('cite'),
            text: $a.attr('title')
          }, true
        );
      $a.attr('data-scriptEnhanced',true)
        .prepend($('<header>').html($link))
        .append($('<footer>').html('<time>publié: '+$a.attr('pubdate')+'</time>'));

    });
  });

</script>

</head>

<body>


<article title="Le titre de mon article machin" cite="http://example.com/url/to/article.html" pubdate="2010-06-08T00:00:00Z">
	<p>le contenu de l'article et un peu de lorem ipsum et <a href="#">un lien pour voir</a> pis kin, un <b>gras</b>!</p>
</article>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<meta name="description" content="description">

	<title>Page Title</title>
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<style>
	/* Le CSS */
	body{
	line-height:1.5em;
	font-size:16px;
	font-family:sans-serif;
	}
	p:first-letter{
	/* corrige grammaire */
	text-transform:capitalize;
	}

	article{
	font-size:1em;
	display:block;
	width:30em;
	padding:0.5em 0.75em;
	border:1px solid #ccc;
	}
	article:before,article header{
	content:attr(title);
	font-size:1.25em;
	}
	article:after,article footer{
	content:"publié: " attr(pubdate);
	font-weight:bold;
	font-size:0.8em;
	}
	article[data-scriptEnhanced]:before,
	article[data-scriptEnhanced]:after{
	display:none;
	}

	</style>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript" charset="utf-8">

	$(function() {
	$('article').each(function() {
	var $a = $(this),
	$link = $('<a>').attr(
	{
	href: $a.attr('cite'),
	text: $a.attr('title')
	}, true
	);
	$a.attr('data-scriptEnhanced',true)
	.prepend($('<header>').html($link))
	.append($('<footer>').html('<time>publié: '+$a.attr('pubdate')+'</time>'));

	});
	});

	</script>

	</head>

	<body>


	<article title="Le titre de mon article machin" cite="http://example.com/url/to/article.html" pubdate="2010-06-08T00:00:00Z">
	<p>le contenu de l'article et un peu de lorem ipsum et <a href="#">un lien pour voir</a> pis kin, un <b>gras</b>!</p>
	</article>

	</body>
	</html>