From 6e5b6fe2ba8f869b7fd47bfc05aba78b4a99795b Mon Sep 17 00:00:00 2001
From: Ajay Dhangar <ajaydhangar49@gmail.com>
Date: Thu, 24 Sep 2026 20:31:31 +0530
Subject: [PATCH] update and add docs with formating

---
 docusaurus.config.js                          |  2 +-
 sidebars.ts                                   | 16 +++++++++
 src/theme/DocItem/Content/index.js            | 10 ++++++
 .../browser-developer-tools.mdx               |  3 --
 .../create-your-first-html-page.mdx           |  3 --
 .../01-getting-started/how-the-web-works.mdx  |  3 --
 .../html-document-structure.mdx               |  3 --
 .../html/01-getting-started/html-history.mdx  |  3 --
 .../html/01-getting-started/html-vs-html5.mdx |  3 --
 tutorials/html/01-getting-started/index.mdx   |  3 --
 .../html/01-getting-started/what-is-html.mdx  |  3 --
 tutorials/html/02-html-syntax/attributes.mdx  |  3 --
 .../02-html-syntax/character-encoding.mdx     |  3 --
 tutorials/html/02-html-syntax/comments.mdx    |  3 --
 tutorials/html/02-html-syntax/elements.mdx    |  3 --
 tutorials/html/02-html-syntax/entities.mdx    |  3 --
 .../html/02-html-syntax/global-attributes.mdx |  3 --
 tutorials/html/02-html-syntax/index.mdx       |  3 --
 tutorials/html/02-html-syntax/nesting.mdx     |  3 --
 tutorials/html/02-html-syntax/tags.mdx        |  3 --
 tutorials/html/02-html-syntax/whitespace.mdx  |  3 --
 .../html/03-text-content/abbreviations.mdx    |  3 --
 tutorials/html/03-text-content/citations.mdx  |  3 --
 tutorials/html/03-text-content/code-text.mdx  |  3 --
 .../03-text-content/emphasis-and-italic.mdx   |  3 --
 tutorials/html/03-text-content/headings.mdx   |  3 --
 .../html/03-text-content/horizontal-rule.mdx  |  3 --
 tutorials/html/03-text-content/index.mdx      |  3 --
 .../html/03-text-content/line-breaks.mdx      |  3 --
 tutorials/html/03-text-content/paragraphs.mdx |  3 --
 tutorials/html/03-text-content/quotations.mdx |  3 --
 .../html/03-text-content/semantic-text.mdx    |  3 --
 .../html/03-text-content/strong-and-bold.mdx  |  3 --
 .../subscript-and-superscript.mdx             |  3 --
 tutorials/html/03-text-content/underline.mdx  |  3 --
 .../04-links-and-navigation/absolute-urls.mdx |  3 --
 .../anchor-element.mdx                        |  3 --
 .../download-links.mdx                        |  3 --
 .../04-links-and-navigation/email-links.mdx   |  3 --
 .../external-links.mdx                        |  3 --
 .../html/04-links-and-navigation/index.mdx    |  3 --
 .../internal-links.mdx                        |  3 --
 .../04-links-and-navigation/link-security.mdx |  3 --
 .../navigation-menus.mdx                      |  3 --
 .../04-links-and-navigation/relative-urls.mdx |  3 --
 .../target-attribute.mdx                      |  3 --
 .../telephone-links.mdx                       |  3 --
 .../html/05-images/accessible-images.mdx      |  4 +--
 .../html/05-images/figure-and-figcaption.mdx  |  4 +--
 tutorials/html/05-images/image-formats.mdx    |  4 +--
 tutorials/html/05-images/img-element.mdx      |  4 +--
 tutorials/html/05-images/index.mdx            |  4 +--
 tutorials/html/05-images/lazy-loading.mdx     |  4 +--
 tutorials/html/05-images/picture-element.mdx  |  4 +--
 .../html/05-images/responsive-images.mdx      |  4 +--
 tutorials/html/05-images/src-and-alt.mdx      |  4 +--
 tutorials/html/05-images/srcset-and-sizes.mdx |  4 +--
 tutorials/html/05-images/width-and-height.mdx |  4 +--
 tutorials/html/06-lists/accessible-lists.mdx  |  4 +--
 tutorials/html/06-lists/description-lists.mdx |  4 +--
 tutorials/html/06-lists/index.mdx             |  4 +--
 tutorials/html/06-lists/nested-lists.mdx      |  4 +--
 tutorials/html/06-lists/ordered-lists.mdx     |  4 +--
 tutorials/html/06-lists/unordered-lists.mdx   |  4 +--
 tutorials/html/07-tables/caption.mdx          |  4 +--
 tutorials/html/07-tables/colspan-rowspan.mdx  |  4 +--
 tutorials/html/07-tables/index.mdx            |  4 +--
 .../html/07-tables/responsive-tables.mdx      |  4 +--
 .../html/07-tables/table-accessibility.mdx    |  4 +--
 tutorials/html/07-tables/table-basics.mdx     |  4 +--
 tutorials/html/07-tables/table-headings.mdx   |  4 +--
 .../html/07-tables/table-rows-and-cells.mdx   |  4 +--
 .../html/07-tables/thead-tbody-tfoot.mdx      |  4 +--
 tutorials/html/08-forms/accessible-forms.mdx  | 16 +++++++++
 tutorials/html/08-forms/autocomplete.mdx      | 16 +++++++++
 tutorials/html/08-forms/button.mdx            | 16 +++++++++
 tutorials/html/08-forms/datalist.mdx          | 16 +++++++++
 .../html/08-forms/fieldset-and-legend.mdx     | 16 +++++++++
 tutorials/html/08-forms/form-action.mdx       | 16 +++++++++
 tutorials/html/08-forms/form-element.mdx      | 16 +++++++++
 tutorials/html/08-forms/form-methods.mdx      | 16 +++++++++
 tutorials/html/08-forms/form-validation.mdx   | 16 +++++++++
 tutorials/html/08-forms/index.mdx             | 17 ++++++++++
 tutorials/html/08-forms/input-element.mdx     | 16 +++++++++
 .../html/08-forms/input-types/checkbox.mdx    | 18 ++++++++++
 tutorials/html/08-forms/input-types/color.mdx | 18 ++++++++++
 tutorials/html/08-forms/input-types/date.mdx  | 18 ++++++++++
 .../08-forms/input-types/datetime-local.mdx   | 18 ++++++++++
 tutorials/html/08-forms/input-types/email.mdx | 18 ++++++++++
 tutorials/html/08-forms/input-types/file.mdx  | 18 ++++++++++
 .../html/08-forms/input-types/hidden.mdx      | 18 ++++++++++
 tutorials/html/08-forms/input-types/month.mdx | 18 ++++++++++
 .../html/08-forms/input-types/number.mdx      | 18 ++++++++++
 .../html/08-forms/input-types/password.mdx    | 16 +++++++++
 tutorials/html/08-forms/input-types/radio.mdx | 16 +++++++++
 tutorials/html/08-forms/input-types/range.mdx | 16 +++++++++
 .../html/08-forms/input-types/search.mdx      | 16 +++++++++
 .../input-types/submit-reset-button.mdx       | 16 +++++++++
 tutorials/html/08-forms/input-types/tel.mdx   | 16 +++++++++
 tutorials/html/08-forms/input-types/text.mdx  | 16 +++++++++
 tutorials/html/08-forms/input-types/time.mdx  | 16 +++++++++
 tutorials/html/08-forms/input-types/url.mdx   | 16 +++++++++
 tutorials/html/08-forms/input-types/week.mdx  | 16 +++++++++
 tutorials/html/08-forms/label-element.mdx     | 15 +++++++++
 tutorials/html/08-forms/min-and-max.mdx       | 16 +++++++++
 .../html/08-forms/minlength-and-maxlength.mdx | 16 +++++++++
 .../html/08-forms/multipart-form-data.mdx     | 16 +++++++++
 .../html/08-forms/option-and-optgroup.mdx     | 16 +++++++++
 tutorials/html/08-forms/pattern.mdx           | 16 +++++++++
 tutorials/html/08-forms/required.mdx          | 16 +++++++++
 .../html/08-forms/secure-form-design.mdx      | 16 +++++++++
 tutorials/html/08-forms/select.mdx            | 16 +++++++++
 tutorials/html/08-forms/textarea.mdx          | 16 +++++++++
 tutorials/html/09-semantic-html/address.mdx   | 15 +++++++++
 tutorials/html/09-semantic-html/article.mdx   | 15 +++++++++
 tutorials/html/09-semantic-html/aside.mdx     | 15 +++++++++
 tutorials/html/09-semantic-html/details.mdx   | 15 +++++++++
 tutorials/html/09-semantic-html/dialog.mdx    | 15 +++++++++
 tutorials/html/09-semantic-html/footer.mdx    | 15 +++++++++
 tutorials/html/09-semantic-html/header.mdx    | 15 +++++++++
 tutorials/html/09-semantic-html/index.mdx     | 33 +++++++++----------
 tutorials/html/09-semantic-html/main.mdx      | 15 +++++++++
 tutorials/html/09-semantic-html/nav.mdx       | 15 +++++++++
 tutorials/html/09-semantic-html/section.mdx   | 15 +++++++++
 .../09-semantic-html/semantic-page-layout.mdx | 15 +++++++++
 tutorials/html/09-semantic-html/summary.mdx   | 15 +++++++++
 .../09-semantic-html/why-semantic-html.mdx    | 16 +++++++++
 .../html/10-audio-video/accessible-media.mdx  | 15 +++++++++
 tutorials/html/10-audio-video/audio.mdx       | 15 +++++++++
 tutorials/html/10-audio-video/captions.mdx    | 15 +++++++++
 tutorials/html/10-audio-video/index.mdx       | 28 ++++++++--------
 .../html/10-audio-video/media-controls.mdx    | 15 +++++++++
 .../html/10-audio-video/responsive-video.mdx  | 15 +++++++++
 tutorials/html/10-audio-video/source.mdx      | 15 +++++++++
 tutorials/html/10-audio-video/subtitles.mdx   | 15 +++++++++
 tutorials/html/10-audio-video/track.mdx       | 15 +++++++++
 tutorials/html/10-audio-video/video.mdx       | 15 +++++++++
 tutorials/html/11-embedded-content/canvas.mdx | 15 +++++++++
 tutorials/html/11-embedded-content/embed.mdx  | 15 +++++++++
 tutorials/html/11-embedded-content/iframe.mdx | 15 +++++++++
 tutorials/html/11-embedded-content/index.mdx  | 26 ++++++++-------
 tutorials/html/11-embedded-content/maps.mdx   | 15 +++++++++
 tutorials/html/11-embedded-content/object.mdx | 15 +++++++++
 tutorials/html/11-embedded-content/svg.mdx    | 15 +++++++++
 .../third-party-content-security.mdx          | 15 +++++++++
 tutorials/html/12-html-head/base.mdx          | 15 +++++++++
 tutorials/html/12-html-head/charset.mdx       | 15 +++++++++
 tutorials/html/12-html-head/favicon.mdx       | 15 +++++++++
 tutorials/html/12-html-head/head.mdx          | 15 +++++++++
 tutorials/html/12-html-head/html.mdx          | 15 +++++++++
 tutorials/html/12-html-head/index.mdx         | 31 +++++++++--------
 tutorials/html/12-html-head/link.mdx          | 15 +++++++++
 tutorials/html/12-html-head/meta.mdx          | 15 +++++++++
 .../12-html-head/metadata-best-practices.mdx  | 15 +++++++++
 tutorials/html/12-html-head/script.mdx        | 15 +++++++++
 tutorials/html/12-html-head/style.mdx         | 15 +++++++++
 tutorials/html/12-html-head/title.mdx         | 15 +++++++++
 tutorials/html/12-html-head/viewport.mdx      | 15 +++++++++
 .../accessibility-testing.mdx                 |  0
 .../13-accessibility/accessible-buttons.mdx   |  0
 .../13-accessibility/accessible-forms.mdx     |  0
 .../13-accessibility/accessible-links.mdx     |  0
 .../13-accessibility/accessible-names.mdx     |  0
 .../13-accessibility/accessible-tables.mdx    |  0
 tutorials/html/13-accessibility/alt-text.mdx  |  0
 .../13-accessibility/aria-describedby.mdx     |  0
 .../html/13-accessibility/aria-hidden.mdx     |  0
 .../13-accessibility/aria-introduction.mdx    |  0
 .../html/13-accessibility/aria-label.mdx      |  0
 .../html/13-accessibility/aria-labelledby.mdx |  0
 tutorials/html/13-accessibility/aria-live.mdx |  0
 .../html/13-accessibility/aria-roles.mdx      |  0
 .../aria-states-properties.mdx                |  0
 .../13-accessibility/focus-management.mdx     |  0
 .../13-accessibility/introduction-to-a11y.mdx |  0
 .../keyboard-accessibility.mdx                |  0
 .../html/13-accessibility/screen-readers.mdx  |  0
 .../semantic-accessibility.mdx                |  0
 .../html/13-accessibility/wcag-basics.mdx     |  0
 .../accessibility-questions.mdx               |  0
 .../forms-questions.mdx                       |  0
 .../frontend-interview-html.mdx               |  0
 .../html-advanced-questions.mdx               |  0
 .../html-beginner-questions.mdx               |  0
 .../html-intermediate-questions.mdx           |  0
 .../html-interview-questions.mdx              |  0
 .../html5-questions.mdx                       |  0
 .../semantic-html-questions.mdx               |  0
 .../html/26-reference/attributes/alt.mdx      |  0
 .../html/26-reference/attributes/aria.mdx     |  0
 .../html/26-reference/attributes/class.mdx    |  0
 .../html/26-reference/attributes/href.mdx     |  0
 tutorials/html/26-reference/attributes/id.mdx |  0
 .../html/26-reference/attributes/src.mdx      |  0
 .../html/26-reference/browser-support.mdx     |  0
 tutorials/html/26-reference/elements/a.mdx    |  0
 tutorials/html/26-reference/elements/abbr.mdx |  0
 .../html/26-reference/elements/article.mdx    |  0
 .../html/26-reference/elements/audio.mdx      |  0
 .../html/26-reference/elements/button.mdx     |  0
 tutorials/html/26-reference/elements/div.mdx  |  0
 tutorials/html/26-reference/elements/form.mdx |  0
 .../html/26-reference/elements/h1-h6.mdx      |  0
 tutorials/html/26-reference/elements/img.mdx  |  0
 .../html/26-reference/elements/input.mdx      |  0
 .../html/26-reference/elements/label.mdx      |  0
 tutorials/html/26-reference/elements/main.mdx |  0
 tutorials/html/26-reference/elements/nav.mdx  |  0
 .../html/26-reference/elements/section.mdx    |  0
 .../html/26-reference/elements/table.mdx      |  0
 .../html/26-reference/elements/textarea.mdx   |  0
 .../html/26-reference/elements/video.mdx      |  0
 tutorials/html/26-reference/entities.mdx      |  0
 .../html/26-reference/global-attributes.mdx   |  0
 tutorials/html/26-reference/input-types.mdx   |  0
 tutorials/html/26-reference/void-elements.mdx |  0
 tutorials/html/27-quiz/accessibility-quiz.mdx |  0
 tutorials/html/27-quiz/beginner-quiz.mdx      |  0
 tutorials/html/27-quiz/elements-quiz.mdx      |  0
 tutorials/html/27-quiz/final-html-quiz.mdx    |  0
 tutorials/html/27-quiz/forms-quiz.mdx         |  0
 tutorials/html/27-quiz/semantic-html-quiz.mdx |  0
 tutorials/html/27-quiz/seo-quiz.mdx           |  0
 223 files changed, 1388 insertions(+), 268 deletions(-)
 create mode 100644 sidebars.ts
 create mode 100644 src/theme/DocItem/Content/index.js
 create mode 100644 tutorials/html/08-forms/accessible-forms.mdx
 create mode 100644 tutorials/html/08-forms/autocomplete.mdx
 create mode 100644 tutorials/html/08-forms/button.mdx
 create mode 100644 tutorials/html/08-forms/datalist.mdx
 create mode 100644 tutorials/html/08-forms/fieldset-and-legend.mdx
 create mode 100644 tutorials/html/08-forms/form-action.mdx
 create mode 100644 tutorials/html/08-forms/form-element.mdx
 create mode 100644 tutorials/html/08-forms/form-methods.mdx
 create mode 100644 tutorials/html/08-forms/form-validation.mdx
 create mode 100644 tutorials/html/08-forms/input-element.mdx
 create mode 100644 tutorials/html/08-forms/input-types/checkbox.mdx
 create mode 100644 tutorials/html/08-forms/input-types/color.mdx
 create mode 100644 tutorials/html/08-forms/input-types/date.mdx
 create mode 100644 tutorials/html/08-forms/input-types/datetime-local.mdx
 create mode 100644 tutorials/html/08-forms/input-types/email.mdx
 create mode 100644 tutorials/html/08-forms/input-types/file.mdx
 create mode 100644 tutorials/html/08-forms/input-types/hidden.mdx
 create mode 100644 tutorials/html/08-forms/input-types/month.mdx
 create mode 100644 tutorials/html/08-forms/input-types/number.mdx
 create mode 100644 tutorials/html/08-forms/input-types/password.mdx
 create mode 100644 tutorials/html/08-forms/input-types/radio.mdx
 create mode 100644 tutorials/html/08-forms/input-types/range.mdx
 create mode 100644 tutorials/html/08-forms/input-types/search.mdx
 create mode 100644 tutorials/html/08-forms/input-types/submit-reset-button.mdx
 create mode 100644 tutorials/html/08-forms/input-types/tel.mdx
 create mode 100644 tutorials/html/08-forms/input-types/text.mdx
 create mode 100644 tutorials/html/08-forms/input-types/time.mdx
 create mode 100644 tutorials/html/08-forms/input-types/url.mdx
 create mode 100644 tutorials/html/08-forms/input-types/week.mdx
 create mode 100644 tutorials/html/08-forms/label-element.mdx
 create mode 100644 tutorials/html/08-forms/min-and-max.mdx
 create mode 100644 tutorials/html/08-forms/minlength-and-maxlength.mdx
 create mode 100644 tutorials/html/08-forms/multipart-form-data.mdx
 create mode 100644 tutorials/html/08-forms/option-and-optgroup.mdx
 create mode 100644 tutorials/html/08-forms/pattern.mdx
 create mode 100644 tutorials/html/08-forms/required.mdx
 create mode 100644 tutorials/html/08-forms/secure-form-design.mdx
 create mode 100644 tutorials/html/08-forms/select.mdx
 create mode 100644 tutorials/html/08-forms/textarea.mdx
 create mode 100644 tutorials/html/09-semantic-html/address.mdx
 create mode 100644 tutorials/html/09-semantic-html/article.mdx
 create mode 100644 tutorials/html/09-semantic-html/aside.mdx
 create mode 100644 tutorials/html/09-semantic-html/details.mdx
 create mode 100644 tutorials/html/09-semantic-html/dialog.mdx
 create mode 100644 tutorials/html/09-semantic-html/footer.mdx
 create mode 100644 tutorials/html/09-semantic-html/header.mdx
 create mode 100644 tutorials/html/09-semantic-html/main.mdx
 create mode 100644 tutorials/html/09-semantic-html/nav.mdx
 create mode 100644 tutorials/html/09-semantic-html/section.mdx
 create mode 100644 tutorials/html/09-semantic-html/semantic-page-layout.mdx
 create mode 100644 tutorials/html/09-semantic-html/summary.mdx
 create mode 100644 tutorials/html/09-semantic-html/why-semantic-html.mdx
 create mode 100644 tutorials/html/10-audio-video/accessible-media.mdx
 create mode 100644 tutorials/html/10-audio-video/audio.mdx
 create mode 100644 tutorials/html/10-audio-video/captions.mdx
 create mode 100644 tutorials/html/10-audio-video/media-controls.mdx
 create mode 100644 tutorials/html/10-audio-video/responsive-video.mdx
 create mode 100644 tutorials/html/10-audio-video/source.mdx
 create mode 100644 tutorials/html/10-audio-video/subtitles.mdx
 create mode 100644 tutorials/html/10-audio-video/track.mdx
 create mode 100644 tutorials/html/10-audio-video/video.mdx
 create mode 100644 tutorials/html/11-embedded-content/canvas.mdx
 create mode 100644 tutorials/html/11-embedded-content/embed.mdx
 create mode 100644 tutorials/html/11-embedded-content/iframe.mdx
 create mode 100644 tutorials/html/11-embedded-content/maps.mdx
 create mode 100644 tutorials/html/11-embedded-content/object.mdx
 create mode 100644 tutorials/html/11-embedded-content/svg.mdx
 create mode 100644 tutorials/html/11-embedded-content/third-party-content-security.mdx
 create mode 100644 tutorials/html/12-html-head/base.mdx
 create mode 100644 tutorials/html/12-html-head/charset.mdx
 create mode 100644 tutorials/html/12-html-head/favicon.mdx
 create mode 100644 tutorials/html/12-html-head/head.mdx
 create mode 100644 tutorials/html/12-html-head/html.mdx
 create mode 100644 tutorials/html/12-html-head/link.mdx
 create mode 100644 tutorials/html/12-html-head/meta.mdx
 create mode 100644 tutorials/html/12-html-head/metadata-best-practices.mdx
 create mode 100644 tutorials/html/12-html-head/script.mdx
 create mode 100644 tutorials/html/12-html-head/style.mdx
 create mode 100644 tutorials/html/12-html-head/title.mdx
 create mode 100644 tutorials/html/12-html-head/viewport.mdx
 create mode 100644 tutorials/html/13-accessibility/accessibility-testing.mdx
 create mode 100644 tutorials/html/13-accessibility/accessible-buttons.mdx
 create mode 100644 tutorials/html/13-accessibility/accessible-forms.mdx
 create mode 100644 tutorials/html/13-accessibility/accessible-links.mdx
 create mode 100644 tutorials/html/13-accessibility/accessible-names.mdx
 create mode 100644 tutorials/html/13-accessibility/accessible-tables.mdx
 create mode 100644 tutorials/html/13-accessibility/alt-text.mdx
 create mode 100644 tutorials/html/13-accessibility/aria-describedby.mdx
 create mode 100644 tutorials/html/13-accessibility/aria-hidden.mdx
 create mode 100644 tutorials/html/13-accessibility/aria-introduction.mdx
 create mode 100644 tutorials/html/13-accessibility/aria-label.mdx
 create mode 100644 tutorials/html/13-accessibility/aria-labelledby.mdx
 create mode 100644 tutorials/html/13-accessibility/aria-live.mdx
 create mode 100644 tutorials/html/13-accessibility/aria-roles.mdx
 create mode 100644 tutorials/html/13-accessibility/aria-states-properties.mdx
 create mode 100644 tutorials/html/13-accessibility/focus-management.mdx
 create mode 100644 tutorials/html/13-accessibility/introduction-to-a11y.mdx
 create mode 100644 tutorials/html/13-accessibility/keyboard-accessibility.mdx
 create mode 100644 tutorials/html/13-accessibility/screen-readers.mdx
 create mode 100644 tutorials/html/13-accessibility/semantic-accessibility.mdx
 create mode 100644 tutorials/html/13-accessibility/wcag-basics.mdx
 create mode 100644 tutorials/html/25-interview-preparation/accessibility-questions.mdx
 create mode 100644 tutorials/html/25-interview-preparation/forms-questions.mdx
 create mode 100644 tutorials/html/25-interview-preparation/frontend-interview-html.mdx
 create mode 100644 tutorials/html/25-interview-preparation/html-advanced-questions.mdx
 create mode 100644 tutorials/html/25-interview-preparation/html-beginner-questions.mdx
 create mode 100644 tutorials/html/25-interview-preparation/html-intermediate-questions.mdx
 create mode 100644 tutorials/html/25-interview-preparation/html-interview-questions.mdx
 create mode 100644 tutorials/html/25-interview-preparation/html5-questions.mdx
 create mode 100644 tutorials/html/25-interview-preparation/semantic-html-questions.mdx
 create mode 100644 tutorials/html/26-reference/attributes/alt.mdx
 create mode 100644 tutorials/html/26-reference/attributes/aria.mdx
 create mode 100644 tutorials/html/26-reference/attributes/class.mdx
 create mode 100644 tutorials/html/26-reference/attributes/href.mdx
 create mode 100644 tutorials/html/26-reference/attributes/id.mdx
 create mode 100644 tutorials/html/26-reference/attributes/src.mdx
 create mode 100644 tutorials/html/26-reference/browser-support.mdx
 create mode 100644 tutorials/html/26-reference/elements/a.mdx
 create mode 100644 tutorials/html/26-reference/elements/abbr.mdx
 create mode 100644 tutorials/html/26-reference/elements/article.mdx
 create mode 100644 tutorials/html/26-reference/elements/audio.mdx
 create mode 100644 tutorials/html/26-reference/elements/button.mdx
 create mode 100644 tutorials/html/26-reference/elements/div.mdx
 create mode 100644 tutorials/html/26-reference/elements/form.mdx
 create mode 100644 tutorials/html/26-reference/elements/h1-h6.mdx
 create mode 100644 tutorials/html/26-reference/elements/img.mdx
 create mode 100644 tutorials/html/26-reference/elements/input.mdx
 create mode 100644 tutorials/html/26-reference/elements/label.mdx
 create mode 100644 tutorials/html/26-reference/elements/main.mdx
 create mode 100644 tutorials/html/26-reference/elements/nav.mdx
 create mode 100644 tutorials/html/26-reference/elements/section.mdx
 create mode 100644 tutorials/html/26-reference/elements/table.mdx
 create mode 100644 tutorials/html/26-reference/elements/textarea.mdx
 create mode 100644 tutorials/html/26-reference/elements/video.mdx
 create mode 100644 tutorials/html/26-reference/entities.mdx
 create mode 100644 tutorials/html/26-reference/global-attributes.mdx
 create mode 100644 tutorials/html/26-reference/input-types.mdx
 create mode 100644 tutorials/html/26-reference/void-elements.mdx
 create mode 100644 tutorials/html/27-quiz/accessibility-quiz.mdx
 create mode 100644 tutorials/html/27-quiz/beginner-quiz.mdx
 create mode 100644 tutorials/html/27-quiz/elements-quiz.mdx
 create mode 100644 tutorials/html/27-quiz/final-html-quiz.mdx
 create mode 100644 tutorials/html/27-quiz/forms-quiz.mdx
 create mode 100644 tutorials/html/27-quiz/semantic-html-quiz.mdx
 create mode 100644 tutorials/html/27-quiz/seo-quiz.mdx

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 0fc964950..c594e2fa6 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -644,7 +644,7 @@ const config = {
         id: "tutorials",
         path: "tutorials",
         routeBasePath: "tutorials",
-        sidebarPath: require.resolve("./sidebarsCommunity.js"),
+        sidebarPath: require.resolve("./sidebars.ts"),
         remarkPlugins: [remarkMath],
         rehypePlugins: [rehypeKatex],
         showLastUpdateAuthor: true,
diff --git a/sidebars.ts b/sidebars.ts
new file mode 100644
index 000000000..6c6153b3c
--- /dev/null
+++ b/sidebars.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Ajay Dhangar
+ *
+ * This file defines the sidebar configuration for the CodeHarborHub Tutorials Docs.
+ * Each category represents a tutorial topic like HTML, CSS, JavaScript, React, Git, GitHub, and Cybersecurity.
+ *
+ * Licensed under the MIT License.
+ */
+
+import type { SidebarsConfig } from "@docusaurus/plugin-content-docs";
+
+const sidebars: SidebarsConfig = {
+  tutorialSidebar: [{ type: "autogenerated", dirName: "." }], 
+};
+
+export default sidebars;
diff --git a/src/theme/DocItem/Content/index.js b/src/theme/DocItem/Content/index.js
new file mode 100644
index 000000000..5fc93dd89
--- /dev/null
+++ b/src/theme/DocItem/Content/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import Content from '@theme-original/DocItem/Content';
+
+export default function ContentWrapper(props) {
+  return (
+    <>
+      <Content {...props} />
+    </>
+  );
+}
diff --git a/tutorials/html/01-getting-started/browser-developer-tools.mdx b/tutorials/html/01-getting-started/browser-developer-tools.mdx
index 632284254..60b50647d 100644
--- a/tutorials/html/01-getting-started/browser-developer-tools.mdx
+++ b/tutorials/html/01-getting-started/browser-developer-tools.mdx
@@ -12,8 +12,5 @@ keywords:
   - Chrome DevTools guide
   - web debugging tools
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [devtools, debugging, html, tools]
 ---
\ No newline at end of file
diff --git a/tutorials/html/01-getting-started/create-your-first-html-page.mdx b/tutorials/html/01-getting-started/create-your-first-html-page.mdx
index d01012cec..a6378983e 100644
--- a/tutorials/html/01-getting-started/create-your-first-html-page.mdx
+++ b/tutorials/html/01-getting-started/create-your-first-html-page.mdx
@@ -12,8 +12,5 @@ keywords:
   - index.html file
   - beginner HTML project
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, hands-on, beginner, tutorial]
 ---
\ No newline at end of file
diff --git a/tutorials/html/01-getting-started/how-the-web-works.mdx b/tutorials/html/01-getting-started/how-the-web-works.mdx
index 27b90a39a..dcaeaacc6 100644
--- a/tutorials/html/01-getting-started/how-the-web-works.mdx
+++ b/tutorials/html/01-getting-started/how-the-web-works.mdx
@@ -12,8 +12,5 @@ keywords:
   - DNS lookup process
   - browser rendering engine
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [web-basics, networking, html, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/01-getting-started/html-document-structure.mdx b/tutorials/html/01-getting-started/html-document-structure.mdx
index 44785c1bf..510dc938d 100644
--- a/tutorials/html/01-getting-started/html-document-structure.mdx
+++ b/tutorials/html/01-getting-started/html-document-structure.mdx
@@ -12,8 +12,5 @@ keywords:
   - meta tags in HTML
   - HTML page setup
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, markup, beginner, web-development]
 ---
\ No newline at end of file
diff --git a/tutorials/html/01-getting-started/html-history.mdx b/tutorials/html/01-getting-started/html-history.mdx
index 7d4ef285c..63d1cb594 100644
--- a/tutorials/html/01-getting-started/html-history.mdx
+++ b/tutorials/html/01-getting-started/html-history.mdx
@@ -12,9 +12,6 @@ keywords:
   - W3C and WHATWG
   - web standards history
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, web-development, history, web-standards]
 ---
 
diff --git a/tutorials/html/01-getting-started/html-vs-html5.mdx b/tutorials/html/01-getting-started/html-vs-html5.mdx
index 19997c07e..aa7212dc4 100644
--- a/tutorials/html/01-getting-started/html-vs-html5.mdx
+++ b/tutorials/html/01-getting-started/html-vs-html5.mdx
@@ -12,9 +12,6 @@ keywords:
   - HTML5 video and audio
   - modern HTML standards
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, html5, web-development, beginner]
 ---
 
diff --git a/tutorials/html/01-getting-started/index.mdx b/tutorials/html/01-getting-started/index.mdx
index d1df32d0a..a33617bab 100644
--- a/tutorials/html/01-getting-started/index.mdx
+++ b/tutorials/html/01-getting-started/index.mdx
@@ -11,9 +11,6 @@ keywords:
   - learn HTML basics
   - web development foundation
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, web-development, beginner, frontend]
 ---
 
diff --git a/tutorials/html/01-getting-started/what-is-html.mdx b/tutorials/html/01-getting-started/what-is-html.mdx
index b1b4204cd..c3b98835c 100644
--- a/tutorials/html/01-getting-started/what-is-html.mdx
+++ b/tutorials/html/01-getting-started/what-is-html.mdx
@@ -12,9 +12,6 @@ keywords:
   - HTML tags and positioning
   - web development basics
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, web-development, beginner, frontend]
 ---
 
diff --git a/tutorials/html/02-html-syntax/attributes.mdx b/tutorials/html/02-html-syntax/attributes.mdx
index 4ff66b80e..7ccb507b8 100644
--- a/tutorials/html/02-html-syntax/attributes.mdx
+++ b/tutorials/html/02-html-syntax/attributes.mdx
@@ -11,8 +11,5 @@ keywords:
   - data attributes
   - attribute value syntax
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, attributes, syntax, frontend]
 ---
\ No newline at end of file
diff --git a/tutorials/html/02-html-syntax/character-encoding.mdx b/tutorials/html/02-html-syntax/character-encoding.mdx
index 94c449494..67cbebd3a 100644
--- a/tutorials/html/02-html-syntax/character-encoding.mdx
+++ b/tutorials/html/02-html-syntax/character-encoding.mdx
@@ -11,8 +11,5 @@ keywords:
   - ASCII vs UTF-8
   - web page encoding
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, encoding, utf8, web-standards]
 ---
\ No newline at end of file
diff --git a/tutorials/html/02-html-syntax/comments.mdx b/tutorials/html/02-html-syntax/comments.mdx
index 66c2077f2..83969251b 100644
--- a/tutorials/html/02-html-syntax/comments.mdx
+++ b/tutorials/html/02-html-syntax/comments.mdx
@@ -11,8 +11,5 @@ keywords:
   - hiding code in HTML
   - code documentation
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, comments, clean-code, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/02-html-syntax/elements.mdx b/tutorials/html/02-html-syntax/elements.mdx
index 21cf58aaf..fd860ac23 100644
--- a/tutorials/html/02-html-syntax/elements.mdx
+++ b/tutorials/html/02-html-syntax/elements.mdx
@@ -11,8 +11,5 @@ keywords:
   - container elements
   - HTML element structure
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, elements, syntax, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/02-html-syntax/entities.mdx b/tutorials/html/02-html-syntax/entities.mdx
index 20f340eb8..e1131f3f7 100644
--- a/tutorials/html/02-html-syntax/entities.mdx
+++ b/tutorials/html/02-html-syntax/entities.mdx
@@ -11,8 +11,5 @@ keywords:
   - special characters in HTML
   - entity names vs entity numbers
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, entities, characters, web-standards]
 ---
\ No newline at end of file
diff --git a/tutorials/html/02-html-syntax/global-attributes.mdx b/tutorials/html/02-html-syntax/global-attributes.mdx
index affa7a154..95fbe9489 100644
--- a/tutorials/html/02-html-syntax/global-attributes.mdx
+++ b/tutorials/html/02-html-syntax/global-attributes.mdx
@@ -11,8 +11,5 @@ keywords:
   - contenteditable attribute
   - tabindex global attribute
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, attributes, global-attributes, frontend]
 ---
\ No newline at end of file
diff --git a/tutorials/html/02-html-syntax/index.mdx b/tutorials/html/02-html-syntax/index.mdx
index 8339187b4..4042e99d4 100644
--- a/tutorials/html/02-html-syntax/index.mdx
+++ b/tutorials/html/02-html-syntax/index.mdx
@@ -11,8 +11,5 @@ keywords:
   - learn HTML syntax
   - HTML coding conventions
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, web-development, syntax, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/02-html-syntax/nesting.mdx b/tutorials/html/02-html-syntax/nesting.mdx
index 3a2d853f5..c435a69b5 100644
--- a/tutorials/html/02-html-syntax/nesting.mdx
+++ b/tutorials/html/02-html-syntax/nesting.mdx
@@ -11,8 +11,5 @@ keywords:
   - HTML tree hierarchy
   - invalid nesting errors
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, nesting, dom, syntax]
 ---
\ No newline at end of file
diff --git a/tutorials/html/02-html-syntax/tags.mdx b/tutorials/html/02-html-syntax/tags.mdx
index f76e408f6..b669f094a 100644
--- a/tutorials/html/02-html-syntax/tags.mdx
+++ b/tutorials/html/02-html-syntax/tags.mdx
@@ -11,8 +11,5 @@ keywords:
   - self-closing tags
   - void tags in HTML
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, tags, markup, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/02-html-syntax/whitespace.mdx b/tutorials/html/02-html-syntax/whitespace.mdx
index f3f0cd9d0..68f436c67 100644
--- a/tutorials/html/02-html-syntax/whitespace.mdx
+++ b/tutorials/html/02-html-syntax/whitespace.mdx
@@ -11,8 +11,5 @@ keywords:
   - line breaks in HTML
   - pre tag white-space
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, whitespace, formatting, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/abbreviations.mdx b/tutorials/html/03-text-content/abbreviations.mdx
index a228497cc..2696c5e36 100644
--- a/tutorials/html/03-text-content/abbreviations.mdx
+++ b/tutorials/html/03-text-content/abbreviations.mdx
@@ -11,8 +11,5 @@ keywords:
   - acronym expansion HTML
   - title attribute tooltip
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, accessibility, semantics, typography]
 ---
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/citations.mdx b/tutorials/html/03-text-content/citations.mdx
index 77e594611..318382f55 100644
--- a/tutorials/html/03-text-content/citations.mdx
+++ b/tutorials/html/03-text-content/citations.mdx
@@ -11,8 +11,5 @@ keywords:
   - creative work citations
   - semantic cite tag
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, citations, semantics, web-standards]
 ---
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/code-text.mdx b/tutorials/html/03-text-content/code-text.mdx
index e1b8f5706..ade862816 100644
--- a/tutorials/html/03-text-content/code-text.mdx
+++ b/tutorials/html/03-text-content/code-text.mdx
@@ -11,8 +11,5 @@ keywords:
   - kbd tag HTML
   - computer text formatting
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, code-snippets, pre-tag, typography]
 ---
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/emphasis-and-italic.mdx b/tutorials/html/03-text-content/emphasis-and-italic.mdx
index 6ca5fa6a9..614557941 100644
--- a/tutorials/html/03-text-content/emphasis-and-italic.mdx
+++ b/tutorials/html/03-text-content/emphasis-and-italic.mdx
@@ -11,8 +11,5 @@ keywords:
   - semantic emphasis tag
   - stress emphasis HTML
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, typography, semantics, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/headings.mdx b/tutorials/html/03-text-content/headings.mdx
index aa9e115c5..a2a04e7d9 100644
--- a/tutorials/html/03-text-content/headings.mdx
+++ b/tutorials/html/03-text-content/headings.mdx
@@ -11,8 +11,5 @@ keywords:
   - heading hierarchy
   - SEO headings guide
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, headings, seo, typography]
 ---
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/horizontal-rule.mdx b/tutorials/html/03-text-content/horizontal-rule.mdx
index 6f2241138..8c9aa1236 100644
--- a/tutorials/html/03-text-content/horizontal-rule.mdx
+++ b/tutorials/html/03-text-content/horizontal-rule.mdx
@@ -11,8 +11,5 @@ keywords:
   - thematic break HTML
   - section divider HTML
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, hr-tag, layout, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/index.mdx b/tutorials/html/03-text-content/index.mdx
index d941e98d9..3c22cd04b 100644
--- a/tutorials/html/03-text-content/index.mdx
+++ b/tutorials/html/03-text-content/index.mdx
@@ -11,8 +11,5 @@ keywords:
   - semantic text HTML
   - web typography basics
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, text, typography, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/line-breaks.mdx b/tutorials/html/03-text-content/line-breaks.mdx
index 8dade3818..57c239bf5 100644
--- a/tutorials/html/03-text-content/line-breaks.mdx
+++ b/tutorials/html/03-text-content/line-breaks.mdx
@@ -11,8 +11,5 @@ keywords:
   - forced line breaks
   - inline breaks HTML
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, line-breaks, formatting, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/paragraphs.mdx b/tutorials/html/03-text-content/paragraphs.mdx
index 96f685e7f..426b34192 100644
--- a/tutorials/html/03-text-content/paragraphs.mdx
+++ b/tutorials/html/03-text-content/paragraphs.mdx
@@ -11,8 +11,5 @@ keywords:
   - block level text
   - text blocks HTML
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, paragraph, markup, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/quotations.mdx b/tutorials/html/03-text-content/quotations.mdx
index 279a18011..b1c29ca1b 100644
--- a/tutorials/html/03-text-content/quotations.mdx
+++ b/tutorials/html/03-text-content/quotations.mdx
@@ -11,8 +11,5 @@ keywords:
   - quote elements HTML
   - block vs inline quotation
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, quotations, markup, semantics]
 ---
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/semantic-text.mdx b/tutorials/html/03-text-content/semantic-text.mdx
index 02688a7c6..bbd525d6d 100644
--- a/tutorials/html/03-text-content/semantic-text.mdx
+++ b/tutorials/html/03-text-content/semantic-text.mdx
@@ -11,8 +11,5 @@ keywords:
   - time tag datetime
   - small tag fine print
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, semantics, accessibility, frontend]
 ---
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/strong-and-bold.mdx b/tutorials/html/03-text-content/strong-and-bold.mdx
index 6c5eb985e..f74ef50ef 100644
--- a/tutorials/html/03-text-content/strong-and-bold.mdx
+++ b/tutorials/html/03-text-content/strong-and-bold.mdx
@@ -11,8 +11,5 @@ keywords:
   - semantic strong tag
   - visual vs semantic emphasis
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, typography, semantics, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/subscript-and-superscript.mdx b/tutorials/html/03-text-content/subscript-and-superscript.mdx
index 76966dd58..674b76c9b 100644
--- a/tutorials/html/03-text-content/subscript-and-superscript.mdx
+++ b/tutorials/html/03-text-content/subscript-and-superscript.mdx
@@ -11,8 +11,5 @@ keywords:
   - subscript and superscript
   - chemical formulas HTML
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, math, formatting, typography]
 ---
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/underline.mdx b/tutorials/html/03-text-content/underline.mdx
index 60b21e352..2e51bd734 100644
--- a/tutorials/html/03-text-content/underline.mdx
+++ b/tutorials/html/03-text-content/underline.mdx
@@ -11,8 +11,5 @@ keywords:
   - text annotation HTML
   - semantic underline
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, typography, formatting, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/04-links-and-navigation/absolute-urls.mdx b/tutorials/html/04-links-and-navigation/absolute-urls.mdx
index a6e693e15..dbcbd4ed3 100644
--- a/tutorials/html/04-links-and-navigation/absolute-urls.mdx
+++ b/tutorials/html/04-links-and-navigation/absolute-urls.mdx
@@ -11,8 +11,5 @@ keywords:
   - HTTP HTTPS protocols
   - domain name linking
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, urls, networking, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/04-links-and-navigation/anchor-element.mdx b/tutorials/html/04-links-and-navigation/anchor-element.mdx
index b39c95bfa..47b58cb4c 100644
--- a/tutorials/html/04-links-and-navigation/anchor-element.mdx
+++ b/tutorials/html/04-links-and-navigation/anchor-element.mdx
@@ -11,8 +11,5 @@ keywords:
   - href attribute syntax
   - hyperlink creation
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, anchor-tag, links, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/04-links-and-navigation/download-links.mdx b/tutorials/html/04-links-and-navigation/download-links.mdx
index df3bb9763..bebe0e04e 100644
--- a/tutorials/html/04-links-and-navigation/download-links.mdx
+++ b/tutorials/html/04-links-and-navigation/download-links.mdx
@@ -11,8 +11,5 @@ keywords:
   - save as link filename
   - anchor download feature
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, download, file-handling, frontend]
 ---
\ No newline at end of file
diff --git a/tutorials/html/04-links-and-navigation/email-links.mdx b/tutorials/html/04-links-and-navigation/email-links.mdx
index 459fe69a1..0c8e82d4b 100644
--- a/tutorials/html/04-links-and-navigation/email-links.mdx
+++ b/tutorials/html/04-links-and-navigation/email-links.mdx
@@ -11,8 +11,5 @@ keywords:
   - mailto subject parameter
   - email action HTML
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, mailto, email-links, forms]
 ---
\ No newline at end of file
diff --git a/tutorials/html/04-links-and-navigation/external-links.mdx b/tutorials/html/04-links-and-navigation/external-links.mdx
index add7e8ea6..8d33ce621 100644
--- a/tutorials/html/04-links-and-navigation/external-links.mdx
+++ b/tutorials/html/04-links-and-navigation/external-links.mdx
@@ -11,8 +11,5 @@ keywords:
   - linking to external sites
   - SEO link practices
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, external-links, seo, web-standards]
 ---
\ No newline at end of file
diff --git a/tutorials/html/04-links-and-navigation/index.mdx b/tutorials/html/04-links-and-navigation/index.mdx
index 28ca60a1b..ca22502ff 100644
--- a/tutorials/html/04-links-and-navigation/index.mdx
+++ b/tutorials/html/04-links-and-navigation/index.mdx
@@ -11,8 +11,5 @@ keywords:
   - hyperlinks in HTML
   - web navigation basics
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, links, navigation, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/04-links-and-navigation/internal-links.mdx b/tutorials/html/04-links-and-navigation/internal-links.mdx
index 0361ba324..3359d228f 100644
--- a/tutorials/html/04-links-and-navigation/internal-links.mdx
+++ b/tutorials/html/04-links-and-navigation/internal-links.mdx
@@ -11,8 +11,5 @@ keywords:
   - element ID linking
   - hash fragment URL
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, internal-links, anchors, navigation]
 ---
\ No newline at end of file
diff --git a/tutorials/html/04-links-and-navigation/link-security.mdx b/tutorials/html/04-links-and-navigation/link-security.mdx
index a1e9efca7..2adf9926e 100644
--- a/tutorials/html/04-links-and-navigation/link-security.mdx
+++ b/tutorials/html/04-links-and-navigation/link-security.mdx
@@ -11,8 +11,5 @@ keywords:
   - HTML link security
   - rel nofollow SEO
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, security, rel-attribute, web-safety]
 ---
\ No newline at end of file
diff --git a/tutorials/html/04-links-and-navigation/navigation-menus.mdx b/tutorials/html/04-links-and-navigation/navigation-menus.mdx
index 773eed14d..a6d2556d2 100644
--- a/tutorials/html/04-links-and-navigation/navigation-menus.mdx
+++ b/tutorials/html/04-links-and-navigation/navigation-menus.mdx
@@ -11,8 +11,5 @@ keywords:
   - semantic site navigation
   - accessible nav bar
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, navigation, nav-tag, accessibility]
 ---
\ No newline at end of file
diff --git a/tutorials/html/04-links-and-navigation/relative-urls.mdx b/tutorials/html/04-links-and-navigation/relative-urls.mdx
index db48c96fb..2f7efe9d4 100644
--- a/tutorials/html/04-links-and-navigation/relative-urls.mdx
+++ b/tutorials/html/04-links-and-navigation/relative-urls.mdx
@@ -11,8 +11,5 @@ keywords:
   - directory traversal dot notation
   - site path structure
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, paths, relative-urls, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/04-links-and-navigation/target-attribute.mdx b/tutorials/html/04-links-and-navigation/target-attribute.mdx
index 21dcc5fa6..6f6b3e496 100644
--- a/tutorials/html/04-links-and-navigation/target-attribute.mdx
+++ b/tutorials/html/04-links-and-navigation/target-attribute.mdx
@@ -11,8 +11,5 @@ keywords:
   - target _self
   - opening link in new tab
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, target-attribute, UX, links]
 ---
\ No newline at end of file
diff --git a/tutorials/html/04-links-and-navigation/telephone-links.mdx b/tutorials/html/04-links-and-navigation/telephone-links.mdx
index f6db4fb3d..bf7d8f768 100644
--- a/tutorials/html/04-links-and-navigation/telephone-links.mdx
+++ b/tutorials/html/04-links-and-navigation/telephone-links.mdx
@@ -11,8 +11,5 @@ keywords:
   - telephone protocol link
   - mobile phone linking
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
 tags: [html, mobile, click-to-call, usability]
 ---
\ No newline at end of file
diff --git a/tutorials/html/05-images/accessible-images.mdx b/tutorials/html/05-images/accessible-images.mdx
index a110bbf23..b63da577c 100644
--- a/tutorials/html/05-images/accessible-images.mdx
+++ b/tutorials/html/05-images/accessible-images.mdx
@@ -11,8 +11,6 @@ keywords:
   - SVG accessibility aria
   - web accessibility WCAG images
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, accessibility, wcag, a11y]
 ---
\ No newline at end of file
diff --git a/tutorials/html/05-images/figure-and-figcaption.mdx b/tutorials/html/05-images/figure-and-figcaption.mdx
index e60b776d5..66f576226 100644
--- a/tutorials/html/05-images/figure-and-figcaption.mdx
+++ b/tutorials/html/05-images/figure-and-figcaption.mdx
@@ -11,8 +11,6 @@ keywords:
   - image with caption HTML
   - semantic image wrapping
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, figure, semantics, typography]
 ---
\ No newline at end of file
diff --git a/tutorials/html/05-images/image-formats.mdx b/tutorials/html/05-images/image-formats.mdx
index d6acf26c2..b306b147b 100644
--- a/tutorials/html/05-images/image-formats.mdx
+++ b/tutorials/html/05-images/image-formats.mdx
@@ -11,8 +11,6 @@ keywords:
   - SVG vector graphics
   - JPEG vs PNG lossy lossless
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, image-formats, webp, avif, performance]
 ---
\ No newline at end of file
diff --git a/tutorials/html/05-images/img-element.mdx b/tutorials/html/05-images/img-element.mdx
index 18a09beaf..7802ec308 100644
--- a/tutorials/html/05-images/img-element.mdx
+++ b/tutorials/html/05-images/img-element.mdx
@@ -11,8 +11,6 @@ keywords:
   - inserting web images
   - void elements img
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, img-tag, markup, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/05-images/index.mdx b/tutorials/html/05-images/index.mdx
index 546dd515e..9bc37f4d8 100644
--- a/tutorials/html/05-images/index.mdx
+++ b/tutorials/html/05-images/index.mdx
@@ -11,8 +11,6 @@ keywords:
   - responsive images HTML
   - web image optimization
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, images, media, beginner]
 --- 
\ No newline at end of file
diff --git a/tutorials/html/05-images/lazy-loading.mdx b/tutorials/html/05-images/lazy-loading.mdx
index 400d6f3e6..a7b8e9e0f 100644
--- a/tutorials/html/05-images/lazy-loading.mdx
+++ b/tutorials/html/05-images/lazy-loading.mdx
@@ -11,8 +11,6 @@ keywords:
   - page speed optimization
   - image load performance
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, performance, lazy-loading, web-vitals]
 ---
\ No newline at end of file
diff --git a/tutorials/html/05-images/picture-element.mdx b/tutorials/html/05-images/picture-element.mdx
index dbbaaa266..2425f295e 100644
--- a/tutorials/html/05-images/picture-element.mdx
+++ b/tutorials/html/05-images/picture-element.mdx
@@ -11,8 +11,6 @@ keywords:
   - art direction web design
   - WebP AVIF fallback
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, picture-tag, responsive-design, media]
 ---
\ No newline at end of file
diff --git a/tutorials/html/05-images/responsive-images.mdx b/tutorials/html/05-images/responsive-images.mdx
index df3df7872..c76f11e58 100644
--- a/tutorials/html/05-images/responsive-images.mdx
+++ b/tutorials/html/05-images/responsive-images.mdx
@@ -11,8 +11,6 @@ keywords:
   - device pixel ratio
   - art direction HTML
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, responsive-design, images, css]
 ---
\ No newline at end of file
diff --git a/tutorials/html/05-images/src-and-alt.mdx b/tutorials/html/05-images/src-and-alt.mdx
index 3c4a186e2..9d3a0dd90 100644
--- a/tutorials/html/05-images/src-and-alt.mdx
+++ b/tutorials/html/05-images/src-and-alt.mdx
@@ -11,8 +11,6 @@ keywords:
   - descriptive alt text
   - image fallback text
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, accessibility, seo, attributes]
 ---
\ No newline at end of file
diff --git a/tutorials/html/05-images/srcset-and-sizes.mdx b/tutorials/html/05-images/srcset-and-sizes.mdx
index 83a797c18..0b096a796 100644
--- a/tutorials/html/05-images/srcset-and-sizes.mdx
+++ b/tutorials/html/05-images/srcset-and-sizes.mdx
@@ -11,8 +11,6 @@ keywords:
   - width descriptors w
   - resolution switching
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, srcset, responsive-images, performance]
 ---
\ No newline at end of file
diff --git a/tutorials/html/05-images/width-and-height.mdx b/tutorials/html/05-images/width-and-height.mdx
index 4f96a3e89..e5f9c626b 100644
--- a/tutorials/html/05-images/width-and-height.mdx
+++ b/tutorials/html/05-images/width-and-height.mdx
@@ -11,8 +11,6 @@ keywords:
   - image aspect ratio HTML
   - core web vitals images
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, performance, layout, web-vitals]
 ---
\ No newline at end of file
diff --git a/tutorials/html/06-lists/accessible-lists.mdx b/tutorials/html/06-lists/accessible-lists.mdx
index da9cea9f5..7a1926522 100644
--- a/tutorials/html/06-lists/accessible-lists.mdx
+++ b/tutorials/html/06-lists/accessible-lists.mdx
@@ -11,8 +11,6 @@ keywords:
   - CSS list style accessibility
   - ARIA list roles
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, accessibility, lists, a11y]
 ---
\ No newline at end of file
diff --git a/tutorials/html/06-lists/description-lists.mdx b/tutorials/html/06-lists/description-lists.mdx
index d459ddcdd..19371c098 100644
--- a/tutorials/html/06-lists/description-lists.mdx
+++ b/tutorials/html/06-lists/description-lists.mdx
@@ -11,8 +11,6 @@ keywords:
   - HTML definition list
   - key value pairing HTML
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, lists, description-list, semantics]
 ---
\ No newline at end of file
diff --git a/tutorials/html/06-lists/index.mdx b/tutorials/html/06-lists/index.mdx
index 7c3605b97..ce8eb3ddd 100644
--- a/tutorials/html/06-lists/index.mdx
+++ b/tutorials/html/06-lists/index.mdx
@@ -11,8 +11,6 @@ keywords:
   - unordered vs ordered lists
   - web list structuring
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, lists, markup, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/06-lists/nested-lists.mdx b/tutorials/html/06-lists/nested-lists.mdx
index bb47e8b40..6ca412a66 100644
--- a/tutorials/html/06-lists/nested-lists.mdx
+++ b/tutorials/html/06-lists/nested-lists.mdx
@@ -11,8 +11,6 @@ keywords:
   - sublists in HTML
   - nesting ul ol correctly
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, lists, nesting, structure]
 ---
\ No newline at end of file
diff --git a/tutorials/html/06-lists/ordered-lists.mdx b/tutorials/html/06-lists/ordered-lists.mdx
index 0e3dca27d..fee643a61 100644
--- a/tutorials/html/06-lists/ordered-lists.mdx
+++ b/tutorials/html/06-lists/ordered-lists.mdx
@@ -11,8 +11,6 @@ keywords:
   - numbered lists HTML
   - ol type and start attributes
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, lists, ordered-list, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/06-lists/unordered-lists.mdx b/tutorials/html/06-lists/unordered-lists.mdx
index 341328cf8..6daff2987 100644
--- a/tutorials/html/06-lists/unordered-lists.mdx
+++ b/tutorials/html/06-lists/unordered-lists.mdx
@@ -11,8 +11,6 @@ keywords:
   - li list item
   - bulleted lists HTML
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, lists, unordered-list, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/07-tables/caption.mdx b/tutorials/html/07-tables/caption.mdx
index ac2505fbf..e05cc10e3 100644
--- a/tutorials/html/07-tables/caption.mdx
+++ b/tutorials/html/07-tables/caption.mdx
@@ -11,8 +11,6 @@ keywords:
   - caption placement table
   - table accessibility caption
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, tables, caption, accessibility]
 ---
\ No newline at end of file
diff --git a/tutorials/html/07-tables/colspan-rowspan.mdx b/tutorials/html/07-tables/colspan-rowspan.mdx
index 416d1629f..1d78f6df8 100644
--- a/tutorials/html/07-tables/colspan-rowspan.mdx
+++ b/tutorials/html/07-tables/colspan-rowspan.mdx
@@ -11,8 +11,6 @@ keywords:
   - merge table cells
   - multi column table cells
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, tables, attributes, layout]
 ---
\ No newline at end of file
diff --git a/tutorials/html/07-tables/index.mdx b/tutorials/html/07-tables/index.mdx
index ced062742..a12d7329f 100644
--- a/tutorials/html/07-tables/index.mdx
+++ b/tutorials/html/07-tables/index.mdx
@@ -11,8 +11,6 @@ keywords:
   - tabular data HTML
   - web tables guide
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, tables, markup, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/07-tables/responsive-tables.mdx b/tutorials/html/07-tables/responsive-tables.mdx
index 28b14beea..7598e0f82 100644
--- a/tutorials/html/07-tables/responsive-tables.mdx
+++ b/tutorials/html/07-tables/responsive-tables.mdx
@@ -11,8 +11,6 @@ keywords:
   - overflow scroll table
   - table responsive CSS
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, tables, responsive-design, css]
 ---
\ No newline at end of file
diff --git a/tutorials/html/07-tables/table-accessibility.mdx b/tutorials/html/07-tables/table-accessibility.mdx
index dfaa7b0d6..d597b1b6b 100644
--- a/tutorials/html/07-tables/table-accessibility.mdx
+++ b/tutorials/html/07-tables/table-accessibility.mdx
@@ -11,8 +11,6 @@ keywords:
   - table scope headers attribute
   - WCAG table guidelines
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, tables, accessibility, a11y]
 ---
\ No newline at end of file
diff --git a/tutorials/html/07-tables/table-basics.mdx b/tutorials/html/07-tables/table-basics.mdx
index 838e557bb..69a06fe61 100644
--- a/tutorials/html/07-tables/table-basics.mdx
+++ b/tutorials/html/07-tables/table-basics.mdx
@@ -11,8 +11,6 @@ keywords:
   - tabular data representation
   - HTML markup tables
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, tables, markup, beginner]
 ---
\ No newline at end of file
diff --git a/tutorials/html/07-tables/table-headings.mdx b/tutorials/html/07-tables/table-headings.mdx
index b652cca8a..8c47f6e92 100644
--- a/tutorials/html/07-tables/table-headings.mdx
+++ b/tutorials/html/07-tables/table-headings.mdx
@@ -11,8 +11,6 @@ keywords:
   - scope attribute table
   - semantic table headers
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, tables, headers, accessibility]
 ---
\ No newline at end of file
diff --git a/tutorials/html/07-tables/table-rows-and-cells.mdx b/tutorials/html/07-tables/table-rows-and-cells.mdx
index 55bf72640..e7ebac5b2 100644
--- a/tutorials/html/07-tables/table-rows-and-cells.mdx
+++ b/tutorials/html/07-tables/table-rows-and-cells.mdx
@@ -11,8 +11,6 @@ keywords:
   - table row data
   - table cell layout
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, tables, rows, cells]
 ---
\ No newline at end of file
diff --git a/tutorials/html/07-tables/thead-tbody-tfoot.mdx b/tutorials/html/07-tables/thead-tbody-tfoot.mdx
index 7818f0325..bb1db4837 100644
--- a/tutorials/html/07-tables/thead-tbody-tfoot.mdx
+++ b/tutorials/html/07-tables/thead-tbody-tfoot.mdx
@@ -11,8 +11,6 @@ keywords:
   - table header body footer
   - dataset layout HTML
   - CodeHarborHub HTML
-authors:
-  - name: ajay-dhangar
-    link: https://github.com/ajay-dhangar
+authors: [ajay-dhangar]
 tags: [html, tables, semantics, layout]
 ---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/accessible-forms.mdx b/tutorials/html/08-forms/accessible-forms.mdx
new file mode 100644
index 000000000..ab2a288b0
--- /dev/null
+++ b/tutorials/html/08-forms/accessible-forms.mdx
@@ -0,0 +1,16 @@
+---
+id: accessible-forms
+title: "Best Practices for Accessible HTML Forms"
+sidebar_label: "Accessible Forms"
+sidebar_position: 20
+slug: /html/forms/accessible-forms
+description: "Ensure forms comply with WCAG standards using proper labeling, explicit field grouping, clear error messages, and ARIA attributes."
+keywords:
+  - accessible HTML forms
+  - WCAG form accessibility
+  - aria-describedby form errors
+  - screen reader form navigation
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, accessibility, a11y]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/autocomplete.mdx b/tutorials/html/08-forms/autocomplete.mdx
new file mode 100644
index 000000000..67177802a
--- /dev/null
+++ b/tutorials/html/08-forms/autocomplete.mdx
@@ -0,0 +1,16 @@
+---
+id: autocomplete
+title: "Browser Autofill and Security: The autocomplete Attribute"
+sidebar_label: "Autocomplete"
+sidebar_position: 16
+slug: /html/forms/autocomplete
+description: "Guide browser autofill engines efficiently, manage user privacy, and specify standardized token values using autocomplete."
+keywords:
+  - HTML autocomplete attribute
+  - form autofill optimization
+  - turn off autocomplete
+  - autofill security tokens
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, autocomplete, ux]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/button.mdx b/tutorials/html/08-forms/button.mdx
new file mode 100644
index 000000000..37e33df08
--- /dev/null
+++ b/tutorials/html/08-forms/button.mdx
@@ -0,0 +1,16 @@
+---
+id: button
+title: "Flexible Interactive Buttons: The button Element"
+sidebar_label: "Button Element (<button>)"
+sidebar_position: 9
+slug: /html/forms/button
+description: "Learn why the button element is superior to input buttons for wrapping icons, nested markup, submit actions, and JavaScript events."
+keywords:
+  - HTML button tag
+  - button type submit reset
+  - rich content button HTML
+  - clickable button element
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, button, interactive]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/datalist.mdx b/tutorials/html/08-forms/datalist.mdx
new file mode 100644
index 000000000..1257e320e
--- /dev/null
+++ b/tutorials/html/08-forms/datalist.mdx
@@ -0,0 +1,16 @@
+---
+id: datalist
+title: "Autocomplete Autocompletion Lists: The datalist Element"
+sidebar_label: "Datalist (<datalist>)"
+sidebar_position: 8
+slug: /html/forms/datalist
+description: "Provide dynamic auto-complete suggestions for text inputs using the datalist tag combined with input list attributes."
+keywords:
+  - HTML datalist tag
+  - input list attribute
+  - autocomplete suggestion list
+  - dynamic search suggestions
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, datalist, autocomplete]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/fieldset-and-legend.mdx b/tutorials/html/08-forms/fieldset-and-legend.mdx
new file mode 100644
index 000000000..ce205534d
--- /dev/null
+++ b/tutorials/html/08-forms/fieldset-and-legend.mdx
@@ -0,0 +1,16 @@
+---
+id: fieldset-and-legend
+title: "Grouping Form Fields: fieldset and legend Tags"
+sidebar_label: "Fieldset & Legend"
+sidebar_position: 10
+slug: /html/forms/fieldset-and-legend
+description: "Organize related form sections semantically with fieldset containers and provide accessible section captions using legend elements."
+keywords:
+  - HTML fieldset tag
+  - HTML legend tag
+  - group form controls
+  - accessible fieldset legend
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, fieldset, semantics]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/form-action.mdx b/tutorials/html/08-forms/form-action.mdx
new file mode 100644
index 000000000..db94d3318
--- /dev/null
+++ b/tutorials/html/08-forms/form-action.mdx
@@ -0,0 +1,16 @@
+---
+id: form-action
+title: "Specifying Submission Endpoints: The action Attribute"
+sidebar_label: "Form Action Endpoint"
+sidebar_position: 18
+slug: /html/forms/form-action
+description: "Learn how the action attribute defines destination URLs for form processing and how button formaction overrides default endpoints."
+keywords:
+  - HTML form action attribute
+  - form submit URL
+  - formaction button override
+  - form handling endpoint
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, action, attributes]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/form-element.mdx b/tutorials/html/08-forms/form-element.mdx
new file mode 100644
index 000000000..a8d1eaff0
--- /dev/null
+++ b/tutorials/html/08-forms/form-element.mdx
@@ -0,0 +1,16 @@
+---
+id: form-element
+title: "The HTML form Element: Container for User Input"
+sidebar_label: "Form Element (<form>)"
+sidebar_position: 2
+slug: /html/forms/form-element
+description: "Learn how the form tag serves as the main container for interactive controls, specifying action URLs, submit behaviors, and encoding types."
+keywords:
+  - HTML form tag
+  - form element basics
+  - form submission HTML
+  - form container tag
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, container, beginner]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/form-methods.mdx b/tutorials/html/08-forms/form-methods.mdx
new file mode 100644
index 000000000..4f66dd82e
--- /dev/null
+++ b/tutorials/html/08-forms/form-methods.mdx
@@ -0,0 +1,16 @@
+---
+id: form-methods
+title: "HTTP Methods in Forms: GET vs POST"
+sidebar_label: "Form Methods (GET/POST)"
+sidebar_position: 17
+slug: /html/forms/form-methods
+description: "Understand the differences between method='GET' for query searches and method='POST' for secure server data submissions."
+keywords:
+  - form method GET vs POST
+  - HTTP GET method form
+  - HTTP POST method form
+  - form submission methods
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, http, backend]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/form-validation.mdx b/tutorials/html/08-forms/form-validation.mdx
new file mode 100644
index 000000000..ab5184c2f
--- /dev/null
+++ b/tutorials/html/08-forms/form-validation.mdx
@@ -0,0 +1,16 @@
+---
+id: form-validation
+title: "Native HTML Form Validation Overview"
+sidebar_label: "Validation Overview"
+sidebar_position: 11
+slug: /html/forms/form-validation
+description: "Explore client-side native HTML validation rules, automatic constraint checks, validation UI popups, and pseudo-class styling hooks."
+keywords:
+  - HTML form validation
+  - client side form validation
+  - native constraint validation
+  - form validation errors
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, validation, beginner]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/index.mdx b/tutorials/html/08-forms/index.mdx
index a468211d4..ebb00be71 100644
--- a/tutorials/html/08-forms/index.mdx
+++ b/tutorials/html/08-forms/index.mdx
@@ -1,3 +1,20 @@
+---
+id: forms-overview
+title: "Working with HTML Forms"
+sidebar_label: "Forms"
+sidebar_position: 1
+slug: /html/forms
+description: "Master HTML forms, input controls, validation rules, submission protocols, accessible form design, and form security best practices with CodeHarborHub."
+keywords:
+  - HTML forms overview
+  - HTML forms tutorial
+  - form controls HTML
+  - web forms guide
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, web-development, beginner]
+---
+
 ```
         ├── 08-forms/
         │   ├── index.mdx
diff --git a/tutorials/html/08-forms/input-element.mdx b/tutorials/html/08-forms/input-element.mdx
new file mode 100644
index 000000000..90b43d85b
--- /dev/null
+++ b/tutorials/html/08-forms/input-element.mdx
@@ -0,0 +1,16 @@
+---
+id: input-element
+title: "The Core HTML Input Element: Syntax and Generic Attributes"
+sidebar_label: "Input Element (<input>)"
+sidebar_position: 4
+slug: /html/forms/input-element
+description: "Understand the void input element, its default type behavior, common attributes like name, value, placeholder, and disabled status."
+keywords:
+  - HTML input tag
+  - input element overview
+  - input attributes name value
+  - void input element
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, input, beginner]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/input-types/checkbox.mdx b/tutorials/html/08-forms/input-types/checkbox.mdx
new file mode 100644
index 000000000..88d803d1e
--- /dev/null
+++ b/tutorials/html/08-forms/input-types/checkbox.mdx
@@ -0,0 +1,18 @@
+---
+id: input-type-checkbox
+title: "Checkboxes: type='checkbox'"
+sidebar_label: "Checkbox"
+sidebar_position: 14
+slug: /html/forms/input-types/checkbox
+description: "Master multi-select option groups using input type='checkbox', handling checked states, values, and indeterminate DOM properties."
+keywords:
+  - HTML input type checkbox
+  - checkbox element
+  - multi select checkboxes
+  - checkbox checked attribute
+  - CodeHarborHub HTML
+authors:
+  - name: ajay-dhangar
+    link: https://github.com/ajay-dhangar
+tags: [html, forms, input-type, checkbox]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/input-types/color.mdx b/tutorials/html/08-forms/input-types/color.mdx
new file mode 100644
index 000000000..3d0d882de
--- /dev/null
+++ b/tutorials/html/08-forms/input-types/color.mdx
@@ -0,0 +1,18 @@
+---
+id: input-type-color
+title: "Color Pickers: type='color'"
+sidebar_label: "Color"
+sidebar_position: 13
+slug: /html/forms/input-types/color
+description: "Embed native operating system color pickers to select hexadecimal color codes using input type='color'."
+keywords:
+  - HTML input type color
+  - color picker HTML
+  - hex color selection
+  - color input palette
+  - CodeHarborHub HTML
+authors:
+  - name: ajay-dhangar
+    link: https://github.com/ajay-dhangar
+tags: [html, forms, input-type, color]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/input-types/date.mdx b/tutorials/html/08-forms/input-types/date.mdx
new file mode 100644
index 000000000..5d139ad66
--- /dev/null
+++ b/tutorials/html/08-forms/input-types/date.mdx
@@ -0,0 +1,18 @@
+---
+id: input-type-date
+title: "Date Pickers: type='date'"
+sidebar_label: "Date"
+sidebar_position: 8
+slug: /html/forms/input-types/date
+description: "Integrate native browser calendar popups using input type='date', setting min/max date constraints, and managing ISO date formats."
+keywords:
+  - HTML input type date
+  - date picker HTML
+  - native calendar input
+  - date constraints min max
+  - CodeHarborHub HTML
+authors:
+  - name: ajay-dhangar
+    link: https://github.com/ajay-dhangar
+tags: [html, forms, input-type, date]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/input-types/datetime-local.mdx b/tutorials/html/08-forms/input-types/datetime-local.mdx
new file mode 100644
index 000000000..215a24d22
--- /dev/null
+++ b/tutorials/html/08-forms/input-types/datetime-local.mdx
@@ -0,0 +1,18 @@
+---
+id: input-type-datetime-local
+title: "Local Date and Time Inputs: type='datetime-local'"
+sidebar_label: "Datetime Local"
+sidebar_position: 10
+slug: /html/forms/input-types/datetime-local
+description: "Select both date and local time simultaneously without specifying time zones using input type='datetime-local'."
+keywords:
+  - HTML input type datetime-local
+  - date and time picker
+  - local timestamp input
+  - combined date time field
+  - CodeHarborHub HTML
+authors:
+  - name: ajay-dhangar
+    link: https://github.com/ajay-dhangar
+tags: [html, forms, input-type, date-time]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/input-types/email.mdx b/tutorials/html/08-forms/input-types/email.mdx
new file mode 100644
index 000000000..be43e801d
--- /dev/null
+++ b/tutorials/html/08-forms/input-types/email.mdx
@@ -0,0 +1,18 @@
+---
+id: input-type-email
+title: "Email Inputs: type='email'"
+sidebar_label: "Email"
+sidebar_position: 3
+slug: /html/forms/input-types/email
+description: "Use input type='email' to enforce browser-native email syntax validation and trigger email-optimized virtual keypads on mobile devices."
+keywords:
+  - HTML input type email
+  - email input validation
+  - mobile keyboard email
+  - email input multiple attribute
+  - CodeHarborHub HTML
+authors:
+  - name: ajay-dhangar
+    link: https://github.com/ajay-dhangar
+tags: [html, forms, input-type, email]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/input-types/file.mdx b/tutorials/html/08-forms/input-types/file.mdx
new file mode 100644
index 000000000..0b7116fc0
--- /dev/null
+++ b/tutorials/html/08-forms/input-types/file.mdx
@@ -0,0 +1,18 @@
+---
+id: input-type-file
+title: "File Uploads: type='file'"
+sidebar_label: "File Upload"
+sidebar_position: 16
+slug: /html/forms/input-types/file
+description: "Allow users to upload local files using input type='file', configuring accept filters, multiple selection, and enctype constraints."
+keywords:
+  - HTML input type file
+  - file upload field
+  - file input accept attribute
+  - multiple file upload HTML
+  - CodeHarborHub HTML
+authors:
+  - name: ajay-dhangar
+    link: https://github.com/ajay-dhangar
+tags: [html, forms, input-type, file-upload]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/input-types/hidden.mdx b/tutorials/html/08-forms/input-types/hidden.mdx
new file mode 100644
index 000000000..9de8a496e
--- /dev/null
+++ b/tutorials/html/08-forms/input-types/hidden.mdx
@@ -0,0 +1,18 @@
+---
+id: input-type-hidden
+title: "Hidden Inputs: type='hidden'"
+sidebar_label: "Hidden Input"
+sidebar_position: 18
+slug: /html/forms/input-types/hidden
+description: "Pass invisible state parameters, CSRF tokens, database IDs, and session keys safely during form submissions using input type='hidden'."
+keywords:
+  - HTML input type hidden
+  - hidden form field
+  - pass hidden data form
+  - CSRF token hidden input
+  - CodeHarborHub HTML
+authors:
+  - name: ajay-dhangar
+    link: https://github.com/ajay-dhangar
+tags: [html, forms, input-type, state]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/input-types/month.mdx b/tutorials/html/08-forms/input-types/month.mdx
new file mode 100644
index 000000000..d8090eeaf
--- /dev/null
+++ b/tutorials/html/08-forms/input-types/month.mdx
@@ -0,0 +1,18 @@
+---
+id: input-type-month
+title: "Month and Year Pickers: type='month'"
+sidebar_label: "Month"
+sidebar_position: 11
+slug: /html/forms/input-types/month
+description: "Collect specific year and month values using input type='month' for credit card expiry or monthly selection workflows."
+keywords:
+  - HTML input type month
+  - month year picker HTML
+  - monthly date selection
+  - card expiration month input
+  - CodeHarborHub HTML
+authors:
+  - name: ajay-dhangar
+    link: https://github.com/ajay-dhangar
+tags: [html, forms, input-type, date]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/input-types/number.mdx b/tutorials/html/08-forms/input-types/number.mdx
new file mode 100644
index 000000000..e4f27918b
--- /dev/null
+++ b/tutorials/html/08-forms/input-types/number.mdx
@@ -0,0 +1,18 @@
+---
+id: input-type-number
+title: "Numeric Inputs: type='number'"
+sidebar_label: "Number"
+sidebar_position: 4
+slug: /html/forms/input-types/number
+description: "Capture numeric values using input type='number', managing spinner controls, minimum and maximum ranges, and step increments."
+keywords:
+  - HTML input type number
+  - numeric input field
+  - input step attribute
+  - number spinner HTML
+  - CodeHarborHub HTML
+authors:
+  - name: ajay-dhangar
+    link: https://github.com/ajay-dhangar
+tags: [html, forms, input-type, numbers]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/input-types/password.mdx b/tutorials/html/08-forms/input-types/password.mdx
new file mode 100644
index 000000000..17560e1bd
--- /dev/null
+++ b/tutorials/html/08-forms/input-types/password.mdx
@@ -0,0 +1,16 @@
+---
+id: input-type-password
+title: "Password Inputs: type='password'"
+sidebar_label: "Password"
+sidebar_position: 2
+slug: /html/forms/input-types/password
+description: "Discover how to mask sensitive character entries using input type='password', security considerations, and toggle visibility patterns."
+keywords:
+  - HTML input type password
+  - password masking HTML
+  - password field security
+  - show hide password input
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, input-type, security]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/input-types/radio.mdx b/tutorials/html/08-forms/input-types/radio.mdx
new file mode 100644
index 000000000..38e63559a
--- /dev/null
+++ b/tutorials/html/08-forms/input-types/radio.mdx
@@ -0,0 +1,16 @@
+---
+id: input-type-radio
+title: "Radio Buttons: type='radio'"
+sidebar_label: "Radio Button"
+sidebar_position: 15
+slug: /html/forms/input-types/radio
+description: "Build mutually exclusive single-select option groups using input type='radio' tied together by matching name attributes."
+keywords:
+  - HTML input type radio
+  - radio button group
+  - single select radio input
+  - radio input name attribute
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, input-type, radio]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/input-types/range.mdx b/tutorials/html/08-forms/input-types/range.mdx
new file mode 100644
index 000000000..fb6f33129
--- /dev/null
+++ b/tutorials/html/08-forms/input-types/range.mdx
@@ -0,0 +1,16 @@
+---
+id: input-type-range
+title: "Range Sliders: type='range'"
+sidebar_label: "Range Slider"
+sidebar_position: 17
+slug: /html/forms/input-types/range
+description: "Create visual range sliders using input type='range', setting numerical bounds with min, max, step, and connecting to datalists."
+keywords:
+  - HTML input type range
+  - range slider element
+  - slider control HTML
+  - input range min max
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, input-type, range]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/input-types/search.mdx b/tutorials/html/08-forms/input-types/search.mdx
new file mode 100644
index 000000000..5aab6a6fb
--- /dev/null
+++ b/tutorials/html/08-forms/input-types/search.mdx
@@ -0,0 +1,16 @@
+---
+id: input-type-search
+title: "Search Inputs: type='search'"
+sidebar_label: "Search"
+sidebar_position: 7
+slug: /html/forms/input-types/search
+description: "Implement search fields using input type='search', styling search clears, and leveraging native browser search behavior."
+keywords:
+  - HTML input type search
+  - search box element
+  - search input clear button
+  - site search input
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, input-type, search]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/input-types/submit-reset-button.mdx b/tutorials/html/08-forms/input-types/submit-reset-button.mdx
new file mode 100644
index 000000000..2b939abda
--- /dev/null
+++ b/tutorials/html/08-forms/input-types/submit-reset-button.mdx
@@ -0,0 +1,16 @@
+---
+id: input-type-submit-reset-button
+title: "Submit, Reset, and Generic Input Buttons"
+sidebar_label: "Submit / Reset / Button"
+sidebar_position: 19
+slug: /html/forms/input-types/submit-reset-button
+description: "Understand input type='submit', type='reset', and type='button' usage, values, and how they contrast with the button tag."
+keywords:
+  - HTML input type submit
+  - input type reset
+  - input type button
+  - form action buttons
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, input-type, buttons]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/input-types/tel.mdx b/tutorials/html/08-forms/input-types/tel.mdx
new file mode 100644
index 000000000..d0114e0bd
--- /dev/null
+++ b/tutorials/html/08-forms/input-types/tel.mdx
@@ -0,0 +1,16 @@
+---
+id: input-type-tel
+title: "Telephone Inputs: type='tel'"
+sidebar_label: "Telephone"
+sidebar_position: 5
+slug: /html/forms/input-types/tel
+description: "Learn how input type='tel' invokes mobile phone keypads and pairs with regular expressions for international telephone format validation."
+keywords:
+  - HTML input type tel
+  - telephone input field
+  - phone number input HTML
+  - mobile keypad tel
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, input-type, mobile]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/input-types/text.mdx b/tutorials/html/08-forms/input-types/text.mdx
new file mode 100644
index 000000000..542647f2b
--- /dev/null
+++ b/tutorials/html/08-forms/input-types/text.mdx
@@ -0,0 +1,16 @@
+---
+id: input-type-text
+title: "Text Inputs: type='text'"
+sidebar_label: "Text"
+sidebar_position: 1
+slug: /html/forms/input-types/text
+description: "Learn how to capture single-line text data using input type='text', configuring default values, placeholders, and character limits."
+keywords:
+  - HTML input type text
+  - single line text input
+  - text field HTML
+  - input placeholder text
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, input-type, text]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/input-types/time.mdx b/tutorials/html/08-forms/input-types/time.mdx
new file mode 100644
index 000000000..7c09fcde3
--- /dev/null
+++ b/tutorials/html/08-forms/input-types/time.mdx
@@ -0,0 +1,16 @@
+---
+id: input-type-time
+title: "Time Pickers: type='time'"
+sidebar_label: "Time"
+sidebar_position: 9
+slug: /html/forms/input-types/time
+description: "Capture hours, minutes, and seconds using input type='time' with native time pickers and step granularity configuration."
+keywords:
+  - HTML input type time
+  - time picker element
+  - time selector HTML
+  - time input step attribute
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, input-type, time]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/input-types/url.mdx b/tutorials/html/08-forms/input-types/url.mdx
new file mode 100644
index 000000000..dc8a09de1
--- /dev/null
+++ b/tutorials/html/08-forms/input-types/url.mdx
@@ -0,0 +1,16 @@
+---
+id: input-type-url
+title: "URL Inputs: type='url'"
+sidebar_label: "URL"
+sidebar_position: 6
+slug: /html/forms/input-types/url
+description: "Capture well-formed web addresses with input type='url', built-in protocol validation, and mobile URL keypads."
+keywords:
+  - HTML input type url
+  - web address input field
+  - URL input validation
+  - website URL form field
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, input-type, url]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/input-types/week.mdx b/tutorials/html/08-forms/input-types/week.mdx
new file mode 100644
index 000000000..152a87bfb
--- /dev/null
+++ b/tutorials/html/08-forms/input-types/week.mdx
@@ -0,0 +1,16 @@
+---
+id: input-type-week
+title: "Week Pickers: type='week'"
+sidebar_label: "Week"
+sidebar_position: 12
+slug: /html/forms/input-types/week
+description: "Select specific calendar week numbers and years using input type='week' for scheduling and reporting applications."
+keywords:
+  - HTML input type week
+  - week selector HTML
+  - calendar week picker
+  - ISO week date input
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, input-type, date]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/label-element.mdx b/tutorials/html/08-forms/label-element.mdx
new file mode 100644
index 000000000..b3cfddbd2
--- /dev/null
+++ b/tutorials/html/08-forms/label-element.mdx
@@ -0,0 +1,15 @@
+---
+id: label-element
+title: "Connecting Labels with Form Controls: label and the for Attribute"
+sidebar_label: "Label Element (<label>)"
+sidebar_position: 3
+slug: /html/forms/label-element
+description: "Master the label tag and for attribute to improve form usability, extend click targets, and provide proper accessible names for screen readers."
+keywords:
+  - HTML label tag
+  - label for attribute
+  - form input labels
+  - form accessibility label
+  - CodeHarborHub HTML
+tags: [html, forms, label, accessibility]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/min-and-max.mdx b/tutorials/html/08-forms/min-and-max.mdx
new file mode 100644
index 000000000..90789543c
--- /dev/null
+++ b/tutorials/html/08-forms/min-and-max.mdx
@@ -0,0 +1,16 @@
+---
+id: min-and-max
+title: "Numerical and Date Range Bounds: min and max Attributes"
+sidebar_label: "Min & Max Attributes"
+sidebar_position: 15
+slug: /html/forms/min-and-max
+description: "Establish lower and upper bound thresholds for numeric, range, and date/time inputs using min and max attributes."
+keywords:
+  - HTML min attribute
+  - HTML max attribute
+  - number bounds validation
+  - date range limit HTML
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, validation, attributes]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/minlength-and-maxlength.mdx b/tutorials/html/08-forms/minlength-and-maxlength.mdx
new file mode 100644
index 000000000..1f5f6fede
--- /dev/null
+++ b/tutorials/html/08-forms/minlength-and-maxlength.mdx
@@ -0,0 +1,16 @@
+---
+id: minlength-and-maxlength
+title: "String Length Limits: minlength and maxlength Attributes"
+sidebar_label: "Minlength & Maxlength"
+sidebar_position: 14
+slug: /html/forms/minlength-and-maxlength
+description: "Restrict minimum and maximum character counts in text fields and textareas using minlength and maxlength attributes."
+keywords:
+  - HTML minlength attribute
+  - HTML maxlength attribute
+  - text input character limit
+  - enforce string bounds HTML
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, validation, attributes]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/multipart-form-data.mdx b/tutorials/html/08-forms/multipart-form-data.mdx
new file mode 100644
index 000000000..c905b1140
--- /dev/null
+++ b/tutorials/html/08-forms/multipart-form-data.mdx
@@ -0,0 +1,16 @@
+---
+id: multipart-form-data
+title: "Handling File Submissions: enctype='multipart/form-data'"
+sidebar_label: "Form Encoding (enctype)"
+sidebar_position: 19
+slug: /html/forms/multipart-form-data
+description: "Master form encoding types (enctype) including application/x-www-form-urlencoded and multipart/form-data for binary file uploads."
+keywords:
+  - HTML enctype attribute
+  - multipart form data
+  - file upload form encoding
+  - form binary data submission
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, enctype, file-upload]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/option-and-optgroup.mdx b/tutorials/html/08-forms/option-and-optgroup.mdx
new file mode 100644
index 000000000..df6981dec
--- /dev/null
+++ b/tutorials/html/08-forms/option-and-optgroup.mdx
@@ -0,0 +1,16 @@
+---
+id: option-and-optgroup
+title: "Options and Grouping: option and optgroup Tags"
+sidebar_label: "Option & Optgroup"
+sidebar_position: 7
+slug: /html/forms/option-and-optgroup
+description: "Define selectable list choices using option tags and organize large menu options logically using optgroup categories."
+keywords:
+  - HTML option tag
+  - HTML optgroup tag
+  - select menu categories
+  - grouping drop down options
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, options, select]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/pattern.mdx b/tutorials/html/08-forms/pattern.mdx
new file mode 100644
index 000000000..b7cb87cc1
--- /dev/null
+++ b/tutorials/html/08-forms/pattern.mdx
@@ -0,0 +1,16 @@
+---
+id: pattern
+title: "Custom Text Validation: The pattern Attribute and Regular Expressions"
+sidebar_label: "Pattern Attribute (RegEx)"
+sidebar_position: 13
+slug: /html/forms/pattern
+description: "Enforce exact string formats like zip codes or custom IDs using the pattern attribute paired with regular expressions (RegEx)."
+keywords:
+  - HTML pattern attribute
+  - regex form validation
+  - regular expression input
+  - custom field format HTML
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, validation, regex]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/required.mdx b/tutorials/html/08-forms/required.mdx
new file mode 100644
index 000000000..57445f16e
--- /dev/null
+++ b/tutorials/html/08-forms/required.mdx
@@ -0,0 +1,16 @@
+---
+id: required
+title: "Enforcing Field Completion: The required Attribute"
+sidebar_label: "Required Attribute"
+sidebar_position: 12
+slug: /html/forms/required
+description: "Learn how to mark critical form inputs as mandatory using the required boolean attribute to prevent empty form submissions."
+keywords:
+  - HTML required attribute
+  - mandatory form fields
+  - empty field validation
+  - boolean required HTML
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, validation, attributes]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/secure-form-design.mdx b/tutorials/html/08-forms/secure-form-design.mdx
new file mode 100644
index 000000000..fa7fceb6e
--- /dev/null
+++ b/tutorials/html/08-forms/secure-form-design.mdx
@@ -0,0 +1,16 @@
+---
+id: secure-form-design
+title: "Designing Secure HTML Forms: Protecting Against CSRF and XSS"
+sidebar_label: "Secure Form Design"
+sidebar_position: 21
+slug: /html/forms/secure-form-design
+description: "Learn security fundamentals for form design, preventing Cross-Site Request Forgery (CSRF), Cross-Site Scripting (XSS), and data leakage."
+keywords:
+  - secure HTML forms
+  - form security best practices
+  - prevent CSRF in forms
+  - form input sanitization XSS
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, security, web-safety]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/select.mdx b/tutorials/html/08-forms/select.mdx
new file mode 100644
index 000000000..5bec8376f
--- /dev/null
+++ b/tutorials/html/08-forms/select.mdx
@@ -0,0 +1,16 @@
+---
+id: select
+title: "Drop-down Select Menus: The select Element"
+sidebar_label: "Select Menu (<select>)"
+sidebar_position: 6
+slug: /html/forms/select
+description: "Build single and multi-selection drop-down menus using the select tag, handling selection states, name binding, and menu sizes."
+keywords:
+  - HTML select tag
+  - drop down menu HTML
+  - select multiple attribute
+  - drop down list form
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, select, dropdown]
+---
\ No newline at end of file
diff --git a/tutorials/html/08-forms/textarea.mdx b/tutorials/html/08-forms/textarea.mdx
new file mode 100644
index 000000000..cf17b9a32
--- /dev/null
+++ b/tutorials/html/08-forms/textarea.mdx
@@ -0,0 +1,16 @@
+---
+id: textarea
+title: "Multi-line Text Inputs: The textarea Element"
+sidebar_label: "Textarea (<textarea>)"
+sidebar_position: 5
+slug: /html/forms/textarea
+description: "Master the textarea element for multi-line text blocks, configuring rows, cols, auto-wrap rules, and client-side resize behavior."
+keywords:
+  - HTML textarea tag
+  - multi line text input
+  - textarea rows and cols
+  - resize textarea CSS
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, forms, textarea, text]
+---
\ No newline at end of file
diff --git a/tutorials/html/09-semantic-html/address.mdx b/tutorials/html/09-semantic-html/address.mdx
new file mode 100644
index 000000000..b5256d00d
--- /dev/null
+++ b/tutorials/html/09-semantic-html/address.mdx
@@ -0,0 +1,15 @@
+---
+id: address-element
+title: "The Address Element: Author and Contact Information"
+sidebar_label: "Address (<address>)"
+sidebar_position: 10
+slug: /html/semantic-html/address
+description: "Learn how to supply contact details for document or article authors using the address element without misusing it for physical postal addresses."
+keywords:
+  - HTML address tag
+  - contact information HTML
+  - author contact semantic tag
+  - address element rules
+  - CodeHarborHub HTML
+tags: [html, semantic-html, metadata, contact]
+---
\ No newline at end of file
diff --git a/tutorials/html/09-semantic-html/article.mdx b/tutorials/html/09-semantic-html/article.mdx
new file mode 100644
index 000000000..93370903e
--- /dev/null
+++ b/tutorials/html/09-semantic-html/article.mdx
@@ -0,0 +1,15 @@
+---
+id: article-element
+title: "The Article Element: Self-Contained Reusable Content"
+sidebar_label: "Article (<article>)"
+sidebar_position: 7
+slug: /html/semantic-html/article
+description: "Master the article tag to encapsulate self-contained compositions like blog posts, news stories, product cards, and forum comments."
+keywords:
+  - HTML article tag
+  - self contained content tag
+  - article vs section HTML
+  - blog post markup semantic
+  - CodeHarborHub HTML
+tags: [html, semantic-html, layout, content]
+---
\ No newline at end of file
diff --git a/tutorials/html/09-semantic-html/aside.mdx b/tutorials/html/09-semantic-html/aside.mdx
new file mode 100644
index 000000000..cf3c0ef73
--- /dev/null
+++ b/tutorials/html/09-semantic-html/aside.mdx
@@ -0,0 +1,15 @@
+---
+id: aside-element
+title: "The Aside Element: Tangential and Sidebar Content"
+sidebar_label: "Aside (<aside>)"
+sidebar_position: 8
+slug: /html/semantic-html/aside
+description: "Use the aside element to structure complementary sidebars, callout boxes, related article links, and peripheral page details."
+keywords:
+  - HTML aside tag
+  - sidebar semantic tag
+  - tangential content HTML
+  - callout box semantic markup
+  - CodeHarborHub HTML
+tags: [html, semantic-html, sidebar, layout]
+---
\ No newline at end of file
diff --git a/tutorials/html/09-semantic-html/details.mdx b/tutorials/html/09-semantic-html/details.mdx
new file mode 100644
index 000000000..37c805f71
--- /dev/null
+++ b/tutorials/html/09-semantic-html/details.mdx
@@ -0,0 +1,15 @@
+---
+id: details-element
+title: "Native Disclosure Widgets: The details Element"
+sidebar_label: "Details (<details>)"
+sidebar_position: 11
+slug: /html/semantic-html/details
+description: "Create native, zero-JavaScript accordions and expandable toggle content widgets using the details tag."
+keywords:
+  - HTML details tag
+  - native accordion HTML
+  - disclosure widget element
+  - details open attribute
+  - CodeHarborHub HTML
+tags: [html, semantic-html, interactive, accordion]
+---
\ No newline at end of file
diff --git a/tutorials/html/09-semantic-html/dialog.mdx b/tutorials/html/09-semantic-html/dialog.mdx
new file mode 100644
index 000000000..15c95d89f
--- /dev/null
+++ b/tutorials/html/09-semantic-html/dialog.mdx
@@ -0,0 +1,15 @@
+---
+id: dialog-element
+title: "Native Modals and Popups: The dialog Element"
+sidebar_label: "Dialog (<dialog>)"
+sidebar_position: 13
+slug: /html/semantic-html/dialog
+description: "Build accessible modal dialogs and confirmation popups with backdrop styling, showModal() APIs, and focus trapping."
+keywords:
+  - HTML dialog tag
+  - native modal popup HTML
+  - dialog showModal method
+  - modal backdrop styling CSS
+  - CodeHarborHub HTML
+tags: [html, semantic-html, dialog, modal]
+---
\ No newline at end of file
diff --git a/tutorials/html/09-semantic-html/footer.mdx b/tutorials/html/09-semantic-html/footer.mdx
new file mode 100644
index 000000000..52c5f10dd
--- /dev/null
+++ b/tutorials/html/09-semantic-html/footer.mdx
@@ -0,0 +1,15 @@
+---
+id: footer-element
+title: "The Footer Element: Closing Document and Section Content"
+sidebar_label: "Footer (<footer>)"
+sidebar_position: 9
+slug: /html/semantic-html/footer
+description: "Structure page footers and section metadata using the footer tag for copyright notices, author links, terms, and sitemaps."
+keywords:
+  - HTML footer tag
+  - footer element usage
+  - site footer semantic structure
+  - copyright area HTML
+  - CodeHarborHub HTML
+tags: [html, semantic-html, layout, structure]
+---
\ No newline at end of file
diff --git a/tutorials/html/09-semantic-html/header.mdx b/tutorials/html/09-semantic-html/header.mdx
new file mode 100644
index 000000000..4325224d6
--- /dev/null
+++ b/tutorials/html/09-semantic-html/header.mdx
@@ -0,0 +1,15 @@
+---
+id: header-element
+title: "The Header Element: Defining Page and Section Headings"
+sidebar_label: "Header (<header>)"
+sidebar_position: 3
+slug: /html/semantic-html/header
+description: "Learn how to use the header tag to enclose introductory content, site branding, titles, and navigational links across page layouts and article blocks."
+keywords:
+  - HTML header tag
+  - header element usage
+  - page header semantic tag
+  - banner landmark HTML
+  - CodeHarborHub HTML
+tags: [html, semantic-html, layout, structure]
+---
\ No newline at end of file
diff --git a/tutorials/html/09-semantic-html/index.mdx b/tutorials/html/09-semantic-html/index.mdx
index ca84dd5ed..940bef753 100644
--- a/tutorials/html/09-semantic-html/index.mdx
+++ b/tutorials/html/09-semantic-html/index.mdx
@@ -1,17 +1,16 @@
-```
-        ├── 09-semantic-html/
-        │   ├── index.mdx
-        │   ├── why-semantic-html.mdx
-        │   ├── header.mdx
-        │   ├── nav.mdx
-        │   ├── main.mdx
-        │   ├── section.mdx
-        │   ├── article.mdx
-        │   ├── aside.mdx
-        │   ├── footer.mdx
-        │   ├── address.mdx
-        │   ├── details.mdx
-        │   ├── summary.mdx
-        │   ├── dialog.mdx
-        │   └── semantic-page-layout.mdx
-```
\ No newline at end of file
+---
+id: semantic-html-overview
+title: "Understanding Semantic HTML"
+sidebar_label: "Semantic HTML"
+sidebar_position: 1
+slug: /html/semantic-html
+description: "Master Semantic HTML5 elements to structure web pages logically, boost SEO rankings, improve screen reader accessibility, and maintain clean codebases with CodeHarborHub."
+keywords:
+  - Semantic HTML overview
+  - HTML5 semantic tags
+  - why use semantic HTML
+  - semantic web structure
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, semantic-html, web-development, beginner]
+---
\ No newline at end of file
diff --git a/tutorials/html/09-semantic-html/main.mdx b/tutorials/html/09-semantic-html/main.mdx
new file mode 100644
index 000000000..c1acbb0f7
--- /dev/null
+++ b/tutorials/html/09-semantic-html/main.mdx
@@ -0,0 +1,15 @@
+---
+id: main-element
+title: "The Main Element: Encapsulating Primary Page Content"
+sidebar_label: "Main (<main>)"
+sidebar_position: 5
+slug: /html/semantic-html/main
+description: "Understand the main tag rules, ensuring only one visible instance per document exists to represent the central content of the webpage."
+keywords:
+  - HTML main tag
+  - main element usage
+  - primary content area HTML
+  - main landmark screen readers
+  - CodeHarborHub HTML
+tags: [html, semantic-html, layout, structure]
+---
\ No newline at end of file
diff --git a/tutorials/html/09-semantic-html/nav.mdx b/tutorials/html/09-semantic-html/nav.mdx
new file mode 100644
index 000000000..35238291c
--- /dev/null
+++ b/tutorials/html/09-semantic-html/nav.mdx
@@ -0,0 +1,15 @@
+---
+id: nav-element
+title: "The Navigation Element: Structuring Site Menus"
+sidebar_label: "Navigation (<nav>)"
+sidebar_position: 4
+slug: /html/semantic-html/nav
+description: "Discover how to wrap primary, secondary, and breadcrumb navigation links with the nav tag for optimal landmark navigation."
+keywords:
+  - HTML nav tag
+  - navigation element usage
+  - site menu semantic markup
+  - navigation landmark ARIA
+  - CodeHarborHub HTML
+tags: [html, semantic-html, navigation, accessibility]
+---
\ No newline at end of file
diff --git a/tutorials/html/09-semantic-html/section.mdx b/tutorials/html/09-semantic-html/section.mdx
new file mode 100644
index 000000000..6d5761414
--- /dev/null
+++ b/tutorials/html/09-semantic-html/section.mdx
@@ -0,0 +1,15 @@
+---
+id: section-element
+title: "The Section Element: Grouping Thematic Content"
+sidebar_label: "Section (<section>)"
+sidebar_position: 6
+slug: /html/semantic-html/section
+description: "Learn when and how to divide web pages into standalone thematic groups using section elements with proper heading hierarchies."
+keywords:
+  - HTML section tag
+  - thematic grouping HTML
+  - section tag vs div
+  - document sectioning element
+  - CodeHarborHub HTML
+tags: [html, semantic-html, layout, structure]
+---
\ No newline at end of file
diff --git a/tutorials/html/09-semantic-html/semantic-page-layout.mdx b/tutorials/html/09-semantic-html/semantic-page-layout.mdx
new file mode 100644
index 000000000..d018db0d3
--- /dev/null
+++ b/tutorials/html/09-semantic-html/semantic-page-layout.mdx
@@ -0,0 +1,15 @@
+---
+id: semantic-page-layout
+title: "Building a Complete Webpage Layout with Semantic HTML"
+sidebar_label: "Complete Page Layout"
+sidebar_position: 14
+slug: /html/semantic-html/semantic-page-layout
+description: "Bring all semantic HTML5 elements together to construct a fully structured, accessible, clean, and SEO-optimized web application template."
+keywords:
+  - semantic HTML page template
+  - full semantic layout example
+  - HTML5 structural architecture
+  - accessible semantic webpage
+  - CodeHarborHub HTML
+tags: [html, semantic-html, layout, architecture]
+---
\ No newline at end of file
diff --git a/tutorials/html/09-semantic-html/summary.mdx b/tutorials/html/09-semantic-html/summary.mdx
new file mode 100644
index 000000000..6516e443c
--- /dev/null
+++ b/tutorials/html/09-semantic-html/summary.mdx
@@ -0,0 +1,15 @@
+---
+id: summary-element
+title: "Defining Disclosure Titles: The summary Element"
+sidebar_label: "Summary (<summary>)"
+sidebar_position: 12
+slug: /html/semantic-html/summary
+description: "Pair the summary element with details tags to specify clickable headers, custom disclosure icons, and accessible labels."
+keywords:
+  - HTML summary tag
+  - accordion header HTML
+  - details and summary tags
+  - customizable summary marker
+  - CodeHarborHub HTML
+tags: [html, semantic-html, interactive, accordion]
+---
\ No newline at end of file
diff --git a/tutorials/html/09-semantic-html/why-semantic-html.mdx b/tutorials/html/09-semantic-html/why-semantic-html.mdx
new file mode 100644
index 000000000..4b1831fec
--- /dev/null
+++ b/tutorials/html/09-semantic-html/why-semantic-html.mdx
@@ -0,0 +1,16 @@
+---
+id: why-semantic-html
+title: "Why Use Semantic HTML? Accessibility, SEO, and Maintainability"
+sidebar_label: "Why Semantic HTML?"
+sidebar_position: 2
+slug: /html/semantic-html/why-semantic-html
+description: "Explore the core benefits of semantic HTML tags over generic div containers, including accessibility features for assistive technology and SEO advantages."
+keywords:
+  - importance of semantic HTML
+  - semantic HTML vs div
+  - HTML accessibility benefits
+  - semantic tags SEO
+  - CodeHarborHub HTML
+authors: [ajay-dhangar]
+tags: [html, semantic-html, accessibility, seo]
+---
\ No newline at end of file
diff --git a/tutorials/html/10-audio-video/accessible-media.mdx b/tutorials/html/10-audio-video/accessible-media.mdx
new file mode 100644
index 000000000..ed7436007
--- /dev/null
+++ b/tutorials/html/10-audio-video/accessible-media.mdx
@@ -0,0 +1,15 @@
+---
+id: accessible-media
+title: "Best Practices for Accessible Audio and Video"
+sidebar_label: "Accessible Media"
+sidebar_position: 10
+slug: /html/audio-video/accessible-media
+description: "Ensure media compliance with WCAG principles by providing audio descriptions, transcripts, accessible controls, and flashing content warnings."
+keywords:
+  - accessible web media
+  - WCAG audio video compliance
+  - media transcripts HTML
+  - screen reader media controls
+  - CodeHarborHub HTML
+tags: [html, media, accessibility, a11y]
+---
\ No newline at end of file
diff --git a/tutorials/html/10-audio-video/audio.mdx b/tutorials/html/10-audio-video/audio.mdx
new file mode 100644
index 000000000..0993888d2
--- /dev/null
+++ b/tutorials/html/10-audio-video/audio.mdx
@@ -0,0 +1,15 @@
+---
+id: audio-element
+title: "The HTML Audio Element: Embedding Sound Files"
+sidebar_label: "Audio (<audio>)"
+sidebar_position: 2
+slug: /html/audio-video/audio
+description: "Master the audio tag to stream sound tracks, podcasts, and sound effects natively without third-party plugins."
+keywords:
+  - HTML audio tag
+  - audio element usage
+  - embed audio HTML
+  - web audio player
+  - CodeHarborHub HTML
+tags: [html, audio, media, elements]
+---
\ No newline at end of file
diff --git a/tutorials/html/10-audio-video/captions.mdx b/tutorials/html/10-audio-video/captions.mdx
new file mode 100644
index 000000000..97a95e538
--- /dev/null
+++ b/tutorials/html/10-audio-video/captions.mdx
@@ -0,0 +1,15 @@
+---
+id: captions
+title: "Adding Closed Captions for Hearing-Impaired Users"
+sidebar_label: "Captions"
+sidebar_position: 6
+slug: /html/audio-video/captions
+description: "Learn how to author and configure closed caption tracks (kind='captions') to transcribe speech and critical audio cues."
+keywords:
+  - HTML media captions
+  - closed captions WebVTT
+  - accessibility captions HTML
+  - track kind captions
+  - CodeHarborHub HTML
+tags: [html, captions, accessibility, media]
+---
\ No newline at end of file
diff --git a/tutorials/html/10-audio-video/index.mdx b/tutorials/html/10-audio-video/index.mdx
index ba661ed01..983034c4e 100644
--- a/tutorials/html/10-audio-video/index.mdx
+++ b/tutorials/html/10-audio-video/index.mdx
@@ -1,13 +1,15 @@
-```
-        ├── 10-audio-video/
-        │   ├── index.mdx
-        │   ├── audio.mdx
-        │   ├── video.mdx
-        │   ├── source.mdx
-        │   ├── track.mdx
-        │   ├── captions.mdx
-        │   ├── subtitles.mdx
-        │   ├── media-controls.mdx
-        │   ├── responsive-video.mdx
-        │   └── accessible-media.mdx
-```
\ No newline at end of file
+---
+id: audio-video-overview
+title: "Working with HTML Audio and Video"
+sidebar_label: "Audio and Video"
+sidebar_position: 1
+slug: /html/audio-video
+description: "Learn how to embed, manage, and deliver media in modern web applications using native HTML5 audio and video elements with CodeHarborHub."
+keywords:
+  - HTML audio video overview
+  - HTML5 media guide
+  - embedding media HTML
+  - web audio video tutorial
+  - CodeHarborHub HTML
+tags: [html, audio, video, media, beginner]
+---
\ No newline at end of file
diff --git a/tutorials/html/10-audio-video/media-controls.mdx b/tutorials/html/10-audio-video/media-controls.mdx
new file mode 100644
index 000000000..b1963f381
--- /dev/null
+++ b/tutorials/html/10-audio-video/media-controls.mdx
@@ -0,0 +1,15 @@
+---
+id: media-controls
+title: "Managing Native Attributes: controls, autoplay, loop, and muted"
+sidebar_label: "Media Controls & Attributes"
+sidebar_position: 8
+slug: /html/audio-video/media-controls
+description: "Master native media attributes to manage playback controls, muted behavior, loop conditions, and browser autoplay policies."
+keywords:
+  - HTML video controls attribute
+  - autoplay policy HTML5
+  - media loop muted attributes
+  - audio controls configuration
+  - CodeHarborHub HTML
+tags: [html, media, attributes, UX]
+---
\ No newline at end of file
diff --git a/tutorials/html/10-audio-video/responsive-video.mdx b/tutorials/html/10-audio-video/responsive-video.mdx
new file mode 100644
index 000000000..a2bbaf7a7
--- /dev/null
+++ b/tutorials/html/10-audio-video/responsive-video.mdx
@@ -0,0 +1,15 @@
+---
+id: responsive-video
+title: "Building Responsive HTML Videos with CSS"
+sidebar_label: "Responsive Video"
+sidebar_position: 9
+slug: /html/audio-video/responsive-video
+description: "Design fluid video embeds that scale across devices using modern CSS ratio properties, container constraints, and wrapper techniques."
+keywords:
+  - responsive video CSS
+  - aspect-ratio video HTML
+  - fluid video container
+  - mobile video scaling
+  - CodeHarborHub HTML
+tags: [html, video, css, responsive]
+---
\ No newline at end of file
diff --git a/tutorials/html/10-audio-video/source.mdx b/tutorials/html/10-audio-video/source.mdx
new file mode 100644
index 000000000..a9bfa966a
--- /dev/null
+++ b/tutorials/html/10-audio-video/source.mdx
@@ -0,0 +1,15 @@
+---
+id: source-element
+title: "Multiple Media Sources: The source Element"
+sidebar_label: "Source (<source>)"
+sidebar_position: 4
+slug: /html/audio-video/source
+description: "Provide cross-browser fallback formats for media playback using the source tag to serve WebM, MP4, MP3, and OGG assets."
+keywords:
+  - HTML source tag
+  - media fallback source
+  - source element video audio
+  - MIME type media HTML
+  - CodeHarborHub HTML
+tags: [html, media, audio, video, compatibility]
+---
\ No newline at end of file
diff --git a/tutorials/html/10-audio-video/subtitles.mdx b/tutorials/html/10-audio-video/subtitles.mdx
new file mode 100644
index 000000000..d7eca019c
--- /dev/null
+++ b/tutorials/html/10-audio-video/subtitles.mdx
@@ -0,0 +1,15 @@
+---
+id: subtitles
+title: "Adding Subtitles for Multi-Language Support"
+sidebar_label: "Subtitles"
+sidebar_position: 7
+slug: /html/audio-video/subtitles
+description: "Implement multi-language subtitle tracks (kind='subtitles') to translate dialogue and voiceovers for international audiences."
+keywords:
+  - HTML media subtitles
+  - multi language subtitles WebVTT
+  - video translation HTML
+  - track kind subtitles
+  - CodeHarborHub HTML
+tags: [html, subtitles, localization, media]
+---
\ No newline at end of file
diff --git a/tutorials/html/10-audio-video/track.mdx b/tutorials/html/10-audio-video/track.mdx
new file mode 100644
index 000000000..c0b9ae82d
--- /dev/null
+++ b/tutorials/html/10-audio-video/track.mdx
@@ -0,0 +1,15 @@
+---
+id: track-element
+title: "Timed Text Tracks: The track Element"
+sidebar_label: "Track (<track>)"
+sidebar_position: 5
+slug: /html/audio-video/track
+description: "Integrate WebVTT formatted text files into media elements to display captions, subtitles, chapter markers, and descriptions."
+keywords:
+  - HTML track tag
+  - WebVTT text track
+  - timed text track HTML
+  - media track element
+  - CodeHarborHub HTML
+tags: [html, track, media, accessibility]
+---
\ No newline at end of file
diff --git a/tutorials/html/10-audio-video/video.mdx b/tutorials/html/10-audio-video/video.mdx
new file mode 100644
index 000000000..5c4ece7ac
--- /dev/null
+++ b/tutorials/html/10-audio-video/video.mdx
@@ -0,0 +1,15 @@
+---
+id: video-element
+title: "The HTML Video Element: Embedding Video Content"
+sidebar_label: "Video (<video>)"
+sidebar_position: 3
+slug: /html/audio-video/video
+description: "Discover how to embed responsive, self-hosted video players with poster images, playback controls, and preload settings."
+keywords:
+  - HTML video tag
+  - video element usage
+  - HTML5 video player
+  - video poster attribute
+  - CodeHarborHub HTML
+tags: [html, video, media, elements]
+---
\ No newline at end of file
diff --git a/tutorials/html/11-embedded-content/canvas.mdx b/tutorials/html/11-embedded-content/canvas.mdx
new file mode 100644
index 000000000..86001e3f5
--- /dev/null
+++ b/tutorials/html/11-embedded-content/canvas.mdx
@@ -0,0 +1,15 @@
+---
+id: canvas-element
+title: "Dynamic Bitmaps and Rendering: The canvas Element"
+sidebar_label: "Canvas (<canvas>)"
+sidebar_position: 5
+slug: /html/embedded-content/canvas
+description: "Explore pixel-based dynamic drawing, 2D/3D graphics, games, and real-time visual renders using the HTML5 canvas tag and JavaScript APIs."
+keywords:
+  - HTML canvas tag
+  - 2D 3D graphics HTML
+  - dynamic pixel rendering
+  - HTML5 canvas graphics
+  - CodeHarborHub HTML
+tags: [html, canvas, graphics, javascript]
+---
\ No newline at end of file
diff --git a/tutorials/html/11-embedded-content/embed.mdx b/tutorials/html/11-embedded-content/embed.mdx
new file mode 100644
index 000000000..38d55de23
--- /dev/null
+++ b/tutorials/html/11-embedded-content/embed.mdx
@@ -0,0 +1,15 @@
+---
+id: embed-element
+title: "External Application Containers: The embed Element"
+sidebar_label: "Embed (<embed>)"
+sidebar_position: 3
+slug: /html/embedded-content/embed
+description: "Discover how to integrate interactive external content, browser plugins, and multimedia resources using the void embed element."
+keywords:
+  - HTML embed tag
+  - external plugin container
+  - void embed element
+  - interactive content HTML
+  - CodeHarborHub HTML
+tags: [html, embed, embedded-content, elements]
+---
\ No newline at end of file
diff --git a/tutorials/html/11-embedded-content/iframe.mdx b/tutorials/html/11-embedded-content/iframe.mdx
new file mode 100644
index 000000000..7f0e75e09
--- /dev/null
+++ b/tutorials/html/11-embedded-content/iframe.mdx
@@ -0,0 +1,15 @@
+---
+id: iframe-element
+title: "Inline Frames: The iframe Element"
+sidebar_label: "Inline Frames (<iframe>)"
+sidebar_position: 2
+slug: /html/embedded-content/iframe
+description: "Learn how to embed external web pages, videos, and applications using the iframe tag, managing seamless attributes and sandboxing options."
+keywords:
+  - HTML iframe tag
+  - inline frame element
+  - embed external web page
+  - iframe sandbox security
+  - CodeHarborHub HTML
+tags: [html, iframe, embedded-content, security]
+---
\ No newline at end of file
diff --git a/tutorials/html/11-embedded-content/index.mdx b/tutorials/html/11-embedded-content/index.mdx
index a909cd038..0c526e753 100644
--- a/tutorials/html/11-embedded-content/index.mdx
+++ b/tutorials/html/11-embedded-content/index.mdx
@@ -1,11 +1,15 @@
-```
-        ├── 11-embedded-content/
-        │   ├── index.mdx
-        │   ├── iframe.mdx
-        │   ├── embed.mdx
-        │   ├── object.mdx
-        │   ├── canvas.mdx
-        │   ├── svg.mdx
-        │   ├── maps.mdx
-        │   └── third-party-content-security.mdx
-```
\ No newline at end of file
+---
+id: embedded-content-overview
+title: "Working with Embedded Content in HTML"
+sidebar_label: "Embedded Content"
+sidebar_position: 1
+slug: /html/embedded-content
+description: "Master embedded content in HTML5, including inline frames, external objects, dynamic graphics, vector artwork, and third-party security with CodeHarborHub."
+keywords:
+  - HTML embedded content overview
+  - HTML embedded elements
+  - external media HTML
+  - web embedding tutorial
+  - CodeHarborHub HTML
+tags: [html, embedded-content, media, beginner]
+---
\ No newline at end of file
diff --git a/tutorials/html/11-embedded-content/maps.mdx b/tutorials/html/11-embedded-content/maps.mdx
new file mode 100644
index 000000000..657519a0a
--- /dev/null
+++ b/tutorials/html/11-embedded-content/maps.mdx
@@ -0,0 +1,15 @@
+---
+id: maps
+title: "Embedding Interactive Maps: Google Maps and OpenStreetMap"
+sidebar_label: "Embedding Maps"
+sidebar_position: 7
+slug: /html/embedded-content/maps
+description: "Learn best practices for embedding responsive, interactive geographic maps using iframe endpoints from Google Maps and OpenStreetMap."
+keywords:
+  - embed Google Maps HTML
+  - OpenStreetMap integration
+  - responsive map embed
+  - interactive map HTML
+  - CodeHarborHub HTML
+tags: [html, maps, embedded-content, responsive]
+---
\ No newline at end of file
diff --git a/tutorials/html/11-embedded-content/object.mdx b/tutorials/html/11-embedded-content/object.mdx
new file mode 100644
index 000000000..7fc0f864c
--- /dev/null
+++ b/tutorials/html/11-embedded-content/object.mdx
@@ -0,0 +1,15 @@
+---
+id: object-element
+title: "Generic Resource Embedding: The object Element"
+sidebar_label: "Object (<object>)"
+sidebar_position: 4
+slug: /html/embedded-content/object
+description: "Master the object tag to embed PDFs, flash legacy assets, external images, and fallback content cleanly into HTML documents."
+keywords:
+  - HTML object tag
+  - generic resource embedding
+  - embed PDF HTML
+  - object fallback content
+  - CodeHarborHub HTML
+tags: [html, object, embedded-content, fallback]
+---
\ No newline at end of file
diff --git a/tutorials/html/11-embedded-content/svg.mdx b/tutorials/html/11-embedded-content/svg.mdx
new file mode 100644
index 000000000..af3223962
--- /dev/null
+++ b/tutorials/html/11-embedded-content/svg.mdx
@@ -0,0 +1,15 @@
+---
+id: svg-element
+title: "Scalable Vector Graphics: Inline SVG in HTML"
+sidebar_label: "Inline SVG (<svg>)"
+sidebar_position: 6
+slug: /html/embedded-content/svg
+description: "Embed resolution-independent vector graphics directly into HTML using inline SVG, enabling CSS styling and JavaScript interactivity."
+keywords:
+  - HTML inline SVG
+  - scalable vector graphics HTML
+  - vector graphics rendering
+  - SVG styling CSS
+  - CodeHarborHub HTML
+tags: [html, svg, graphics, vectors]
+---
\ No newline at end of file
diff --git a/tutorials/html/11-embedded-content/third-party-content-security.mdx b/tutorials/html/11-embedded-content/third-party-content-security.mdx
new file mode 100644
index 000000000..87a77f9da
--- /dev/null
+++ b/tutorials/html/11-embedded-content/third-party-content-security.mdx
@@ -0,0 +1,15 @@
+---
+id: third-party-content-security
+title: "Third-Party Content Security: Sandbox, CSP, and CORS"
+sidebar_label: "Content Security & Isolation"
+sidebar_position: 8
+slug: /html/embedded-content/third-party-content-security
+description: "Protect web applications against clickjacking, XSS, and unauthorized data access when embedding third-party content using sandbox attributes and security policies."
+keywords:
+  - iframe sandbox security
+  - third party content isolation
+  - Content Security Policy iframe
+  - prevent clickjacking HTML
+  - CodeHarborHub HTML
+tags: [html, security, iframe, sandbox, csp]
+---
\ No newline at end of file
diff --git a/tutorials/html/12-html-head/base.mdx b/tutorials/html/12-html-head/base.mdx
new file mode 100644
index 000000000..66b0d299a
--- /dev/null
+++ b/tutorials/html/12-html-head/base.mdx
@@ -0,0 +1,15 @@
+---
+id: base-element
+title: "Specifying Document Base URLs: The base Element"
+sidebar_label: "Base Element (<base>)"
+sidebar_position: 12
+slug: /html/html-head/base
+description: "Understand how the base element sets default base URLs and target window behaviors for all relative links across a webpage."
+keywords:
+  - HTML base tag
+  - document base URL
+  - relative path base element
+  - target link base HTML
+  - CodeHarborHub HTML
+tags: [html, head, base, urls]
+---
\ No newline at end of file
diff --git a/tutorials/html/12-html-head/charset.mdx b/tutorials/html/12-html-head/charset.mdx
new file mode 100644
index 000000000..cb547bdb7
--- /dev/null
+++ b/tutorials/html/12-html-head/charset.mdx
@@ -0,0 +1,15 @@
+---
+id: charset
+title: "Character Encoding Declaration: UTF-8 and <meta charset>"
+sidebar_label: "Character Set (UTF-8)"
+sidebar_position: 6
+slug: /html/html-head/charset
+description: "Learn why declaring UTF-8 character encoding via meta charset inside the first 1024 bytes prevents rendering glitches and security exploits."
+keywords:
+  - HTML meta charset
+  - UTF-8 character encoding
+  - character set declaration
+  - HTML encoding best practices
+  - CodeHarborHub HTML
+tags: [html, head, charset, encoding]
+---
\ No newline at end of file
diff --git a/tutorials/html/12-html-head/favicon.mdx b/tutorials/html/12-html-head/favicon.mdx
new file mode 100644
index 000000000..b1d7f4f9b
--- /dev/null
+++ b/tutorials/html/12-html-head/favicon.mdx
@@ -0,0 +1,15 @@
+---
+id: favicon
+title: "Site Icons and Favicons: Linking App and Browser Branding"
+sidebar_label: "Favicons & App Icons"
+sidebar_position: 8
+slug: /html/html-head/favicon
+description: "Implement multi-resolution favicons, SVG icons, and mobile home-screen web app icons using link rel tags."
+keywords:
+  - HTML favicon link
+  - website icon rel shortcut
+  - apple-touch-icon HTML
+  - SVG favicon setup
+  - CodeHarborHub HTML
+tags: [html, head, favicon, branding]
+---
\ No newline at end of file
diff --git a/tutorials/html/12-html-head/head.mdx b/tutorials/html/12-html-head/head.mdx
new file mode 100644
index 000000000..17efc29aa
--- /dev/null
+++ b/tutorials/html/12-html-head/head.mdx
@@ -0,0 +1,15 @@
+---
+id: head-element
+title: "Document Metadata Container: The head Element"
+sidebar_label: "Head Container (<head>)"
+sidebar_position: 3
+slug: /html/html-head/head
+description: "Understand the structural role of the head tag in holding machine-readable information, metadata, stylesheets, and scripts before body rendering."
+keywords:
+  - HTML head tag
+  - document head element
+  - metadata container HTML
+  - web page head section
+  - CodeHarborHub HTML
+tags: [html, head, metadata, elements]
+---
\ No newline at end of file
diff --git a/tutorials/html/12-html-head/html.mdx b/tutorials/html/12-html-head/html.mdx
new file mode 100644
index 000000000..75c57343e
--- /dev/null
+++ b/tutorials/html/12-html-head/html.mdx
@@ -0,0 +1,15 @@
+---
+id: html-element
+title: "The Root Container: The html Element and lang Attribute"
+sidebar_label: "Root Element (<html>)"
+sidebar_position: 2
+slug: /html/html-head/html
+description: "Learn how the html tag acts as the top-level root element and why setting explicit lang attributes is vital for accessibility and localized search."
+keywords:
+  - HTML html tag
+  - root html element
+  - html lang attribute
+  - document root language
+  - CodeHarborHub HTML
+tags: [html, head, root, accessibility]
+---
\ No newline at end of file
diff --git a/tutorials/html/12-html-head/index.mdx b/tutorials/html/12-html-head/index.mdx
index 44f854bab..80b7dd3b2 100644
--- a/tutorials/html/12-html-head/index.mdx
+++ b/tutorials/html/12-html-head/index.mdx
@@ -1,16 +1,15 @@
-```
-        ├── 12-html-head/
-        │   ├── index.mdx
-        │   ├── html.mdx
-        │   ├── head.mdx
-        │   ├── title.mdx
-        │   ├── meta.mdx
-        │   ├── charset.mdx
-        │   ├── viewport.mdx
-        │   ├── favicon.mdx
-        │   ├── link.mdx
-        │   ├── style.mdx
-        │   ├── script.mdx
-        │   ├── base.mdx
-        │   └── metadata-best-practices.mdx
-```
\ No newline at end of file
+---
+id: html-head-overview
+title: "Document Metadata and the HTML Head Element"
+sidebar_label: "HTML Head"
+sidebar_position: 1
+slug: /html/html-head
+description: "Master document metadata, character encodings, viewport settings, external asset linking, and head optimizations with CodeHarborHub."
+keywords:
+  - HTML head overview
+  - HTML metadata guide
+  - head element tutorial
+  - document head configuration
+  - CodeHarborHub HTML
+tags: [html, head, metadata, beginner]
+---
\ No newline at end of file
diff --git a/tutorials/html/12-html-head/link.mdx b/tutorials/html/12-html-head/link.mdx
new file mode 100644
index 000000000..da0200d31
--- /dev/null
+++ b/tutorials/html/12-html-head/link.mdx
@@ -0,0 +1,15 @@
+---
+id: link-element
+title: "External Resource Linking: The link Element and Resource Hints"
+sidebar_label: "Link Element (<link>)"
+sidebar_position: 9
+slug: /html/html-head/link
+description: "Master the link tag for external stylesheets, canonical URLs, preloading, prefetching, and DNS preconnecting optimizations."
+keywords:
+  - HTML link tag
+  - stylesheet link rel
+  - resource hints preload preconnect
+  - canonical URL HTML
+  - CodeHarborHub HTML
+tags: [html, head, link, performance]
+---
\ No newline at end of file
diff --git a/tutorials/html/12-html-head/meta.mdx b/tutorials/html/12-html-head/meta.mdx
new file mode 100644
index 000000000..8775f8c93
--- /dev/null
+++ b/tutorials/html/12-html-head/meta.mdx
@@ -0,0 +1,15 @@
+---
+id: meta-element
+title: "Document Metadata: The meta Element and Key Names"
+sidebar_label: "Meta Tags (<meta>)"
+sidebar_position: 5
+slug: /html/html-head/meta
+description: "Discover how meta elements convey crucial page information to search crawlers, web browsers, and social sharing platforms."
+keywords:
+  - HTML meta tag
+  - meta description attribute
+  - meta keywords search engine
+  - page metadata HTML
+  - CodeHarborHub HTML
+tags: [html, head, meta, seo]
+---
\ No newline at end of file
diff --git a/tutorials/html/12-html-head/metadata-best-practices.mdx b/tutorials/html/12-html-head/metadata-best-practices.mdx
new file mode 100644
index 000000000..ac9d5a1fd
--- /dev/null
+++ b/tutorials/html/12-html-head/metadata-best-practices.mdx
@@ -0,0 +1,15 @@
+---
+id: metadata-best-practices
+title: "Document Head Metadata Best Practices, SEO, and Social Cards"
+sidebar_label: "Metadata Best Practices"
+sidebar_position: 13
+slug: /html/html-head/metadata-best-practices
+description: "Integrate Open Graph, Twitter Cards, SEO standards, and performance configurations for complete production-ready document headers."
+keywords:
+  - Open Graph meta tags
+  - Twitter Card metadata
+  - HTML head SEO best practices
+  - head performance optimization
+  - CodeHarborHub HTML
+tags: [html, head, metadata, seo, performance]
+---
\ No newline at end of file
diff --git a/tutorials/html/12-html-head/script.mdx b/tutorials/html/12-html-head/script.mdx
new file mode 100644
index 000000000..35d970fcc
--- /dev/null
+++ b/tutorials/html/12-html-head/script.mdx
@@ -0,0 +1,15 @@
+---
+id: script-element
+title: "Executing JavaScript: The script Element with async and defer"
+sidebar_label: "Script Element (<script>)"
+sidebar_position: 11
+slug: /html/html-head/script
+description: "Optimize JavaScript delivery in document headers using the script tag alongside async, defer, and module attributes to prevent parsing delays."
+keywords:
+  - HTML script tag
+  - script async defer
+  - javascript head loading
+  - non blocking script execution
+  - CodeHarborHub HTML
+tags: [html, head, script, performance]
+---
\ No newline at end of file
diff --git a/tutorials/html/12-html-head/style.mdx b/tutorials/html/12-html-head/style.mdx
new file mode 100644
index 000000000..aa7f28b31
--- /dev/null
+++ b/tutorials/html/12-html-head/style.mdx
@@ -0,0 +1,15 @@
+---
+id: style-element
+title: "Document-Level CSS: The style Element"
+sidebar_label: "Style Element (<style>)"
+sidebar_position: 10
+slug: /html/html-head/style
+description: "Embed critical CSS directly into the document head using the style tag to eliminate render-blocking stylesheet requests."
+keywords:
+  - HTML style tag
+  - internal CSS style element
+  - critical CSS head
+  - inline stylesheet HTML
+  - CodeHarborHub HTML
+tags: [html, head, style, css]
+---
\ No newline at end of file
diff --git a/tutorials/html/12-html-head/title.mdx b/tutorials/html/12-html-head/title.mdx
new file mode 100644
index 000000000..6d04fab9d
--- /dev/null
+++ b/tutorials/html/12-html-head/title.mdx
@@ -0,0 +1,15 @@
+---
+id: title-element
+title: "Document Title: The title Element for Browser Tabs and SEO"
+sidebar_label: "Document Title (<title>)"
+sidebar_position: 4
+slug: /html/html-head/title
+description: "Master writing effective title tags that appear on browser tabs, search engine results pages (SERPs), and social bookmarks."
+keywords:
+  - HTML title tag
+  - document title SEO
+  - browser tab title
+  - page title best practices
+  - CodeHarborHub HTML
+tags: [html, head, title, seo]
+---
\ No newline at end of file
diff --git a/tutorials/html/12-html-head/viewport.mdx b/tutorials/html/12-html-head/viewport.mdx
new file mode 100644
index 000000000..730346d82
--- /dev/null
+++ b/tutorials/html/12-html-head/viewport.mdx
@@ -0,0 +1,15 @@
+---
+id: viewport
+title: "Mobile Responsiveness: The Viewport Meta Tag"
+sidebar_label: "Viewport Tag"
+sidebar_position: 7
+slug: /html/html-head/viewport
+description: "Configure the meta viewport tag to control layout scaling, viewport dimensions, and pinch-zoom behaviors on mobile devices."
+keywords:
+  - HTML meta viewport
+  - mobile responsive viewport
+  - initial-scale width device-width
+  - responsive web design head
+  - CodeHarborHub HTML
+tags: [html, head, viewport, responsive]
+---
\ No newline at end of file
diff --git a/tutorials/html/13-accessibility/accessibility-testing.mdx b/tutorials/html/13-accessibility/accessibility-testing.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/13-accessibility/accessible-buttons.mdx b/tutorials/html/13-accessibility/accessible-buttons.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/13-accessibility/accessible-forms.mdx b/tutorials/html/13-accessibility/accessible-forms.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/13-accessibility/accessible-links.mdx b/tutorials/html/13-accessibility/accessible-links.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/13-accessibility/accessible-names.mdx b/tutorials/html/13-accessibility/accessible-names.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/13-accessibility/accessible-tables.mdx b/tutorials/html/13-accessibility/accessible-tables.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/13-accessibility/alt-text.mdx b/tutorials/html/13-accessibility/alt-text.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/13-accessibility/aria-describedby.mdx b/tutorials/html/13-accessibility/aria-describedby.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/13-accessibility/aria-hidden.mdx b/tutorials/html/13-accessibility/aria-hidden.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/13-accessibility/aria-introduction.mdx b/tutorials/html/13-accessibility/aria-introduction.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/13-accessibility/aria-label.mdx b/tutorials/html/13-accessibility/aria-label.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/13-accessibility/aria-labelledby.mdx b/tutorials/html/13-accessibility/aria-labelledby.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/13-accessibility/aria-live.mdx b/tutorials/html/13-accessibility/aria-live.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/13-accessibility/aria-roles.mdx b/tutorials/html/13-accessibility/aria-roles.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/13-accessibility/aria-states-properties.mdx b/tutorials/html/13-accessibility/aria-states-properties.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/13-accessibility/focus-management.mdx b/tutorials/html/13-accessibility/focus-management.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/13-accessibility/introduction-to-a11y.mdx b/tutorials/html/13-accessibility/introduction-to-a11y.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/13-accessibility/keyboard-accessibility.mdx b/tutorials/html/13-accessibility/keyboard-accessibility.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/13-accessibility/screen-readers.mdx b/tutorials/html/13-accessibility/screen-readers.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/13-accessibility/semantic-accessibility.mdx b/tutorials/html/13-accessibility/semantic-accessibility.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/13-accessibility/wcag-basics.mdx b/tutorials/html/13-accessibility/wcag-basics.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/25-interview-preparation/accessibility-questions.mdx b/tutorials/html/25-interview-preparation/accessibility-questions.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/25-interview-preparation/forms-questions.mdx b/tutorials/html/25-interview-preparation/forms-questions.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/25-interview-preparation/frontend-interview-html.mdx b/tutorials/html/25-interview-preparation/frontend-interview-html.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/25-interview-preparation/html-advanced-questions.mdx b/tutorials/html/25-interview-preparation/html-advanced-questions.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/25-interview-preparation/html-beginner-questions.mdx b/tutorials/html/25-interview-preparation/html-beginner-questions.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/25-interview-preparation/html-intermediate-questions.mdx b/tutorials/html/25-interview-preparation/html-intermediate-questions.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/25-interview-preparation/html-interview-questions.mdx b/tutorials/html/25-interview-preparation/html-interview-questions.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/25-interview-preparation/html5-questions.mdx b/tutorials/html/25-interview-preparation/html5-questions.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/25-interview-preparation/semantic-html-questions.mdx b/tutorials/html/25-interview-preparation/semantic-html-questions.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/attributes/alt.mdx b/tutorials/html/26-reference/attributes/alt.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/attributes/aria.mdx b/tutorials/html/26-reference/attributes/aria.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/attributes/class.mdx b/tutorials/html/26-reference/attributes/class.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/attributes/href.mdx b/tutorials/html/26-reference/attributes/href.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/attributes/id.mdx b/tutorials/html/26-reference/attributes/id.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/attributes/src.mdx b/tutorials/html/26-reference/attributes/src.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/browser-support.mdx b/tutorials/html/26-reference/browser-support.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/elements/a.mdx b/tutorials/html/26-reference/elements/a.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/elements/abbr.mdx b/tutorials/html/26-reference/elements/abbr.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/elements/article.mdx b/tutorials/html/26-reference/elements/article.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/elements/audio.mdx b/tutorials/html/26-reference/elements/audio.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/elements/button.mdx b/tutorials/html/26-reference/elements/button.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/elements/div.mdx b/tutorials/html/26-reference/elements/div.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/elements/form.mdx b/tutorials/html/26-reference/elements/form.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/elements/h1-h6.mdx b/tutorials/html/26-reference/elements/h1-h6.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/elements/img.mdx b/tutorials/html/26-reference/elements/img.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/elements/input.mdx b/tutorials/html/26-reference/elements/input.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/elements/label.mdx b/tutorials/html/26-reference/elements/label.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/elements/main.mdx b/tutorials/html/26-reference/elements/main.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/elements/nav.mdx b/tutorials/html/26-reference/elements/nav.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/elements/section.mdx b/tutorials/html/26-reference/elements/section.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/elements/table.mdx b/tutorials/html/26-reference/elements/table.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/elements/textarea.mdx b/tutorials/html/26-reference/elements/textarea.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/elements/video.mdx b/tutorials/html/26-reference/elements/video.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/entities.mdx b/tutorials/html/26-reference/entities.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/global-attributes.mdx b/tutorials/html/26-reference/global-attributes.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/input-types.mdx b/tutorials/html/26-reference/input-types.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/26-reference/void-elements.mdx b/tutorials/html/26-reference/void-elements.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/27-quiz/accessibility-quiz.mdx b/tutorials/html/27-quiz/accessibility-quiz.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/27-quiz/beginner-quiz.mdx b/tutorials/html/27-quiz/beginner-quiz.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/27-quiz/elements-quiz.mdx b/tutorials/html/27-quiz/elements-quiz.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/27-quiz/final-html-quiz.mdx b/tutorials/html/27-quiz/final-html-quiz.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/27-quiz/forms-quiz.mdx b/tutorials/html/27-quiz/forms-quiz.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/27-quiz/semantic-html-quiz.mdx b/tutorials/html/27-quiz/semantic-html-quiz.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tutorials/html/27-quiz/seo-quiz.mdx b/tutorials/html/27-quiz/seo-quiz.mdx
new file mode 100644
index 000000000..e69de29bb