Html Logical Styles

The logical styles of text are used to add a specific destination to a specific block of text.

Properties	Description
`<p>`	Paragraphs
`<h1><h2>`..`<h6>`	Headings
`<blockquote>` or `<q>`	Quotations elements
`<hr>`	Horizontal rules
`<center>`	The center element
`<div>` & `<span>`	Grouping Elements
`<pre>`	Pre-formatted text blocks
`<em>`,`<strong>`,`<dfn>`, `<code>`,`<samp>`,`<acronym>`, `<var>`,`<cite>`,`<abbr>`,`<kbd>`	Phrase Elements

<p> Paragraphs

The <p> tag defines a paragraph. Using this tag, we can split long text. A blank line above and below the text of the paragraph.

Syntax

<p align="center">..</p>

Note

- The <p> element can have an attribute called align, which is used to define the the alignment for the text of the paragraph. - The align attribute can have the values "left", "center", "right" or "justify". The default value is "left"

<h1><h2>..<h6> Headings

HTML allows you to add headings into a web page. Headings may look different on each browser.

There are six headings tag.

<h1>..</h1>
<h2>..</h2>
<h3>..</h3>
<h4>..</h4>
<h5>..</h5>
<h6>..</h6>

Example

<h3 align="left">Heading3</h3>

Note

-All headings should have the ending tag -All headings are rendered on a new line leaving an extra space after the previous block. -The align attribute can have the values "left", "center", "right" or "justify". The default value is "left"

<blockquote> Element

The <blockquote>..</blockquote> element is designed for inserting quotations into a web page.

The block-quote element adds extra white spaces before and after the element and on the left and on the right of the element.

<q> element

The <q>..</q> element is designed for in-line quotation. While rendering, the element does'nt start on the new line.

<hr> Horizontal Rules element

The HTML <hr> tag is used for creating a horizontal line. This is also called Horizontal Rule in HTML which makes distinction between different sections of a web page.

Attributes:

Attributes	Description
`align`	"`left`" \| " `center`" \| "`right`"
`width`	A positive integer (or) a positive integer between 1 and 100 followed by %; default is "100%"
`size`	The thickness of the rule in pixel; the default is 2
`noshade`	If present, the rule is flat rule. else a 3D rule with a shadow.
`color`	The default color is "black".

Note

*A horizontal rule tag <hr> does'nt require an ending tag. *A horizontal rule can have more than one attributes.

<center> element

The center element is used to center content (e.g. text, images, horizontal rules)

<div> element

There are two kind of elements in HTML.

Element Types	Description
Block level elements	Rendered starting on a new line (e.g. `<p>` or `<hr>`)
In-line elements	Rendered on same line (e.g. `<b>` or `<q>`)

The HTML <div> element is the most generic block-level element. This tag is used for defining a section of your document and also we can group large sections of HTML elements together. This element is best to attach a CSS to a section of a web page.

<span> element

The HTML <div> element is the most generic in-line element. This element is best to attach a CSS to a section of a web page.

The difference between the <div> tag and the <span> tag is that the <div> tag is used with block-level elements while the <span> tag is used with in-line elements.

The <span> tag has all the properties of the <div> tag except the align attribute as it is an in-line element.

<pre> element

The HTML <pre> Element (or HTML Preformatted Text) represents preformatted text. Text within this element is typically displayed exactly as it is laid out in the file. Whitespaces inside this element are displayed as typed.

The inserted HTML tags into a block of text will not be interpreted by the browser. Use < for the < character and > for the > character.

Phrase element

The phrase elements allow you to add a specific meaning to a section of the document. These phrase are rendered differently in different browsers.

Elements	Description
`<em>..</em>`	Rendered in the italic text style
`<strong>..<strong>`	Rendered in the bold text style.
`<dfn>..</dfn>`	To emphasize the first appearance of a concept.
`<code>..</code>`	To insert a fragment of computer program code; rendered in the monospace font style.
`<samp>..</samp>`	To insert the output of an application; rendered in the monospace font style.
`<kbd>..</kbd>`	To insert a computer command that the user should type; rendered in the monospace font style.
`<var>.. </var>`	To insert variables of a computer program; renderd in the italic font style.
`<cite>..</cite>`	To insert a reference to its source document; renderd in the italic text style.