New Posts
Home / Web Designing / HTML / How to Format HTML Page Contents.  

How to Format HTML Page Contents.  

How to Format HTML Page Contents.

In this article, we will learn How to Format HTML Page Contents. The first major formatting HTML element group we can take a look those are the headings.

Format HTML

Headings are used to structuring the pages and determine contents hierarchy.

Using headings (H1 To H6).

Use strategy when you plan about headings. Use it level base/you should use order.

Heading can be used through CSS.

<! doctype html>

  <head>

  <title>How to Format HTML Page Contents.</title>

  </head>

 <body>

  <h1>A Complete HTML Tutorial.</h1>

    <h2>How to Format HTML Page Contents.</h2>

  <p> The Headings help to define the structure of the page and control the hierarchy of the content.    <p>

   <h3> Six Level of Headings are used in HTML.</h3>

   <h1>Heading 1</h1>

   <h2>Heading 2</h2>

   <h3>Heading 3</h3>

   <h4>Heading 4</h4>

   <h5>Heading 5</h5>

   <h6>Heading 6</h6>

     </body>

</html>

Formatting Paragraphs.

<p> means Paragraph. This tag is used for Paragraph.

Vertical space between the paragraphs.

The blank line or empty space.

Because all HTML elements have both top and bottom margins. The vertical margin in CSS collapse. That means is it gets 20 margin bottoms and at top 20 margins but you will not get correct result I mean you will not see 40 margins.

Another last thing about paragraph is that closing </p> is optional but for new web-designer use closing </p> tag.

<! doctype html>

<head>

<title>How to Format HTML Page Contents. </title>

</head>

<body>

<h1>A Complete HTML Tutorial. </h1>

<h2>How to Format HTML Page Contents. </h2>

<p> we’ll explore how to use HTML elements to format basic page content.</p>

<h3>Adding headings</h3>

<p> You can use heading values ranging from a top-level heading of h1 all the way down to an h6. It’s also important to be reliable in how you use headings across your sitep.

<h3>Using paragraphs</h3>

<p>The paragraph tag (&lang;p&rang;) is one of the most basic formatting tags, and one that you’ll use often. It indicates a paragraph of text, and should be used for each individual paragraph.</p>

<h3><U>Note: More paragraph options can be used with CSS.</U></H3>

</body>

</html>

Controlling Line Breaks.

To insert line break among the text.

<!doctype html>

<head>

<title>How to Format HTML Page Contents.</title>

</head>

<body>

<h1>A Complete HTML Tutorial. </h1>

<h2>How to Format HTML Page Contents.</h2>

<h3> Controlling line breaks

</h3>

<body>

<p>

I learn web-designing at IT Track <br>institute of computer education. In this paragraph <br> we

would see the examples of line break </p>

</body>

</html>

Emphasizing Text.

Often when formatting the document, you need to emphasize the contents in a specific manner.

B bold.

Strong means strongly say something.

I italic.

Em emphasized.

U means underline.

<!doctype html>

<head>

<title>Formatting page content</title>

</head>

<body>

<h1>A Complete HTML Tutorial. </h1>

<h2>How to Format HTML Page Contents.</h2>

h3>Emphasizing text</h3>

<p>Often you will want to emphasize a particular phrase or word within your text. HTML gives you several different tags to do this with. In this exercise, we’ll explore the four most common formatting tags you’ll use to emphasize content. </p>

<h3>The Bold Tag</h3>

<p>The <b> bold</b> tag mean to represent a span of text that you wish to set apart stylistically from the rest of the text without inferring any type of special relevance or meaning. It was removed in XHTML as being solely presentational but added back to HTML5. As you would expect, browsers typically bold this text</p>

<h3> The strong Tag</h3>

<p>The text should be considered to be more <strong>important</strong> than the text surrounding it. It is typically displayed as bold</p>

<h3>The Italic Tag</h3>

<p>Like the bold tag, the <i> italic tag </i>represents a string of text that is set apart stylistically from the text around it. No particular meaning is attached to the text, rather it is rendered in italics. Helpful for phrases, terms, or any text that is normally displayed in italics.</p>

<h3>The Emphasis Tag</h3>

<p>The <em>emphasis tag</em> or “em” tag, denotes text that is emphasized more than the text around it. Although this tag is usually rendered in italics, it shouldn’t be used in place of the italics tag, rather it should be used for text that needs to emphasized for some reason.</dd>

</p>

<h3>Wait…. what? </h3>

<p>You’re probably wondering why there are multiple tags for bolding and italicizing text. If you are, don’t worry, you’re not alone! This is one of the most confusing aspects of learning HTML. The easiest way for me to explain it is this: One set of tags is presentational, while the other is logical. What that means is that presentational text doesn’t convey explicit meaning, it merely serves to change the styling of the text. Logical elements however do convey a specific meaning. Text that is either bold or italic are just that, bold or italic. Text that is represented with a strong or em tag can represent multiple states. Using styles, for example, you could change it so that the text is underlined or highlighted. By contrast, it wouldn’t make much sense to change the styling of a bold or italic element, since they are represented exactly as intended.</p>

<p>There are other elements you’ll need to research when learning about emphasizing text as well. The cite tag for example, is used for citing a work such as a book title, or an author, and is usually displayed as italicized text.</p>

</body>

</html>

Displaying Special Characters.

Sometimes you want to use characters or symbols, which are not available on your keyboard. What’s more you might want to use actually reserved for use of HTML.

Certain characters are reserved for HTML, meaning that you aren’t allowed to use them in regular content. You have to use a left angle bracket like this  in your code can cause rendering issues in certain situations. Other characters are special characters or symbols that might not be available through the keyboard, or are used by other languages. To represent those characters in normal text, you can use what are known as named character entities.

These are special codes that the browser or user agent will then replace with the requested character. The syntax for them is relatively straightforward. You start with an ampersand, for example, you would type in &amp;amp;. This can be extremely helpful when displaying &copy; and &trade; symbols, or writing mathematical formulas.</p>

<!doctype html>

<head>

<title>How to Format HTML Page Contents.</title>

</head>

<body>

<h1>A Complete HTML Tutorial. </h1>

<h2>How to Format HTML Page Contents.</h2>

<p>In this series of exercises, we’ll discover how to use HTML elements .</p>

<h3>Displaying special characters</h3>

<p>Certain characters are reserved for HTML, meaning that you aren’t allowed to use them in regular content. You have to use a left angle bracket like this “&lang;” in your code can cause rendering issues in certain situations. Other characters are special characters or symbols that might not be available through the keyboard, or are used by other languages. To represent those characters in normal text, you can use what are known as named character entities. </p>

<p>These are special codes that the browser or user agent will then replace with the requested character. The syntax for them is relatively straightforward. You start with an ampersand (&amp;) followed by the named entity that is then followed by a semicolon. To display an ampersand, for example, you would type in &amp;amp;. This can be extremely helpful when displaying &copy; and &trade; symbols, or writing mathematical formulas.</p>

<p>You can find a very thorough list of named character entities on <a href=”http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references”>Wikipedia</a>.</p>

</body>

</html>

Controlling White space.

As you first start authoring HTML, you probably notice what’s seems to be really critious serious carious    behaviors among the browsers regarding use of white space. You see no matter how much white space you put in your contents . your browser is going to your first part ignore everything after the first space character.

By default, browsers will ignore any white space after the first space. To add additional white space, you must use entity.

<!doctype html>

<head>

<title>How to Format HTML Page Contents.</title>

</head>

<body>

<h1>A Complete HTML Tutorial. </h1>

<h2> Controlling whitespace</h2>

<p>In this series of exercises, we’ll explore how to use HTML elements to format basic page content.</p>

<h3>Controlling white space</h3>

<p>By default, browsers will ignore any white space after the first space. To add additional white space, you must use the &amp; &nbsp; entity.</p>

<p>Try it here. &nbsp;&nbsp;&nbsp; Add as much white space as you want here.</p>

</body>

</html>

Validation.

Validate your HTML page.

You can validate your document. Validate means check.

validator site

validation options

<!DOCTYPE html>

<html>

<head>

<title>Valid HTML</title>

</head>

<body>

This is some simple text. We are going to validate this HTML file.

</body>

</html>

Highlighting Text with Mark.

HTML provides new inline element which is called mark for highlighting text.

<!DOCTYPEhtml>

<head>

<title>

Highlighting text with mark

</title>

</head>

<body>

<h1>

HTML Mark

</h1>

<p>

I learn web-designing at <mark>IT Track computer Training Center.</mark> in this paragraph <br><br> we

would see the example of line break </p>

</body>

</html>

Using Quotations and Quote Marks.

Quotations mark can off course can be added from keyboard but smaller quotes available using the key element .

<!doctype html>

<head>

<title>

HTML quotationsand quote marks

</title>

</head><body>

<h1>

HTML Quotes

</h1>

<p>

I learn web-designing at <q>IT Track computer Training Center.</q> In this paragraph we

would see the example quote.

<blockquote>

I learn web-designing at IT Track computer Training Center. In this paragraph we

would see the example quote.

</blockquote>

</body>

</html>

Exploring Preformatted Text.

The pre tag can be used to display formatted text in HTML, with pre tag you can see the text in browser as it. I mean no any changing.

<!doctype html>

<head>

<title>

Preformatted1 Text Example

</title>

</head>

<body>

<pre>

This text is

preformatted

and should  be

displayed in a

particular way

and shape without any

reformatting

by

the

browser.

The

format

is the

poetry.</pre></body></html>

Forcing Text Direction.

English is left to right language. In forcing text direction we will learn how to change the direction of text.

<!doctype html>

<head>

<title>

Forcing text direction

</title>

</head><body>

<h1>

HTML Quotes

</h1>

<p>

I learn web-designing at <bdodir=”rtl” >IT Track computer Training Center.</bdo>In this paragraph we

would see the example quote.

</body>

</html>

Using Font Markup Elements.

Sometimes you need to tell the browser to render something certain a way can use off course CSS often is the best choice.

HTML does, however, provide a few simple font markup elements. Cases you were just need something simple.

<!doctype html>

<head>

<title>

Font Markup Elements

</title>

</head>

<body>

<h1>

Font Markup Elements

</h1>

<p><b> Bold </b></p>

<p><i> Italic </i></p>

<p><u> Underline </u></p>

<p>This is a <sub> subscript </sub></p>

<p>This is a <sup> superscript </sup></p>

<p>This is <small> small </small></p>

<p><s> Strikeout </s></p>

<p><del> Delete </del></p></body></html>

Word-Break Opportunities.

Suggesting word-break opportunities (;shy short hyphen)(wbr: word breaking it will not

HTML provides two types of techniques for breaking words.

Short hyphen.

Wbr tag.

<!doctype html>

<head>

<title>

show hyphen in web browser

</title>

</head><body>

<h1>

Word Breaking

</h1>

<p>

I learn web-designing at ITTrackomputerTrainingCenter. ITTrackomputerTrainingCenterIn this paragraph we

would see the example quote.</p>

<p>

I learn web-designing at IT &shy;Track&shy;computer&shy;Training&shy;Center.  this paragraph we

would see the example quote.</p>

I learn web-designing at IT <wbr/>Track<wbr/>computer<wbr/>Training<wbr/>Center.  this paragraph we

would see the example quote.</p>

</body>

</html>

Suggesting word-break opportunities (;shy short hypen)(wbr: wod breaking it will not

Displaying Characters with References.

<!doctype html>

<head>

<title>

HTML Character References

</title>

</head>

<body>

<h1>

HTML Character References

</h1>

<p>

Using character references I can display HTML tags like this:

</p>

<code>&lt; &gt; Content goes here. &lt;/p&gt; </code>

</p><p>

Many other interesting characters are available:

</p>

&aacute; &agrave; &abreve; &AElig; &aelig; &approx; &approxeq;

&alpha; &beta; &delta; &gamma; &ohm; &mu;

<br/>

&copy; &reg; &para; &commat; &dollar; &cent; &euro; &male; &female; &ofcir; &vartheta;

<br/>

&Ascr; &Bscr; &Cscr; &Dscr; &Escr; &Fscr; &Gscr; &hellip; &Xscr; &Yscr; &Zscr;

</p>

</body>

</html>

Output will be.

HTML Character References

Using character references I can display HTML tags like this:

< > Content goes here. </p> Many other interesting characters are available:

á à &abreve; Æ æ &approx; &approxeq; α β δ γ &ohm; μ
© ® ¶ &commat; &dollar; ¢ € &male; &female; &ofcir; &vartheta;
&Ascr; &Bscr; &Cscr; &Dscr; &Escr; &Fscr; &Gscr; … &Xscr; &Yscr; &Zscr;

Character References.

Character References

Using Character Entities resource

Using Character Entities for Special Characters.

Note: Entity names are case sensitive!

Research/Check character named entity at numbers of web browsers some browser shows another way.

 

 

About imran

My Name Mohammad Ramzan Bhutto. Live in District Jacobabad, Sindh, Pakistan. I have started blogging on Information Technology, my selected areas are Online Business, Digital Marketing, Make Money Online.

Check Also

External Style Sheet

How to Use External Style Sheet. 

How to Use External Style Sheet. An External style sheet is simply texting files with …