H1 tag special design

Question

I spent several hours searching for an answer to my question but didn't find anything similar. I have completed web with a lot of design. Now I noticed that I didn't use H1 tag on any page and will want to add H1 tag on navigation titles.

So my question is,

How can I make H1 tag to not have any effects, just to be a normal tag in HTML without style effect on the text?

I need h1 for SEO, but I don't want to make hidden h1 tags copy when I have already navigation bar just need make H1 don't change a style. Same as the example when I will use — Flegy, Dec 18 '18 at 06:14
do not add `
` on navigation. Navigation should use anchor tags ``. `
` should be used as the main heading of the page. And only once on every page. That's HTML and also SEO best practice. Also, i suggest you first use some `reset` css that resets everything to default. And then start styling. — Mihai T, Dec 18 '18 at 11:56
I have tag on navigation so you suggest only once use
tag on each page? hmmm, so I already doing it except on index page. Will be good if I hide h1 tag on index page? Please check how I make https://www.maxko-hosting.com/?page=dedicatedservers H1 at top and other text is h3 and h5. Maybe replace it with H2 and H3? — Flegy, Dec 20 '18 at 00:22

לבני מלכה · Accepted Answer · 2018-12-18T06:42:08.227

4

Use all: unset; to remove default browser style(then you can set your style if you want to...)

h1{
 all: unset;
}

<h1>I am h1 but looks like normal p</h1>

Edit support in IE

Your alternative is to override browser default style with !important

here is links to default style in each browser

For example override IE style:

h1{
font-size: 11pt;
font-weight: normal;
}

 <h1>I am h1 but looks like normal p</h1>
 
 <p>this is the default style:</p>
 display: block;
font-size: 24pt;
font-weight: bold;
margin: 14pt 0;

edited Dec 18 '18 at 06:42

answered Dec 18 '18 at 06:13

לבני מלכה

15,925
2
23
47

thanks, it did a trick, but I had to add !important at the end. But how to do same for Edge/Internet Explorer? – Flegy Dec 18 '18 at 06:26

score 0 · Answer 2 · answered Dec 18 '18 at 06:11

0

Reassign the h1 tags style as you declared for other tags. h1{font-size:20px !important;.....}

answered Dec 18 '18 at 06:11

Joyson

370
4
18

score 0 · Answer 3 · answered Dec 18 '18 at 07:18

0

you can use h1 tag for main headings and customize it according to your requirement. Like:-

h1{font-size: 24px;}

answered Dec 18 '18 at 07:18

Sarabjit Singh

611
7
17

H1 tag special design

` on navigation. Navigation should use anchor tags ``. `` should be used as the main heading of the page. And only once on every page. That's HTML and also SEO best practice. Also, i suggest you first use some `reset` css that resets everything to default. And then start styling.

` should be used as the main heading of the page. And only once on every page. That's HTML and also SEO best practice. Also, i suggest you first use some `reset` css that resets everything to default. And then start styling.

tag on each page? hmmm, so I already doing it except on index page. Will be good if I hide h1 tag on index page? Please check how I make https://www.maxko-hosting.com/?page=dedicatedservers H1 at top and other text is h3 and h5. Maybe replace it with H2 and H3?

3 Answers3

` on navigation. Navigation should use anchor tags ``. `
` should be used as the main heading of the page. And only once on every page. That's HTML and also SEO best practice. Also, i suggest you first use some `reset` css that resets everything to default. And then start styling.