HTML

Tags

Regular tags (closed)

HTML

<div></div>

AST

{
  type: "element",
  tagName: "div",
  attributes: [],
  children: [],
  void: false,
  closed: true
}

Regular tags (open)

HTML

<div>
Opening tag `<div>` at (1:1) doesn't have a matching closing tag `</div>`. (`MISSING_CLOSING_TAG_ERROR`) (parser-no-errors)
Tag `<div>` opened at (1:1) was never closed before the end of document. (`UNCLOSED_ELEMENT_ERROR`) (parser-no-errors)

AST

{
  type: "element",
  tagName: "div",
  attributes: [],
  children: [],
  void: false,
  closed: false
}

Self-closing tags

HTML

<img />
Use `<img>` instead of self-closing `<img />` for HTML compatibility. (html-no-self-closing)
Missing required `alt` attribute on `<img>` tag. Add `alt=""` for decorative images or `alt="description"` for informative images. (html-img-require-alt)

AST

{
  type: "element",
  tagName: "img",
  attributes: [],
  children: [],
  void: true,
  closed: true
}

HTML

<div />
Use `<div></div>` instead of self-closing `<div />` for HTML compatibility. (html-no-self-closing)

AST

{
  type: "element",
  tagName: "div",
  attributes: [],
  children: [],
  void: true,
  closed: true
}

Namespaced tags

HTML

<ns:table></ns:table>

AST

{
  type: "element",
  tagName: "ns:table",
  attributes: [],
  children: [],
  void: true,
  closed: true,
  namespaced: true // maybe?
}

Attributes

Double quoted attribute

HTML

<input class="input input-text" />
Use `<input>` instead of self-closing `<input />` for HTML compatibility. (html-no-self-closing)

AST

{
  type: "element",
  tagName: "input",
  attributes: [
    {
      type: "attribute",
      name: "class",
      value: "input input-type",
      quote: "double"
    }
  ],
  children: [],
  void: true,
  closed: true
}

Single quoted attribute

HTML

<input class='input input-text' />
Use `<input>` instead of self-closing `<input />` for HTML compatibility. (html-no-self-closing)
Attribute `class` uses single quotes. Prefer double quotes for HTML attribute values: `class="input input-text"`. (html-attribute-double-quotes)

AST

{
  type: "element",
  tagName: "input",
  attributes: [
    {
      type: "attribute",
      name: "class",
      value: "input input-type",
      quote: "single"
    }
  ],
  children: [],
  void: true,
  closed: true
}

None-quoted attribute

HTML

<input class=input />
Use `<input>` instead of self-closing `<input />` for HTML compatibility. (html-no-self-closing)
Attribute value should be quoted: `class="input"`. Always wrap attribute values in quotes. (html-attribute-values-require-quotes)

AST

{
  type: "element",
  tagName: "input",
  attributes: [
    {
      type: "attribute",
      name: "class",
      value: "input",
      quote: "none"
    }
  ],
  children: [],
  void: true,
  closed: true
}

Empty attribute

HTML

<div class=""></div>
Attribute `class` must not be empty. Either provide a meaningful value or remove the attribute entirely. (html-no-empty-attributes)

AST

{
  type: "element",
  tagName: "input",
  attributes: [
    {
      type: "attribute",
      name: "class",
      value: "",
      quote: "double"
    }
  ],
  children: [],
  void: true,
  closed: true
}

Boolean attribute

HTML

<input required />
Use `<input>` instead of self-closing `<input />` for HTML compatibility. (html-no-self-closing)

AST

{
  type: "element",
  tagName: "input",
  attributes: [
    {
      type: "attribute",
      name: "required",
      value: true
    }
  ],
  children: [],
  void: true,
  closed: true
}

Content

No content

HTML

<h1></h1>
Heading element `<h1>` must not be empty. Provide accessible text content for screen readers and SEO. (html-no-empty-headings)

AST

{
  type: "element",
  tagName: "h1",
  attributes: [],
  children: [],
  void: false,
  closed: true
}

Text content

HTML

<h1>Title</h1>

AST

{
  type: "element",
  tagName: "h1",
  attributes: [],
  children: [
    {
      type: "text",
      value: "Title"
    }
  ],
  void: false,
  closed: true
}

HTML tags

HTML

<h1>
  <span>Title</span>
</h1>

AST

{
  type: "element",
  tagName: "h1",
  attributes: [],
  children: [
    {
      type: "element",
      tagName: "span",
      attributes: [],
      children: [
        {
          type: "text",
          value: "Title"
        }
      ],
      void: false,
      closed: true
    }
  ],
  void: false,
  closed: true
}

HTML tags + Text content

HTML

<h1>
  Version
  <sub>1.0</sub>
</h1>

AST

{
  type: "element",
  tagName: "h1",
  attributes: [],
  children: [
    {
      type: "text",
      value: "Version"
    },
    {
      type: "element",
      tagName: "sub",
      attributes: [],
      children: [
        {
          type: "text",
          value: "1.0"
        }
      ],
      void: false,
      closed: true
    }
  ],
  void: false,
  closed: true
}

Comments

Regular

HTML

<!-- Comment -->

AST

{
  type: "comment",
  value: " Comment "
}

Multi-line

HTML

<!--
  Comment
  On
  Muliple
  Lines
-->

AST

{
  type: "comment",
  value: "  Comment\n  On\  Multiple\n  Lines"
}