USE OF HEADING AND PRARAGRAPHS IN HTML

 Headings


Headings are used to add titles to sections of a page. HTML defines six levels of head ings. Heading tags look like the following: <h1>Installing Your Satetee Lock</h1>

The numbers indicate heading levels (h: through h6). The headings, when they're dis played, aren't numbered. They're displayed in larger and bolder text so that they stand out from regular text.

Think of the headings as items in an outline. If the text you're writing is structured, use the headings to express that structure, as shown in the following code:

<hl>Movies</hl>

<h2>Action/Adventure</h2>

<h3>Caper</h3>

<h3>Sports</h3>

<h3>Thriller</h3>

<h3>War</h3>

<h2>Comedy</h2>

<h3>Romantic Comedy</h3>

<h3>Slapatick</h3>

<h2>Drama</h2>

<h3>Buddy Movies</h3>

<h3>Mystery</h3>

<h3>Romance</h3>

<h2>Horror</h2>

Notice that I've indented the headings in this example to better show the hierarchy. They don't have to be indented in your page; in fact, the browser ignores the indenting.


_________________________________TIP__________________________________

Even though the browser ignores any indenting you include in your code, you will probably find it useful to indent your code so that it's easier to read. You'll find that any lengthy examples in this book are indented for that reason, and you'll probably want to carry that convention over to your own HTML code.

_________________________________________________________________________________  


Unlike titles, headings can be any length, spanning many lines of text. Because headings are emphasized, however, having many lines of emphasized text might be tiring to read. A common practice is to use a first-level heading at the top of your page to either duplicate the title or to provide a shorter or less context-specific form of the title. If you have a page that shows several examples of folding bed sheets-- for example, part of a long presentation on how to fold bedsheets--the title might look something like the following:


<title>How to fold sheets: some examples</title>

The topmost heading, however, might just be as follows:

<h1>Examples</h1>



CAUTION

Don't use headings to display text in boldface type or to make certain parts of your pages stand out more. Although the result might look as you intend, the markup will not represent the structure of your page. This comes into play for search engines, accessibility, and some browsers.

<h1>Mythology thorugh the ages</h1>

<h2>Comman Mythological themes</h2>

<h2>Earliest known Myths</h2>

<h2>Origins of Mythology</h2>

<h3>Mesopotamian Mythology</h3>

<h3>Egyptian Mythology</h3>

<h4>The story of isis and Osiris</h4>

<h4>Horus and set : The battle of good vs. evil</h4>

<h4>The Twelve Hours of Underworld</h4>

<h4>The River Styx</h4>

<h2>History in Myth</h2>



   PARAGRAPHS

Now that you have a page title and several headings, you can add some ordinary paragraphs to the page.

Paragraphs are created using <p> tag. The Enigern story should look like this:

<p>Slowly and delebirately, Enigern approached the mighty dragon. A rustle in the trees of the nearby forest distracted his attention for a brief moment, a near fatal mistake for the brave Knight.</P>

<p>The draghon lunged at  him, searing Enegern's armor  with a rapid blast of fiery. Enigern fell to the ground  as the dragon hovered over him. He quickly drew his sword and thrust it into the dragon's chest.</p>

What if you want more (or less) space between your paragraphs than the browser pro vides by default? The answer is to use CSS. As you'll see, it provides fine control over the spacing of elements on the page, among other things. The paragraph breaks are added between the closing and opening <p> tags in the text.


Input 

<p>The dragon fell to the ground, releasing an anguished cry and seething in pain. The thrust of Enigern's sword proved fatal as the dragon breathed its last breath. Now Enigern was free to release Lady Aelfleada from her imprisonment in the dragon's lair. </p>




STAY CONNECTED FOR UPCOMINGG UPDATES...


Post a Comment

Previous Post Next Post