In this week I've been studying a lot of heading tags and outlining tactics. Now, i am stuck with a lot of information.
Reading the HTML5 Doctor: Document Outline article, i've had no troubles with "Untitled Sections" but, the way you put some heading tags and hide this with CSS. When i read this, my brain is just blown. Ihave always heard that "hidden element tactic, is a blackhat problem for SEO".
Consider the code:
<header>
<h1>My Website</h1>
<nav>
<a href="#"></a>
</nav>
</header>
<main>
<h2>This is a cool title</h2>
</main>
In the outline, the result is:
- My Website
- Untitled Section
- This is a cool title
Ok, now let me apply the hidden tactic:
<style>
.hidden{ visibility: hidden; }
</style>
<header>
<h1>My Website</h1>
<nav>
<h2 class="hidden">Navigation</h2>
<a href="#"></a>
</nav>
</header>
<main>
<h2>This is a cool title</h2>
</main>
Now, my outline got:
- My Website
- Navigation
- This is a cool title
Just hide the element with CSS and things get done.
There's the question: I really can do that?
OBS: Tool that I used to test outline: https://gsnedders.html5.org/outliner/