Menu
homeConnection

Inscription. Bold Text Using HTML and CSS

There are three ways to highlight text in bold on an HTML page, but do not rush to immediately use any one you like, since such highlighting can have different meanings and affect the optimization of the site for the search engine.

Bold font with strong tag

This method is suitable if you want to highlight an important part of the text in bold. The HTML tag is a logical formatting tag and its essence is to “emphasize” the importance of the selected fragment.

There are other logical formatting tags in HTML. For example, a tag makes text italic and indicates emphasis on the highlighted phrase.

Other types of text selection are described in the article:.

Plain text, highlighted important piece of text. Plain text.

Bold text using b tag

Regular text text in bold font. Plain text.

Bold CSS Styles

Bold text can be made not only using special HTML tags. You can achieve bold output on any tag by setting the property font-weight: bold; (does not work for all fonts).

Such highlighting will be of a stylistic nature, without adding logical weight to the selected text.

In addition, you can select either a specific tag or a group of elements at once by setting styles via a CSS class.

CSS property inside the style attribute:

Text in bold.

.bold_text ( font-weight: bold; )

Text in bold.

Text in normal font.

Text in bold.

What to do if you can’t make text bold?

If you can’t make the text bold, it’s likely that the CSS styles of the elements are overridden on your site. In this case, you will have to adjust these styles. In most cases this will be done through the main CSS stylesheet file. If you don't understand this, contact the webmaster. Most likely, solving this problem will require no more than 5 minutes of work (although, of course, there may be exceptions).

11/27/14 88.7K

In html, font size plays an important role. It allows you to draw the user's attention to important information posted on the site page. Although not only the size of the letters is important, but also their color, thickness and even family.

Tags and attributes when working with html fonts

Hypertext language has a wide range of tools for working with fonts. After all, text formatting is the main task of html.

The reason for the creation of the HTML language was the problem of displaying text formatting rules in browsers.


Let's look at the tags that are used to work with fonts in HTML and their attributes. The main one is the tag. Using the values ​​of its attributes, you can set several characteristics of the font:
  • color – sets the text color;
  • size – font size in conventional units.

Positive attribute values ​​from 1 to 7 are supported.

  • face – used to set the text font family that will be used inside the . Several values ​​are supported, separated by commas.

Only the text that is located between the parts of the paired font tag is formatted. The rest of the text is displayed in the standard default font.


Also in html there are a number of paired tags that specify only one formatting rule. These include:
  • — sets bold font in html. The action tag is similar to the previous one;
  • — the size is larger than the default;
  • — smaller font size;
  • — italic text (italics). Similar tag ;
  • — text with underlining;
  • - crossed out;
  • — display text only in lower case;
  • - in upper case.

Plain text

Thumbnail

Thumbnail

More than usual

Less than usual

Italics

Italics

With underscore

Crossed out

Style attribute capabilities

In addition to the described tags, there are several more ways to change the font in html. One of them is to use the generic style attribute. Using the values ​​of its properties, you can set the display style of fonts:

1) font-family – the property sets the font family. It is possible to list multiple values.
Changing the font in html to the next value will happen if the previous family is not installed on the user's operating system.

Writing syntax:

font-family: font-name [, font-name[, ...]]

2) font-size – the size is set from 1 to 7. This is one of the main ways you can increase the font in HTML.
Writing syntax:

font-size: absolute size | relative size | meaning | interest | inherit

You can also set the font size:

  • In pixels;
  • In absolute value (xx-small, x-small, small, medium, large);
  • In percentages;
  • In points (pt).

Font-size:7

Font-size:24px

Font-size: x-large

Font-size: 200%

Font-size:24pt


3) font-style – sets the font writing style. Syntax:

font-style: normal | italic | oblique | inherit

Values:

  • normal – normal spelling;
  • italic – italic;
  • oblique – font slanted to the right;
  • inherit – inherits the spelling of the parent element.

An example of how to change the font in html using this property:

font-style:inherit

font-style:italic

font-style:normal

font-style:oblique


4) font-variant – converts all capital letters to capital letters. Syntax:

font-variant: normal | small-caps | inherit

An example of how to change the font in html with this property:

font-variant:inherit

font-variant:normal

font-variant:small-caps


5) font-weight – allows you to set the thickness of the text (saturation). Syntax:

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Values:

  • bold – sets the html font to bold;
  • bolder – bolder relative to normal;
  • lighter – less saturated relative to normal;
  • normal – normal spelling;
  • 100-900 – sets the font thickness in numerical equivalent.

font-weight:bold

font-weight:bolder

font-weight:lighter

font-weight:normal

font-weight:900

font-weight:100

html font property and font color

Font is another container property. Inside itself, it combined the values ​​of several properties intended for changing fonts. font syntax:

font: font-size font-family | inherit

The value can also be set to the fonts used by the system in the labels on various controls:

  • caption – for buttons;
  • icon – for icons;
  • menu - menu;
  • message-box – for dialog boxes;
  • small-caption – for small controls;
  • status-bar – status bar font.

font:icon

font:caption

font:menu

font:message-box

small-caption

font:status-bar

font:italic 50px bold "Times New Roman", Times, serif

Greetings, Friends.

After another long break, I remembered that I hadn’t written a single line for a long time. Of course, there are reasons for this, because there will always be some reason to come up with an excuse, right? In fact, I do the Video Course every day, which I’ve already mentioned a couple of times, but for now I won’t say anything more about it, you’ll find out everything soon.

So, since nothing came to mind to write about. I decided to look at the statistics to see what interests RuNet users regarding HTML, WordPress, DLE and similar topics. And guess what? There is still something to write about. All the questions that I found seem to have answers, but not always in an understandable form. And in general it became interesting to write something like that.

Today we'll talk about HTML. Namely, we will talk about how to highlight text in bold and italics, and we will also talk about highlighting with color.

Making text bold.

To make text bold, you don’t need to do anything fancy with CSS styles or come up with any other complications. HTML already has this feature. At the same time, we can not only highlight the text in bold, but also put some emphasis on it using highlighting. The emphasis can be placed on search engines or any special browsers or programs. The main thing is not to overdo it with emphasis on text in an article or on a page with some information, as this can have a detrimental effect, at least on the promotion of this HTML page.

So, to simply make text bold, we can use the tag. This tag refers to elements of physical markup, while setting the text to bold without placing any emphasis on it. This tag is a paired tag, which means it has both an opening tag and a closing tag. Additionally, since the element is inline, it must be in some block element, for example

Example code:

thumbnail

Result:

thumbnail

In this case, we simply highlighted the text in bold and that’s it.

But it happens, so we need not just to highlight the text, but to focus on it. For this we can use the logical markup tag. Not only does the text highlighted with this tag have more weight for search engines. But in theory, it should differ from the tag in speech browsers, for example, in intonation. However, I can neither confirm nor deny this information, is this true?

In this case, everything is exactly the same as in the case with a simple highlighting in bold, only we are making an emphasis, and not just highlighting.

Example code:

Result:

It's all quite simple, isn't it?

Italicize text.

In this case, everything is no more complicated than in the first one. And our situation is absolutely the same. We can highlight text with two options in HTML. Again, using either a physical markup tag or a logical tag, with which we again focus on the selected text.

To make the text italic we will use the tag . This element is paired and inline, which tells us that we should use both an opening tag and a closing tag. They should also use it inside a block element. And in this case, the most suitable block element is the paragraph tag

Example code:

text in italics

Result:

text in italics

And of course, we can emphasize the text at the same time by highlighting it in italics using the tag. This element is the same as , except that the text is italicized instead of bold.

Example code:

the text we focused on

Result:

the text we focused on

And the last thing I would like to talk about today is highlighting text with color.

Unfortunately, we do not have a tag for highlighting text with color in HTML. But still, there is nothing complicated in this method.

So, to highlight a certain part of the text with color, we can wrap the desired part of the text with a tag, which is a universal tag, and is used inside a block element. In our case, the block element is the tag

But adding is not enough. You also need to specify the style parameter, which will allow you to add CSS properties to the required text, and specify the property itself (color), which will help you set a specific color. Finally, provide a value for the color property. But the question may arise: “What should I indicate?” You need to specify the HTML code of the color in which we want to “paint” the text. HTML color codes can be found.

Now, to make it clearer, let's look at an example.

Example code.

text to be highlighted

In this case, we highlight one word: with color. I also want to note that the tag is paired, and we must close it where the property should end.

Result:

text to be highlighted

In these simple ways we can manipulate the text on our page. I would also like to note that everything we just talked about works on both WordPress and DLE, because any engine uses HTML to display pages. That is why HTML can be called the basis of any website, no matter what CMS you have.

I hope I explained everything clearly.

Good luck, Friends. Soon... There will be interesting news...

Hello, dear blog readers! This article will focus on text formatting tags. Prime examples include making text bold or italic. We will also look at the impact of some tags on internal website optimization and the rules for writing them. You can read about that in the article below. By the way, you can find similar text design elements in many text editors, for example in Word.

Tags are divided into 2 types: block and inline. When using the former, you can change the content of part of the text (lines, individual fragments or words), and the latter are . The formatting tags we'll look at in this article are primarily lowercase.

Rules and order of writing tags You already know what opening and closing tags are. If not, then read the article given at the very beginning of this material. In short, there are two types of tags: single (for example, new line
) and container (in pairs). So, all text formatting tags are paired. This means that any element has an opening and closing tag, and the highlight must be placed between them. For example, the correct selection of a phrase will look like this: Selected fragment

When the browser processes this fragment, you will see the following text: Selected fragment. By the way, all tags are not displayed in the RSS feed ().

The main thing when writing tags is not to forget to close them. Otherwise, all text on the page will be highlighted in bold (in the example with the tag). But there are cases when you need to highlight a certain fragment in both bold and italics at the same time. But there is no tag that performs this action. There is only one way out of this situation: use two tags at the same time. It doesn't matter in what order you use them. Therefore, writing text with tags like this:

Selected fragment

or like this:

Selected fragment

You will still receive Selected fragment italic and bold at the same time. However, it is preferable to use the first option, because initially it was the only and correct one. Also, do not forget that each browser can process tags differently (), depending on the settings. Now let's move on to the formatting tags themselves.

Bold and italic text - tags , , and The most popular text formatting tags are making it bold and italics. They are usually used to give importance to a fragment. The first case serves to highlight a fragment containing useful information or keywords. Italics serve the same purpose as bold text, but the information is less important because italics are less noticeable in the background of the body text than bold text.

Let's first consider making text bold. This action uses two tags - and . There is no difference in appearance. Although, given that each browser can interpret each element differently, you may be able to see any differences. This is what the text looks like in the tags and in the form already processed by the browser:

Text in tags strong

Text in b tags

And here’s what these two lines look like in the source code of the page:

Text in strong tags Text in b tags

We can observe the same situation in the case of italic tags and . Try to find the differences between the two examples:

Text in em tags

Text in tags I

And here is the source code:

Text in em tags Text in tags I

So, the considered bold and italic tags are actually no different, but then why do we need, for example, a tag if there is one? After all, the latter contains only one character (not counting brackets) and, therefore, is easier to write. And the whole point is that tags affect . If you surround keywords with these tags, this will have a beneficial effect on website promotion. The main thing is not to overdo it - the text should contain a maximum of 5% bold text in the tag, and the same amount of italics in the tag.

If you just want to highlight some point in the text, then use a tag or . In general, I think that search engines also consider the text in these tags as more important, but they still have less influence on internal optimization than .

Tags for highlighting text with a line - , and Now let's look at a few tags that use a dash in text formatting. The most famous text editor you know is tag or underscore. This tag does not have an impact on ranking (as far as I know), but highlighting some text and focusing attention on it will help. I gave an example of using this tag just above.

Two more tags with similar purposes are and . Both perform the function of striking out text. You can use this tag in any situation: if you are updating a document (or rather, part of it), you can cross out the old one and add a new one; if you are going to write something that deviates from the topic of the material; something that does not correspond to moral and ethical standards.

The differences between these two tags are only in their writing, as a result of which it is preferable to use the first one, because firstly, it’s more convenient to write, and secondly, your page will contain less HTML code, and search engines love this.

Tag and Attributes - Text Font Options

Now consider a tag that is not used without attributes. Using it, you can set parameters for a specific piece of text. In general, it is now preferable to use (cascading style sheets), because... using them you can greatly reduce the entire HTML code of the page. So, let's look at that same tag. There are only three attributes for it:

  • face is the font itself. For example, Arial, Courier or Verdana. You can list several, because not all users have an extensive set of fonts, and by writing several in the face attribute, the browser will be able to choose which one to use, or rather, which one is present in the system;
  • size is an attribute indicating the size of the text. Can be expressed both in conventional units and in pixels;
  • color — text color. This attribute can be used both in HTML color codes and in word ones. The first ones have the form #FFFFFF (where F is any number or letter from A to F), and the second ones are written in simple words (for example, red).

This is what the text in the tag looks like using each attribute:

This text is 6px This text is red This text is Arial This text is red and 5px

And this is what you will see after processing the written code:

Block text design elements - headings -, paragraph

Finally, we will look at block elements, which are used in almost every document. These are heading and paragraph tags. Let's consider the first. There are 6 types of headings and each has its own tag. Each type has only its own serial number and is recorded using tags , ,..., . Here's what all the headers look like when processed:

The number after the word title corresponds to the number in the tag. Headings have a huge impact on on-page optimization, so include keywords in your tags. There are quite a few features of this case, which I will talk about in subsequent articles.

Now let's talk about the paragraph highlight tag

The function of this tag is to separate text between another identical text and an empty line. If you look at the source code of a document, you can see the following:

Green rectangles contain one paragraph, red rectangles contain another. And here’s what this code looks like after processing by the browser (the arrow points to an empty line):

As a result, we get a fairly noticeable separation of one paragraph from another, which is beneficial - reading becomes more convenient.

This has come to the end of the article about document formatting tags. There are many more of them than I described in this material. It’s just that a lot needs to be said about some of them, as a result of which separate articles with a full review will be devoted to them!

We are all accustomed to highlighting part of the text or individual words on a website in bold, underlining or italics. However, if you overuse these things, search engines may filter your page or website.

Today I will offer a solution for those who want to still highlight words and text, but not be afraid of sanctions from search engines. I personally use this method on several sites.

Standard HTML tags are responsible for formatting text:

Attention! I have released a new Romb theme for your article writers and blogs. The fastest Google PageSpeed ​​and maximum optimization for SEO.

I suggest using CSS to highlight text, which will be perceived quite adequately by search engines.

Step 1. Write CSS parameters

Open your style file (style.css, css.css, screen.css, etc.) and add this at the very end:

Strong (font-weight:bold;).italic (font-style:italic;).underline(text-decoration:underline;)

Strong (font-weight: bold;)

Italic (font-style: italic; )

Underline ( text-decoration : underline ; )

Here we have given the corresponding classes our appearance. Now you can, in HTML mode, take the desired segment of text, or word, into a span tag with the desired parameters, as a result of which the text will take the desired form: bold, italic or underline. See:

However, it is time-consuming to manually write a new span tag with the class each time. Therefore, I propose the option to automate this.

Step 2. Add your buttons to the text formatting panel

Now we will add new buttons to the text formatting panel in the admin area of ​​your WordPress site. It will look like this:

As you can see from the picture, I have added 3 new buttons in HTML mode. It was on them that I “hung” the created spans with the necessary classes (strong, italic and underline).

Open your functions.php file and at the very end, before the closing ?> , add the following code (borrowed, but modified by me):

/*your own text formatting buttons*/ add_action("admin_footer", "eg_quicktags"); function eg_quicktags() ( ?> jQuery(document).ready(function())( if(typeof(QTags) !== "undefined") ( QTags.addButton("zhirny", "Bold", "", "") ; QTags.addButton("italic", "Italic", "", ""); QTags.addButton("underline", "Underline", "", "" ));