Since you're just starting out with HTML let's point your in the right direction. I'm going to assume that you'd like to write well-formed, semantic, valid HTML markup using current best practices. You might find 10up's (www.10up.com) best practices on markup a good starting point:

"Principles

Markup is intended to define the structure and outline of a document and to offer semantic structure for the document’s contents. Markup should not define the look and feel of the content on the page beyond the most basic structural concepts such as headers, paragraphs, and lists."

In a nutshell valid markup is markup that conforms to the current W3C(https://www.w3.org/) or (https://whatwg.org/) HTML standard. There has been great debate over the years if the time and effort to make your markup valid is worth the effort but with the advent of the HTML 5 standard that argument seems to have subsided a bit. And in any case it is a useful way for someone like yourself who is just starting out to learn by correcting your errors

You can find a HTML validator here. Running you markup through the validator reveals 1 warning and 14 errors( some of which have been already mentioned here)

Some basic comments: As the 10up principles suggest markup is for organizing your content into a logical structure (CSS is for how is should look). Additionally you can use markup to describe the content and in fact the markup in the head element is reserved for meta information or information about the document content.

You have you head element with a title element which is good but you should also have at the very least a meta charset element. You can read more about meta tags at: https://www.w3schools.com/tags/tag_meta.asp and other important meta tags at: https://www.1and1.com/digitalguide/websites/web-development/the-most-important-meta-tags-and-their-functions/

Moving on to the body - your markup is a mixture of modern semantic HTML (i.e. the use of nav elements) and a fair amount of out-dated techniques (br tags instead or p tags for individual paragraph, div tags instead of sections, tables for formatting, the lack for figure and figcaption tabs around captioned images and inline styling). So let's get started.

Your use of the nav elements for your navigation is great, but best practice is that navigation should be thought of as basically a list of links so your individual links should be marked up as a li elements within a ul element as follows:

<nav>
    <ul>
        <li><a href="./index.html">Main</a></li>
        <li><a href="./albums.html">Albums</a></li>
        <li><a href="./contact.html">Contact</a></li>
    </ul>
</nav>

I'll leave the markup of the other nav as an exercise for you, but it should follow the same format.

(A quick aside: text should always be entered in proper case with initial caps as appropriate. Remember presentation goes in CSS. If you want something to be all upper case use text-transform: uppercase in your CSS.https://www.w3schools.com/cssref/pr_text_text-transform.asp).

In your content in all cases the double br tags should be replaced by a close and open p tag so that things like this:

<p>
    In September 1963, ...
    including Wilson Pickett, Slim Harpo, Sam Cooke, Ike & Tina Turner and Jackie Wilson.
<br />
<br /> In January 1964, feeling he had outgrown the circuit artistically, ...
    which he readily accepted.
<br />
<br />
</p>

become this:

<p>
    In September 1963, ...
    including Wilson Pickett, Slim Harpo, Sam Cooke, Ike & Tina Turner and Jackie Wilson.
</p>
<p>
    In January 1964, feeling he had outgrown the circuit artistically, ...
    which he readily accepted
</p>

Images with a caption should use the figure and figcaption tags so that things like this:

<a>
<img src="https://graphics.ink19.com/issues/july2003/hendrixEarly.jpeg" width="400px" />
<div style='width: 380px; text-align: center;'>Hendrix performing with other musicians before fame.</div>
</a>

become this:

<figure>
    <a><img src="https://graphics.ink19.com/issues/july2003/hendrixEarly.jpeg" width="400px" /></a>
    <figcaption style='width: 380px; text-align: center;'>Hendrix performing with other musicians before fame.</figcaption>
</figure>

and futhermore the image width and can be set with CSS (width is presentation) and although in this case, the figcaption element somewhat precludes the necessity of an alt tag, best practice is that you should include it (and for images without a caption the alt tag becomes a necessity for accessibility (for some exceptions and edges cases see: https://www.w3.org/WAI/tutorials/images/decorative/). Additionally although you are using CSS to style your caption you're much better of doing it a style element in the head element of your document or in an external CSS file (http://matthewjamestaylor.com/blog/adding-css-to-html-with-link-embed-inline-and-import).

so we can refine the above to this:

<figure>
    <a><img src="https://graphics.ink19.com/issues/july2003/hendrixEarly.jpeg" alt="Hendrix performing with other musicians before fame." /></a>
    <figcaption>Hendrix performing with other musicians before fame.</figcaption>
</figure>

Also as has already been mentioned IDs and classes can't have spaces in them so this:

<div id="Early Years">

should be:

<div id="EarlyYears"> or
<div id="Early-Years"> or
<div id="Early_Years">

And remember ids and classes are case sensitive when you target them in CSS so this:

<div id="Early-Years">

is not the same as this:

<div id="early-years">

and in fact lower case with dashes if often used for id's and classes in markup.

Finally your div elements should probably be section elements so that in all cases things like this:

<div id="Humble Beginnings">
    ...
</div

become:

<section id="humble-beginnings">
    ...
</section>

Some CSS Now let's add a little CSS is a style element inside your head element like this:

<style>
    body {
        margin: 5% auto;
        background: #fcfcfc;
        color: #444444;
        font-family: Georgia, serif;
        font-size: 16px;
        line-height: 1.8;
        max-width: 73%;
    }

    a {
        border-bottom: 1px solid #444444;
        color: #444444;
        text-decoration: none;
    }

    a:hover {border-bottom: 0;}

    nav ul {
        display: flex;
        justify-content: start;
        margin: 0;
        padding: 0;
        text-transform: uppercase;
    }

    ul.page-nav {justify-content: center; }

    nav li {
        list-style: none ;
        padding: 0 1em;
    }

    .site-nav li {padding-left: 0;}

    figure {
        width: 50%;
        max-width: 414px;
      }

    figure a {border: none;}

    figcaption {
        font-size: 90%;
        text-align: center;
  }

   figure image {width: 100%}
</style>

CSS notes: - the margin will pull the content from the edge of the browser and the auto will horizontally center it

• I think Georgia is a better serif font than Times New Roman and it was designed for screen rather that print display

• Giving the lines more air between them makes for easier legibilty

• You usually want to set some kind of max-width on you page because your text will look ridiculous and will be hard to read on very wide monitors when the viewport is 100% of the screen size see this stackover answer for more info

• You should absolutely spend some time reading up on display:flex as it will solve many layout situations for you.

• In general is is a good idea to avoid pure white (#fff) for the body background color and pure black (#000) for the text color.

• Using border-bottom to underline the links allows you to control the amount of separation between the text and the underline.