TEXT-BOLD Does Not Work Using HTML5

Discussion about CSS related issues.
Post Reply
paulp575
Rank III - Intermediate
Rank III - Intermediate
Posts: 70
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

TEXT-BOLD Does Not Work Using HTML5

Post by paulp575 »

in my stylesheets I've always used:

Code: Select all

*.TEXT-BOLD
{
  FONT-WEIGHT: bold;
}
to make text bold.

For some reason, HTML5 it doesn't work. Only tag that seems to work is

Code: Select all

<strong>
which is a pain to have to use every time I want bold. Some day I may want to change it to being bold and red.

What is the CSS style for bold text for HTML5?
paulp575

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3494
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: TEXT-BOLD Does Not Work Using HTML5

Post by Albert Wiersch »

Hello,

The "font-weight" property is the correct property for setting the weight (or boldness) of a font.

This works:

Code: Select all

<p>This is a test of <span style="font-weight: bold">bold</span>.</p>.
Also see:
The "font-weight" CSS Property

And:
Web technology for developers > CSS: Cascading Style Sheets > font-weight

I'm not sure why it's not working for you. If you can post more information and example HTML/CSS then it should help a lot in figuring out why it's not working.

paulp575
Rank III - Intermediate
Rank III - Intermediate
Posts: 70
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: TEXT-BOLD Does Not Work Using HTML5

Post by paulp575 »

It won't let me attache files in .htm format so now what?
paulp575

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3494
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: TEXT-BOLD Does Not Work Using HTML5

Post by Albert Wiersch »

paulp575 wrote:
Thu Aug 20, 2020 12:34 am
It won't let me attache files in .htm format so now what?
Hello,

You can try putting the file(s) into a ZIP file or email the file(s) directly to me at support at htmlvalidator dot com.

Or you can just copy and paste the relevant HTML/CSS parts of the file into a reply in the forum. This would be best if the HTML/CSS isn't too big. I don't know why it would be for this issue.

paulp575
Rank III - Intermediate
Rank III - Intermediate
Posts: 70
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: TEXT-BOLD Does Not Work Using HTML5

Post by paulp575 »

Okay.

Here's the web page: http://dog-walker.org/EWATV/Privacy-Policy.htm

And here's the stylesheet: http://dog-walker.org/EWATV/z-EWATV-styles.css

Let me know if you can't view the source code for the web page or stylesheet.

I have checked both files using HTML Validator and they have not errors - as far as bold text.

Thanks.
paulp575

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3494
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: TEXT-BOLD Does Not Work Using HTML5

Post by Albert Wiersch »

Hello,

Thank you for that.

It looks like your main content is in a "th" element in a "table". That's not a good idea. Main content should be in a "main" element. Tables should be used for tabular data.

As for the bolding issue, the text is already bold because it's in a "th" element which is, by default, bold... so bolding it again is not going to work (usually anyway; maybe in some cases it can get even bolder but I am not sure exactly how this would work).

I hope this helps.

paulp575
Rank III - Intermediate
Rank III - Intermediate
Posts: 70
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: TEXT-BOLD Does Not Work Using HTML5

Post by paulp575 »

Still confused!

Here's an extract from the first part of the main content:

Code: Select all

<table class="WIDTH85P TABLE-CENTERED BACKGROUND-COLOR-LIGHT-GRAY TABLE-CELLPADDING-15PX">
  <tr class="TEXT-ALIGN-VERTICAL-TOP">
    <th>
      <div class="TEXT-ALIGN-CENTER TEXT-HEADER">EWATV Privacy Policy</div>
      <br>

      <div class="TEXT-ALIGN-LEFT TEXT-SIZE-18PX">
        <strong>What information do we collect?</strong>
        <br><br>

        We collect information from you when you register on our site, subscribe to our newsletter, respond to a survey, or fill out a form.
        <br><br>

        When ordering or registering on our site, as appropriate, you may be asked to enter your name, e-mail address, mailing address, or
        phone number. You may, however, visit our site anonymously.
        <br><br>

        <strong>What do we use your information for?</strong>
        <br><br>
Yes, it's contained in a TH tag. When I remove the

Code: Select all

<strong>
tag the text is no longer bold (it's the same font weight as the paragraph that follows).

If I leave the

Code: Select all

<strong>
tag in there, it is bolder than the remaining text.

Something strange is going on here.
paulp575

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3494
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: TEXT-BOLD Does Not Work Using HTML5

Post by Albert Wiersch »

Hello,

Yes, this is interesting. It seems Chrome and Firefox (and other browsers) are rendering this in different ways. Firefox and Internet Explorer are making the bold text even bolder (font-weight: 900) when <strong> is used, while Chrome and Edge are not (font-weight: 700).

It looks like if you explicitly set font-weight to 900 for the <strong> tags (actually "font-weight: bolder" might be best) then Chrome and Edge will work like Firefox and Internet Explorer.

But ultimately I recommend that you remove the page content from the table header cell. That's not proper use of <th> and it's causing the boldness problem.

paulp575
Rank III - Intermediate
Rank III - Intermediate
Posts: 70
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: TEXT-BOLD Does Not Work Using HTML5

Post by paulp575 »

Didn't realize my HTML was using tag improperly!

How's this for better use of HTML:

Web page: https://ewatv.org/Privacy-Policy.htm

Stylesheet: https://ewatv.org/z-EWATV-styles.css

Please let me know if you see anything else that should be fixed.

Thanks,
paulp575

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3494
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: TEXT-BOLD Does Not Work Using HTML5

Post by Albert Wiersch »

paulp575 wrote:
Fri Aug 21, 2020 10:00 pm
Didn't realize my HTML was using tag improperly!

How's this for better use of HTML:

Web page: https://ewatv.org/Privacy-Policy.htm

Stylesheet: https://ewatv.org/z-EWATV-styles.css

Please let me know if you see anything else that should be fixed.

Thanks,
Hello,

It still looks like the page's main content is in a table; it's in a <td> element instead of <th> this time, which does resolve the bold problem, but tables should be used for tabular data and not for page layout.

Can you remove the table containing the main content and put the main content into a <main> element instead? The should make for a significant improvement in semantics... but then again, in practicality it may not be worth fixing.... it's totally up to you of course.

paulp575
Rank III - Intermediate
Rank III - Intermediate
Posts: 70
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: TEXT-BOLD Does Not Work Using HTML5

Post by paulp575 »

Is

Code: Select all

main
a new style/tag for HTML5?

This is my first foray into HTML5 and it's teaching me a lot of new things. I've been doing websites since the mid-90s and apparently repeating bad habits :( .

What's the impact of changing the main content to the

Code: Select all

main
as opposed to leaving it in the

Code: Select all

table
tag? Will it help when viewing a web page on a mobile device?
paulp575

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3494
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: TEXT-BOLD Does Not Work Using HTML5

Post by Albert Wiersch »

Yes, <main> is new in HTML5:
https://www.htmlvalidator.com/help.php? ... 01+Ent&r=1

It's like a special <div> that you put the main content of your page in it... no headers, footers, sidebars, navigation, etc... just the main page content.
MDN web docs wrote:The HTML <main> element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
It's definitely possible that replacing your main table with <main> will result in better rendering on mobile devices... but it probably depends on a lot of factors especially your CSS. Using <main> and the other new HTML5 semantic elements will also help with accessibility.

paulp575
Rank III - Intermediate
Rank III - Intermediate
Posts: 70
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: TEXT-BOLD Does Not Work Using HTML5

Post by paulp575 »

Okay - thanks for the information.
Will have to try it on a single page (I've got 15 pages for out new site - so far).
paulp575

Post Reply