From 52806ad2c951097c85879ff879731837754fa5ff Mon Sep 17 00:00:00 2001 From: Ajay Dhangar Date: Mon, 19 Oct 2026 20:47:39 +0530 Subject: [PATCH 1/5] started docs for html head --- tutorials/html/12-html-head/head.mdx | 531 +++++++++++++++++++++++++- tutorials/html/12-html-head/html.mdx | 473 ++++++++++++++++++++++- tutorials/html/12-html-head/meta.mdx | 516 ++++++++++++++++++++++++- tutorials/html/12-html-head/title.mdx | 475 ++++++++++++++++++++++- 4 files changed, 1991 insertions(+), 4 deletions(-) diff --git a/tutorials/html/12-html-head/head.mdx b/tutorials/html/12-html-head/head.mdx index e85cd2b57..baed434f5 100644 --- a/tutorials/html/12-html-head/head.mdx +++ b/tutorials/html/12-html-head/head.mdx @@ -17,4 +17,533 @@ keywords: - learn HTML - CodeHarborHub HTML tags: [html, web-development, beginner, head, metadata, parsing, performance, frontend] ---- \ No newline at end of file +--- + +import {useState} from 'react'; + +export const sampleSources = { + good: [ + "", + '', + "", + ' ', + ' ', + " Good Page", + ' ', + "", + "", + "

Hello

", + "", + "", + ].join("\n"), + divInHead: [ + "", + '', + "", + ' ', + " Broken Page", + "
Oops, content in the head
", + ' ', + ' ', + "", + "", + "

Hello

", + "", + "", + ].join("\n"), + noHead: [ + "", + "No head tag at all", + '', + "

Hello

", + ].join("\n"), + twoTitles: [ + "", + '', + "", + " First title", + " Second title", + "", + "

Hello

", + "", + ].join("\n"), +}; + +export function ParserLab() { + const [source, setSource] = useState(sampleSources.divInHead); + const doc = new DOMParser().parseFromString(source, "text/html"); + const describe = (element) => { + const tag = element.tagName.toLowerCase(); + const bits = []; + ["name", "charset", "rel", "property"].forEach((attr) => { + if (element.hasAttribute(attr)) bits.push(attr + '="' + element.getAttribute(attr) + '"'); + }); + if (tag === "title") bits.push('"' + element.textContent + '"'); + return "<" + tag + (bits.length ? " " + bits.join(" ") : "") + ">"; + }; + const headItems = Array.from(doc.head.children).map(describe); + const bodyItems = Array.from(doc.body.children).map(describe); + const strays = Array.from(doc.body.querySelectorAll("meta, link, title, style, base")); + const titles = doc.querySelectorAll("title").length; + const warnings = []; + if (strays.length > 0) warnings.push(strays.length + " head-type element(s) ended up in the body, so they may not work as intended: " + strays.map(describe).join(", ")); + if (titles > 1) warnings.push("There are " + titles + " title elements. Only the first counts."); + if (!doc.head.querySelector("meta[charset]")) warnings.push("No meta charset was found in the head."); + if (!doc.head.querySelector("title") && !doc.querySelector("title")) warnings.push("No title was found."); + const load = (key) => setSource(sampleSources[key]); + return ( +
+

+ {" "} + {" "} + {" "} + +

+ +