Questions tagged [html-heading]

In HTML, the

,

,...

tags define headings of different levels,

being the highest. Browsers typically apply preset top and bottom margins as well as different font sizes and weights to headings.

The headings elements from <h1> to <h6> represent six levels of element headings, where <h1> is the highest s level and <h6> is the lowest level.

Usage notes

  • Heading information can be used by user agents to construct a table of contents for a document automatically.
  • Avoid using heading elements to resize text. Instead, use the CSS font-size property.
  • Avoid skipping heading levels: always start from <h1>, followed by <h2> and so on.
  • Use only one <h1> per page or view. It should concisely describe the overall purpose of the content.
  • Using more than one <h1> will not result in an error, but is not considered a best practice. It is beneficial for screen reader users, and SEO.
  • While HTML5 allows a <h1> per sectioning element, it is not considered best practice, and may subvert the expectations of how screen reader users navigate.
250 questions
0
votes
3 answers

How to jump between headings (like h3) with keyboard in NVDA?

I know that the good scenario is, when I click on number 3 on my keyboard I'm supposed to jump between my h3 headers. For some reason this thing didn't happen in my case and my screen reader (NVDA) didn't show me any indication of it. It's some…
0
votes
1 answer

Text next to the menu moving the menu when more text is added

i want to make my text on the left side of the menu not interact with my menu. Every time I add text to it, it moves my menu bars to the side. Any idea how to fix it? I tried fixed position for the text but its buggy and doesn't work in Mozilla…
Fred007
  • 81
  • 1
  • 10
0
votes
1 answer

CSS better style heading element

Please help me. How cut corners using CSS, now is insert as background image background: url(../images/border.png) no-repeat center; HTML code:

About Us

CSS code: .heading { text-transform: uppercase; …
marefly
  • 37
  • 1
  • 7
0
votes
1 answer

Long title (multiple lines) in heading with line-height

I'm creating a H1 title with css, and added a line-height to it, so the H1 element has the right height and the text is vertically centered. The problem is with long titles which need multiple lines. An example is created at jsfiddle:…
OsiriX
  • 390
  • 4
  • 19
0
votes
3 answers

How can I have a basic heading and a custom one?

I have the following CSS to make an H1 that has a line through the background and it is centered. I have to use a span element between my h1 tag for it to work. The CSS is h1 { font-size: 28px; font-family:'Palatino'; font-style:…
Chris Farrugia
  • 1,024
  • 3
  • 17
  • 35
0
votes
2 answers

How do I disable a header from a link?

I'm working on a friend's website and I need to know how to disable the header of a webpage when he clicks on a link. His main page has several navigation links at the top, and an iFrame that is targeted by those links so that it loads in the…
0
votes
1 answer

How to remove paddings from heading tags in html?

I am trying to remove the top and bottom padding from the

and

tags. But as I've found out the h1 and h2 tags have inherent padding. I attempted to the use following CSS: h1,h2 { padding: 0px; } However, that doesn't solve the…

Sage
  • 1
  • 1
0
votes
2 answers

Make Headers clickable and display specific paragraphs when selected

I am trying to setup a horizontal bar with 3 clickable titles. Before being clicked they are one color but when selected I'm trying to get that section to change color and display a specific paragraph below the bar. Here is a jfiddle of what I…
smcnally
  • 1
  • 1
0
votes
0 answers

Span inside H2 tag not showing up

I'm trying to add a span inside of an H2 tag that will show a caret for dropdown, but everything I try I can't get it to render. When I look in the developer console my span doesn't even show up. Looks like it's not even being rendered. Is there…
jedatt01
  • 43
  • 1
  • 6
0
votes
1 answer

HTML5 outline – page header with heading arround the logo

I've been wondering whats the best practice for using a heading tag arround my logo on my website, especially with HTML5 sectioning tags. I've read on many website and forums that I should do the following, if I want to add a heading arround my…
kije
  • 407
  • 2
  • 11
0
votes
1 answer

Should a bigger text above h2 be h2 also?

If I have a promo hero stuffs before the first header of a page as in the attached image, then should the heading text of the hero stuff be done with a header element as in h1/h2 etc. or just normal p text? I need it to be WCAG 2.0 AA…
Hello Universe
  • 3,248
  • 7
  • 50
  • 86
0
votes
1 answer

Seo Heading when can't use heading tags

I've got a few places on my page where I can't use heading elements due to semantic HTML but I need them there for SEO. Or at least something that will help the SEO. I know I can't just add an H3 nearby and hide it as the bots might flag it. So for…
Chito
  • 21
  • 1
0
votes
1 answer

dynamically change header based on angular js partial view

I know that this question is ALMOST identical, however my implementation needs to be changed slightly and I can't quite work out what to do. In the answer I linked, the solution involved using app.config(['$routeProvider', '$locationProvider',…
user2412643
  • 153
  • 1
  • 1
  • 13
0
votes
1 answer

Using h1-h6 headings exclusively for article and excerpt titles

I know how headings are supposed to work, but in any single text I never get to use anything more than the H1. A few years back, in some magazine-style sites, I saw this practice where H2 to H6 headings were used as excerpt titles - links to other…
lucian
  • 623
  • 10
  • 21
0
votes
1 answer

A links in H3 headings appear smaller than the H3 text

The a href links I create with CKeditor are part of h3 headings and appear smaller in font-size, from their counterpart non-link h3 text... For example, if the sentence is: "We provide Google SEO support", and the word "Google" links to google.com,…
user3578082