<header>
  <h2 class="title">Document.doctype</h2>
  <p class="description">Властивість, що повертає Document Type Declaration (DOCTYPE) поточного документа.</p>
</header>
<main>
  <div class="result">
    <button id="checkDoctype">Перевірити DOCTYPE</button>
    <p id="doctypeResult"></p>
  </div>
</main>
body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#doctypeResult {
  margin-top: 20px;
}
document.getElementById('checkDoctype').addEventListener('click', function() {
  var doctype = document.doctype;
  var resultText;

  if (doctype) {
    resultText = `DOCTYPE знайдено: ${doctype.name}. `;
    resultText += doctype.publicId ? `PublicId: ${doctype.publicId}. ` : "";
    resultText += doctype.systemId ? `SystemId: ${doctype.systemId}.` : "";
    if (doctype.name.toLowerCase() === "html" && !doctype.publicId && !doctype.systemId) {
      resultText += " Це HTML5 документ.";
    }
  } else {
    resultText = "DOCTYPE відсутній.";
  }

  document.getElementById('doctypeResult').textContent = resultText;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.