Skip to main content
Home  › ... Razor

Razor Blade Tutorials

Tutorial Home › Razor.Blade
Start and End Tags
#7 Create custom (non Html5) tags or Tags whose name stems from a variable
Safe Html5 Attributes from code 
Requirements
Resources

RazorBlade Fluent Tag API @Tag.Custom("your-tag") v3

All Html5 tags are available under Tag.xxx(). In case you need a custom tag - like an <app-root></app-root> for angular, you'll need the @Tag.Custom(...).

Fist create a sample where a heading is from a variable

Output

This is a title

@{
  var headingType = "h3";
}
@Tag.Custom(headingType).Wrap("This is a title")

Output

this is a italic text 
@Tag.Custom("em").Wrap("this is a italic text")
Start and End Tags
#7 Create custom (non Html5) tags or Tags whose name stems from a variable
Safe Html5 Attributes from code 

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade;
<!-- unimportant stuff, hidden -->


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
      <h2><em>RazorBlade</em> Fluent Tag API <code>@@Tag.Custom("your-tag")</code> <em>v3</em></h2>
      <div>
        All Html5 tags are available under <code>Tag.xxx()</code>. In case you need a custom tag - like an <code>@Tag.Custom("app-root").ToString()</code> 
        for angular, you'll need the <code>@@Tag.Custom(...)</code>.
      </div>
    </div>
  </div>


@* todo @2dg  first create a sample where a heading is from a variable *@

<h3>Fist create a sample where a heading is from a variable</h3>

  @{
    var headingType = "h3";
  }
  @Tag.Custom(headingType).Wrap("This is a title")



@* @2dg use show-result and manually show what the result would be *@
@* <app-root></app-root> *@

  @Tag.Custom("em").Wrap("this is a italic text")



@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })