HTML

Tags

Regular tags (closed)

HTML

<div></div>

AST

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

Regular tags (open)

HTML

<div>

AST

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

Self-closing tags

HTML

<img />

AST

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

HTML

<div />

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" />

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' />

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 />

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>

AST

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

Boolean attribute

HTML

<input required />

AST

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

Content

No content

HTML

<h1></h1>

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
  <sup>1.0</sup>
</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"
}