Using html text, you can give a beautiful design. The underline element is very popular, but not all regular users know how to use it.
HTML underscore
So, how do you underline? Text underline in html is drawn using the <u> tag. It is used in all html and xhtml specifications, but only subject to the transitional <DOCTYPE!>, Since the version of the markup for the browser must be specified. In this case, the document is successfully validated. The element must be specified as standard, that is, at the very top of the page.
The <u> tag is closing, it must be accompanied by </u>. You need to add it to the markup in this way:
- <h1> Heading number one </h1>
- <p> Our <u> text </u> in the paragraph </p>
The word "text" will be underlined.
You can emphasize a separate letter in the word:
- <h2> Heading number two </h2>
- <p> Our te <u> to </u> article in the paragraph </p>
Recommendations
Traditionally, html markup displays underlined links when you hover over the mouse or even stationary, and this happens by default in all browsers. Therefore, putting the <u> tag on an ongoing basis is highly discouraged.
In addition, writing styles in css makes the code more compact, which means that page loading will be faster.
Most often, typesetters apply styles by adding borders or underlining in html or by putting them into a separate css file.
CSS underline
Decorating text with css is a convenient and practical way. The easiest ways to highlight this are: using text-decoration or border-bottom.
To emphasize text with text-decoration, the property must be added to the desired class.
- needed-class {
- text-decoration: underline;
- }
It should be remembered that class names are always written in Latin letters.
Design can also be done using borders. Borders allow you to do both normal (solid) underline and dotted. To do this, the necessary border properties are registered, but the text decoration property is removed.
- needed-class {
- text-decoration: none;
- }
Then the text is decorated using the following property:
- .necessary class {
- text-decoration: none;
- border-bottom: 2px dashed black;
- }
So goes decoration with a dashed line. To make it solid, solid is used instead of dashed. For those who like to dot text with dots, try using dotted.
The styles of the frames are written in one line. In addition to the type of underline, you must also specify the thickness of the underline and color. To determine the size, you can experiment, but usually 1 or 2 pixels are enough. The color of the text can also be made into the color of the underline:
- needed-class {
- text-decoration: none;
- border-bottom: 1px dotted blue;
- color: blue;
- }
This will turn out blue text with a blue design. To attach a style to html, you need to add a class to the markup.
- <h3> Third heading </h3>
- <p class = "desired-class"> Our text in the paragraph </p>
That's all, these are the basics of underlining in html.