Custom Search
Szkolenia informatyczne: biuro, technologie internetowe, egzaminy technik
CENA - OFERTA: Jesteś zainteresowany/na kursem – zapraszam do kontaktu ze mną, szczegóły: www.poswojsku.pl .
HTML5 block tags body section: header, nav, main, article, section, aside, footer, div
HTML5 block tags body section: header, nav, main, article, section, aside, footer, div
Long, long time ago, when dinosaurs walked the earth, creating blocks on websites was trivially simple. There was one basic <div> </div> tag that created block structures within the <body> </body> tag. Currently, block elements can be made with many more tags. HTML5 block tags body section: header, nav, main, article, section, aside, footer, div The most common, recommended, block arrangement of HTML5 page elements:
BASIC HTML5 TAGS (section <body>)
HEADER MARKER
In HTML4 the header was described as:
<div id = "header"> Header content </div>
In HTML5, the header is simply the header:
<header> Header content </header>
The <header> tag should be used primarily as the header of the entire page, and not as the header of individual block elements. The <header> tag can contain H1-H6 headers, website logos, navigation, etc.
We've mentioned that the <header> tag should contain information that will be helpful in terms of introducing it to the actual content or when it comes to navigation. Now let's look at the <nav> tag.
NAV MARKER
Old approach in HTML4:
<div id="nav"> </div>
In HTML5 you should write:
<nav> Navigation </nav>
We use the <nav> tag where we present links to other subpages, which is usually the page's menu. The <nav> tag is used to indicate the main navigation blocks. Quite often it is also used as navigation in other sections except <header>.
If we have a menu with sitelinks on the page and the footer of the page where we will put different links, the <nav> tag should not be used in the second case.
MAIN MARKER
<main> should contain the main content of the document, usually directly related to the title and expected content of the page. The MAIN tag does not include any fixed elements that are repeated throughout the website: navigation menu, website logo, banners, search forms, etc.
<main> may contain links that navigate to subsections of the main content of the document that do not repeat on other pages. You cannot put more than one <main> element on a given website. Cannot <main> be placed inside: ARTICLE, ASIDE, FOOTER, HEADER, NAV.
MARKERS: ARTICLE, SECTION AND DIV
Each of these tags creates a container on selected parts of the page. The <article> tag is a special type of <section> tag section. Both are new to HTML5, while the <div> tag, which was the only container in HTML4, is still used as a container in HTML5. The differences lie in the semantics of the elements:
<section> is a container - a block - containing the general content of the page, this is the general section of the website. It can be used in combination with the following elements: h1- h6 - to indicate the structure of the document.
<article> is the main content of the website, an independent, independent block containing the main content of the page, i.e. the one for which the surfer came,
<div> is a block containing any content and as the only one of the three mentioned works in all even the oldest browsers, which is why many website developers still use only a div, which is a mistake from the point of view of W3C recommendations.
ASIDE MARKER
<aside> is the section where the content associated with the tag in which it appears is placed, but it is not required to understand the main content declared in the main tag. Most often, footnotes and ads are placed in this tag.
FOOTER MARKER
In HTML4 we wrote:
<div id="footer"> </div>
HTML5 says:
<footer> Content </footer>
<footer> is the footer of the element in which the tag was used. A page can contain more than one footer tag, but each must be in a different section (that is, it must be inserted into a different tag)
CLOSING MARKERS
Remember that each of the listed tags must be closed.
<header> Header content </header>
<nav> Navigation elements </nav>
<section> Section content </section>
<main> Main content </main>
<article> Content of the article </article>
<div> Block content </div>
<footer> Footer content </footer>
Let's summarize:
Recommended arrangement of block elements of HTML5 page
Remember that this is one of the most popular HTML5 page structures, but not the only one.
See in the menu similar articles to: HTML5 block tags body section: header, nav, main, article, section, aside, footer, div
Angielski
MENU TEMATYCZNE
portale poswojsku utrzymywane są z reklam, więc nie marudź kiedy reklamy co nieco psują Twoje samopoczucie ;)
Chcesz zareklamować się na poswojsku- śmiało! napisz do nas
mail: marketing
poswojsku.eu
Obecnie 2023 nie prowadzimy żadnych szkoleń płatnych on-line. Ale możesz się zapisać na super fajne :) szkolenia stacjonarne - zerknij na wykaz na naszej oficjalnej stronie www.poswojsku.pl
