Search within TutorialsPark

HTML Text


HTML Text can be marked up for all possible expressions used in day-to-day use..


Types of Text

Structural: Texts have a key impact on the overall structure of the Web Document. The structure of the page is disturbed if their positions are altered. Eg: Headings(<h1>) ,paragraphs (<p>).

Semantic:Texts have particular unique meaning associated with them. They are like syntax in a programming language,each having a definite meaning.Eg: bold(<b>) , italics(<i>) etc.


Headings.

1.HTML has six level of heading <h1> to <h6>. Each progressively smaller in size,with <h1> being most important and <h6> being least important.

2.They create a hierarchy of information, and are used to create headings for sections within the document.

3.Headings help create a structure and outline of the Document.Also,Search engines use headings(esp <h1> ) to get an idea about the content of the webpage and accordingly place them in search results.

Example:Headings <h1> to <h6>.

Give it a TRY! »

Note-Do not choose low level headings for font-size, instead follow the hierarchy and use CSS font-size properties.


Paragraphs.

1.Paragraphs are very extensively used to represent a block of text or a single idea or point.

2.Each paragraph is displayed on a new line, only a single whitespace is a recognised between two words. Multiple whitespaces are collapsed into a single one.

Example:paragraph element <p> .

Give it a TRY! »

Note-All browsers show some whitespaces between consecutive paragraphs. Use CSS styles to control the appearance of paragraphs.

Bold - Italics

1.HTML element <b> makes the encapsulated text appear in bold,styling the text span a bit different from the surrounding text but conveys no additional meaning.

2.Element <i> makes the encapsulated text appear in italics.It is used to represent technical terms terms, foreign text even thoughts(but not quotes).

Example:Bold <b> and Italics <i>.

Give it a TRY! »

Note-Both <b> and <i> have a semantic value, do not use them for purely cosmetic purposes.Instead use CSS font-style property.

Superscript <sup> and Subscript <sub>

1.Superscript element <sup> makes the encapsulated text appear as a superscript(i.e text is slightly raised relative to main body text). Used to denote trademark symbols ®, copyrights© , mathematical exressions.

2.Subscript element <sub> makes the encapsulated text appear as a subscript(i.e text is slightly lowered relative to the main body text).Used for chemical formulae,notations and footnotes.

Example:Superscript and Subscript

Give it a TRY! »

Note-Superscript and subscript may disturb the line spacing in some browsers.

Showing Inaccuracies and Correction

1. Sometime you may have to show edits on webpage,the <ins> element is used to show content that has been added.

2. The <del> element marks the content that has been removed,you can also use the cite attribute to indicate a link to the URL explaining why the edit was made.

3. The element <s> is used to show inaccurate or no longer correct text.Its upto the user to determine what's appropriate for the webpage.

Example: <del> <ins> and <s> element.

Give it a TRY! »

Note- Use <del> ,<ins> and <s> for semantic value only, for cosmetic text strikethrough use CSS


Related Examples

Related Tags