HTML

Quotation and Citation Elements in HTML

January 17, 2023 No comments 0

In HTML, there are multiple elements that are used for Quotation and Citation and these are:

<blockquote>
<q>
<abbr>
<address>
<cite>
<bdo>

HTML <blockquote> Element

The <blockquote> tag in HTML is used to indicate a section of text that is quoted from another source. The text within the <blockquote> tags will be indented and typically displayed in a slightly different style to set it apart from the rest of the document. The <blockquote> tag should include a source citation using the cite attribute and the footer tag.

Example:

<p>Quote for the day:</p>
<blockquote cite="https://en.wikipedia.org/wiki/Steve_Jobs">
   <p>Innovation distinguishes between a leader and a follower.</p>
</blockquote>

Output:

HTML <q> Element

The <q> tag in HTML is used to define smaller quotations and it is displayed by quotation marks around the quote.

Example:

<p>Quote for the day:</p>
<p><q>Programming is like any other sport.</q></p>

Output:

HTML <abbr> Element.

The <abbr> tag in HTML is used to indicate an abbreviation or acronym. The tag should include the full form of the term in the title attribute, which will be displayed as a tooltip when a user hovers over the abbreviation.

Example:

<p>The <abbr title="World Wide Web">WWW</abbr> was invented in 1989.</p>

Output:

The WWW was invented in 1989.

In this example, "WWW" is the abbreviation, and "World Wide Web" is the full form of the term. When a user hovers their cursor over the "WWW" it will show the full form of "World Wide Web"

HTML <address> Element

The <address> tag is used to provide contact information for the document or the nearest article or section. It typically contains information such as the author's name, email address, and physical address.

The text within the <address> tag is typically rendered in italics by web browsers. The <address> tag should be used within the <body> section of an HTML document and can be placed anywhere within the document. (alert-passed)

Example:

<body>
    <address>
      Written by Mohan Dev.<br />
      Visit us at:<br />
      Example.com<br />
      Box 564, Delhi<br />
      INDIA
    </address>
</body>

Output:

HTML <cite> Element

The <cite> tag is used to indicate the title of a creative work, such as a book, poem, play, song, movie, or painting. It is typically used to cite the source of a quote or reference in an HTML document.

The text within the <cite> tag is typically rendered in italics by web browsers. The <cite> tag should be used within the <body> section of an HTML document.

Example:

<p>As Shakespeare wrote in his play <cite>Hamlet</cite>, "To be or not to be, that is the question."</p>

Output:

HTML <bdo> Element

The <bdo> (bidirectional override) tag is used to change the direction of the text display. It is used to override the default bidirectional behavior of text, which is determined by the Unicode bidirectional algorithm.

The dir attribute is used to specify the direction of the text and can have values of "ltr" (left-to-right) or "rtl" (right-to-left). The text within the <bdo> tag will be displayed in the specified direction, regardless of the surrounding text.

Example:

<p>This text is left-to-right: <bdo dir="ltr">Hello World!</bdo></p>
<p>This text is right-to-left: <bdo dir="rtl">Hello World!</bdo></p>

Output:

HTML

Formatting in HTML

Probin Kumar Sah

January 15, 2023 No comments 0

Formatting in HTML refers to the process of arranging and styling text and other content on a webpage. HTML provides a number of tags and attributes that can be used to format text, including headings, paragraphs, lists, and more.

One of the most basic formatting tags in HTML is the <p> tag, which is used to create paragraphs of text. The p tag automatically adds a line break before and after the text, creating a distinct block of text.

<p>This is a paragraph text</p>
<p>This is another paragraph text</p>

List of Formatting Elements:

<br/>: Line break.
<b>: Bold text
<strong>: Important text
<i>: Italic text
<u>: unarticulated text
<em>: Emphasized text
<mark>: Marked text
<small>: Smaller text
<del>: Deleted text
<ins>: Inserted text
<sub>: Subscript text
<sup>: Superscript text

HTML <br/> Element.

The <br/ > element is used to insert a single-line break and mainly use for writing addresses or poems.

Example:

<p>This is paragraph for showing example of <br /> line break.</p>

Output:

HTML <b> and <strong> Element.

Both are used to define bold text where <b> element is used to define bold text without importance and <strong> element is used to define bold text with greater importance.

Example:

<p>This is simple text</p>
<p><b>This is a bold text</b></p>
<p><strong>This is a bold and important text</strong></p>

Output:

HTML <i>, <u> and <em> Elements.

The <i> tag in HTML is used to represent a portion of text in italic. It is used to show voice, technical terms, or part of the text written in another language.

Example:

<p>This is a simple paragraph</p>
<p><i>This is an italic text</i></p>

Output:

The <u> tag in HTML stands for underline and is used to underline the text. It is generally used to underline misspelled words in a paragraph.

Example:

<p>This is a <u>simple</u> paragraph</p>

Output:

The <em> tag in HTML stands for emphasized text and the content inside this is displayed in italic font.

Example:

<p>This is an simple paragraph</p>
<p><em>This is an emphasized paragraph</em></p>

Output:

HTML <small> Element.

The <small> tag in HTML is used to define smaller text.

Example:

<p>This is a simple paragraph</p>
<p><small>This is smaller paragraph</small></p>

Output:

HTML <mark> Element

The <mark> HTML tag is used to highlight a portion of text.

Example:

<p>The speed limit of this road is <mark>40KM/hr</mark>.</p>

Output:

HTML <del> Element

The <del> tag in HTML is used to represent the portion of text that has been deleted.

Example:

<p>I love playing <del>cricket</del> football</p>

Output:

HTML <sub> Element

The <sub> tag in HTML is used to create subscript text, which is a text that is slightly smaller and appears slightly lower than the surrounding text. Subscript text is often used in mathematical or scientific equations to indicate a value or variable that is to be used as the base of power or index.

Example:

<p>This is an equation: x<sub>1</sub> + x<sub>2</sub> = x<sub>3</sub></p>

Output:

HTML <sup> Element

The <sup> tag in HTML is used to create superscript text, which is text that is slightly smaller and appears slightly higher than the surrounding text. Superscript text is often used in mathematical or scientific equations to indicate exponents, footnotes, or other similar uses.

Example:

<p>This is an equation: x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>

Output:

HTML

Styles in HTML

Probin Kumar Sah

January 15, 2023 No comments 0

The style attribute in HTML defines styling information for an HTML document like color, font, size, etc.

Syntax of HTML style attribute:

<tagname style="property:value;">

Styling of HTML elements is done by CSS properties which is totally a different topic to learn. (alert-passed)

Example: Background Color

The background-color is a CSS property that defines the background color of any HTML element.

<body style="background-color: grey">
    <h1 style="background-color: blueviolet">This is a h1 heading</h1>
    <p style="background-color: yellow">This a simple paragraph</p>
</body>

Output:

Example: Text Color and Font

The color property is used to define the text color of the HTML element.
The font-family property is used to define different fonts of the HTML element.

<h1 style="color: blueviolet">This is a h1 heading with color</h1>
<p style="font-family: sans-serif">This is an example of font family.</p>

Output:

Whatever example we have seen so far is known as inline CSS in which we have used style attribute inside HTML elements but it is not the recommended way of using CSS style properties.

Internal CSS Styles.

The <style> tag should be placed within the head section of the HTML document, and it can be used to apply CSS styles to specific elements in the document. It has two main attributes: type and media. The type attribute specifies the type of style sheet language being used, and it is typically set to "text/css".

Here is an example of how the style tag is used:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body {
        background-color: blue;
      }
      h1 {
        color: white;
      }
    </style>
  </head>
  <body>
    <h1>This is a h1 heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Output:

In this example, the <style> tag is used to set the background color of the <body> element to blue and the color of the <h1> element to white.

HTML

Paragraphs in HTML

Probin Kumar Sah

January 14, 2023 No comments 0

Paragraphs in HTML are used to separate and organize blocks of text on a webpage. The primary tag used for creating paragraphs in HTML is the <p> tag.

When creating a paragraph, the text is placed between the opening <p> tag and the closing </p> tag. For example, the following code creates a paragraph with the text "This is a paragraph":

<p>This is a paragraph</p>

It's important to note that the <p> tag is a block-level element, which means that it creates a new block formatting context. This means that by default, a new line will be added before and after the paragraph, creating a clear visual separation from other elements on the webpage.

Example:

<h1>This is a Heading</h1>
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>

Output:

White Space in HTML Paragraph.

Note: You cannot add extra spaces or extra newlines inside paragraph tags in HTML. While loading the page, the browser will automatically remove all extra spaces and lines from paragraphs.

Example:

<p>
   This is the first paragraph 
   I am writing multiple lines 
   in this paragraph.
</p>
<p>
   This is the second paragraph.
   I am adding      extra white space
   in this       paragraph.
</p>

Output:

If you want to add white spaces and line breaks to format the text based on your requirement then it is recommended to use the <pre> tag which is used to display preformatted text.

Example:

<pre>
     This is preformatted text. 
     I am adding      extra while 
     space in this paragraph.
</pre>

Output:

Use of <br> and <hr> tags in HTML.

In addition to the <p> tag, there are several other tags that can be used to format paragraphs, like:

<br /> tag, which creates a line break within a paragraph.
<hr /> tag, which is used to separate content with a horizontal line.

Example:

<p>
   This is a paragraph with a break <br />The next line of the paragraph is here.
</p>
<hr />
<p>
  This is another paragraph separated by a Horizontal line
</p>

Output:

When creating paragraphs, it's also important to use proper formattings, such as bold, italics, and underlining, to make the text more readable and visually appealing.

It's also important to use headings and subheadings to create a clear hierarchy of content on the webpage. This makes it easier for users to understand the content and navigate the webpage.

HTML

Headings in HTML

Probin Kumar Sah

January 14, 2023 No comments 0

Headings in HTML are used to create a hierarchical structure for the content on a webpage. They help users understand the organization of the content and can also be used by search engines to understand the content on a page.

HTML has six levels of headings, denoted by the <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> tags. The <h1> tag represents the highest level of heading, while the <h6> tag represents the lowest level.

Example:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Output:

The <h1> tag is typically used for the main heading of a webpage, and it should be used sparingly. Subsequent headings, such as <h2>, <h3>, and so on, are used to break up the content and create a clear hierarchy.

Important of Heading Tag.

It's important to note that the heading tags should be used in a logical and consistent manner throughout the webpage. Using heading tags randomly or skipping heading levels can create confusion for users and search engines.

Search engines use headings to understand the content on a page, and they assign more importance to headings than to regular text. As a result, it's important to use headings appropriately and to include keywords in headings whenever possible.

In addition to the heading tags, it's also important to use proper formattings, such as bold, italics, and underlining, to distinguish headings from the rest of the text.

Example:

<h1 style="font-family: sans-serif">Heading 1</h1>
<h2 style="font-style: italic">Heading 2</h2>

Output:

In conclusion, headings in HTML play an important role in organizing and structuring content on a webpage. They help users understand the content and make it more discoverable for search engines. Proper use of headings is essential for creating a clear, organized, and user-friendly webpage.

HTML

Attributes in HTML

Probin Kumar Sah

January 13, 2023 No comments 0

HTML (Hypertext Markup Language) is the standard language used to create web pages. One of the key components of HTML is attributes, which are used to provide additional information about an HTML element.

Attributes are added to the opening tag of an HTML element and have the following syntax: <tagname attribute="value">. For example, the "src" attribute is used to specify the source of an image in an "img" tag: <img src="image.jpg">.

There are many different attributes that can be used in HTML, and they serve different purposes. Some of the most commonly used attributes include:

The href attribute.

"href": This attribute is used to specify the URL (Uniform Resource Locator) of a link in an "a" tag.

Example:

<a href="https://www.algolesson.com">AlgoLesson</a>

Output:

The src attribute.

"src": This attribute is used to specify the source of an image or other media in an "img", "audio", or "video" tag. Here we have also used height and width attributes to specify the height and width of the media file.

Example:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <img src="WelcomeAlgoLesson.png" height="100" width="300" />
    <video src="AlgoLessonVideo.mp4" width="420" height="240" controls>
      Video File
    </video>
  </body>
</html>

Output:

The alt attribute.

"alt": This attribute is used to provide alternative text for an image, which is displayed if the image cannot be loaded. This is important for accessibility, as it allows users who are visually impaired to understand the content of the image.

Example:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <img src="WelcomeAlgoLesson.png" height="100" width="300" alt="This is AlgoLesson Logo" />
  </body>
</html>

Output:

The title attribute.

"title": This attribute is used to provide additional information about an HTML element, which is displayed as a tooltip when the user hovers over the element.

Example:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <p>
      <abbr title="HyperText Markup Language">HTML</abbr> is a markup language
    </p>
  </body>
</html>

Output:

The class and Id attribute.

"class" and "id": These attributes are used to give an HTML element a specific class or id, which can then be used to style the element using CSS (Cascading Style Sheets).

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #header {
        background-color: rgb(18, 142, 184);
        color: rgb(255, 255, 255);
        padding: 30px;
        text-align: center;
      }
      .fruit {
        background-color: rgb(6, 128, 16);
        color: white;
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <h1 id="header">Welcome to AlgoLesson</h1>
    <h2 class="fruit">Apple</h2>
    <h2 class="fruit">Mango</h2>
  </body>
</html>

Output:

There are many other attributes that can be used in HTML, and the specific attributes available for a particular tag will depend on the type of element. For example, the "form" tag has attributes such as "action" and "method" that are used to specify where the form data is sent and how it is sent.

In summary, attributes are an essential part of HTML that provide additional information about an HTML element and can be used for a variety of purposes, including styling, linking, and accessibility.

Mega Menu

TRENDING

Quotation and Citation Elements in HTML

HTML <blockquote> Element

HTML <q> Element

HTML <abbr> Element.

HTML <address> Element

HTML <cite> Element

HTML <bdo> Element

Formatting in HTML

List of Formatting Elements:

HTML <br/> Element.

HTML <b> and <strong> Element.

HTML <i>, <u> and <em> Elements.

HTML <small> Element.

HTML <mark> Element

HTML <del> Element

HTML <sub> Element

HTML <sup> Element

Styles in HTML

Internal CSS Styles.

Paragraphs in HTML

White Space in HTML Paragraph.

Use of <br> and <hr> tags in HTML.

Headings in HTML

Important of Heading Tag.

Attributes in HTML

The href attribute.

The src attribute.

The alt attribute.

The title attribute.

The class and Id attribute.

MUST READ

LATEST

POPULAR

ARCHIVE

DON'T MISS

Advertisement

SPORTS

CRICKET

LABELS