: How do you design headers in web layouts? Do you think it's important that the <h1>, <h2>, <h3> font family and size don't change in whole design? For example, I need to change

@Courtney577

Markup should be semantic - Design should not be even a vague consideration at the markup level

You need to understand the separation of visual design and semantic markup. The mere fact that you are considering "changing the h3 tags sometimes" indicates to me that you may not understand this concept.

When coding, forget all notions of what a heading will look like. Thanks to the magical powers of CSS an h1 can be tiny and black, and h5 large and red. It's absolutely irrelevant. The only relevant thing is that the headings describe the content in a semantic way.

Thus ideally each page would have only ONE h1, and as many h2's as it has subheadings, and as many h3's as it has sub-sub headings and so forth.

Code that way, and only afterwards think about how you want those things to look.

While it remains likely that h1's will be "bigger/bolder" than h2's, and h2's bigger and bolder than h3's that may not always be the case, but it would then be the CSS you are using to change that and NOT the tags themselves.

So the answer to the question specifically is:

No it's not important at all. You can have small h1's, large h3's and change that and every other heading on every other page. Although if you do code it semantically it is bound - especially on text heavier pages - to follow a pattern, and styling that pattern of title hierarchies consitently, would have course yield neater design.

Further reading concerning semantic markup:

stackoverflow.com/questions/1294493/what-does-semantically-correct-mean https://boagworld.com/dev/semantic-code-what-why-how/

Vote Up Vote Down

@Berryessa866

h1 more bigger size, h2 is medium size, and h3 is the smallest size for their title, you can also design it separately if you want specifically for h3, for example the code you type this: h3{
font-size: 2.5rem;
font-family: 'Great Vibes', 'Lato', sans-serif;
background-color:#C12D79;
}

Vote Up Vote Down