Format text in html page

How to Format Text in HTML?

HTML is nothing but a markup language using tags. You can use different HTML formatting tags to format content on the web page. The text content on a webpage can be marked up with two techniques:

• Structural Markup – using heading and paragraph tags
• Semantic Markup – using bold, strong, underline, etc.

Combining structural and semantic markups, you can showcase the text content in a more readable format for your users. Let us explain the markups in an more understandable manner.

Formatting it Differently

Markups are used to format the text content. Formatting the content is required in order to make a webpage look more understandable, legible and attractive. Formatting could be a logical or physical. The difference is that the logical formatting marks the text according to its meaning while physical styles indicate the specific appearance of a section.

Let’s take the example of and tags.

Create a simple HTML page with this – “This is emphasized text and this is italicized text” – in your text editor. See what it looks like on your browser.

This is emphasized text and this is italicized text .

It looks absolutely the same, doesn’t it!? Then what is the fundamental of having both logical styles and physical styles? Read on further…

It’s Quite Logical – HTML Formatting

A logical tag gives some kind of indication about the content but does not dictate the presentation. For e.g. there is a level 1 heading i.e. – this indicates the highest level heading in the page. However it does not specify whether this should be Arial or Times New Roman, 20 pt or 24 pt. So if you wanted to change the presentation of all H1 tags, you could just change its definition (This can be done by using stylesheets).

Another advantage of logical tags is that they help enforce consistency in your documents. For example, consider the tag. Most browsers render it in bold text. What if you wanted to also have it underlined? Logical styles offer the flexibility of changing the display attributes while making minimum changes to code.

The Physical – HTML Formatting

Logical tags seem to be doing a good job! Then what is the role of physical tags? If you do not want the browser to display the content in any other way than what is in your mind, use physical tags. For e.g. will always display the content in italics, will always display it in bold and so on.

It is however advisable to stick to one kind of tags i.e. physical or logical throughout the document and not mix them up!

Let’s Spice it up a Little with Tag

The tag is a physical one that describes the display attributes of the text inside. Paste this line in your editor and see what it looks like on the browser.

 Is this comical and red and big? 

Is this comical and red and big?

Note: In HTML4, we can use font size attribute to specify the size within HTML. But the “size” attribute for the fonts is not supported in HTML 5. Hence, we have used inline style to make the font size larger to 30px.

Hey, the font is not Comic Sans MS. Let’s make this change and see now.

 Is this comical and red and big? 

Is this comical and red and big?

This is fine!! Oh that means that if the font face is not specified correctly, the text will be displayed in the default font. So as a security measure, what can we do? Try this out!

 Is this comical and red and big? 

If the first specified font is not available on the client machine, the next one from the list is picked up. Now change it to:

 Is this comical and red and big? 

Oh!, that means that there can be standard colors as well as customized ones by using the #RRGGBB values! This RRGGBB attribute can take hexadecimal values between 000000 and FFFFFF – one byte each for each primary color.

Note: It is highly recommended to control the style of elements using CSS centrally though you can control it through HTML.

Basic Formatting Tags in HTML

Below are some of the HTML tags used in basic typography:

Opening Tag	Closing Tag	Description
Level 1 Heading
Level 2 Heading
Level 3 Heading
Level 4 Heading
Level 5 Heading
Level 6 Heading
Paragraph
Block Quote
Emphasize
Strong
	Line Break
	Horizontal Line
Italic
Superscript
Subscript
Bold
Abbreviation or Acronym
Reference
Defining first instance of a term
Address Details
Inserted Content
Deleted Content
Strikethrough

Example:

Finally let us conclude this chapter with a full length example:

The paragraph starts here. This is a strikethrough content to be deleted but kept for reference. Here is a and here is a deleted content .

This example is made with reference to WebNots and move the cursor here on HTML to see the abbreviation of HTML.

WebNots

Complete HTML Tutorial (Index)

• Chapter 1: Creating a Simple Webpage
• Chapter 2: Using Formatting Tags
• Chapter 3: Creating Listed Content
• Chapter 4: Creating and Customizing Tables
• Chapter 5: Linking Text
• Chapter 6: Email Links

• Chapter 7: Image Maps
• Chapter 8: Using Images in HTML
• Chapter 9 : Creating HTML Forms
• Chapter 10: HTML Frames
• Chapter 11: Embedding Media in HTML5
• Chapter 12: HTML5 Tag Reference

Источник

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.

Источник

HTML Tags for Text Formatting

In HTML, a number of elements are used to format text. The formatting tags are divided into two groups: physical tags, that are used to style the text (visual appearance of the text) and logical or semantic tags that add semantic value to the text parts (e. g., inform search engines for which keywords a web page should be ranked).

Let’s dive deeper and talk about formatting tags in details.

The — Tags

The — tags are used to define HTML headings. There are 6 levels of headings in HTML, the defines the most and the least important headings.

Example of the HTML — tags:

html> html> head> title>Title of the document title> head> body> h1>This is heading 1 h1> h2>This is heading 2 h2> h3>This is heading 3 h3> h4>This is heading 4 h4> h5>This is heading 5 h5> h6>This is heading 6 h6> body> html>

Result

The and Tags

Example of the HTML and tags:

html> html> head> title>Title of the document title> head> body> p>We use the <strong> tag to highlight the importance strong> of this part of the text strong>. p> p>The <b> tag is a physical tag that stands for b>bold text b>. p> body> html>

The and Tags

Example of the HTML and tags:

html> html> body> p>This is a paragraph p> p>The important part of the text is defined em> in italic em>. p> p>i>Lorem ipsum i>, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. p> body> html>

html> html> head> title>Title of the document title> head> body> pre>Spaces and line breaks within this element are shown as typed. pre> body> html>

The Tag

Example of the HTML tag:

html> html> head> title>Title of the document title> head> body> p>Learn the HyperText Markup Language on mark>W3Docs.com mark>. p> body> html>

Result

The Tag

Example of the HTML tag:

html> html> head> title>Usage of the SMALL tag title> head> body> p>The interest rate is only 10%* p> small>* per day small> / body> html>

The and Tags

Example of the HTML tag:

html> html> head> title>Title of the document title> head> body> p> She likes del>violets del> snowdrops․ p> body> html>

Example of the HTML tag:

html> html> head> title>Title of the document title> head> body> p>s>I am studying in high school. s> p> p>I am studying in a university. p> body> html>

The content of both tags is displayed as strikethrough. However, despite the visual similarity, these tags cannot replace each other.

The and Tags

Example of the HTML tag:

html> html> head> title>Title of the document title> head> body> p>She likes del>violets del> ins>snowdrops ins>․ p> body> html>

Result

Example of the HTML tag:

html> html> head> title>Title of the document title> head> body> p>Here we used u>the <u> tag u>. p> body> html>

The and

Example of the HTML and tags:

html> html> head> title>Title of the document title> head> body> p>The formula of water is Hsub>2 sub>O, and the formula of alcohol is Csub>2 sub>Hsub>5 sub>ОН p> p>E = mcsup>2 sup>, where E — kinetic energy, m — mass, c — the speed of light. p> body> html>

Result

The Tag

Example of the HTML tag:

html> html> head> title>Title of the document title> head> body> p>dfn>HTML dfn> (HyperText Markup Language ) — The standardized markup language for documents on the World Wide Web. Most web pages contain a description of the markup in the language HTML p> body> html>

The

,
and

---

Tags

Example of the HTML

tag:

html> html> head> title>Title of the document title> head> body> p>The first paragraph p> p>The second paragraph p> body> html>

Example of the HTML
tag:

html> html> head> title>Title of the document. title> head> body> h1>How to use the <br> tag h1> p> We can insert the <br /> tag inside the paragraph, br /> to transfer a part of the text to another line if necessary. p> body> html>

Example of the HTML

---

tag:

html> html> head> title>Title of the document title> head> body> h1>Football h1> p>A team sport involving kicking a ball to score a goal. p> hr> h1>Basketball h1> p>A game that is played between two teams of five players. p> body> html>

Источник