HTML5 Interview Questions Part 7

31. What do you know about MathML in HTML5?

Answer:

MathML stands for Mathematical Markup Language.

MathML is a markup language, used to show mathematical and scientific content on the Web.

HTML5 allows us to use MathML elements inside a document using <math>...</math> tags.

Example:

<html>
<head>
   <title>Algebra Formula</title>
</head>
<body>
   <p>Algebra Formula</p>
   <math xmlns="http://www.w3.org/1998/Math/MathML">
   <mrow>
      <msup>
         <mfenced>
            <mrow>
               <mi>a</mi>
               <mo>+</mo>
               <mi>b</mi>
            </mrow>
         </mfenced>
         <mn>2</mn>
      </msup>
      <mo>=</mo>
      <msup>
         <mrow>
            <mi>a</mi>
         </mrow>
         <mn>2</mn>
      </msup>
      <mo>+</mo>
      <mrow>
         <mn>2</mn>
         <mi>a</mi>
         <mi>b</mi>
      </mrow>
      <mo>+</mo>
      <mrow>
         <mi>b</mi>
         <mn>2</mn>
      </mrow>
     </mrow>
   </math>
</body>
</html>


math tag

The above program contains some tags are as follows,

<mrow>: Horizontal row of items

<msup>, <munderover> : Superscripts, limits over and under operators like sums, etc.

<mfrac>: Mathematical fractions

<msqrt> and <mroot>: Roots

<mfenced>: Surrounding content with fences, such as parentheses.

<mi>x<mi>: Mathematical identifiers

<mo>+</mo>: Mathematical operators

<mn>2</mn>: Mathematical numbers

<mtext>non zero</mtext>: Mathematical text

32. What is <article> tag in HTML5?

Answer:

The <article> tag is a special type of <section> tag.

The <article> tag is independent, self-contained block of related content.

It is used to give more specific meaning of related content and supports global attributes in HTML.

This tag can be used in Forum post, Blog post, Newspaper article etc.

Syntax:

<article>
   //Some content here
</article>


Example:

<!DOCTYPE html>
<html>
   <body>
      <article>
           <h1>Mozilla Firefox</h1>
           <p>Mozilla Firefox is a free, open-source web browser <br> developed by Mozilla Foundation.</p>
      </article>
   </body>
</html>


article tag

33. What are the formatting elements in HTML 5?

Answer:

Following is a list of formatting elements:

Emphasized text: It defines emphasized text. For eg. <em> . . .</em>

Marked text: It defines marked or highlighted text. For eg. <mark>. . . </mark>

Small text: It defines small text. For eg. <small> . . .</small>

Deleted text: It defines deleted or removed text. For. <del> . . .</del>

Inserted text: It defines inserted or added text. For eg. <ins>. . .</ins>

Subscripts: It defines subscripted text. For eg. <sub>. . .</sub>

Superscripts: It defines superscripted text. For eg. <sup>. . .</sup>

Example:

<!DOCTYPE html>
<html>
   <body>
      <p><b>CareerRide.com</b></p>
      <p><i>CareerRide.com</i></p>
      <p>Career<sub>Ride</sub><sup>.com</sup></p>
   </body>
</html>


formatting elements

34. What is the difference between SVG and Canvas?

Answer:

In SVG, multiple graphical elements that become part of the Document Object Model (DOM) whereas in Canvas, single HTML element similar to <img> in behavior.

SVG defines the graphics in XML format whereas Canvas draws 2D graphics, on the fly (with a JavaScript).

SVG provides better scalability which can be printed with high quality at any resolution whereas Canvas provides poor scalability which is not suitable for printing on higher resolution.

35. What is the purpose of 'autofocus' attribute in HTML5?

Answer:

The 'autofocus' attribute is a simple one-step pattern, automatically focus one particular form field.

It is easily programmed in JavaScript at the time of document load.

This attribute is a boolean attribute.

It specifies that an <input> element should automatically get focus when the page loads.

Example:

<!DOCTYPE html>
<html>
   <body>
      <form action="/action_page.php">
         First name: <input type="text" name="fname" autofocus><br>
         Last name: <input type="text" name="lname"><br>
         <input type="submit">
      </form>
   </body>
</html>


autofocus attribute