I'm not really sure if I'm using id's and classes correctly. I'm unaware as well if I'm doing bad practices and I would like some help with that. I'm pretty sure my id's and classes names are terrible but I kinda don't know what to use.
I've been doing some research on the web and downloaded some HTML5 templates so I could see their code. So I'm kinda trying to copy their indentation structure, id's and classes names and things like that. It seems to me that people are using id's for the main containers (like sections, headers) and using classes on smaller ones and on main containers if necessary. Is that correct?
<!DOCTYPE html>
<!--
By Luciano Infanti.
For study purposes only.
-->
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<!-- Header -->
<header id="header">
<span class="logo"><img src="#" alt="" /></span>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#"><span class="button donate">Donate</span></a></li>
</ul>
</nav>
<!-- Banner -->
<h1>Lorem ipsum dolor?</h1>
<p class="bold">Sed fringilla condimentum porta. In vel consectetur purus. Aliquam eget ex quis odio dignissim suscipit vel eget ex. Ut in nibh varius, interdum orci eu, malesuada purus. Morbi ipsum lectus, lobortis vitae mi vel, cursus efficitur nisl.</p>
<ul class="button special">
<li><a href="#">Register now</a></li>
</ul>
<span class="banner-image"><img src="#" alt=""></span>
</header>
<!-- Main -->
<main id="main">
<!-- Small Banner Section -->
<section id="spotlight">
<header class="header"> <!-- I don't know a good name for this class -->
<h2>Lorem ipsum dolor.</h2>
<p class="text bold">Sed fringilla condimentum porta. In vel consectetur purus. Aliquam eget ex quis odio dignissim suscipit vel eget ex. Ut in nibh varius, interdum orci eu, malesuada purus. Morbi ipsum lectus, lobortis vitae mi vel, cursus efficitur nisl. </p>
</header>
<footer>
<ul class="button">
<li><a href="#">Learn more</a></li>
</ul>
</footer>
</section>
<!-- Fatured -->
<section id="first" class="content">
<header class="major">
<h2>Featured Content</h2>
</header>
<article class="title featured">
<header class="header">
<h3>Quisque consequat tellus enim.</h3>
<p class="text">Aliquam eget ex quis odio dignissim suscipit vel eget ex. Ut in nibh varius, interdum orci eu, malesuada purus.</p>
</header>
<span class="featured-img"><img src="#" alt=""></span>
<footer>
<a href="#" class="button">Read more</a>
</footer>
</article>
<article class="title regular">
<header class="header">
<h3>Quisque consequat tellus enim.</h3>
<p class="text">Aliquam eget ex quis odio dignissim suscipit vel eget ex. Ut in nibh varius, interdum orci eu, malesuada purus.</p>
</header>
<span class="regular-img"><img src="#" alt=""></span>
<footer>
<a href="#" class="button">Read more</a>
</footer>
</article>
<article class="title regular">
<header class="header">
<h3>Quisque consequat tellus enim.</h3>
<p class="text">Aliquam eget ex quis odio dignissim suscipit vel eget ex. Ut in nibh varius, interdum orci eu, malesuada purus.</p>
</header>
<span class="regular-img"><img src="#" alt=""></span>
<footer>
<a href="#" class="button">Read more</a>
</footer>
</article>
</section>
<!-- Second section -->
<section id="second" class="content">
<header class="major">
<h2>Sed lorem ipsum dolor sit amet</h2>
</header>
<article class="regular">
<header>
<h3>Tempus nisl et nullam</h3>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula eleifend laoreet. Pellentesque ut libero faucibus, tincidunt turpis.</p>
</header>
<span class="regular-img"><img src="#" alt=""></span>
<footer>
<a href="#" class="button">Learn more</a>
</footer>
</article>
<article class="regular">
<header>
<h3>Tempus nisl et nullam</h3>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula eleifend laoreet. Pellentesque ut libero faucibus, tincidunt turpis.</p>
</header>
<span class="regular-img"><img src="#" alt=""></span>
<footer>
<a href="#" class="button">Learn more legal</a>
</footer>
</article>
</section>
<!-- Third Section -->
<section id="third" class="content">
<header class="major">
<h2>Lorem ipsum dolor sit amet</h2>
</header>
<p class="text">Consectetur adipiscing elit. Donec vehicula eleifend laoreet. Pellentesque ut libero faucibus <a href="#" class="link">Click here</a>. consectetur adipiscing elit. Donec vehicula eleifend laoreet. Pellentesque ut libero faucibus. </p>
</section>
<!-- Fourth Section -->
<section id="fourth" class="content">
<header class="major">
<h2>Consectetur adipiscing elit.</h2>
</header>
<p class="text">Sed fringilla condimentum porta. In vel consectetur purus. Aliquam eget ex quis odio dignissim suscipit vel eget ex. Ut in nibh varius, interdum orci eu, malesuada purus. Find more using the <a href="#" class="mini-cta">Learn more link</a>.</p>
</section>
</main>
<!-- Footer -->
<footer id="footer" class="content">
</footer>
</body>
</html>