Семантическая HTML-разметка для ссылок на разделы текущей страницы в заголовках - PullRequest
Новая
       45

Семантическая HTML-разметка для ссылок на разделы текущей страницы в заголовках

0 голосов
/ 13 февраля 2019

Я написал разметку для заголовка со ссылками на разные страницы, а также с разделами текущих страниц, и я хотел знать следующее:

Являются ли имена тегов, которые я использовал, семантически подходящими?Является ли структура / иерархия правильной?Нужно ли оптимизировать / изменить мою разметку для легкого стилевого оформления CSS? 

<header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Setting</a></li>
            <li><a href="#">Progress</a></li>
            <li><a href="#">Learn</a></li>
        </ul>
    </nav>
    <ul>
        <li><a href="#">Section 1</a></li>
        <li><a href="#">Section 2</a></li>
        <li><a href="#">Section 3</a></li>
        <li><a href="#">Section 4</a></li>
        <li><a href="#">Section 5</a></li>
    </ul>
</header>

Я хочу, чтобы эта разметка была максимально стандартизирована, а также готова к стилизации любым возможным способом без необходимости возвратав разметку и измените ее.

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

Элемент nav представляет навигацию для раздела, в котором он находится:

  • Для навигации по всему сайту nav должен быть в корневом элементе секционирования body(потому что это представляет всю страницу).

  • Для оглавления (как в статье в Википедии), nav должен быть в разделе section / articleЭлемент содержимого, представляющий содержимое, для которого предназначен ToC.

(Пример 9 в nav spec показывает именно этот случай.)

Итак, в идеале вы должны использовать что-то вроде этого (при условии, что это какая-то статья): 

<body>

<h1>Site title</h1>

<nav>
  <!-- the nav for the site-wide navigation -->
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Setting</a></li>
    <li><a href="#">Progress</a></li>
    <li><a href="#">Learn</a></li>
  </ul>
</nav>

<article>
  <h2>Article title</h2>

  <nav>
    <!-- the nav for the article -->
    <ul>
      <li><a href="#">Section 1</a></li>
      <li><a href="#">Section 2</a></li>
      <li><a href="#">Section 3</a></li>
      <li><a href="#">Section 4</a></li>
      <li><a href="#">Section 5</a></li>
    </ul>
  </nav>

</article>

</body>

(каждый раздел может иметь свой собственный header, так что вы можете поместить первый nav в body - header и второй nav в article - header, если хотите.)

0 голосов
/ 13 февраля 2019

Я бы сказал, что SEO связано ... Метатеги, которые мы назвали.

Логотип должен быть - alt тег важен.Например, ваш сайт имеет отношение к "Баскетбольному форуму". Вы можете поместить в это alt = "" вот так alt = "Логотип Баскетбольного форума" , затем попробуйте все изображения на вашем сайте, вы должны написать altпомечайте ключевые слова связанной страницей / темой.

затем Элемент - вы должны написать на нем заголовок, чтобы люди или поисковая система могли видеть, куда ведет ссылка.

Пример: 

<a href="/basketball_player_names" title="Basketball Player Names">link</a>

SEO действительно огромен.Дополнительная информация по ссылке ниже .. его от Google https://developers.google.com/search/

...