# Introduction

Documentation on how to use H-tag editor with Umbraco.

[![Nuget](https://img.shields.io/nuget/v/ourHtagEditor)](https://www.nuget.org/packages/ourHtagEditor/)

H-tag editor is a simple property editor that lets the editor pick a desired heading size (H1 down to H6) and the text-alignment (left, center or right).


# Changelog

Latest changes

**v3.0.0**

* Updated the package to use .NET 7 - Minimum required Umbraco version is 11.0.0.

**v2.0.1**

* Hiding the alignment selection on the property editor if only one option is allowed on the data type.

**v2.0.0**

* Minimum required Umbraco version is 10.0.1.
* Added Tag Helper that can be used to generate the H-tag in views.
  * The old extension methods has been removed in favor of the new Tag Helper.
* Removed the grid functionality since it will be removed in Umbraco 13
* Accessibility enhancements of buttons and icons
* Renamed package from Our.Umbraco.HtagEditor to ourHtagEditor.


# Setup

Articles about how you install and use H-Tag editor.

* [Installation](/setup/installation)
* [Using](/setup/using)


# How to install

## Prerequisites

Requires at least Umbraco 10.0.1.

## Installation

Install ourHtagEditor via NuGet: `Install-Package ourHtagEditor`. After restarting your site, you will be able to create a new data type that uses the `Headline` property editor.


# How to use

This article describes how you can use the H-tag editor tag helper in your views.

Browse to `/Views/_ViewImports.cshtml` in your Umbraco project and add the following line at the bottom

```cshtml
@addTagHelper *, OurHtagEditor
```

This will make it possible to use the following in your views:

```cshtml
<headline htag="@Model.Headline" />
```

Depending on your chosen settings on the property editor, it could render:

```html
<h2 style="text-align: left;">This is my nice headline</h2>
```

The tag helper accepts the attributes `class` and `link`. The `link` attribute accepts the model Link, coming from the Multi URL Picker.

Using both attributes could look like this:

```cshtml
<headline htag="@Model.Headline" class="css-class" link="@Model.Link" />
```

Which will render:

```html
<a href="https://umbraco.com/" title="Visit Umbraco.com" target="_blank" rel="noopener">
    <h2 style="text-align: left;" class="css-class">This is my nice headline</h2>
</a>
```


