Couple small points: You have h2 tags, which are great for secondary headings, but rather than using an h1, you’ve created a div with the id title. Why not make that an h1, as that is structurally what it is?
And speaking of structurally… I tend to hit on this a lot. There are a lot of new, semantic tags that we have in the HTML dictionary now: <nav>, <article>, <header>, <footer> and <section>, to name a few. They serve a real purpose – back in the day, our HTML was a wasteland of ugly div tags all over the place. Now, the HTML itself can, in many ways, be as readable and elegant as the actual presented page.
Here’s a possible skeleton page, that might illustrate the difference:
<nav id="nav-menu">
<ul>...</ul> /* use your same ul/li structure here */
</nav>
<main id="main">
<header>
<h1 id="title">Name of Tributee</h1>
<div id="subtitle">
Something about them...
</div>
<figure id="img-div">
<img src="..." alt="Picture..." id="image">
<figcaption id="img-caption">Picture of...</figcaption>
</figure>
<header>
<article id="tribute-info">
<section id="early-life">
<h2>Early Life</h2>
...
</section>
<section id="education">
<h2>Education</h2>
...
</section>
</article>
<footer>
... This could contain your 'find out more' section.
</footer>
</main>
Now, rather than having a collection of div tags (and getting lost in your HTML), you have tags that are meaningful, and tell you their intent.
- The tribute itself is an
article. - Within that article there are a number of
sections– early life, education, activism. - The main purpose of the article is in the
header. - Any figures (images and captions) are contained in the ‘figure’ tag.
- Information related to the article, like copyright or publish date, author info, or “further reading” might go well in a
footertag.
Not saying you NEED to, but at some point you may be using this in your portfolio – and you’re going to want to impress employers. I recommend doing so by making a page that really stands out, both in presentation and in code.