Семантические элементы html5

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Navigation Bar Size

Use a w3-size class to change the font-size of the links inside the navbar:


Home Link 1 Link 2 Link 3

Home Link 1 Link 2 Link 3

Example

<div class=»w3-bar w3-green w3-large»> <div class=»w3-bar w3-green w3-xlarge»>

Use a w3-padding class to change the padding of each link inside the navbar:

Home Link 1 Link 2 Link 3

Home Link 1 Link 2 Link 3

Example

<div class=»w3-bar w3-border w3-green»>   <a href=»#» class=»w3-bar-item w3-button w3-padding-16″>Home</a>   <a href=»#» class=»w3-bar-item w3-button w3-padding-16″>Link 1</a>   <a href=»#» class=»w3-bar-item w3-button w3-padding-16″>Link 2</a>   <a href=»#» class=»w3-bar-item w3-button w3-padding-16″>Link 3</a> </div>

Note: You can also add padding to the navigation bar, instead of each button. However, if you do this, note that the links do not get full padding on hover:

Home Link 1 Link 2

Example

<div class=»w3-bar w3-green w3-padding-16″></div>

Customize the width of the links with the CSS width property

(Note: Use w3-mobile to transform the links to 100% width on small screens):

Home Link 1 Link 2

Home Link 1 Home Link 1

Example

<div class=»w3-bar w3-dark-grey»>  <a href=»#» class=»w3-bar-item w3-button w3-mobile w3-green» style=»width:33%»>Home</a>  <a href=»#» class=»w3-bar-item w3-button w3-mobile» style=»width:33%»>Link 1</a>  <a href=»#» class=»w3-bar-item w3-button w3-mobile» style=»width:33%»>Link 2</a></div>

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements

Right-Aligned Navigation Bar

WebSiteName

  • Home
  • Page 1
  • Page 2
  • Sign Up
  • Login

The class is used to right-align navigation bar buttons.

In the following example we insert a «Sign Up» button and a «Login» button to the right in the navigation bar. We also add a glyphicon on each of the two new buttons:

Example

<nav class=»navbar navbar-inverse»>   <div class=»container-fluid»>     <div class=»navbar-header»>       <a class=»navbar-brand» href=»#»>WebSiteName</a>     </div>     <ul class=»nav navbar-nav»>       <li class=»active»><a href=»#»>Home</a></li>       <li><a href=»#»>Page 1</a></li>       <li><a href=»#»>Page 2</a></li>     </ul>     <ul class=»nav navbar-nav navbar-right»>       <li><a href=»#»><span class=»glyphicon glyphicon-user»></span> Sign Up</a></li>       <li><a href=»#»><span class=»glyphicon glyphicon-log-in»></span> Login</a></li>     </ul>  </div></nav>

html5 элемент aside


Элемент aside нужен для боковой панели, в которой находятся категории, архивы, последние комментарии и контент, не имеющий отношения к навигации. Тег aside служит для обрамления контента, который должен располагаться отдельно от основного, так что сайдбары это именно его применение:

<aside>
  <nav>
    <h2>Pages</h2>
    <ul>
      <li><a href="/about.html">About this site</a></li>
      <li><a href="/contact-us.html">Contact us</a></li>
    </ul>
    <h2>Categories</h2>
    <ul>
      <li><a href="/html5.html">HTML5 tags</a></li>
      <li><a href="/css3.html">CSS3 features</a></li>
    </ul>
    <h2>Recent comments</h2>
    <ul>
      <li>...</li>
    </ul>
  </nav>
</aside>

Collapsing The Navigation Bar

The navigation bar often takes up too much space on a small screen.

We should hide the navigation bar; and only show it when it is needed.

In the following example the navigation bar is replaced by a button in the top right corner. Only when the button is clicked, the navigation bar will be displayed:

Example

<nav class=»navbar navbar-inverse»>  <div class=»container-fluid»>    <div class=»navbar-header»>      <button type=»button» class=»navbar-toggle» data-toggle=»collapse» data-target=»#myNavbar»>        <span class=»icon-bar»></span>        <span class=»icon-bar»></span>        <span class=»icon-bar»></span>       </button>      <a class=»navbar-brand» href=»#»>WebSiteName</a>    </div>    <div class=»collapse navbar-collapse» id=»myNavbar»>      <ul class=»nav navbar-nav»>        <li class=»active»><a href=»#»>Home</a></li>        <li><a href=»#»>Page 1</a></li>        <li><a href=»#»>Page 2</a></li>         <li><a href=»#»>Page 3</a></li>       </ul>      <ul class=»nav navbar-nav navbar-right»>        <li><a href=»#»><span class=»glyphicon glyphicon-user»></span> Sign Up</a></li>        <li><a href=»#»><span class=»glyphicon glyphicon-log-in»></span> Login</a></li>      </ul>    </div>  </div></nav>

Using Style Sheets

Use simple syntax for linking to style sheets (the attribute is not necessary):

<link rel=»stylesheet» href=»styles.css»>

Short CSS rules can be written compressed, like this:

p.intro {font-family:Verdana;font-size:16em;}

Long CSS rules should be written over multiple lines:

body {  background-color: lightgrey;  font-family: «Arial Black», Helvetica, sans-serif;  font-size: 16em;  color: black;}

  • Place the opening bracket on the same line as the selector
  • Use one space before the opening bracket
  • Use two spaces of indentation
  • Use semicolon after each property-value pair, including the last
  • Only use quotes around values if the value contains spaces
  • Place the closing bracket on a new line, without leading spaces

Область Aside

Мы создаем область Aside в плане страницы Acme United с помощью тега . Этот тег предназначен для вспомогательного контента, не являющегося частью основного материала статьи, которую он дополняет. Например, в журналах теги типа aside часто используются для выделения выводов, сделанных в самой статье. Тег содержит контент, который может быть удален без ущерба для информации, излагаемой в статье, секции или странице, содержащей этот тег.

В листинге 10 показан пример применения тега .

Листинг 10. Пример тега <aside>
<p>My family and I visited Euro Disney last year.</p>
<aside>
     <h4>Disney in France</h4>
     <p>Besides Euro Disney, there is a Disneyland in California.</p>
</aside>

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Vertical Navigation Bar Examples

Create a basic vertical navigation bar with a gray background color and change the background color of the links when the user moves the mouse over them:

  • Home
  • News
  • Contact
  • About

Example

ul {  list-style-type: none;  margin: 0;  padding: 0;  width: 200px;  background-color: #f1f1f1;}li a {  display: block;  color: #000;  padding: 8px 16px;  text-decoration: none;}/* Change the link color on hover */li a:hover {  background-color: #555;  color: white;}

Add an «active» class to the current link to let the user know which page he/she is on:

  • Home
  • News
  • Contact
  • About

Example

.active {  background-color: #4CAF50;  color: white;}

Center Links & Add Borders


Add to <li> or <a> to center the links.

Add the property to <ul> add a border around the navbar. If you also want borders inside the navbar, add a to all <li> elements, except for the last one:

  • Home
  • News
  • Contact
  • About

Example

ul {  border: 1px solid #555;}li {  text-align: center;   border-bottom: 1px solid #555;}li:last-child {  border-bottom: none;}

Example

ul {  list-style-type: none;  margin: 0;  padding: 0;  width: 25%;  background-color: #f1f1f1;  height: 100%; /* Full height */   position: fixed; /* Make it stick, even on scroll */  overflow: auto; /* Enable scrolling if the sidenav has too much content */}

Note: This example might not work properly on mobile devices.

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Create A Top Navigation Bar

Step 1) Add HTML:

Example

<div class=»topnav»>  <a class=»active» href=»#home»>Home</a>  <a href=»#news»>News</a>  <a href=»#contact»>Contact</a>   <div class=»topnav-right»>    <a href=»#search»>Search</a>    <a href=»#about»>About</a>  </div></div>

Step 2) Add CSS:

Example

/* Add a black background color to the top navigation */.topnav {    background-color: #333;    overflow: hidden;}/* Style the links inside the navigation bar */.topnav a {  float: left;  color: #f2f2f2;  text-align: center;  padding: 14px 16px;  text-decoration: none;  font-size: 17px;}/* Change the color of links on hover */ .topnav a:hover {  background-color: #ddd;  color: black; }/* Add a color to the active/current link */.topnav a.active {  background-color: #4CAF50;  color: white;}/* Right-aligned section inside the top navigation */.topnav-right {  float: right;}

Tip: To create mobile-friendly, responsive navigation bars, read our How To — Responsive Top Navigation tutorial.

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.

Элемент разметки nav в html5

Тег разметки nav используется в html5 для обозначения панели навигации по сайту. Зачастую в него заключают основное меню сайта и боковые навигационные панели, а также блок ссылок в футере сайта. Внутри элемента nav часто ставят список ul или ol с набором ссылок. Тег nav не заменяет собой элементы ol или ul, а обрамляет их. Поэтому устаревшие браузеры, не поддерживающие этот элемент, просто отобразят панель навигации как обычный список. Например так:

<nav> <ul>
        <li>Menu</li>
        <li><a href="/html5-courses.html">HTML5 courses</a></li>
        <li><a href="/css3-courses.html">CSS3 courses</a></li>
        <li><a href="/contacts.html">Contacts</a></li>
</ul> </nav>

Create A Responsive Navbar with Icons

Step 1) Add HTML:

Example

<!— Load an icon library —> <link rel=»stylesheet» href=»https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»><div class=»navbar»>  <a class=»active» href=»#»><i class=»fa fa-fw fa-home»></i> Home</a>   <a href=»#»><i class=»fa fa-fw fa-search»></i> Search</a>   <a href=»#»><i class=»fa fa-fw fa-envelope»></i> Contact</a>   <a href=»#»><i class=»fa fa-fw fa-user»></i> Login</a></div>

Step 2) Add CSS:

Example

/* Style the navigation bar */.navbar {  width: 100%;  background-color: #555;  overflow: auto;}/* Navbar links */.navbar a {  float: left;  text-align: center;  padding: 12px;  color: white;  text-decoration: none;  font-size: 17px;}/* Navbar links on mouse-over */.navbar a:hover {  background-color: #000;}/* Current/active navbar link */ .active {  background-color: #4CAF50;}/* Add responsiveness — will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */ @media screen and (max-width: 500px) {  .navbar a {    float: none;    display: block;  }}

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.

Tip: If you want to create a navigation bar that only contains icons, read our How To — Icon Bar Tutorial.

Navigation Bars

A navigation bar is a navigation header that is placed at the top of the page:

WebSiteName

  • Home
  • Page 1
  • Page 2
  • Page 3

With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.


A standard navigation bar is created with .

The following example shows how to add a navigation bar to the top of the page:

Example

<nav class=»navbar navbar-default»>   <div class=»container-fluid»>     <div class=»navbar-header»>       <a class=»navbar-brand» href=»#»>WebSiteName</a>     </div>     <ul class=»nav navbar-nav»>       <li class=»active»><a href=»#»>Home</a></li>       <li><a href=»#»>Page 1</a></li>       <li><a href=»#»>Page 2</a></li>       <li><a href=»#»>Page 3</a></li>     </ul>   </div> </nav> …

Note: All of the examples on this page will show a navigation bar that takes up too much space on small screens (however, the navigation bar will be on one single line on large screens — because Bootstrap is responsive). This problem (with the small screens) will be solved in the last example on this page.

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL

CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand

CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders

CSS Margins Margins Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset

CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow

CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Navigation Bar With Dropdown

WebSiteName

  • Home
  • Page 1
    • Page 1-1
    • Page 1-2
    • Page 1-3
  • Page 2
  • Page 3

Navigation bars can also hold dropdown menus.

The following example adds a dropdown menu for the «Page 1» button:

Example

<nav class=»navbar navbar-inverse»>   <div class=»container-fluid»>     <div class=»navbar-header»>       <a class=»navbar-brand» href=»#»>WebSiteName</a>    </div>     <ul class=»nav navbar-nav»>       <li class=»active»><a href=»#»>Home</a></li>       <li class=»dropdown»>         <a class=»dropdown-toggle» data-toggle=»dropdown» href=»#»>Page 1         <span class=»caret»></span></a>         <ul class=»dropdown-menu»>           <li><a href=»#»>Page 1-1</a></li>           <li><a href=»#»>Page 1-2</a></li>           <li><a href=»#»>Page 1-3</a></li>         </ul>      </li>       <li><a href=»#»>Page 2</a></li>       <li><a href=»#»>Page 3</a></li>     </ul>   </div> </nav>

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Navigation Bar = List of Links

A navigation bar needs standard HTML as a base.

In our examples we will build the navigation bar from a standard HTML list.

A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:

Example

<ul>   <li><a href=»default.asp»>Home</a></li>   <li><a href=»news.asp»>News</a></li>   <li><a href=»contact.asp»>Contact</a></li>   <li><a href=»about.asp»>About</a></li> </ul>

Now let’s remove the bullets and the margins and padding from the list:

Example

ul {   list-style-type: none;   margin: 0;   padding: 0; }

Example explained:

  • — Removes the bullets. A navigation bar does not need list markers
  • Set and to remove browser default settings

The code in the example above is the standard code used in both vertical, and horizontal navigation bars, which you will learn more about in the next chapters.

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements

Область Header

В рассматриваемом примере область Header содержит заголовок страницы и подзаголовок. Тег используется с целью создания контента для области данной страницы. Тег может содержать открывающую информацию о теге и о теге в дополнение к самой Web-странице. Создаваемая нами Web-страница имеет область , показанную на высокоуровневом представлении ее дизайна, а также область внутри области и области . В листинге 1 показан пример разметки тега .

Листинг 1. Пример тега <header>
<header>
    <h1>Heading Text</h1>
    <p> Text or images can be included here</p>
    <p> Logos are frequently placed here too</p>
</header>

Тег также может содержать тег (листинг 2). Тег группирует заголовки вместе, используя показанные уровни заголовков с по с главным заголовком и подзаголовком.

Листинг 2. Пример тега <hgroup>
<header>
    <hgroup>
          <h1>Main Heading</h1>
          <h2>Sub-heading </h2>
    </hgroup>
    <p> Text or images can be included here</p>
</header>

С этим читают