Тег 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 УЗНАЙТЕ ПОДРОБНЕЕ!!!


Douglasbef [2017-03-28]
atenolol gador 50
<a href= http://loidaelgin.oneminutesite.it >seroxat composicion</a>
<a href=http://leonelgoss.chapso.de>precio esertia 10 mg</a>
progyluton indicaciones
<a href= http://leonelgoss.chapso.de >esertia vademecum</a>
<a href=http://lonvann.startspot.nl>celecoxib dosis para perros</a>
esertia para que sirve


StevenAlurl [2017-03-28]
Соберем для Вас по интернет базу данных контактов Ваших
потенциальных клиентов для продажи Ваших товаров и услуг.
Много! Быстро! Недорого!
Соберем по городу, по области, по стране, по миру.
Узнайте подробнее
Email: prodawez393@gmail.com
Skype: prodawez390
Whatsapp: +79139230330
Viber: +79139230330
УЗНАЙТЕ ПОДРОБНЕЕ!!!
http://xurl.es/128
<a href="URL">http://xurl.es/128</a>
<a href=http://xurl.es/128>http://xurl.es/128</ a>





<IMG border=0 hspace=0 alt="" src="http://bit.ly/2natPOA">
<img>http://bit.ly/2natPOA</img>


Edmundbew [2017-03-29]
zovirax tabletten zonder recept
<a href= http://ariemundin.tribalpages.com >amoxicilline eg alcohol</a>
<a href=http://tobiecaste.myfreesites.net>zovirax 800 mg prijs</a>
strattera kosten 2013
<a href= http://ariemundin.tribalpages.com >amoxicilline bijsluiter alcohol</a>
<a href=http://donsandra.freeblog.site>zyban tabletten wiki</a>
zovirax prijs etos


Edwarditack [2017-03-31]
dalacin liniment resept
<a href= http://judsonhowl.blogse.nl >pergotime 50 mg posologie</a>
<a href=http://judsonhowl.blogse.nl>pergotime 50 mg pris</a>
flagyl og hund
<a href= http://antionehoy.e-monsite.com >dalacin liniment resept</a>
<a href=http://dantecordo.over-blog.com/2017/03/flagy l.html>flagyl stikkpiller</a>
dalacin klindamycin 10 mg


Reubensam [2017-04-02]
ciprofloxacino preço bifarma
<a href= http://andreahatt.wifeo.com >comprar excedrin migraine españa</a>
<a href=http://kelleymcea.onlc.be>preço nexium 20mg pague menos</a>
priligy aprovado no brasil
<a href= http://jaemcdilda-blog.logdown.com >albendazol preço farmacia popular</a>
<a href=http://www.onweb.fr?company_id=17318>pilul a qlaira comprar</a>
nexium 20 mg para que serve


StevenAlurl [2017-04-03]
КЛИЕНТСКИЕ БАЗЫ для всех кто много продает (для юрлиц и физлиц)! Узнайте подробнее! Skype: prodawez390 Email: prodawez393@gmail.com Whatsapp: +79139230330 Viber: +79139230330 Telegram: +79139230330 WWW: http://xurl.es/PR0DAWEZ


Matthewtousa [2017-04-07]
amoxicilline eg 250 mg/5 ml
<a href= http://margorieza.spruz.com >doxyval 100 mg</a>
<a href=http://www.devote.se/osvaldozag>priligy 30 mg posologie</a>
amoxicilline sirop 500
<a href= http://sydneyvoll.webblogg.se >avis tolexine et rosacée</a>
<a href=http://margorieza.spruz.com>doxyval posologie</a>
finasteride


qianhep [2017-04-07]
Оригинал Xiaomi Redmi Note 4 Х 4 Х Смартфон 3 ГБ ОПЕРАТИВНОЙ ПАМЯТИ 32 ГБ ROM Snapdragon 625 Octa Core MIUI 8.1 Отпечатков Пальцев 5.5 "FHD 4 Г FDD LTE

Лучшая версия себя. Полюбившийся публике RedMi Note 4 стал еще лучше, переродившись в новой модели – Xiaomi RedMi Note 4 Pro. И что самое приятное, цена на телефон по-прежнему радует не меньше, чем и сами нововведения!

Производитель:Xiaomi
Разблокировка телефона:Да
Тип батареи:Не съёмная
Разрешение дисплея:1920x1080
Емкость батареи (мАч):4000mAh(Min) - 4100mAh(Typ)
Операционная система:Android
Особенности:Гравитацион


Jamesnen [2017-04-10]
zovirax oftalmico ricetta
<a href= http://www.onweb.fr?company_id=17319 >amoxicillina sciroppo torrino</a>
<a href=http://alphonsore.freeblog.site>imiquimod costo mexico</a>
etoricoxib 60
<a href= http://www.luciocapsh-87.webself.net >celecoxib accion farmacologica</a>
<a href=http://alphonsore.freeblog.site>imiquimod generico prezzo</a>
levetiracetam nomi commerciali


legorhep [2017-04-14]
Уникальный сервис помощи получения кредита от частного инвестора, а так же кредитных организаций. Подходит как компаниям, так и частным лицам.

Займ от частного инвестора.

Наша компания помогает встретиться инвестору и заёмщику.

Прямой контакт с инвестором
Любая кредитная история
Нужен только паспорт
Работаем с частными лицами и фирмами
Любой регион
Сумма от 5,000 до 50,000,000 руб
Процент одобрения 97%

Преимущества:

- Без залога и поручительства!
- Ставка - всего от 1% в месяц!
- Без скрытых платежей и комиссий!

Оформите заявку у нас на сайте. > www.ch-investor.tk <


tpavelhep [2017-04-16]
Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

Вам достаточно просто зарегистрироваться на нашем сервисе. > like-rabota.tk <

Вывод заработанных средств ежедневно в течении нескольких минут.


wianhep [2017-04-18]
HOMTOM HT7 Pro 4G это смартфон бюджетного класса от Китайского производителя, работающий из коробки на операционной системе Android 5.1. В смартфоне установлен чипсет начального уровня Mediatek MT6735, оснащенный четырех ядерным центральным процессором работающим на частоте 1ГГц, и графическим чипом Mali-T720. Оперативной памяти 2ГБ, постоянной 16ГБ, которую можно расширить при помощи microSD карты обьемом до 128ГБ.

В HOMTOM HT7 Pro большой 5.5 дюймовый дисплей с HD ( 1280 x 720 )разрешением, использующий технологию IPS, благодаря чему картинка выглядит более естественно по сравнению с обычными LCD дисплеями. Спереди и сзади установлены камеры с искусственно поднятым разрешением, таким образом задняя имеет реальных 8МП поднятых до 13МП, фронтальная имеет 2МП поднятые до 5МП.

Общей производительности HOMTOM HT7 Pro 4G смартфона хватит на большинство игр и приложений, даже для самых требовательных. Наличие 2ГБ оперативной памяти позволит запускать больше вкладок в браузере. Благодаря поддержке сетей 4G, смартфон способен принимать данные по высокой скорости.

Батареи емкостью 3000мАч должно хватить на сутки активного пользования.

Цена: 4 424 руб.

Более детальный обзор на нашем сайте. www.homtom-ht7.tk


AlexMaster [2017-04-18]
Help ban account Google AdSense. Send an abuse to Google Adsense on the following sites:
http://gdenauka.com/
http://hapume.com/
http://indelous.com/
http://usature.com/
http://monforexe.com/
We block this account Google AdSense together.


mofGlowroms [2017-04-27]
Детский лагерь "Богатыренок" приглашает детей на отдых. Лагерь расположен на побережье Черного моря под Одессой. Подробности на http://www.krok.co.ua


Elvira [2017-05-21]
https://bio-optomarket.ru/


Elviral [2017-06-05]
http://chatroulette.si/


Elviral [2017-06-13]
http://chatroulette.online/


Semin [2017-07-06]
http://videochat.ph/


Klamin [2017-07-25]
http://taraz.xkaz.org/


Klamina [2017-08-06]
http://life-instyle.com/eda.html


Klaminal [2017-08-07]
http://pc-services.ru/


Sevenday [2017-08-14]
https://xn--80abgj3a5acid6ghs.top/


 

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

Имя


E-mail


Сообщение