Что такое заголовки в HTML

Что такое заголовки в HTML Программирование и разработка

Элемент заголовка — это семантический элемент, который был введён в HTML5. Он служит двум основным целям: как заголовок страницы и как заголовок раздела. В этой статье мы рассмотрим заголовки страниц и заголовков разделов, обнаружим различия между ними и покажем их примеры.

Заголовки страниц и разделов имеют одну общую черту: они оба содержат информацию, которая вводит основное содержание либо страницы, либо раздела.

Что такое заголовки в HTML

Заголовок страницы

На веб-странице основная цель заголовка страницы — представить информацию о веб-сайте. Это может быть логотип вашей компании, панель навигации, которая направляет пользователей в различные части вашего сайта или панель поиска. Это содержание обычно одинаково на всех страницах вашего сайта.

<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<link href=»https://fonts.googleapis.com/css2?family=Satisfy&display=swap» rel=»stylesheet»>
<title>Headers</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
max-width: 1000px;
width: 100%;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
}
header {
width: 100%;
display: flex;
align-items: center;
}
.logo {
display: flex;
align-items: center;
width: 35%;
padding: 10px 20px;
justify-content: space-between;
font-family: ‘Satisfy’, cursive;
}
nav {
width: 70%;
}
nav ul {
display: flex;
justify-content: space-around;
width: 100%;
list-style-type: none;
}
main {
padding: 20px;
text-align: center;
font-size:1.4rem;
}

</style>
<script src=»https://kit.fontawesome.com/c52d9055c7.js» crossorigin=»anonymous»></script>

</head>
<body>
<img src=»http://www.placekitten.com/1000/305″ alt=»kitty!» />
<header>
<div class=»logo»>
<i class=»fas fa-cat fa-3x»></i><h1> Kit Kat Hospital</h1>
</div>
<nav>
<ul>
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
<li>Patient Login</li>
</ul>
</nav>
</header>
<main>
The rest of the landing page will go here…
</main>
</body>
</html>

Заголовки разделов

Основная цель заголовка раздела — представить раздел содержимого. Мы бы использовали заголовок раздела, чтобы дать заголовок сообщения в блоге и имя его автора.

<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<link href=»https://fonts.googleapis.com/css2?family=Satisfy&display=swap» rel=»stylesheet»>
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
max-width: 1000px;
width: 100%;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
}
.first {
width: 500px;
border: 3px solid black;
padding: 20px
}
header {
width: 100%;
display: flex;
align-items: center;
}
.logo {
display: flex;
align-items: center;
width: 35%;
padding: 10px 20px;
justify-content: space-between;
font-family: ‘Satisfy’, cursive;
}
nav {
width: 70%;
}
nav ul {
display: flex;
justify-content: space-around;
width: 100%;
list-style-type: none;
}
main {
padding: 20px;
text-align: center;
font-size:1.4rem;
}
.section-header {
flex-direction: column;
text-align: left;
}

.section-header h2 {
align-self: flex-start;
}
.title {
display: flex;
align-items: center;
width: 100%;
padding: 20px;

}
.title h2 {
margin-bottom: 0;

}
.title h4 {
margin-left: 10px;
margin-bottom: 0;
color: rgb(34, 33, 33);
font-weight: lighter;
}
.title p {
align-self: flex-start;
}
.author {
margin: 0;
font-size: 1rem;
align-self: flex-start;
padding: 0px 20px;
}
.section-content {
text-align: left;
text-indent: 25px;
padding: 20px;
font-size: 1.2rem;
line-height: 1.5;
height: 200px;
width: 75%;
text-overflow:ellipsis;
}

</style>
<script src=»https://kit.fontawesome.com/c52d9055c7.js» crossorigin=»anonymous»></script>

</head>
<body>
<img src=»http://www.placekitten.com/1000/305″ alt=»kitty!» />
<header>
<div class=»logo»>
<i class=»fas fa-cat fa-3x»></i><h1> Kit Kat Hospital</h1>
</div>
<nav>
<ul>
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
<li>Patient Login</li>
</ul>
</nav>
</header>
<main>

<section>
<article>

<header class=»section-header»>
<div class=»title»>
<h2>Meows Decoded: </h2>
<h4>What your kit cat if trying to tell you</h4>
</div>
<p class=»author»>By Cat N. Mouse</p>
</header>
<p class=»section-content»>
Cat lorem ipsum dolor sit amet, pee on walls it smells like breakfast for fall asleep on the washing machine. Drool destroy couch as revenge. Lick the plastic bag. Humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean touch my tail, i shred your hand purrrr why use post when this sofa is here, yet Gate keepers of hell, but skid on floor, crash into wall for cat dog hate mouse eat string barf pillow no baths hate everything yet meow and walk away.</p>
</article>

</section>
</main>
</body>
</html>

Как показано в редакторе кода, вы можете иметь несколько заголовков в одном HTML-документе. Единственное требование — заголовки не могут быть вложены в другие заголовки. Лучше всего использовать элемент заголовка, предназначенный для всей страницы, а затем элемент заголовка, представляющий каждый элемент раздела.

Просто помните, что заголовок — это то, что вводит страницу или раздел и является одним из многих семантических элементов, которые были введены в HTML5.

ЧИТАЙТЕ ТАКЖЕ:

Оцените статью
bestprogrammer.ru
Добавить комментарий