Html тег address - разбираем на практике + видео урок

7 декабря, 2014 Максим Метелев 13561 просмотров Комментариев нет

Всем хорошего и бодрого утра! На линии обучения азам сайтостроительства Макс Метелев и сегодня мы рассмотрим такой интересный тег, который применяется в html 5 версии – address.

В него можно включить информацию об авторе и владельце ресурса, а также любые элементы html – ссылки, выделения, текст и т.д.

В ближайшем будущем, а может уже и сейчас тег address будут воспринимать поисковики для сбора информации о владельцах ресурсов.

Если ничего с ним не делать, то по умолчанию он отображает текст курсивом. Если вас такой порядок текста не устраивает, то можете включать различные стили для изменения начертания шрифта.

Тег address парный, т.е его нужно закрывать.

Совместим в следующих браузерах:

Internet Explorer	Chrome	Opera	Mozilla FireFox	Safari	Android	IOS
3.0 +	1.0 +	2.1 +	1.0 +	3.0 +	1.0 +	1.0 +

Ниже приведен его код:

<!DOCTYPE HTML>
<html>
<title>Адрес в html: address</title> 
<body>
<address>
г. Калининград, ул. Суворова, 46 аbr />
тел: 4012 353535<br />
</address>
<body>
</html>

<!DOCTYPE HTML>

<html>

<title>Адрес в html: address</title>

<body>

г. Калининград, ул. Суворова, 46 аbr />

тел: 4012 353535<br />

</address>

<body>

</html>

Посмотрим в браузере и увидим следующую картину:

тег address в браузере

Теперь можем придать немного стиля нашему тегу. Давайте выделим телефон красным и сделаем его большим, а ко всему тексту внутри контейнера address применим шрифт Tahoma. Вот код:

<!DOCTYPE HTML>
<html>
<title>Адрес в html: address</title>
<style type="text/css">
        address {
                font-size:20px;
                font-family: Tahoma, sans-serif;
        }
        
        span {
                color:red;
                font-size:23px;
        }
</style> 
<body>
<address>
г. Калининград, ул. Суворова, 46 а <br />
тел: <span>4012 353535</span><br />
</address>
</body>
</html>

<!DOCTYPE HTML>

<html>

<title>Адрес в html: address</title>

address {

font-size:20px;

font-family: Tahoma, sans-serif;

}

span {

color:red;

font-size:23px;

}

</style>

<body>

г. Калининград, ул. Суворова, 46 а <br />

тел: <span>4012 353535</span><br />

</address>

</body>

</html>

Результат будем иметь примерно вот такой:

Применение стилей к html address

Теперь поясню немного. Красный цвет у телефона мы сделали с помощью логического тега span, который применил стиль только к нему, остальное он не тронул, поскольку мы «обернули» только номер. Целый текст теперь у нас стал больше и другого семейства шрифтов – Tahoma.

Вот такие простые и очень важные вещи мы рассмотрели в этом уроке. Предлагаю ознакомиться с небольшим видео уроком (очень коротким и легким для восприятия). Также вы можете скачать исходник с кодом и самостоятельно упражняться. Спасибо за внимание.

[sociallocker id=»3259″]Скачать Исходник
[/sociallocker]