Html footer example code

Html footer example code

Время чтения: меньше 5 мин

Обновлено 26 октября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

создаёт нижнюю часть страницы или блока — «подвал». Обычно здесь находятся контакты, ссылки на разделы сайта, копирайт.

Пример

Скопировать ссылку «Пример» Скопировано

В нашем блоке со статьёй будет небольшой футер с указанием автора и его контактами:

   
Бигфут 
Бигфут (от англ. Bigfoot, «большеногий») — название полумифического млекопитающего.
   
Ольга Сасквоч 
Почта: sasquatch@yandex.ru.
   article> h1>Бигфутh1> p>Бигфут (от англ. Bigfoot, «большеногий») — название полумифического млекопитающего. p> footer> p>Ольга Сасквочp> p>Почта: a href="mailto:sasquatch@yandex.ru">sasquatch@yandex.rua>.p> footer> article>    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Как правило, у сайта есть «шапка» и «подвал»: верхняя и нижняя части страницы. Обычно эти блоки выглядят одинаково на всех страницах. Эти разделы помогают пользователю сориентироваться и получить основную инфу о сайте.

В подвале мы чаще всего видим название компании, правовую информацию, ссылки на соцсети и другие контакты.

может быть не только у всего сайта целиком, но и у отдельного блока или секции.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Тег парный, должен всегда закрываться < / footer>.

Атрибуты

Скопировать ссылку «Атрибуты» Скопировано

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 У блочные стили по умолчанию 🤓

💡 Контакты и информацию об авторе стоит поместить в контейнер , а его добавить в .

На практике

Скопировать ссылку «На практике» Скопировано

Дока Дог советует

Скопировать ссылку «Дока Дог советует» Скопировано

🛠 У особо нет никаких хитростей. Это нижняя часть страницы: там располагаются разные эпилоги. Если это лендинг, там могут лежать иконки соцсетей и информация о компании. Важно выделить , чтобы поисковик понял, что находится в этом блоке.

Источник

15 Beautiful Website Footers [Examples]

If you are looking for footers for your website you are in the right place.

In this article, we have included a curated list with some of the best footer examples out there. From plain and simple ones made with pure HTML and CSS, to more complex ones using some fancy animations.

What is a website footer?

A website footer is the element on the very bottom of a webpage. Usually containing useful and quickly accessible information for the visitors, such as contact information, privacy policies, newsletter sign-up, or links for help.

Because there’s not a single type of footer, there’s no way to describe what a footer looks like. The design for footers is different from one website to another.

Generally speaking, many of them contain multiple columns with links, as that’s what most visitors would expect the footer to look like.

15 Amazing Footer Design Examples

1. Simple footer website

Here’s an example of one of the most common footers for websites.

A simple — yet beautiful — footer made of 4 columns containing basic information and social sharing buttons.

In this case, each column contains a title with an original underline, but you can customize this to your needs.

2. Animated Footer Design

This beautiful website footer will for sure catch your visitor’s attention.

The footer is made of animated waves that move horizontally creating that water feeling.

You can speed up or down the footer animation by adjusting the transition property directly on the CSS code on the menu__link style.

3. Levis website footer design

This footer design uses an image with the company brand on the left side corner making it ideal for those who want to display their logo too.

It contains everything a good website footer should have. A logo, links, social network links, and contact information.

It also contains copyright at the bottom of the footer. Fully responsive.

4. Minimalist CSS website design footer

Here’s a super simple and beautiful footer.

It uses a white background and keeps its minimalistic look by removing all the unnecessary. There are no underlines, no colors, no images.

The footer uses flat fonts for social media icons and payment options. It’s divided into 3 columns and contains useful links, a newsletter form to subscribe to, and a few icons.

5. Simple website footer example

This footer is a great example of how to keep things simple.

The footer itself won’t take much space on the page and it contains the bare minimum. Some links, social buttons, and a copyright notice. It’s a simple footer, but a practical one.

Of course, you can always modify the colors on it, so you can apply it to practically any website and it will still look natural to visitors.

6. An engaging footer example

A great footer design for websites that like to keep things simple and clean.

The footer is made up of 4 columns. It makes good use of whitespace and it contains a newsletter subscription form.

I love how modern and clean it looks to the eye. Fully responsive too!

7. Footer With Gallery Slider

Here’s a less traditional footer for your website.

What makes this footer stand out from the rest is the fact that it contains an animated slider with a gallery of Instagram images.

The footer also displays social media icons and simple copyright notices at the very bottom.

Ideal for photographers, designers, and anyone who wants to showcase their work at the very bottom of their website.

8. Wavey Footer For Websites

This animated footer design is for those who want to stand out from the crowd.

It contains a colored canva animation mimicking the movement of waves.

This footer is making use of the Twgl library to get this effect.

9. Website Copyright Footer Example

If all you want on your website is a footer with a copyright notice, then this is the ideal footer for you.

It’s just that. A copyright message with a background color. Nothing more, nothing less.

10. Big Website Footer

If you are those who like big things or that want to add as many things as possible in a footer, then this footer is for you.

This is a 2 rows footer that will allow you to add everything you need to it. Address, phone number, email, logo, description, useful links, social buttons, newsletter subscription, and copyright notice.

All in one big and responsive footer.

11. CSS Footer Template With Animations

Here’s a truly amazing footer for any website.

It contains a picture of a city at the very bottom and a couple of animations that are what make this footer something so original.

The whole footer design is made in pure CSS and there’s no JavaScript involved at all.

This footer template can be customized by just playing with the CSS and the HTML code. Things like the animated GIF images, their transition times, and the colors can all be changed to your needs.

Besides all this, the combination of colors looks great and the footer contains everything you would expect.

12. Black and white footer design

Here’s a footer design for those who like to keep things simple.

It’s a 4 columns footer that, despite looking plane, it looks quite modern.

I like the fact that it only uses 2 main colors and that it allows you to attach a logo to it.

13. Tailwind CSS footer

This footer is made using Tailwind CSS framework.

It’s a good example of how to add some touch of color to a white background website.

I like the rounded corners and the simplicity of it all.

Ideal for those who want to add a newsletter form in their footer.

14. Brutalism Footer Design

If you are the kind of person who likes breaking the norms or just playing risky with designs, this footer might be for you.

This example of a footer is not common. It’s a big footer made of 2 huge and responsive columns.

The one on the left contains the subscription form and the links of interest, and the one on the right contains some text describing the company. It also contains social buttons on the right side.

15. White and blue footer example

This footer example shows a less common structure.

It’s made of 3 columns and one of them with 2 rows on it. It also contains a contact form that can be super handy for some use cases.

Warning: this footer is NOT responsive.

What to put on the website footer?

Usually, footers contain the following elements:

• Links of interest. Anything that might be relevant to your visitors. For example: contact us, about us, help center, our products, etc.
• Privacy Policy. Sometimes it’s compulsory by law to add certain legal information on how the page treats users’ data, so it’s common for companies to link it on the footer.
• Copyright notice. if the content is copyrighted the footer is usually the best place to state this. That’s what people will tend to look for when trying to find out about copyrighted content.
• Newsletter form. If your site has any kind of newsletter, adding the sign-up on the footer is another way to make it easier for visitors to find out about it.
• Social Media Icons. It’s common to add links to social networks on the footer (Facebook, Twitter, Tiktok, Instagram. ). It can be done via icons or directly with text links.
• Contact information. when visitors want to find something about the company or author of a website, they’ll very likely scroll down to the footer. Having any kind of contact information is a must. It can be email, phone number, the good old fax, or just the address.
• Address. Sometimes included next to the contact information, adding the address in the footer is a very common practice as well.
• Logo. Adding a logo to the footer can be a great way to add a bit of color or to emphasize your brand’s design.
• Help links. Anything that can help your visitors should be present in the footer. Links to help centers, FAQs or support are expected to be found in the footer of a website.
• Sitemap. If visitors want to have a quick look at the structure or content of a website, having sitemaps is a great way to do so. On top of that, they’ll be good for the SEO of a website too!

What is a website footer used for?

The website footer is used to display basic information about the company or website. It improves the user experience by making it easier for visitors to find specific things on the page, such as contact information, copyright, help links, social media, or newsletter forms.

Footers typically use a simple design and tend to look very similar to web pages.

The reason for this is to try to make things as easier as possible for the visitors to find the information they are looking for.

Conclusion

The footer is an essential part of any website. A website without a footer is like a person without shoes.

There are plenty of footer designs out there. Each of them with its unique style and features.

In the list of footer examples above we’ve included different kinds of footers so you can have an idea of what’s out there. Now, is up to you to choose the one you like the most and use it on your page.

Related articles

Источник

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.

Источник