Stack Overflow
Stack Overflow

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
3
votes
2 answers

Impossible situation when mixing explicit and implicit sectioning in HTML5?

I found a page about sections and outlines for HTML5. Not 100% sure it's official and the page says most browsers don't follow it, but I think it's a pretty cool idea so I'm trying to create code that inserts implicit sections explicitly and creates…
Mark
  • 18,730
  • 7
  • 107
  • 130
3
votes
2 answers

Using a H1 logo in HTML5

The "h1 tag with an image" debate seems as old as time itself, but with HTML5 explicitly allowing multiple H1 tags as part of its spec, all the previous questions on this subject seem out of date. As I understand it, the following works perfectly…
Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289
3
votes
2 answers

JavaScript / jQuery: is it possible to change font-size to fill a set width?

I am writing an application, and in it, I would like to have some h1 elements with variable font size. I use the full width (1000px) of a div as a limiter, and a script that automatically sets the font of the h1-element so that it fits the width of…
Marius
  • 219
  • 1
  • 3
  • 11
3
votes
7 answers

How do I simplify this header with lines on the side, so that it doesn't need css3 background properties?

I have a css class for centering a heading, and adding vertically centered lines on either side. Problem is, it uses css3 background properties, and not every browser supports those. So I'd like to simplify this for cross browser compatibility, but…
user1694077
3
votes
4 answers

SEO/Web Crawling Tool to Count Number of Headings (H1, H2, H3...)

Does anyone know of a tool or script that will crawl my website and count the number of headings on every page within my website? I would like to know how many pages in my website have more than 4 headings (h1). I have Screaming Frog, but it only…
Carey McIntyre
  • 97
  • 1
  • 9
3
votes
2 answers

Is there any purpose for h2-h6 headings in HTML5?

I'm confused with using h1-h6 headings and section in html5. Which of these two examples is correct?

Article heading

…
Buksy
  • 11,571
  • 9
  • 62
  • 69
3
votes
2 answers

contentEditable - execCommand 'heading' only working in Firefox

I have the following code which wraps the selected text in H2 tags. The problem is, it only works in Firefox (although I've not tested in IE yet). It doesn't work in Safari or Chrome. Have I missed something or is this function just not compatible…
Tom
  • 12,776
  • 48
  • 145
  • 240
3
votes
3 answers

HTML/CSS: Hanging section numbers to the left of left-aligned heading text

How can I create hanging section numbers with CSS? In other words, heading text should be left-aligned at the same horizontal position as the text but section numbers section numbers should be "hanging" in the left column. Probably the best…
Nikolai Prokoschenko
  • 8,465
  • 11
  • 58
  • 97
3
votes
5 answers

other font-size after
in a Heading

Ok here is the thing. I need 2 different font sizes in my

heading. The text after the
need to be larger than the text before.

Welcome text from
Name

So I tried it with h1 { color: #c3c2c2; font-size: 35px; } h1 br:after…
Denny Mueller
  • 3,505
  • 5
  • 36
  • 67

3
votes
3 answers

Are H1, H2 etc valid inside DLs?

Can I have heading elements inside definition lists? Example:

heading

title
content
title
content
title
content

heading

title
…
Anna K.
  • 1,887
  • 6
  • 26
  • 38
3
votes
5 answers

Should HTML list items contain tags?

I'm trying to figure out if this is good coding style. I know it is valid, at least under HTML5, but I want to know whether its semantic meaning matches my intention.

  1. The First Item

    a descriptive paragraph

    …
Joel Micah Donovan
  • 321
  • 2
  • 5
2
votes
4 answers

Flowchart with CSS/HTML

Currently I'm trying to make a flowchart, this is the code I've got so far: #flowchart { width: 580px; text-align: center; font-family: sans-serif; font-size: .8em; margin: auto; } …
Matthew Galloway
  • 43
  • 1
  • 6
2
votes
8 answers

The 'p' tag in 'h1' for SEO

Would using

tags nested in a

tag be bad for SEO purposes?

Some title

Some subtitle

This would make my life a bit easier, dealing with dynamic page titles.
dreagan
  • 2,426
  • 6
  • 24
  • 34
2
votes
2 answers

How to line up an icon with a stacked heading and subtext?

I have been wrestling with lining up an image icon (not a font icon) with a heading and text. I have found some good examples of how this is done but not with a heading and if so it was using a fontawesome icon which I am trying to…
lcm
  • 1,737
  • 6
  • 17
  • 40
2
votes
2 answers

How to replace a sticky element while scrolling?

Context I am making a blog website and I would like to have one sticky element that would be updated which each new year and month as the user scrolls. So that the header would show the current month and year of the listed blog articles. When…
Sileo
  • 307
  • 2
  • 18
1 2 3
…
16 17