1

When defining a style guide, which of the following is most common when naming layout components?

  1. Stating the specific H-levels to be used (i.e. H1, H2, etc.)
  2. Create your own set of naming conventions (e.g. "Top-level title", "Subtitle", "Body text")?

If you use the first option, it seems you'd run into cases where those rules don't fit. For example, on one page H1 is good, but on another page, it needs to be modified to fit well in the page.

Essentially, how specific should a style guide be?

1

For SEO and accessibility reasons, it's good practice to use <h*> elements where appropriate. I usually use <h1> for the site title, <h2> for the page title, and <h3> for sections. You can play around with it though, and change the styles for each how you need (for example my <h1> and <h2> styles are often almost equivalent.

  • <h1> for site and page headers would work equally well, it's personal preference – Ben Mansley Dec 14 '17 at 15:57
  • 1
    While this is good advice, this question is about visual design style guides, not HTML tags. The answer doesn't seem relevant here. – Tin Man Dec 15 '17 at 19:44
  • Fair point - I might have been sidetracked by the other answers to the question. With a style guide, I'd have the same advice - essentially personal preference for the most part with a view towards accessibility (and SEO) – Ben Mansley Dec 15 '17 at 21:13
0

Yes, I still use the H tags on my HTML. I understand that the H1 on the homepage can sometimes be different that on the subpages. Whenever there are some subpages that need different H1 style, I give these H1 tags a class (e.g. h1.details {...}) or make the H1 adjustment dependant on the master class (e.g. .details h1 {...})

It is important to keep one H1 tag on a page because of the SEO purposes.

E.g. The base font size is 16px H1 - 2em; H1.details - 1.5em; H2 - 1.5em; H3 - 1.125em etc..

However, this is just my approach. I hope it helps.

0

The HTML web standard does not define styling of <hx> elements unless there is a separate paper somewhere for that which I don't recall. It's been so long that I just don't remember but browser vendors pretty much have set upon an agreed CSS for those elements. Such styling is inserted with CSS, not HTML.

HTML is the structure of a page, not its style, layout or design. If the content is not the main heading for a page then it should not be a <h1>. The other elements are lower level headings for their sections and the thought behind how to structure those are not different than outlining a term paper one may have written in school.

When you get into the style of the elements, as in color, font, placement, etc., that has nothing to do with the HTML structure.

0

Designers generally keep the layout consistent with respect to spacing, heading sizes and color etc. Although, it is possible to have different style on two different pages. I would like to suggest following things while making style guideline:

  1. Class name must be functional not random or not to be defined with the property inside

  2. Always use H1 for page heading, H2 for section, H3 for subsection and so on. Make sure you use H1-H6 in a sequence for better SEO and Accessibility. And, there should not be more than 1 H1 per page

Now, if you want two or more styles for H1. Create size classes like: small, medium, large, extra-large and color classes could be named as primary-text, secondary-text and so on. This way you will have more control over cascading and less use of !important attribute will make file clean and light.

You may refer to Bootstrap framework's naming convention for inspiration.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.