Article Layout
Getting Started with the Jelly Fish Article Layout
Our article isn't going to have a top-level header and footer for this draft. We're just going to focus on the article container and its contents.
Adding these semantic elements does nothing to change the way the HTML is displayed on the screen. They are just marking sections of the page with meaning and will enable us to add CSS selectors to eventually style them.
Changes to Use Semantic Elements
Top-level Structure
We can now modify our HTML page to use semantic elements to convey more meaning to the structure of the page.
<body>
<main>
<article>
<header>
<!-- Title, Sub-title, Author-->
<section></section>
<!-- Video -->
<section></section>
<!-- Meet the Jellies -->
<section></section>
</header>
<!-- Pink Jelly -->
<section>
</section>
<!-- Orange Jelly -->
<section>
</section>
<!--Yellow Jelly -->
<section>
</section>
</article>
</main>
</body>Header Section - Title, Sub-title, Author and Date
First, we'll add a few more details to the title section of the page. Notice the addition of the two semantic elements <address> and <time>.
Header Section - Video
Header Section - Meet the Jellies Section
Next, we'll add our MEET THE JELLIES section. Notice the replacement of the italics with the <address> element in each list item for the author byline.
Jellyfish Section
Last, we'll modify the individual jellyfish section to be contained in a <section> element and also use the <figure>, <figurecaption> and <address> semantic elements to wrap the image.
The figure and figure caption elements associate an image and its caption, whereas the address element is specifically for marking an author/or byline.
Finished HTML
Assignment
Check-in your changes and push them to GitHub, then I will check them off to make sure they've all been completed.
git commit -am"finished sections"
git push
Resources
Last updated
Was this helpful?