Какая правильная последовательность тегов?

1) Код к первому вопросу:
Меню выбора в заголовке сайта (класс "header"):
<ul class="menu">
       <li class="selected"><a href="#">Главная</a></li>
       <li><a href="#">Фильмы</a></li>
      <li><a href="#">Сериалы</a></li>
      <li><a href="#">Рейтинг фильмов</a></li>
      <li><a href="#">Контакты</a></li>
</ul>
Меню выбора внизу сайта (класс "footer")
<div class="footer">
	<p>
	<a href="#">Главная</a> | 
	<a href="#">Фильмы</a> | 
	<a href="#">Сериалы</a> | 
	<a href="#">Рейтинг фильмов</a> | 
	<a href="#">Контакты</a> | 
	</p>
        <p>wh-db.com 2015</p>
</div>
2) Код к второму вопросу:
Обрамление ссылкой заголовка (тег "h"):
	<h1><a href="/">КиноМонстр</a></h1>
Обрамление ссылкой картинки (тег "img"):
	<a href="#"><img src="assets/img/matrix.png"></a>

Здравствуйте. В курсе HTML/CSS для меню сверху (header) применяется код с тегами "ul" и "li", а для меню снизу (footer) применяется код с тегами "p". Так нужно делать всегда или это просто вы показали 2 варианта и я могу в первом коде как во втором и наоборот???
И второй вопрос. Когда мы обрамляли заголовок ссылкой мы сначала писали тег "h", а потом "a", а с картинками наоборот - сначала тег a", а потом "img". Это значит что нет разницы в какой последовательности писать теги или просто для заголовков нужно делать так, а для картинок вот так???

html

css

1 ответов

Без разницы как. Я в основном через ul li делаю, можно хоть так делать:

<div class="menu-top">
  <a class="active" href="#main">Main</a>
  <a href="#job">Job</a>
  <a href="#contact">Contact</a>
  <a href="#news">News</a>
</div>

.menu-top{
  background-color: #333;
  overflow: hidden;
}

.menu-top a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.menu-top a:hover {
  background-color: #ddd;
  color: black;
}

.menu-top a.active {
  background-color: #4CAF50;
  color: white;
}

Или так, как в bootstap через nav:

    <!-- Static navbar -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
              <li><a href="../navbar-static-top/">Static top</a></li>
              <li><a href="../navbar-fixed-top/">Fixed top</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

Пример:

https://getbootstrap.com/docs/3.4/examples/navbar/

По поводу оборачивания элементов в ссылки, зависит от задачи, для картинки можно как в вашем примере:

<a href="#"><img src="assets/img/matrix.png"></a>

Или можно даже встраивать картинку в css стили и использовать псевдо классы before, after или просто через css стили. Вариантов много разных, какой лучше подойдет, думаю, можно узнать только получив определенный опыт в верстке.