Как переписать этот HTML-код для проверки на XHTML 1.0 Strict?

Как переписать этот HTML-код для проверки на XHTML 1.0 Strict?Как переписать этот HTML-код для проверки на XHTML 1.0 Strict?

<div> 
    <a href="link.html"> 
     <p>Some text</p> 
     <ul> 
      <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     </ul> 
    </a> 
</div>

Мое намерение состоит в том, чтобы весь div служил в качестве интерактивной ссылки. Содержимое внутри просто описывает содержимое целевой страницы. W3 Validator говорит, что я не могу иметь элемент блока (<p>) внутри тега span (<a>).

Как мне изменить это так, чтобы мои DIVs оставались связующими звеньями?

источник

2010-09-10 Drew

Можно ли установить отображение: блок в CSS для тега? Будет ли это работать? –

Тег 'a' уже установлен для отображения блока, поэтому он работает так, как я хочу. Он не проверяет, хотя ... – Drew

Вам запрещено включать элемент уровня блока в элемент встроенного уровня, поэтому у вас есть несколько альтернатив.

Вы можете обернуть каждую линию, которую необходимо связать в <a href="link.html">...</a>

<div> 
    <p><a href="link.html">Some text</a></p> 
    <ul> 
     <li><a href="link.html">Item 1</a></li> 
     <li><a href="link.html">Item 2</a></li> 
     <li><a href="link.html">Item 3</a></li> 
    </ul> 
</div>

Вы можете добавить яваскрипт onclick функцию, чтобы воспроизвести те же самые результаты.
```
//jQuery 
$('div').click(function() { 
    window.location = 'link.html'; 
}); 

//Non jQuery 
document.getElementById('yourDiv').onclick = function() { 
    window.location = 'link.html'; 
} 
```
- Если вы используете Javascript, убедитесь, что вы используете CSS, чтобы сделать это очевидным, что содержание ссылки. Я рекомендовал бы псевдо-классы
```
div { 
    text-decoration: underline; 
    color: #0000FF;//or whatever your link color is 
} 
div li:hover, p:hover { 
    color: #CC00FF; 
    cursor: pointer; 
} 
```

источник

2010-09-10 00:45:28 Robert

Следует упомянуть, что это решение зависит от jQuery. – jigfox

@jigfox Делает смысл, обновляется. – Robert

Привет, Роберт! Если я использую функцию jQuery, куда ее поместить? На рассматриваемой странице есть от 5 до 30 из этих блоков div, каждый из которых переходит на другую страницу. – Drew

Вы не можете изменить его, чтобы сделать блок ссылку. Что вы можете сделать, так это сделать каждый отдельный элемент в блоке ссылкой, или вы можете использовать javascript.

<div style="cursor:pointer" onclick="location.href='link.html'"> 
    <!-- ... --> 
</div>

источник

2010-09-10 00:46:31 jigfox

Обычно я не рекомендую использовать «onclick» как атрибут, но я одобряю использование вами курсора: указатель, который игнорировался в других сообщениях. +1 –

@LeguRi, я согласен с вами, как правило, я тоже не использую его, но я хотел бы представить быстрое и короткое решение. И Роберт уже представил лучшее решение. – jigfox

< Ваш UL > также блочный элемент, поэтому он не будет работать там. Как насчет:

<div onclick="location.href = 'link.html'"> 
    <p>Some text</p> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
    </ul> 
</div>

источник

2010-09-10 00:52:36 gilly3

Как есть, ваш фрагмент действителен HTML5. Используйте это вместо этого, и ваша проблема исчезнет. Все, что вам нужно сделать, это изменить doctype на <!doctype html>.

источник

2010-09-10 01:07:40 zwol

Действительно !? У вас есть ссылки на цитирование? Разве они удалили все в блоке HTML5 на уровне «уровень блока в сравнении с встроенным уровнем»? –

Yup. См. Http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html - особенно описание «содержимого потока», которое, по-видимому, включает обе категории; Кроме того, в http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-a-element элемент '' определенно разрешено содержать «любой потока », но по-прежнему считаться« фразовым контентом », если его содержимое полностью« выражает содержание ». – zwol

Также http://validator.nu/ является валидатором HTML5. Я определил свой первоначальный ответ, вставив фрагмент OP в документ скелета, который он вам дает. Нет ошибок. – zwol

Как переписать этот HTML-код для проверки на XHTML 1.0 Strict?

ответ

Смежные вопросы