18 December 2016
Lecture 6: Heading Elements (and some new HTML 5 semantic comments)
We have six heading tags in HTML. h1 to h6.
All heading elements are block elements. So in a sense they are similar to <div>. But the browsers usually apply some style to the headings. That's why the h1 element is displayed in larger fonts.
However, we should not use the heading tags to solely style our page. These tags have some semantic meanings too. For example: The h1 should contain the most important idea of a document and so on for h2 to h6. This is good for SEO.
Again, (apart form the large fonts) the heading tags are actually different from regular divs because h1 to h6 are semantic tags. A semantic HTML element implies some meaning to the content.
HTML 5 introduced many semantic tags that can help both the human readers and browsers realize the semantic meanings of a document.
Here is an example HTML document that uses semantic tags to structure its content:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Heading Elements</title>
</head>
<body>
<header>
Company logo, some tag line, etc.
<nav>Contains links to parts of the web site.</nav>
</header>
<h1>Main Heading of the Page.</h1>
<section>
Section 1
<article>Article 1</article>
<article>Article 2</article>
<article>Article 3</article>
</section>
<section>
Section 2
<article>Article 4</article>
<article>Article 5</article>
<article>Article 6</article>
<div>A regular div element</div>
</section>
<aside>
Information related to the main topic (related posts).
</aside>
<footer>
Copyright info etc.
</footer>
</body>
</html>
All of the tags used inside the <body> --- </body> of this document are block elements and can be replaced by div tags. But that will no longer give the document any semantic meaning.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment