HTML language preview

1. Markup with attributes and a comment

tags, attributes, and an HTML comment

horizon-dark

<!DOCTYPE html>
<!-- page shell -->
<div id="main" class="page">
  <a href="https://example.com" target="_blank">Learn more</a>
</div>

atom-one-dark

<!DOCTYPE html>
<!-- page shell -->
<div id="main" class="page">
  <a href="https://example.com" target="_blank">Learn more</a>
</div>

github-dark

<!DOCTYPE html>
<!-- page shell -->
<div id="main" class="page">
  <a href="https://example.com" target="_blank">Learn more</a>
</div>

dracula

<!DOCTYPE html>
<!-- page shell -->
<div id="main" class="page">
  <a href="https://example.com" target="_blank">Learn more</a>
</div>

nord

<!DOCTYPE html>
<!-- page shell -->
<div id="main" class="page">
  <a href="https://example.com" target="_blank">Learn more</a>
</div>

github

<!DOCTYPE html>
<!-- page shell -->
<div id="main" class="page">
  <a href="https://example.com" target="_blank">Learn more</a>
</div>

2. Embedded style and script

a <style> block and a <script> block inside the document

horizon-dark

<style>
  .content {
    display: flex;
  }
</style>
<script>
  const x = 1;
  console.log(x);
</script>

atom-one-dark

<style>
  .content {
    display: flex;
  }
</style>
<script>
  const x = 1;
  console.log(x);
</script>

github-dark

<style>
  .content {
    display: flex;
  }
</style>
<script>
  const x = 1;
  console.log(x);
</script>

dracula

<style>
  .content {
    display: flex;
  }
</style>
<script>
  const x = 1;
  console.log(x);
</script>

nord

<style>
  .content {
    display: flex;
  }
</style>
<script>
  const x = 1;
  console.log(x);
</script>

github

<style>
  .content {
    display: flex;
  }
</style>
<script>
  const x = 1;
  console.log(x);
</script>

3. Form with entities

form controls plus an HTML entity in the body text

horizon-dark

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required />
  <button type="submit">Sign up &amp; confirm</button>
</form>

atom-one-dark

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required />
  <button type="submit">Sign up &amp; confirm</button>
</form>

github-dark

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required />
  <button type="submit">Sign up &amp; confirm</button>
</form>

dracula

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required />
  <button type="submit">Sign up &amp; confirm</button>
</form>

nord

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required />
  <button type="submit">Sign up &amp; confirm</button>
</form>

github

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required />
  <button type="submit">Sign up &amp; confirm</button>
</form>