<header> Tag
The <header> element represents a container for introductory content or a set of navigational links.
A <header> element typically contains:
- one or more heading elements (<h1> – <h6>)
- logo or icon
- authorship information
You can have several <header> elements in one document.
<!DOCTYPE html>
<html>
<body>
<article>
<header>
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here.</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>
</body>
</html>
<footer> Tag
The <footer> tag defines a footer for a document or section.
A <footer> element should contain information about its containing element.
A <footer> element typically contains:
- authorship information
- copyright information
- contact information
- sitemap
- back to top links
- related documents
You can have several <footer> elements in one document.
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>
<p><strong>Note:</strong> The footer tag is not supported in Internet Explorer 8 and earlier versions.</p>
</body>
</html>
Note: The footer tag is not supported in Internet Explorer 8 and earlier versions.
<aside> Tag
The <aside> tag defines some content aside from the content it is placed in.
The aside content should be related to the surrounding content.
<!DOCTYPE html>
<html>
<body>
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
<p><strong>Note:</strong> The aside tag is not supported in Internet
Explorer 8 and earlier versions.</p>
</body>
</html>
Note: The aside tag is not supported in Internet Explorer 8 and earlier versions.
<nav> Tag
The <nav> tag defines a set of navigation links.
Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.
Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<p><strong>Note:</strong> The nav tag is not supported in Internet Explorer 8 and earlier versions.</p>
</body>
</html>
Output :-
HTML | CSS | JavaScript | jQuery
Note: The nav tag is not supported in Internet Explorer 8 and earlier versions.
<div> Tag
The <div> tag defines a division or a section in an HTML document.
The <div> element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript.
<!DOCTYPE html>
<html>
<body>
<p>This is some text.</p>
<div style="background-color:lightblue">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<p>This is some text.</p>
</body>
</html>
<h1> to <h6> Tags
The <h1> to <h6> tags are used to define HTML headings.
<h1> defines the most important heading. <h6> defines the least important heading.
Attributes
| Attribute | Value | Description |
| align | left center right justify | Not supported in HTML5. Specifies the alignment of a heading |
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
<hr> Tag
The <hr> tag defines a thematic break in an HTML page. The <hr> element is used to separate content (or define a change) in an HTML page.
Attributes
| Attribute | Value | Description |
| align | left center right | Not supported in HTML5. Specifies the alignment of a <hr> element |
| noshade | noshade | Not supported in HTML5. Specifies that a <hr> element should render in one solid color (noshaded), instead of a shaded color |
| size | pixels | Not supported in HTML5. Specifies the height of a <hr> element |
| width | pixels % | Not supported in HTML5. Specifies the width of a <hr> element |
<!DOCTYPE html>
<html>
<body>
<h1>HTML</h1>
<p>HTML is a language for describing web pages.</p>
<hr>
<h1>CSS</h1>
<p>CSS defines how to display HTML elements.</p>
</body>
</html>
<pre> Tag
The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.
Attributes
| Attribute | Value | Description |
| width | number | Not supported in HTML5. Specifies the maximum number of characters per line |
<!DOCTYPE html>
<html>
<body>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
</body>
</html>
Output :-
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
<section> Tag
The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
<!DOCTYPE html>
<html>
<body>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
</body>
</html>
Output :-
WWF
The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.
WWF’s Panda symbol
The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.
<abbr> Tag
The <abbr> tag defines an abbreviation or an acronym, like “Mr.”, “Dec.”, “ASAP”, “ATM”.
<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</body>
</html>
Output :-
