Typography Elements

Headings Hierarchy

H1 - Main Title

H2 - Section Title

H3 - Subsection

H4 - Minor Heading

H5 - Small Heading

H6 - Smallest Heading

Perfect semantic hierarchy for SEO and accessibility

Text Formatting

This paragraph demonstrates bold text, italic text, and underlined text formatting options.

You can also combine them: bold italic or underlined bold text.

Inline code example: const result = htmler.render() within a paragraph.

This is small text that provides additional context or footnotes.

Advanced Typography

Modern web typography with styled text effects and beautiful spacing.

Use $Span with custom styles for highlighted text or outlined badges.

Typography is the foundation of great web design.

Pro Tip: All these typography elements are created using Htmler tags, providing type-safe HTML generation with excellent IntelliSense support in your IDE!

Lists & Navigation

Unordered List

First item1
Second item2
Third itemNEW
Fourth item4

Ordered List

Setup your environment
Import Htmler library
Create your tags
Render beautiful HTML

Interactive Form Elements

Form Validation: This form showcases various HTML5 input types with built-in validation: email, url, tel, date, range, and required attributes.

Table Elements

Popular Programming Languages (2024)

Rank	Language	Popularity %	Primary Use	Year Created
1	JavaScript	69.7%	Web Development	1995
2	Python	51.8%	Data Science, AI	1991
3	Dart	6.02%	Flutter, Web Apps	2011
4	Java	40.2%	Enterprise, Android	1995

Data source: Stack Overflow Developer Survey 2024

Media & Visual Elements

Progress Indicators

HTML Skills

90%

CSS Skills

85%

Dart Skills

95%

Interactive Elements

Click to expand details

This content is hidden by default and can be toggled using the $Details and $Summary tags. It's perfect for FAQs, documentation, and collapsible content.

✓Semantic HTML
✓Accessible by default
✓No JavaScript required

Code Examples

Htmler Usage Example

Here's how you can create elements using Htmler tags:

// Creating a button with Htmler
$Button(attrs: {
  'type': 'submit',
  'class': 'btn btn-primary',
}, children: [
  $Text('Click me!')
])

// Creating a card layout
$Div(attrs: {'class': 'card'}, children: [
  $Div(attrs: {'class': 'card-body'}, children: [
    $H5(attrs: {'class': 'card-title'}, children: [
      $Text('Card Title')
    ]),
    $P(attrs: {'class': 'card-text'}, children: [
      $Text('Card content goes here...')
    ]),
  ]),
])

Jinja Integration

Dynamic Content with Jinja

Current language: pl

Current year: 2025

Conditional Rendering

Please log in to continue.

Htmler Framework