HTML: Header

The top area of the site is usually called the header and contains contact information, a menu, and a logo. Before the advent of the HTML5 standard, this area was simply marked up using the usual <div> block, which didn't quite make "sense" to browsers.

HTML5 uses a paired <header> tag to mark up the header, with elements inside it.

<header>
  <img src="https://cdn6.hexlet.io/1P6tmafZTIy5.png" alt="Logo"> <!-- Site Logo -->
  <div id="menu"> <!-- Menu -->
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contacts">Contacts</a></li>
    </ul>
  </div>
</header>

The <header> tag doesn't differ from the tag <div> in terms of its behavior and does not have any significant standard styles, so it can be used on any site without fear of disturbing its appearance.

Instructions

Mark up a site header. Place a picture and a bulleted list with two links inside.

For image use following code:

<img src="https://cdn6.hexlet.io/1P6tmafZTIy5.png" alt="Code Basics">

Коммерческий опыт и Трудоустройство

Tips

The header element is not unique to the page. It can be used not only as a page header but also as a section header

The exercise doesn't pass checking. What to do? 😶

If you've reached a deadlock it's time to ask your question in the «Discussions». How ask a question correctly:

Be sure to attach the test output, without it it's almost impossible to figure out what went wrong, even if you show your code. It's complicated for developers to execute code in their heads, but having a mistake before their eyes most probably will be helpful.

In my environment the code works, but not here 🤨

My code is different from the teacher's one 🤔

I've read the lessons but nothing is clear 🙄

Прочитал урок — ничего не понятно 🙄

Found a bug? Have something to add? Pull requests are welcome!

← PreviousNext →

Your exercise will be checked with these tests:

const { test } = require('tests');

test(({ query, querySelectorAll, expect }) => {

  const header = query(document, 'header');
  expect(header).to.be.visible;

  const img = query(header, 'img');
  expect(img).to.be.visible;

  const ul = query(header, 'ul');
  expect(ul).to.be.visible;

  const li = querySelectorAll(ul, 'li');
  expect(li).to.be.length(2);

  const link = querySelectorAll(ul, 'a');
  expect(link).to.be.length(2);
});

← PreviousNext →

Teacher's solution will be available in:

20:00

← PreviousNext →