Набор авторов в комманду!!!




Пожертвовать на развитие сайта. Пожертвовать

Элемент footer в html 5

Главная » Справочники » Справочник HTML5 » Элемент footer в html 5
Элемент footer определяет нижний блок (секцию) в документе или части(секции) документа.
font

Поддержка браузерами элемента footer в HTML5

Элемент footer в браузере Internet Explorer не поддерживается
Элемент footer в браузере Firefox 3.7 поддерживается в ночных сборках
Элемент footer в браузере Chrome 5.0 поддерживается
Элемент footer в браузере Safari 5.0 поддерживается
Элемент footer в браузере Opera не поддерживается

Описание элемента footer в HTML5

footer - определяет нижний блок (секцию, колонтитул) в документе или части(секции) документа. footer относится к ближайшей секции-предку или к корневому документу. Элемент footer обычно содержит информацию о его разделе, таких как, кто что написал, ссылки на соответствующие документы, данные сайта, место для подписи в сообщениях email, и тому подобное.

Колонтитулы не обязательно должны появиться в конце раздела, хотя так обычно делают.

Примеры использования элемента footer в HTML5

Пример использования элемента footer в HTML5

<footer>
	&copy; 2012, фирма "Наша Радость"
</footer>

Результат использования элемента footer в HTML5

© 2012, фирма "Наша Радость"

Пример использования элемента nav в HTML5 с элементом footer

<footer>
	<nav>
		<a href="#">Редактировать</a> |
		<a href="#">Удалить</a>
	</nav>	
</footer>

Результат использования элемента nav в HTML5 с элементом footer

Пример использования элемента footer в корневом элементе body

<body>
	<footer>
		&copy; 2012, фирма "Наша Радость"
	</footer>
</body>

Результат использования элемента footer в корневом элементе body

© 2012, фирма "Наша Радость"

Пример использования элемента footer с элементом nav, в корневом элементе body

<body>
	<footer>
		&copy; 2012, фирма "Наша Радость"
		<nav>
			<a href="#">Главная</a> |
			<a href="#">О Нас</a>
		</nav>
	</footer>
</body>

Результат использования элемента footer с элементом nav, в корневом элементе body

Пример страницы с двумя элементами footer, один в верху страницы и один внизу, одного документа

<body>
	<footer>
		<a href="/">Телепортация на главнную страницу!!!
			Приступить!!!</a>
	</footer>
	<hgroup>
		<h1>Похождения Медведа</h1>
		<h2>Медвед и трындючая бабка</h2>
	</hgroup>
	<p>
		И стоит Медвед, и молчит Медвед, <br>
		и на бабку трындючую смотрит Медвед. <br>
		И терпел Медвед, и выл Медвед, <br>
		и слезами горькими рыдал Медвед. <br>
		И сжалилась бабка трындючая, <br>
		и сказала бабка трындючая:  <br>
		"-Жанись на внучке, а потом и цалавацца будете." <br>
	</p>
	<footer>
		<a href="/">Телепортация на главнную страницу!!!
			Приступить!!!</a>
	</footer>
</body>

Результат страницы с двумя элементами footer, один в верху страницы и один внизу, одного документа

Похождения Медведа

Медвед и трындючая бабка

И стоит Медвед, и молчит Медвед,
и на бабку трындючую смотрит Медвед.
И терпел Медвед, и выл Медвед,
и слезами горькими рыдал Медвед.
И сжалилась бабка трындючая,
и сказала бабка трындючая:
"-Жанись на внучке, а потом и цалавацца будете."

Пример множественного использования элемента footer

<body>
	<h1>Про Медведа</h1>
	<article>
		<h1>Часть 1. Знакомство</h1>
		<p>
			И был день, и был лес, и было свежо в лесу...
		</p>
		<footer>	<!-- колотитул для article -->
			<p>
				Припечатано
				<time pubdate datetime="2009-10-21T18:26-07:00">
				</time>
			</p>
		</footer>
	</article>
	<article>
		<h1>Часть 2. Медвед в Любви</h1>
		<p>
			И увидел медвед Машу...
		</p>
		<footer> <!-- колотитул для article -->
			<p>Припечатано
				<time pubdate datetime="2009-09-15T14:54-07:00">
				</time>
			</p>
		</footer>
	</article>
	<footer> <!-- колонтитул для body -->
		<nav>
			<a href="#">Вопрос Медведу</a> |
			<a href="#">Фотки Медведа</a> |
			<a href="#">Блог Медведа</a></p>
		</nav>
		<p>Copyright &copy; 2012</p>
	</footer>
</body>

Результат множественного использования элемента footer

Про Медведа

Часть 1. Знакомство

И был день, и был лес, и было свежо в лесу...

Припечатано

Часть 2. Медвед в Любви

И увидел медвед Машу...

Припечатано

Отличие тега footer HTML4.1 от HTML5

Тег footer добавлен в HTML 5.

Атрибуты тега footer в HTML5

Индивидуальные атрибуты для тега footer не определены

Зачем нужен тег footer в HTML5

При правильном использовании даёт возможность структурировать документ и вносить стилизацию на уровне css.

Не решенные вопросы про тег footer в HTML5

Какие плюсы даёт использвание тега footer (SEO, навигация)?

Идеи использования тега footer в HTML5

Не известны

font