CODEWITHSUNDEEP
htmltags
Marc Roussel
Marc Roussel

Reputation: 499

What is the difference between html <var> and <p 'font-style: italic'></p>?

I tried to search the web about what is the purpose of the HTML <var> Tag and didn't find any good explanation or let say I'm not satisfied yet. I can read what they say about it but I don't understand the purpose. I tried two different lines of code and both gives me the same thing now I need to know what exactly is <var> and why we should use it rather than a single style.

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
<p style='font-style:italic'>y = mx + b</p>

Reference to name only one: https://html.com/tags/var/

Funny because I read the explanation but I still don't see what is the use of <var> other than just making the text italic!

Upvotes: 0

Views: 219

Answers (2)

rodolfo_r
rodolfo_r

Reputation: 511

Here is how W3Schools defines HTML:

  • HTML stands for Hyper Text Markup Language
  • HTML is the standard markup language for creating Web pages
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content
  • HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

The way I see it is that, even though <var> and <i> have the same output printed to the browser, they mean different things, specially if you are "reading" pages without opening a browser like search engines do.

Check it is not particular to the example you mentioned. Look at the example on <b> and <strong> (https://www.w3schools.com/html/html_formatting.asp). They also have the same output but mean different things.

Upvotes: 1

j08691
j08691

Reputation: 207901

Semantics.

<p> tags are generic paragraph elements, typically used for text.

<var> elements represent the name of a variable in a mathematical expression or a programming context.

If you italicize a paragraph it may resemble the default styling of the <var> element, but that's where the similarities end. Also, they're different to screen readers.

Here's an example using both elements and you can see that semantically, it's a paragraph of text that contains references to variables in a mathematical sense:

<p>The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>, where <var>l</var> represents the length, <var>w</var> the width and <var>h</var> the height of the box.</p>

Upvotes: 1

Related Questions