Главная » Языки программирования

How to do formatting in html

На чтение 12 мин
Содержание
  1. HTML Text Formatting
  2. How does it relate to you?
  3. How is it important to visually impaired people?
  4. 1. Text Formatting
  5. 2. Bold
  6. 3. Italics
  7. 4. Underline
  8. 5. Strikethrough
  9. 6. Highlighting Texts
  10. 7. Small Texts
  11. 8. Subscript Texts
  12. 9. Superscript Texts
  13. 10. Program Output
  14. 11. Keyboard Keys
  15. 12. Variables
  16. HTML Text Formatting
  17. Example
  18. HTML Formatting Elements
  19. HTML and Elements
  20. Example
  21. Example
  22. HTML and Elements
  23. Example
  24. Example
  25. HTML Element
  26. Example
  27. HTML Element
  28. Example
  29. HTML Element
  30. Example
  31. HTML Element
  32. Example
  33. HTML Element
  34. Example
  35. HTML Element
  36. Example
  37. HTML Exercises
  38. HTML Text Formatting Elements
  39. Text Formatting Tags in HTML with Examples
  40. Bold and Strong
  41. Italic and Emphasis
  42. Highlighting Text
  43. Teletype Text
  44. Underline and Strike
  45. Big and Small
  46. Delete and Insert
  47. Subscript and Superscript
  48. Conclusion
  49. Further reading
  50. See also

HTML Text Formatting

This article targets beginners in web development. It is part of my previous post on html-guide. This can also be a refresher for advanced developers.

You can find the code and guide on my GitHub html-guide-github & for this article’s code and guide on html-text-formatting. Enjoy!

Using appropriate HTML tags comes with a lot of advantages. You can’t skip these benefits because they are indispensable to you as a web developer and to others like visually impaired people.

How does it relate to you?

Being a professional web developer requires being adept at what you are doing. It requires keeping your work at the most professional level you can. Professionalism does matter in this case. It is what companies seek in the first place. Trust me! It is what gets you hired, too.

How is it important to visually impaired people?

Using appropriate semantic tags will help blind people listen to web pages. How does that happen? A software called screen reader does that job. It reads your HTML structural semantics out loud to them and allows them to become aware of what is happening at that moment. It guides them, so you need to be careful how to employ HTML semantics. Misplacing them can sometimes lead to grave consequences.

1. Text Formatting

It is not uncommon to think about text formatting tags or exclusively semantic tags as a mere text presentation. Whilst this thought isn’t correct, we should keep in mind how important it is to use appropriate HTML tags at the right time and in the right place to render web pages informative, hence, semantically relevant. We often use CSS to achieve great presentations of web pages.

2. Bold

We use tags to make texts bold. This tag stands for bold . It targets how the text should look. 

 This paragraph has a bold word in it.

We use tags to make texts bold. It targets how important the text is so you have to emphasise its importance. 

 This paragraph has a bold word in it because it is very important.

The distinction between and is the level of importance each one contains. Semantically speaking, you should use the tag if you tend to add important text. But, if it’s a matter of semi-styling, which infers it’s only about making the text bold, then we use the tag.

Note that experts recommend using over . It does matter for visually impaired people. Keep that in mind!

3. Italics

We use tags to make texts italic. This tag stands for italics . 

 This paragraph has an italicized word .

We can use tags to make texts italics. It stands for definition element . As the name suggests, it defines an element. 

 This paragraph has a definition element in it because it is defining a term.  
HTML stands for HyperText Markup Language.

The distinction between and is what kind of representation you are trying to associate with each one of them. We use when you want to define a term whilst using only makes a text italic in the strict sense of the word. Both and make text italic though.

We can use to make texts italic, too. This tag stands for emphasise . You should use this tag if and only if you want to emphasise something. 

 This paragraph has a word in italics.

Note that experts recommend using over . It does matter for visually impaired people. Keep that in mind, too!

4. Underline

We use tags to underline a text. The tag stands for underline . 

 This paragraph has an underlined word in it.

We use tags to underline a specific text. This tag stands for insert . We use this tag only when it comes to inserting a new piece of information that did not exist before. 

 This paragraph has an underlined word in it.

5. Strikethrough

We use tags to strike a text through . This tag stands for strikethrough . 

 This paragraph has a crossed word in it.

We use tags to strike a text through , too. This tag stands for delete . 

 This paragraph has a crossed and deleted content in it.

The distinction between both of them, we use tags when we want to showcase that a piece of information that might be unnecessary. It doesn’t mean it has been deleted permanently. However, using tags implies that this piece of information has been literally deleted.

6. Highlighting Texts

We use tags to highlight a text. This tag highlights the text as it uses the yellow colour. 

 This paragraph has a highlighted word in it.

7. Small Texts

We use tags to make a text smaller than its usual size. 

 This paragraph has a small word in it.

8. Subscript Texts

We use tags to make a text lower and smaller than the main text. This tag stands for subscript .

9. Superscript Texts

We use tags to make a text higher and smaller than the main text. This tag stands for superscript .

10. Program Output

We use tags to declare that the text is an output from a computer program. It stands for sample . The first you will notice is the font of the text enclosed between this tag changes into monotype .

11. Keyboard Keys

We use tags to enclose keys that belong to a keyboard. 

 Press Ctrl + C to copy a text

12. Variables

We use tags to enclose mathematical variables. 

 look at this equation x = y * 30

Thank you for your attention. There is more to it. That is why updating regularly would be necessary.

For more, follow me on Instagram @cesarcode.init

Источник

HTML Text Formatting

HTML contains several elements for defining text with a special meaning.

Example

This is subscript and superscript

HTML Formatting Elements

Formatting elements were designed to display special types of text:

  • — Bold text
  • — Important text
  • — Italic text
  • — Emphasized text
  • — Marked text
  • — Smaller text
  • — Deleted text
  • — Inserted text
  • — Subscript text
  • — Superscript text

HTML and Elements

The HTML element defines bold text, without any extra importance.

Example

The HTML element defines text with strong importance. The content inside is typically displayed in bold.

Example

HTML and Elements

The HTML element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.

Tip: The tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.

Example

The HTML element defines emphasized text. The content inside is typically displayed in italic.

Tip: A screen reader will pronounce the words in with an emphasis, using verbal stress.

Example

HTML Element

The HTML element defines smaller text:

Example

HTML Element

The HTML element defines text that should be marked or highlighted:

Example

Do not forget to buy milk today.

HTML Element

The HTML element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text:

Example

My favorite color is blue red.

HTML Element

The HTML element defines a text that has been inserted into a document. Browsers will usually underline inserted text:

Example

HTML Element

The HTML element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:

Example

HTML Element

The HTML element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW [1] :

Example

This is superscripted text.

HTML Exercises

HTML Text Formatting Elements

Tag Description
Defines bold text
Defines emphasized text
Defines a part of text in an alternate voice or mood
Defines smaller text
Defines important text
Defines subscripted text
Defines superscripted text
Defines inserted text
Defines deleted text
Defines marked/highlighted text

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник

Text Formatting Tags in HTML with Examples

Text Formatting Tags in HTML with Examples HTML Formatting is the process of formatting text to improve its appearance and feel. HTML allows us to format text without using CSS. HTML contains numerous formatting tags, which we will cover today. Text can be bolded, italicised, or underlined using these tags. Formatting elements were designed to display special types of text. Here, we are going to learn 14 HTML formatting tags. All of the HTML formatting elements are listed below.

Bold and Strong

Making Text Bold or Strong: The tag can be used to make text bold or strong. Both opening and closing tags are used in the tag. The text that needs to be bolded must be enclosed by the and tags. We can also use the tag to emphasise the text’s semantic importance. It also begins with the tag and ends with the tag. 

  Welcome fellow Frontend Developers!
   
This is an important content , and this is just normal content

Italic and Emphasis

Italicising or emphasising text: To italicise the text, use the tag. It begins with the tag and ends with the tag. The tag is used to emphasise text with additional semantic significance. It begins with the tag and ends with the tag. 

  The term Front end describes all the parts of a website that can be seen and interacted with by users. Front end web development usually involves coding with HTML, CSS, and JavaScript.  Get out of bed now ! And start coding

Highlighting Text

Highlighting text: The tag can also be used to mark or highlight text in HTML. It has a opening tag and a closing tag. 

  Do not forget to comment your code.

Teletype Text

The element was used to identify text to be displayed using the browser’s default monospace or fixed-width font as it would appear on a fixed-width device such as a teletype. This element has been deprecated and the element is an appropriate modern replacement for . 

  
Who is old enough to remember teletype?

Underline and Strike

The tag in HTML stands for underline, and it’s used to underline the text enclosed within the tag. This tag is generally used to underline misspelled words. This tag requires a starting as well as ending tag. Warning: In older versions of HTML, this element was known as the “Underline” element, and it is still sometimes used in this manner. Instead, use a style that includes the CSS text-decoration property set to underline to underline text. The tag defines a strike or line through Text. This tag creates a cut line in the text. This tag is depreciated from HTML5. Now, the tag is used instead of this tag. 

  This is some misspelled text.  Invest in your potential. Develop skills for as low as £24.99 £14.99 — today only!

Big and Small

Making text larger: If you want to put your font size larger than the rest of the text then put the content within . . It increase one font size larger than the previous one. Making text smaller: The is used to make the text smaller. The text that needs to be displayed smaller should be written inside . tags. 

  This is the first sentence. This whole sentence is in bigger letters.   This is the first sentence. This whole sentence is in small letters.

Delete and Insert

Striking through the text: The element is used to strike through the text marking the part as deleted. It also has an opening and a closing tag.
Adding a text: The element is used to underline a text marking the part as inserted or added. It also has an opening and a closing tag. 

  My favourite code editor is Sublime Text VS Code !

Subscript and Superscript

Making a text Subscript or Superscript: The element is used to superscript a text and the element is used to subscript a text. They both have an opening and a closing tag. 

  Make sure to drink plenty of H 2 O whilst working on your coding skills.  The world's most famous equation: E = mc 2

Conclusion

  • – Bold text
  • – Important text
  • – Italic text
  • – Emphasised text
  • – Marked text
  • – Teletype text (Not Supported in HTML5)
  • – Underline text
  • – Draw a strikethrough a section of text (Not Supported in HTML5)
  • – Increase font size by one conventional unit (Not Supported in HTML5)
  • – Decrease font size by one unit from the base font size
  • – Deleted text
  • – Inserted text
  • – Subscript text
  • – Superscript text

I hope you find these HTML formatting elements useful in making your next web page more appealing.

Further reading

Explore some other interesting HTML5 elements; over on MDN Web Docs – HTML elements reference – HTML: HyperText Markup Language | MDN.

See also

If you liked this article, then please share. You can also find me on Twitter for more updates.

Источник

Читайте также:  Изменение формата файла python
Оцените статью
© 2023 Программирование