How do I make new heading tag numbers like h7, h8, etc.?
How do I make a different heading in HTML
?
I used the <h1>
, <h2>
, <h3>
, <h4>
, <h5>
and <h6>
, and now I would like to add <h7>
, and <h8>
because I have different types of text that I need to use.
If you can not do it, is there a way to enter text CSS
for text, and then <p>
and <h1>
- <h6>
?
source to share
You can declare this in your stylesheet
h7, h8, h9 { /* You can just go on adding headings */
display: block; /* Because this is block level element */
}
h7 {
font-size: /*Whatever */ ;
}
h8 {
font-size: /*Whatever */ ;
}
But I would advise you not to do this, since it does not carry any semantic meaning, it will also be bad from an SEO point of view
Also have a look at html5shiv , just add the elements you want to the script
source to share
In another of my questions, which was completely unrelated, I got the answer to this question:
You cannot make heading 7 because there are only six different HTML headings (h1, h2, h3, h4, h5 and h6, link: http://www.w3schools.com/tags/tag_hn.asp ), but you can make heading 6 with this CSS code:
h6.special { color:#464646; outline:0;
font-family:Raleway, sans-serif; font-size:17px; }
and this HTML code:
<h6 class="special">I am special!</h6>
This solution doesn't hurt SEO and is pretty simple. I just want everyone to know. As a side question, can you change "special"? Let's say if I changed it to
h6.raleway { color:#464646; outline:0;
font-family:Raleway, sans-serif; font-size:17px; }
and this HTML code:
<h6 class="raleway">I am raleway!</h6>
Will this work? Thanks again for all the answers!
source to share
h7, h8, h9 are not a valid html tag and the browser can do what it wants with it. You can create your own css class and use css property like h2, h3, etc.
how
h7{
display: block;
font-size: 0.51em;
-webkit-margin-before: 2.99em;
-webkit-margin-after: 2.99em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
source to share
None of the answers posted so far are completely correct. Some of them are misleading.
In html5, you can actually use h7
, h8
etc. And select them using the appropriate CSS selectors, but semantically speaking, these are not headers , they are just elements with unknown semantics - much like div and span. Also I would be surprised if all browsers handled these "custom" elements consistently without providing the CSS value for display
at least.
But you can specify missing semantics with an attribute role
"heading"
, and this will be important for assistive technologies such as screen readers. This may (presumably) have some impact on SEO, but there are many much more serious SEO problems than this.
The correct way to specify a heading level above 6 is to include the attribute aria-level="7"
(or whatever level you prefer). If you apply this attribute to anything other than h1
- h6
you will also need it role="heading"
.
Therefore, any of the following examples "h7" is valid and correct according to w3 :
<h1 aria-level="7">...
(header semantics provided by "h1", but 7 overrides 1)
<h7 role="heading" aria-level="7">...
(header semantics provided role
)
<div role="heading" aria-level="7">...
(header semantics provided role
)
And of course, to select any of them in css, you can do something like:
*[aria-level="7"] {
font-size:0.5em;
}
Finally: do not nest titles of different levels inside each other! This is known to be confusing to all screen readers and is probably not valid HTML either. Cover each header element completely before starting a new one. It's easy to overlook if you are using div
it and the validators will most likely not notice the error.
source to share
If you really want headings below level 6 (which means your document fits a large book in structure and nesting sections), then use elements div
with attributes class
. (Using "custom tags" such as h7
is out of specification, causes problems in IE, and gives the illusion of using headers - they won't be headers, search engines, outlines, etc.) Example:
<style>
.h7 { font-weight: bold; margin-top: 1em; }
</style>
<div class=h7>Some text</div>
(Difficulty adjusting headings at 7 or 8 levels so that the level is clearly reflected in the look and the font sizes at the topmost levels are not oversized.) In the meantime, there is no need to know about it. ”
In theory, you can use HTML5 elements section
to define the nesting structure of parts, sections, sections, subsections, etc. in the document and only, for example. h1
heading inside each section
. According to HTML5 CR, nesting of elements section
then determines the heading levels, so 7th level of nesting <h1>
would be a 7th level heading. But even for people who generally prefer HTML5, this can be quite confusing, and for this to work in older versions in IE, you need <script>document.createElement('section')</script> as well as
section {display: block} `plus code that formats the headers using contextual selectors.
With the phrase "different types of text that I need to use", it might be assumed that you might only be looking for styling capabilities. In this case, use div
or p
or some other elements with attributes class
as needed, suitable for content and structure, and styling in CSS.
source to share