Imagine your content as the outline for a research paper. You’ll have a main overall topic (usually the brand/company/page topic), then sub-topics related to that main one (usually the h2 tags on the page), and can have sup-topics for those, etc. Your semantic containers should only have one heading in them, although your sub-sections/sub-topics can be nested inside of other sections with headings while having their own headings one level down from their parent.
In the example below, The main topic of this page in in the h1 tag: “Web Development.” The sub-topics are wrapped in h2 tags: “HTML,” “CSS,” and “JavaScript.” Sub-topics of those are nested and use h3 tags. You can view the code here or by inspecting the rendered version of the page on GitHub.
<body>
<header>
<h1>Web Development</h1>
</header>
<main>
<section>
<h2>HTML</h2>
<p>HTML defines a webpage's structure and content.</p>
<section>
<h3>HTML Tags</h3>
<p>Some HTML tags use an opening and closing pair of tags to surround
content. These wrap around that content and help to define what it is.
Others only require a single tag for markup. Those are called void tags.</p>
</section>
<section>
<h3>HTML Attributes</h3>
<p>In HTML, attributes are always added to the opening HTML tag in the pair.
If there is no closing tag, the attribute will be placed in the void tag
itself. All attributes should be added with lowercase letters and double
quotation marks where needed.</p>
</section>
</section>
<section>
<h2>CSS</h2>
<p>CSS specifies a webpage's layout and visible appearance.</p>
<section>
<h3>CSS Selectors</h3>
<p>In CSS, you can change the appearance of elements on your pages to
make them more pleasing to look at and use. CSS selectors allow you to
target the elements on your page by tag name, attribute, relationship,
class, ID, and more.</p>
</section>
</section>
<section>
<h2>JavaScript</h2>
<p>JavaScript describes a webpage's dynamic behaviors and actions.</p>
<section>
<h3>When to Use JavaScript</h3>
<p>Generally, you want to use JavaScript only when necessary, to
improve user experience. Many companies and IT teams will disable
JavaScript on their websites, so your sites should be functional
without it.</p>
</section>
<section>
<h3>JavaScript Libraries and Frameworks</h3>
<p>Today, many job postings will list a desire for experience with
specific JavaScript frameworks or libraries rather than asking for
experience with JavaScript itself. This doesn't mean that you don't
need to learn it! Understanding the language these libraries and
frameworks are built on, makes it easier to learn them as needed.</p>
</section>
</section>
</main>
<footer>
<p>Copyright © 2023</p>
</footer>
</body>
GIT Coding Club 