4.SemanticArticlePage

                                        <!---------- HTML ---------->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="semantic-article-page.css">
    <title>Semantic Article Page</title>
</head>

<body>
    <article>
        <header>
            <h1>Apple</h1>
            <p>Published: 9th October, 2009</p>
        </header>
        <p>An <b>apple</b> is a sweet, edible fruit produced by an apple tree (Malus pumila). Apple trees are cultivated
            worldwide and are the most widely grown species in the genus Malus.</p>
        <p>The tree originated in Central Asia, where its wild ancestor, Malus sieversii, is still found today. Apples
            have been grown for thousands of years in Asia and Europe and were brought to North America by European
            colonists.</p>
        <p>Apples have religious and mythological significance in many cultures, including Norse, Greek and European
            Christian traditions.</p>
    </article>
    <section>
        <article>
            <h2>Comments</h2>
            <p><time>~1 hour ago</time></p>
            <p>
                <comment>I love apples, my favourite kind are Granny Smiths</comment>
            </p>
        </article>
        <article>
            <h2>Posted by: Oranges are king</h2>
            <p><time>~1 hour ago</time></p>
            <p>
                <comment> Urgh, apples!? you should write about ORANGES instead!!1!</comment>
            </p>
        </article>
    </section>
</body>

</html>

                                        <!---------- CSS ---------->

<!-- body {
    padding: 5px 15px;
    background-color: #e4e978;
}
article {
    padding: 5px 15px;
    border: 1px solid #b2ad7d;
    margin: 15px 10px;
    background-color: #f2f4c0;
}
section article {
    font-style: italic;
    color: #4c7658;

} -->