PrepBro
← Назад к вопросам

Что такое тег header?

1.0 Junior🔥 81 комментариев
#REST API и микросервисы

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI23 мар. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Тег header

<header> — это семантический HTML5 тег, который определяет заголовочную область веб-страницы или раздела. Обычно содержит логотип, название сайта, навигацию и другую информацию, которая идентифицирует контент. Для Java-разработчика, работающего с веб-приложениями, важно понимать структуру HTML и когда его код будет генерировать такие теги.

Основное использование

<header>
    <h1>My Website</h1>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
    </nav>
</header>

Header на странице и в секциях

Тег <header> может использоваться несколько раз:

<!-- Header всей страницы -->
<header>
    <h1>Blog Title</h1>
    <nav>...</nav>
</header>

<main>
    <!-- Header отдельной статьи -->
    <article>
        <header>
            <h2>Article Title</h2>
            <p>Published on: 2024-01-15</p>
        </header>
        <p>Article content...</p>
    </article>
</main>

Header в Spring Boot MVC

Для Java-разработчика, создающего веб-приложения на Spring, важно знать, как генерировать такие структуры:

// Spring MVC контроллер
@Controller
@RequestMapping("/")
public class WebController {
    
    @GetMapping
    public String index(Model model) {
        // Передача данных в шаблон
        model.addAttribute("title", "Welcome to My Site");
        model.addAttribute("navigationItems", Arrays.asList(
            new NavItem("Home", "/"),
            new NavItem("About", "/about"),
            new NavItem("Contact", "/contact")
        ));
        return "index";  // index.html или index.jsp
    }
}

Thymeleaf шаблон (Spring Boot)

<!-- src/main/resources/templates/index.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}">Default Title</title>
</head>
<body>
    <!-- Header с динамическими данными -->
    <header>
        <h1 th:text="${title}">Site Title</h1>
        <nav>
            <a th:each="item : ${navigationItems}" 
               th:href="${item.url}" 
               th:text="${item.label}">Link</a>
        </nav>
    </header>
    
    <main>
        <!-- Основной контент -->
    </main>
</body>
</html>

JSP шаблон

<!-- index.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html>
<head>
    <title>${title}</title>
</head>
<body>
    <header>
        <h1>${title}</h1>
        <nav>
            <c:forEach items="${navigationItems}" var="item">
                <a href="${item.url}">${item.label}</a>
            </c:forEach>
        </nav>
    </header>
</body>
</html>

REST API и HTTP Header

Важно не путать HTML тег <header> с HTTP Headers (заголовками HTTP-запроса):

// Spring REST контроллер
@RestController
@RequestMapping("/api/v1")
public class ApiController {
    
    @GetMapping("/users/{id}")
    public ResponseEntity<UserDTO> getUser(
            @PathVariable Long id,
            @RequestHeader("Authorization") String authHeader,
            @RequestHeader(value = "X-Custom-Header", required = false) String customHeader) {
        
        // authHeader и customHeader — это HTTP headers (не HTML теги!)
        User user = userService.findById(id);
        
        return ResponseEntity.ok()
            .header("X-Total-Count", "100")  // Добавляем свой header в ответ
            .body(new UserDTO(user));
    }
}

Семантичность HTML5

Тег <header> семантичен — дает смысл содержимому. Это важно для:

  • SEO: поисковые системы понимают структуру страницы
  • Доступность: скринридеры знают, что это заголовок
  • CSS: стилизация через селекторы header { ... }
  • Мобильные: браузеры оптимизируют отображение
/* Стилизация header -->
header {
    background-color: #f8f9fa;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 100;
}

header h1 {
    margin: 0;
    font-size: 1.5rem;
}

header nav {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

Header в веб-компонентах (Java + JavaScript)

Для современных приложений:

// Spring Boot контроллер отдаёт JSON
@RestController
@RequestMapping("/api/layout")
public class LayoutController {
    
    @GetMapping("/header")
    public HeaderDTO getHeader() {
        return new HeaderDTO(
            "My App",
            Arrays.asList(
                new NavItem("Home", "/"),
                new NavItem("Features", "/features"),
                new NavItem("Pricing", "/pricing")
            )
        );
    }
}

// Frontend (React, Vue, Angular)
fetch('/api/layout/header')
    .then(res => res.json())
    .then(data => {
        const header = document.createElement('header');
        const h1 = document.createElement('h1');
        h1.textContent = data.title;
        header.appendChild(h1);
        
        const nav = document.createElement('nav');
        data.navigationItems.forEach(item => {
            const link = document.createElement('a');
            link.href = item.url;
            link.textContent = item.label;
            nav.appendChild(link);
        });
        header.appendChild(nav);
        
        document.body.insertBefore(header, document.body.firstChild);
    });

Лучшие практики

  1. Используйте семантические теги: <header>, <nav>, <main>, <footer>
  2. Одна основная header на странице: дополнительные headers в статьях/секциях
  3. Не забывайте логотип и навигацию: основные элементы header
  4. Responsive дизайн: header должен адаптироваться к мобильным
  5. Доступность: используйте <nav> для навигации, правильные heading уровни

Типичная структура страницы

<header>
    <div class="container">
        <div class="logo">MyApp</div>
        <nav>
            <a href="/">Home</a>
            <a href="/products">Products</a>
            <a href="/contact">Contact</a>
        </nav>
    </div>
</header>

<main>
    <!-- Основной контент -->
</main>

<footer>
    <!-- Информация в конце страницы -->
</footer>

Понимание HTML структуры критично для Java-разработчиков, работающих с веб-приложениями, будь то MVC или REST API, где клиент использует эти структуры.

Что такое тег header? | PrepBro