Тег address

Метки: html, теги, html 5, address, микроформаты

The Address Element The Address Element

Тег address появился еще с HTML3 в 1995 году и продолжает выживать, вплоть до последних версий HTML5. Просуществовав около 15-и лет, он до сих пор продолжает вводить разработчиков в некоторое замешательство. Так как же нам все таки пользоваться тегом address, в наших документах?

Пример правильного использования
Давайте посмотрим, что говорит спецификация:
Тег address предоставляет контактную информацию, которая относится к документу или его части. Информация, которая содержится в address может включать имена владельцев, ссылки на страницы сайтов, e-mail адреса владельцев для обратной связи, почтовые адреса, номера телефонов и так далее. Тег address не используется для всех почтовых и e-mail адресов, он зарезервирован именно для информации, которая поможет найти людей, которые относятся к этому документу.
Если следовать данному совету, то мы могли бы делать что-то вроде этого:
Убрать подсветку кода
1
2
3
4
5
6
7
8
9
The HTML5 Doctor is run by the following group of volunteers:
<address>
<a href="/author/jacko">Jack Osborne</a>,
<a href="/author/richc">Rich Clark</a>,
<a href="/author/miker">Mike Robinson</a>,
<a href="/author/toml">Tom Leadbetter</a>,
<a href="/author/brucel">Bruce Lawson</a>,
<a href="/author/remys">Remy Sharp</a>
</address>

Вот еще один пример, который используется у нас на сайте:
Убрать подсветку кода
1
2
3
4
5
6
7
8
<footer>
<div class="vcard"> by
<address class="author">
<em class="fn"><a title="Posts by Jack Osborne" href="#">Jack Osborne</a></em>
</address> on
<time datetime="2009-11-04" class="published updated">November 4th, 2009</time>
</div>
</footer>

Если вы заглядывали в исходный текст страниц нашего сайта, Вы могли видеть использования тега address, который крепится к низу статьи несколько раз на странице.

Пример неправильного использования
Наиболее распространенное заблуждение по поводу применения тега address, это что он должен использоваться для обозначения любых адресов. Взгляните на следующий пример:
Убрать подсветку кода
1
2
3
4
5
6
7
8
<!-- Это плохо! -->
<address>
Dr. Jack Osborne
HTML5 Hospital,
Doctorville,
Great Britain
Tel: +44 (0)XXXX XXXXXX
</address>

Вы думаете, что не так с этим кодом? Все очень просто, тег address не используется для выделения почтовых адресов. Последняя спецификация говорит об этом прямо, тег address не используется для обозначения почтовых адресов на странице, кроме случаев, когда данные адреса имеют отношение к текущему документу или его разделам.

Выделение почтовых адресов
Так что же делать с теми адресами, которые не имеют отношение к документу? Одно из решений — использовать тег <p> в комбинации с микроформатом hCard.
Давайте перепишем предыдущий пример, используя hCard:
Убрать подсветку кода
1
2
3
4
5
6
7
8
9
10
<div class="vcard">
<p class="fn"><a class="url" href="#">Dr. Jack Osborne</a><p>
<p class="adr">
<span class="street-address">HTML5 Hospital</span>
<span class="region">Doctorville</span>
<span class="postal-code">Postal Code</span>
<span class="country-name">Great Britain</span>
</p>
<p class="tel">+44 (0)XXXX XXXXXX</p>
</div>

К сожалению, мы не станем углубляться в обсуждения об hCard, так как это не является темой данной статьи. Я включил информацию об этом микроформате только для того чтобы показать методы, которыми выделяется почтовый адрес и, что вам не следует использовать для этих целей тег address.
Если вы не чувствуете себя уверенно в реализации микроформатов своими силами, можете воспользоваться hCard-генератором, который сделает всю тяжелую работу за вас.

Оригинал: The Address Element

Рейтинг: 12345   << Вы можете поставить оценку этой статье


Подобные статьи:
   10 редких HTML тегов, о которых вам стоит знать
   Аудио встроенное в браузере
   Элемент time и микроформаты
   Генерация HTML с помощью yuki-html


Обсуждение статьи:

 
Дима Бушков [2011-01-06]
Добрый день! Огромное спасибо за статью - как раз искал про address и hCard, а тут всё вместе!

Вот только я очень сомневаюсь, что смог использовать это правильно... Если Вас не затруднит, укажите на мои ошибки...
http://www.bushkovphoto.com/photoblog/about


GeraldOi [2015-09-13]
Клиентские базы http://prodawez.16mb.com/


GeorgeJeni [2015-10-18]
On our web, you can feel safe! Besides we use mirrored hard drives on all of our servers so we also take backup twice a day on separate servers. We use ISPmanager as the control panel. ISPmanager is a control panel that makes it easy to administer its Web site. With us you can place as many websites and domains you wish for a hosting account.
<a href=http://fastvds.pro/shared-hosting.html>vir tual hosting</a>


GeorgeJeni [2015-10-19]
Pa vart webbhotell kan ni kanna er trygg! Forutom att vi anvander oss av speglade harddiskar pa alla vara servrar sa tar vi aven backup tva ganger per dygn pa separata servrar. Vi anvander oss av ISPmanager som kontrollpanel. ISPmanager ar en kontrollpanel som gor det enkelt att administrera sin hemsida. Hos oss kan ni lagga hur manga hemsidor och domaner ni onskar under ett webbhotellskonto.
<a href=http://fastvds.pro/shared-hosting.html>vir tual hosting</a>


WernerDiofs [2017-01-07]
Соберем для Вас по интернет клиентские базы данных для Вашего Бизнеса Узнайте подробнее по Email: prodawez392@gmail.com Тел +79139230330(wiber/whatsapp/telegram) Skype: prodawez390


TravisBruch [2017-03-13]
yasmin contraceptive pill buy online
<a href= http://owenwirch.jigsy.com >qlaira engorda</a> <a href= http://lavonashym.unblog.fr/2017/03/06/yasmin/ >yasmin safety</a>
qlaira para endometriose
<a href= http://project181788.tilda.ws >what does priligy do</a>
priligy 30
<a href=http://www.devote.se/codyfinwal>priligy cialis</a> <a href=http://project181788.tilda.ws>order priligy online</a>
yasmin ocp
<a href=http://project181788.tilda.ws>order priligy dapoxetine</a>
yasmin contraception


Josephdot [2017-03-17]
resochin 250 mg nebenwirkungen
<a href= http://russellgra.soup.io >nifurantin b6 50 mg</a>
<a href=http://tonetteelv.ucoz.pl>azithromycin saft geschmack</a>
resochin 250
<a href= http://tonetteelv.ucoz.pl >azithromycin milchprodukte</a>
<a href=http://russellgra.soup.io>nifurantin alkohol</a>
azithromycin pillenpause


DavirKag [2017-03-17]
cipramil dosage 10 mg
<a href= http://margaretok.guildomatic.com >nifurantin 100mg wirkung</a>
<a href=http://tammerarep.chapso.de>cipramil 10 nebenwirkungen</a>
cipramil kosten
<a href= http://margaretok.guildomatic.com >nifurantin b6 alkohol</a>
<a href=http://arnoldpoer.startspot.nl>aknemycin rezeptfrei kaufen</a>
cipramil 10 mg wirkung


Stevenhab [2017-03-18]
dimazon chat 10mg
<a href= http://armidaneal.site123.me/about >granudoxy ge 100 mg avis</a>
<a href=http://mauricebur.edublogs.org/2017/03/17/bis acodyl/>bisacodyl 5 mg dosage</a>
bisacodyl 10 mg czopki
<a href= http://www.imxprs.com/free/jacquelang/jacquelang >amoxival 400 mg</a>
<a href=http://lorettacat.postbit.com/glucophage.html >glucophage</a>
dalacine topic vidal


EddieKew [2017-03-18]
levodopa benserazide torrinomedica
<a href= http://pamelaentw.bloggsite.se >nolvadex 10 mg</a>
<a href=http://neurontin.tilda.ws>neurontin 300 cp</a>
flixotide 500 dysk
<a href= http://pamelaentw.bloggsite.se >nolvadex dopo ciclo</a>
<a href=http://lucienklem.e-monsite.com>zimox prezzo con ricetta</a>
cefixime sciroppo


Bermakle [2017-03-18]
Владелец http://healbio.ru/ лох.


MichaelSnani [2017-03-22]
chloramphenicol solutio cordes
<a href= http://stacylofre.freeblog.site >nolvadex wirkung</a>
<a href=http://roberthaym.myfreesites.net>clindamy cin 450 milch</a>
clindamycin 300
<a href= http://www.imxprs.com/free/rosaocon/rosaocon >strattera 10 mg kosten</a>
<a href=http://ericachamp.edublogs.org/2017/03/20/yas minelle/>yasminelle zweimal durchnehmen</a>
clindamycin salbe akne inversa


StevenAlurl [2017-03-24]
ЦЕЛЕВЫЕ БАЗЫ http://xurl.es/128 УЗНАЙТЕ ПОДРОБНЕЕ!!!


 

Оставить комментарий:

Имя


E-mail


Сообщение