---
title: "Conditional html heading tag based on variable in knockout.js"
description: "Conditional html heading tag based on variable in knockout.js"
author: "Revati S Misra"
published: 2024-06-26
updated: 2024-06-27
canonical: https://www.mindstick.com/forum/160797/conditional-html-heading-tag-based-on-variable-in-knockout-js
category: "knockcout js"
tags: ["javascript", "knockout.js", "knockout observables"]
reading_time: 3 minutes
---
# Conditional html heading tag based on variable in knockout.js
Conditional [html](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript) [heading tag](https://www.mindstick.com/forum/156116/what-is-heading-tag) based on [variable](https://www.mindstick.com/articles/1807/objective-c-data-types-variables-object-creation) in knockout.js
## Replies
### Reply by Ashutosh Patel
#### Knockout.js Conditional Heading Tags
In Knockout.js, you can conditionally reference HTML elements such as [heading](https://yourviews.mindstick.com/view/83418/is-india-heading-towards-civil-war) tags (`
`, `
`, etc.) using data bindings based on variables. Here you can get a conditional representation of a heading tag based on a variable.
Suppose you have a visual model with an observable variable that determines the heading level to display (`headingLevel`). Here is a step-by-step example,
## Define Your ViewModel
```javascript
function AppViewModel() {
this.headingLevel = ko.observable(1); // Default heading level is 1
// You can change this value dynamically based on some condition
}
// Apply bindings
ko.applyBindings(new AppViewModel());
```
**HTML markup**\
Use Knockout.js data bindings to conditionally specify the header tag based on the `headingLevel` value.
```html
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 3
Heading Level 3
```
- **Data Binding (**`ko if`**)** Knockout.js provides a conditional ko if binding to HTML based on the passed expression.
- **Observable (**`headingLevel`**)** `HeadingLevel` is an observable variable that you can update dynamically in your view model. When its value changes, Knockout.js automatically updates the corresponding HTML.
## Example-
Here is complete simple example that demonstrates how conditionally change the heading tags (`