posthtml-hfill

1.0.0 • Public • Published

PostHTML hfill PostHTML

NPM Version Build Status Licensing Changelog Gitter Chat

PostHTML hfill lets you use contextual headings in HTML, like the proposed <h> element.

<!-- before -->
 
<x-h>Heading</x-h>
<p>Content...</p>
<section>
  <x-h>Heading</x-h>
  <p>Content...</p>
  <section>
    <x-h>X Heading</x-h>
    <p>Content...</p>
  </section>
</section>
<section>
  <x-h>Heading</x-h>
  <p>Content...</p>
</section>
 
<!-- after -->
 
<x-h role="heading" aria-level="1">Heading</x-h>
<p>Content...</p>
<section>
  <x-h role="heading" aria-level="2">Heading</x-h>
  <p>Content...</p>
  <section>
    <x-h role="heading" aria-level="3">X Heading</x-h>
    <p>Content...</p>
  </section>
</section>
<section>
  <x-h role="heading" aria-level="2">Heading</x-h>
  <p>Content...</p>
</section>

The default <x-h> element is used to prevent stomping on the native namespace. This plugin is intended to produce contextual headings in JavaScript-free experiences, and may improve seach engine crawling. For dynamic usage, see hfill. For a CSS preprocessing option, see postcss-hfill.

Options

tag

Type: String
Default: "x-h"

The tag used by contextual headings.

Usage

Add PostHTML hfill to your build tool:

npm install posthtml-hfill --save-dev

Node

Use PostHTML hfill to process your HTML:

require('posthtml-hfill').process(YOUR_HTML, { /* options */ });

PostHTML

Add PostHTML to your build tool:

npm install posthtml --save-dev

Use PostHTML hfill as a plugin:

posthtml([
    require('posthtml-hfill')({ /* options */ })
]).process(YOUR_HTML, /* options */);

Gulp

Add Gulp PostHTML to your build tool:

npm install gulp-posthtml --save-dev

Use PostHTML hfill in your Gulpfile:

var posthtml = require('gulp-posthtml');
 
gulp.task('html', function () {
    return gulp.src('./src/*.html').pipe(
        posthtml([
            require('posthtml-hfill')({ /* options */ })
        ])
    ).pipe(
        gulp.dest('.')
    );
});

Grunt

Add Grunt PostHTML to your build tool:

npm install grunt-posthtml --save-dev

Use PostHTML hfill in your Gruntfile:

grunt.loadNpmTasks('grunt-posthtml');
 
grunt.initConfig({
    posthtml: {
        options: {
            use: [
                require('posthtml-hfill')({ /* options */ })
            ]
        },
        dist: {
            src: '*.html'
        }
    }
});

Package Sidebar

Install

npm i posthtml-hfill

Weekly Downloads

1

Version

1.0.0

License

CC0-1.0

Last publish

Collaborators

  • jonathantneal