The tag defines the footer of a web page or a section. Usually, it contains copyright information, contact details, navigation links, etc.
You can have several tags on a web page. For example, you can place a footer inside the tag to store information related to the article (links, footnotes, etc.).
The tag can contain other HTML elements, except for the and tags.
tag comes in pairs. The content is written between the opening ( ) tags.
Example of the HTML tag: html > html > head > title >Title of the document title> style > .header < height : 40px ; padding : 20px 20px 0 ; background : #e1e1e1 ; > .main-content < height : 60vh ; padding : 20px ; > footer < padding : 10px 20px ; background : #666 ; color : white; > a < color : #00aaff ; >body > div class ="header" >Header / Menu div> div class ="main-content" > h1 >Main content h1> p >This is some paragraph. p> div> footer > p >Company © W3docs. All rights reserved. p> footer> body> html>Result
Attributes How to style tag? Common properties to alter the visual weight/emphasis/size of text in tag: CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit. CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element. CSS font-size property sets the size of the font. CSS font-weight property defines whether the font should be bold or thick. CSS text-transform property controls text case and capitalization. CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style. Coloring text in tag: CSS color property describes the color of the text content and text decorations. CSS background-color property sets the background color of an element. Text layout styles for tag: CSS text-indent property specifies the indentation of the first line in a text block. CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user. CSS white-space property specifies how white-space inside an element is handled. CSS word-break property specifies where the lines should be broken. Other properties worth looking at for tag: CSS text-shadow property adds shadow to text. CSS text-align-last property sets the alignment of the last line of the text. CSS line-height property specifies the height of a line. CSS letter-spacing property defines the spaces between letters/characters in a text. CSS word-spacing property sets the spacing between words. Browser support Источник
HTML Tag The tag defines a footer for a document or section.
A element typically contains:
authorship information copyright information contact information sitemap back to top links related documents You can have several elements in one document.
Tips and Notes Tip: Contact information inside a element should go inside an tag.
Browser Support The numbers in the table specify the first browser version that fully supports the element.
Element 5.0 9.0 4.0 5.0 11.1
Global Attributes Event Attributes More Examples Example Related Pages Default CSS Settings Most browsers will display the element with the following default values:
COLOR PICKER
Report Error If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us! Your message has been sent to W3Schools.
Top Tutorials Top References Top Examples Get Certified W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Источник
HTML-элемент представляет собой нижний колонтитул (футер, подвал) для своего ближайшего секционного контента или секционного корня. Футер обычно содержит информацию об авторе раздела, информацию об авторском праве или ссылки на связанные документы.
Интерактивный пример Категории контента Основной поток, явный контент. Допустимое содержимое Контент основного потока, кроме и . Пропуск тегов Нет, открывающий и закрывающий теги обязательны. Допустимые родители Любой элемент, который разрешает Контент основного потока в качестве содержимого. Обратите внимание, что элемент не должен быть потомком элемента , или другого элемента . Допустимые ARIA-роли group (en-US) , presentation (en-US) DOM-интерфейс HTMLElement
Атрибуты К этому элементу применимы только глобальные атрибуты.
Примечание Примеры footer > footer > Проблемы доступности У программа чтения с экрана VoiceOver есть проблема, при которой она не читает элемент (не добавляет роль-ориентир элемента в список ориентиров). Чтобы решить эту проблему добавьте role=»contentinfo» в элемент .
Спецификации Поддержка браузерами BCD tables only load in the browser
Смотрите также Found a content problem with this page? This page was last modified on 4 мар. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Источник
in HTML
The tag in HTML is used to define the structure for the footer of the web page. The footer in HTML usually contains information about the author, links to related documents, and copyright information and is present at the bottom of a web page.
Syntax Start the footer section with the starting
tag. You need to close the . Anything that should go inside the footer has to be written between the starting and the closing footer tag, like this:
Attributes As you might know, two things are associated with HTML elements, namely tags and attributes. Each element contains their own attributes and all global attributes ,
Digression: You might have used the anchor tag or image tag in HTML. Let’s take an example to understand the concept of attributes,
Global attributes are the ones that are common to all the HTML elements, i.e., we can use them on any element.
Footer in HTML doesn’t have any own attributes , and it can only include the Global Attributes.
What is the Tag Used for? This is what a typical footer in HTML looks like:
This generally includes information about:
Author/Company Information : It encloses the author’s or the company’s information, which includes the description of the company/author and the contact information.Related links : Footer also contains links to related documents or quick links to helpful web pages.Contact Information : This section is always present inside the footer. It contains the contact information (email and/or phone number) and, in some cases, address as well. Social links can also be attached. Note: A web page might/might not have these points included or might have another set of informative points in its footer section. The three points discussed above are what generally are included in the footer section.
How to add multiple things in Footer in HTML?
As you might know from the fundamental concepts of HTML, all HTML elements (except the Empty element) can contain some children, so here also, in the footer tag, we can write some tags inside the footer tag by placing the content between the opening and closing tag. In this way, we can write many tags at the same level, or we can write nested elements as per our requirements of the Document Object Model.
Let us write the structure for a simple web page containing the following:
This is what this web page looks like.
Did you notice that the footer appears just after the text and not at the bottom of the whole web page? To get the footer at its expected position on the web page, we need to write CSS for this web page.
Let’s add some CSS to make this footer look more like an actual footer and stick it to the bottom of the web page.
Now, the footer sticks to the bottom of the web page and looks more like an actual footer.
Let us now extend this footer furthermore and create something like this:
Divide the complete footer into three sections:
The purple one contains the social links, The dark blue one contains complete information about the web page. Divide this complete section into four sections: Information about the company Company products Useful Links Contact Information Let us create a basic HTML structure for this footer section.
Footer Section 1: Social Links
Footer Section 2: Complete Information
Footer Section 3: Copyright information
Adding CSS to this footer:
Note: You can add more CSS to the same and make a much better UI out of this, but this is what the output of our code looks like:
Accessibility Concerns Before Safari 13 was released, the contentinfo landmark role was not exposed to the Voice over. If you need to support the legacy Safari browsers as well, add role=»contentinfo» to the footer element. This will ensure that the landmark is exposed properly.
Browser Support
Conclusion A footer tag is used to define the structure of the footer section of the web page. It will not stick to the bottom of the web page (as one would expect). We can add CSS to the footer in HTML to make it look more like an actual footer section that sticks to the bottom of the web page. A footer, in most cases contains information about the company or the author, the contact information and the address details of the same. Footer also includes links to the related web pages. These are the easy-access links from the web page. Источник