Line Height for Headings

HTML & CSS
1

in my home page website, I have 3 lines in H3 but the hight between lines is not nice, how can I reduce the distance between lines?
my website is in WordPress and I don’t want to us: CSS. How can I use “line-height” in HTML . for example in DIV or SPAN or P or UL code.

<ul style="text-align: justify;">
<li>
<h3><span style="font-size: 11pt; color: #000000;"> Branding</span></h3>
</li>
<li>
<h3><span style="font-size: 11pt; color: #000000;"> Web Branding</span></h3>
</li>
<li>
<h3><span style="font-size: 11pt; color: #000000;">Professional Sales</span></h3>
</li>
</ul>

  • Branding

  • Web Branding

  • Professional Sales

I want to be in this face :

  • Branding
  • Web Branding
  • Professional Sales
2

Why are you using h3 here?

1 Like
3

because it contains my keywords

4

It is misusing the heading tags. These are not headings and h3 doesn’t belong there.

3 Likes
5

May I ask why you don’t want to use CSS?

Also, why are you using spans to add the inline styles? Why not apply them directly to the (wrongly-used) <h3> elements? And pt is a unit more suited to print than to web design.

If we understood your issue, and what you’re trying to achieve, I’m sure we could offer a better solution than the mishmash of code you have at present.

1 Like
6

i have used span , just to decrease the font size .
i don’t want to use CSS , because GTMATRIX.com shown that CSS or Java is not good for my website load time .
…

please help me. what is better for that ?

7

CSS in itself will not have a negative effect on your site’s load time. (If it did, nobody would use it.) My guess is that you are loading multiple style sheets, and the number of server requests is what is adversely affecting your load time. Try to consolidate your styles into fewer sheets.

You can simplify your HTML to something like this:

<ul class="branding">
<li> Branding</li>
<li> Web Branding</li>
<li>Professional Sales</li>
</ul>

and the CSS:

.branding { text-align: justify;}

.branding li {font-size: 0.8em;
    font-weight: bold;
    color: #000000;
    line-height: 1.4;
    }

You can adjust the font-size and line-height to suit.

2 Likes
8

If you’re worried about load times, then don’t use Wordpress.

3 Likes
9

You’ve been given the correct answers above but just to clarify that the gaps you were seeing in your original code was due the top and bottom default margins on the (ill-advised) h3. (Just set the top and bottom margins to zero to kill the extra space).

You really need to use headings where appropriate and in the appropriate hierarchy for your page. Using them in the wrong place or out of order will have a detrimental effect to your seo rather than enhancing it.

4 Likes
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.