Mastering HTML Variable Declarations

Introduction

The <var> tag is used in HTML to represent a variable in a program or a mathematical equation. It works similar to the <strong> or <em> tag but instead of emphasizing text, it shows textual content as a variable.

In this lab, you will learn how to create a variable within an HTML file using the <var> tag.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70879{{"`Mastering HTML Variable Declarations`"}} html/head_elems -.-> lab-70879{{"`Mastering HTML Variable Declarations`"}} html/text_head -.-> lab-70879{{"`Mastering HTML Variable Declarations`"}} html/para_br -.-> lab-70879{{"`Mastering HTML Variable Declarations`"}} html/inter_elems -.-> lab-70879{{"`Mastering HTML Variable Declarations`"}} end

Set up the HTML file

Create a new file named index.html, and add the following HTML code to set up the basic structure of the document.

<!doctype html>
<html>
  <head>
    <title>HTML Var Tag Lab</title>
  </head>
  <body>
    <h1>Creating a Variable in HTML Using the Var Tag</h1>
  </body>
</html>

Create a Variable Using the `<var>` Tag

To create a variable in HTML, you need to use the <var> tag. Add the following HTML code to create a variable named userName within a sentence.

<p>The current user is <var>userName</var>.</p>

The <var> tag encloses the variable name userName. This tag can be used to represent a variable in a programming context or a variable in a mathematical equation.

Style the Variable

The <var> tag has a default italic style. However, you can add CSS properties to this tag to change its appearance. Add the following CSS to make the variable text bold and underlined.

<style>
  var {
    font-weight: bold;
    text-decoration: underline;
  }
</style>

Display the Value of a Variable

You can also use the <var> tag to display the value of a variable by passing the variable value as text. Add the following code to display the value of userName.

<p>The current user is <var>John Doe</var>.</p>

Using Global Attributes

The <var> tag supports global attributes like class, id, and style. You can add these attributes to define the CSS properties of the variable text or to access the variable using JavaScript. Add the following code to set the class and id of the <var> tag.

<p>
  The current user is <var class="user-name" id="current-user">John Doe</var>.
</p>

Using Event Attributes

You can also use event attributes like onclick and onmouseover to trigger events when the variable text is clicked or hovered over. Add the following code to display an alert message on clicking the variable text.

<p>The current user is <var onclick="alert('User clicked!')">John Doe</var>.</p>

Summary

In this lab, you learned how to create a variable in HTML using the <var> tag, and how to style the variable using CSS properties. You also learned how to display the value of a variable and how to use global and event attributes with the tag. With this knowledge, you can now create variables in your HTML documents and customize their appearance using CSS.