Що правильніше: <h1> <a>… </a> </h1> АБО <a> <h1>… </h1> </a>

Чи обидва, <h1><a ...> ... </a></h1>і <a ...><h1> ... </h1></a>дійсний HTML, чи лише один правильний? Якщо вони обоє правильні, чи відрізняються вони між собою за значенням?

Обидві версії правильні. Найбільша різниця між ними полягає в тому, що у випадку, коли <h1><a>..</a></h1>лише текст у заголовку буде натискати.

Якщо поставити властивість <a>навколо <h1>і css displayє block(що це за замовчуванням), весь блок (висота <h1>та 100% ширини контейнера, в якому <h1>знаходиться) буде натискати.

Історично ви не могли ввести елемент блоку всередині вбудованого елемента, але це вже не так з HTML5. Я думаю, що цей <h1><a>..</a></h1>підхід є більш звичайним.

У випадку, коли ви хочете поставити якір на заголовок, кращий підхід, ніж <a id="my-anchor"><h1>..</h1></a>було б використовувати idабо nameатрибут на зразок цього: <h1 id="my-anchor">..</h1>або<h1 name="my-anchor">..</h1>

У попередньому HTML 5 цей

<a><h1>..</h1></a>

не підтверджує. Ви можете використовувати його в HTML 5. Однак я би використовував це:

<h1><a>..</a></h1>

якщо вам не потрібно додати більше <h1> всередині <a>

<a><h1></h1></a>не вірно W3C ... В основному, ви не можете розміщувати елементи блоку всередині вбудованих елементів

<h1><a>..</a></h1>і <a><h1>..</h1></a>завжди поводилися майже так само, коли аркуші стилів не впливають на візуалізацію. Майже, але не зовсім. Якщо ви переходите за допомогою клавіші табуляції або іншим чином зосереджуєтесь на посиланні, навколо прямого посилання у більшості браузерів з’являється «прямокутник фокусування». Бо <h1><a>..</a></h1>цей прямокутник є лише навколо тексту посилання. Для <a><h1>..</h1></a>цього прямокутник розширюється через доступний горизонтальний простір, оскільки розмітка робить aелемент блоковим у візуалізації, займаючи ширину 100% за замовчуванням.

Далі показано, як фокус <a href=foo><h1>link</h1></a>відображає Chrome:

Це означає, що якщо ви стильові елементи, наприклад, встановивши колір тла для посилань, ефекти відрізняються аналогічно.

Історично <a><h1>..</h1></a>в HTML 2.0 було визнано недійсним, і наступні специфікації HTML слідували відповідності, але HTML5 змінює це та оголошує його дійсним. Формальне визначення не торкнулося браузерів, лише валідатори. Однак віддалено можливо, що деякі користувальницькі агенти (можливо, це не звичайні браузери, але, наприклад, спеціалізовані HTML-рендери, витяжки даних, перетворювачі тощо) не справляються з <a><h1>..</h1></a>належним чином, оскільки це не дозволено в специфікаціях.

Рідко є вагомі причини зробити заголовок або текст у заголовку посиланням. (Це в основному нелогічно і погано для юзабіліті.) Але подібне питання часто виникає під час створення заголовка (або тексту в заголовку) потенційним пунктом призначення посилання, використовуючи, наприклад, <h2><a name=foo>...</a></h2>проти <a name=foo><h2>...</h2></a>. Подібні міркування стосуються цього (обидва роботи, можливо, є різниця, оскільки останній робить aелемент блоком, а перед HTML5 формально дозволений лише перший). Але крім того, обидва шляхи застаріли, і з допомогою idатрибута безпосередньо на елементі заголовка тепер рекомендується: <h2 id=foo>...</h2>.

Елементи H1 - це елементи рівня блоку, а анкери - елементи в рядку. Ви можете мати вбудований елемент в межах елемента рівня блоку, але не навпаки. Якщо врахувати модель коробки та специфікацію HTML, це має сенс.

Тож на закінчення найкращий спосіб:

<h1><a href="#">Link</a></h1>

ви хочете використовувати гіперпосилання <a href="…">/ a:linkабо ви хочете додати якор до своєї заголовка? якщо ви хочете додати якір, ви можете просто призначити ідентифікатор <h1 id="heading">. потім ви можете пов’язати це як page.htm#heading.

якщо ви хочете зробити заголовок клікабельним (посилання), спочатку використовуйте <h1><a></a></h1>/ h1 > a- blocklevel елементи та вбудовані елементи всередині

Також є ієрархічні відмінності стилів. Якщо у вас це є <h1><a href="#">Heading here</a></h1>, Стилі якоря перекриють стилі елемента h1. Приклад:

a {color:red;font-size:30px;line-height:30px;}

БУДЕ ЗНАЧЕНО

h1 {color:blue;font-size:40px;line-height:40px;}