Untitled

dabblet.html

<!--
  A block element can contain inline elements and some of
  block elements; A inline element can only contain inline
  elements but not block elements
-->
<!--valid use cases-->
<div><em>Name</em>: <span>Nick QI</span></div>

<div>
  <p></p>
  <p></p>
</div>

<a href="..."><span>My LinkedIn</span></a>

<a href="..."><div>My LinkedIn</div></a>

<!--invalid use cases-->
<span>Here is <div>an invalid example</div>.</span>


<!--
  <h1>, <h2>, ..., <h6> and <p> can’t contain block elements
-->
<!--invalid use cases-->
<h3>This is <div>a title</div></h3>
<p>This is <div>a paragraph</div></p>


<!--
  <h1> should appear only once in a webpage
-->
<!--valid use cases-->
<h1>Title</h1>
<h2>Subtitle</h2>
<h3>Section 1</h3>
<h3>Section 2</h3>


<!--
  <a> can’t contain interactive tags, such as input,
  button, textarea and so on
-->
<!--invalid use cases-->
<a><button>Click Me</button></a>


<!--
  <li> can contain <div> and <ul>, but the children
  of a <ul> can only be <li> tags
-->
<!--valid use cases-->
<ul>
  <li>Content 1</li>
  <li><div>Content 2</div></li>
  <li>
  	<ol>
  	  <li>Content 3</li>
  	  <li>Content 4</li>
  	</ol>
  </li>
</ul>

<!--invalid use cases-->
<ul>
  <p>Content 1</p>
  <p>Content 2</p>
</ul>


<!--
  Can’t mix use inline and block elements as a direct
  content of a block element
-->
<!--valid use cases-->
<div>
  <div>Line 1</div>
  <div>Line 2</div>
</div>

<!--invalid use cases-->
<div>
  <div>Line 1</div>
  <span>Line 2</span>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}