diff --git a/tutorials/html/01-getting-started/browser-developer-tools.mdx b/tutorials/html/01-getting-started/browser-developer-tools.mdx index 127dcc779..632284254 100644 --- a/tutorials/html/01-getting-started/browser-developer-tools.mdx +++ b/tutorials/html/01-getting-started/browser-developer-tools.mdx @@ -3,7 +3,7 @@ id: browser-developer-tools title: "Inspecting Web Pages with Browser Developer Tools" sidebar_label: "Developer Tools" sidebar_position: 8 -slug: /tutorials/html/getting-started/browser-developer-tools +slug: /html/getting-started/browser-developer-tools description: "Master Chrome and Firefox DevTools to inspect HTML markup, debug layout elements, view real-time DOM changes, and audit web pages." keywords: - browser developer tools 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 8e38db6b7..d01012cec 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 @@ -3,7 +3,7 @@ id: create-your-first-html-page title: "Create Your First HTML Page" sidebar_label: "First HTML Page" sidebar_position: 7 -slug: /tutorials/html/getting-started/create-your-first-html-page +slug: /html/getting-started/create-your-first-html-page description: "Step-by-step hands-on tutorial on setting up a local code editor, writing basic HTML tags, and rendering your first webpage in a browser." keywords: - create first HTML page 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 df24a888a..27b90a39a 100644 --- a/tutorials/html/01-getting-started/how-the-web-works.mdx +++ b/tutorials/html/01-getting-started/how-the-web-works.mdx @@ -3,7 +3,7 @@ id: how-the-web-works title: "How the Web Works: Clients, Servers, and HTTP" sidebar_label: "How the Web Works" sidebar_position: 5 -slug: /tutorials/html/getting-started/how-the-web-works +slug: /html/getting-started/how-the-web-works description: "Understand the fundamentals of client-server architecture, domain name systems (DNS), HTTP requests, and how browsers render HTML pages." keywords: - how the web works diff --git a/tutorials/html/01-getting-started/html-document-structure.mdx b/tutorials/html/01-getting-started/html-document-structure.mdx index 35b1e8589..44785c1bf 100644 --- a/tutorials/html/01-getting-started/html-document-structure.mdx +++ b/tutorials/html/01-getting-started/html-document-structure.mdx @@ -3,7 +3,7 @@ id: html-document-structure title: "Understanding the Structure of an HTML Document" sidebar_label: "Document Structure" sidebar_position: 6 -slug: /tutorials/html/getting-started/html-document-structure +slug: /html/getting-started/html-document-structure description: "Learn the essential building blocks of an HTML document including DOCTYPE, html, head, title, meta, and body tags." keywords: - HTML document structure diff --git a/tutorials/html/01-getting-started/html-history.mdx b/tutorials/html/01-getting-started/html-history.mdx index 67e7ee3bd..7d4ef285c 100644 --- a/tutorials/html/01-getting-started/html-history.mdx +++ b/tutorials/html/01-getting-started/html-history.mdx @@ -3,7 +3,7 @@ id: html-history title: "The Evolution and History of HTML" sidebar_label: "HTML History" sidebar_position: 3 -slug: /tutorials/html/getting-started/html-history +slug: /html/getting-started/html-history description: "Trace the history and evolution of HTML from Tim Berners-Lee's first web draft to the modern living standard maintained by the WHATWG." keywords: - HTML history diff --git a/tutorials/html/01-getting-started/html-vs-html5.mdx b/tutorials/html/01-getting-started/html-vs-html5.mdx index bce6ad44f..19997c07e 100644 --- a/tutorials/html/01-getting-started/html-vs-html5.mdx +++ b/tutorials/html/01-getting-started/html-vs-html5.mdx @@ -3,7 +3,7 @@ id: html-vs-html5 title: "Key Differences Between HTML and HTML5" sidebar_label: "HTML vs HTML5" sidebar_position: 4 -slug: /tutorials/html/getting-started/html-vs-html5 +slug: /html/getting-started/html-vs-html5 description: "Discover the major improvements, semantic features, multimedia support, and modern APIs introduced in HTML5 compared to legacy HTML versions." keywords: - HTML vs HTML5 diff --git a/tutorials/html/01-getting-started/index.mdx b/tutorials/html/01-getting-started/index.mdx index da851f233..d1df32d0a 100644 --- a/tutorials/html/01-getting-started/index.mdx +++ b/tutorials/html/01-getting-started/index.mdx @@ -3,7 +3,7 @@ id: getting-started-overview title: "Getting Started with HTML" sidebar_label: "Getting Started" sidebar_position: 1 -slug: /tutorials/html/getting-started +slug: /html/getting-started description: "Master the basics of HTML from scratch. Explore web architecture, document structures, browser tools, and create your first web page with CodeHarborHub." keywords: - HTML getting started diff --git a/tutorials/html/01-getting-started/what-is-html.mdx b/tutorials/html/01-getting-started/what-is-html.mdx index 55c4a2319..b1b4204cd 100644 --- a/tutorials/html/01-getting-started/what-is-html.mdx +++ b/tutorials/html/01-getting-started/what-is-html.mdx @@ -3,7 +3,7 @@ id: what-is-html title: "Introduction to Web Development" sidebar_label: "What is HTML?" sidebar_position: 2 -slug: /tutorials/html/getting-started/what-is-html +slug: /html/getting-started/what-is-html description: "Learn what HTML is, how it structures web pages, and why it forms the backbone of web development. Free comprehensive guide for beginners at CodeHarborHub." keywords: - HTML introduction diff --git a/tutorials/html/02-html-syntax/attributes.mdx b/tutorials/html/02-html-syntax/attributes.mdx index 6c1ba759f..4ff66b80e 100644 --- a/tutorials/html/02-html-syntax/attributes.mdx +++ b/tutorials/html/02-html-syntax/attributes.mdx @@ -3,7 +3,7 @@ id: attributes title: "HTML Attributes: Name-Value Pairs and Boolean Attributes" sidebar_label: "Attributes" sidebar_position: 4 -slug: /tutorials/html/html-syntax/attributes +slug: /html/html-syntax/attributes description: "Master HTML attributes, syntax conventions, quoted vs unquoted values, boolean flags, and custom data attributes." keywords: - HTML attributes diff --git a/tutorials/html/02-html-syntax/character-encoding.mdx b/tutorials/html/02-html-syntax/character-encoding.mdx index 7c34d65d1..94c449494 100644 --- a/tutorials/html/02-html-syntax/character-encoding.mdx +++ b/tutorials/html/02-html-syntax/character-encoding.mdx @@ -3,7 +3,7 @@ id: character-encoding title: "Character Encoding and UTF-8 in HTML" sidebar_label: "Character Encoding" sidebar_position: 9 -slug: /tutorials/html/html-syntax/character-encoding +slug: /html/html-syntax/character-encoding description: "Understand character sets, ASCII vs UTF-8 encoding, declaring meta charset tags, and avoiding broken character renders on web pages." keywords: - HTML character encoding diff --git a/tutorials/html/02-html-syntax/comments.mdx b/tutorials/html/02-html-syntax/comments.mdx index 4ea8c1cf7..66c2077f2 100644 --- a/tutorials/html/02-html-syntax/comments.mdx +++ b/tutorials/html/02-html-syntax/comments.mdx @@ -3,7 +3,7 @@ id: comments title: "How to Use Comments in HTML" sidebar_label: "Comments" sidebar_position: 5 -slug: /tutorials/html/html-syntax/comments +slug: /html/html-syntax/comments description: "Learn how to write single-line and multi-line comments in HTML to clarify code structure and temporarily disable markup during testing." keywords: - HTML comments diff --git a/tutorials/html/02-html-syntax/elements.mdx b/tutorials/html/02-html-syntax/elements.mdx index 470c86c9b..21cf58aaf 100644 --- a/tutorials/html/02-html-syntax/elements.mdx +++ b/tutorials/html/02-html-syntax/elements.mdx @@ -3,7 +3,7 @@ id: elements title: "Understanding HTML Elements" sidebar_label: "Elements" sidebar_position: 2 -slug: /tutorials/html/html-syntax/elements +slug: /html/html-syntax/elements description: "Learn what HTML elements are, how they are constructed with opening/closing tags, and the difference between container and self-closing elements." keywords: - HTML elements diff --git a/tutorials/html/02-html-syntax/entities.mdx b/tutorials/html/02-html-syntax/entities.mdx index c6cc26912..20f340eb8 100644 --- a/tutorials/html/02-html-syntax/entities.mdx +++ b/tutorials/html/02-html-syntax/entities.mdx @@ -3,7 +3,7 @@ id: entities title: "HTML Character Entities and Reserved Characters" sidebar_label: "Character Entities" sidebar_position: 8 -slug: /tutorials/html/html-syntax/entities +slug: /html/html-syntax/entities description: "Learn how to safely render reserved characters, special symbols, mathematical notations, and non-breaking spaces using HTML entities." keywords: - HTML entities diff --git a/tutorials/html/02-html-syntax/global-attributes.mdx b/tutorials/html/02-html-syntax/global-attributes.mdx index 175815c7e..affa7a154 100644 --- a/tutorials/html/02-html-syntax/global-attributes.mdx +++ b/tutorials/html/02-html-syntax/global-attributes.mdx @@ -3,7 +3,7 @@ id: global-attributes title: "Comprehensive Guide to HTML Global Attributes" sidebar_label: "Global Attributes" sidebar_position: 10 -slug: /tutorials/html/html-syntax/global-attributes +slug: /html/html-syntax/global-attributes description: "Explore universal HTML attributes like id, class, style, title, hidden, tabindex, and lang that can be applied to all HTML elements." keywords: - HTML global attributes diff --git a/tutorials/html/02-html-syntax/index.mdx b/tutorials/html/02-html-syntax/index.mdx index 68002a455..8339187b4 100644 --- a/tutorials/html/02-html-syntax/index.mdx +++ b/tutorials/html/02-html-syntax/index.mdx @@ -3,7 +3,7 @@ id: html-syntax-overview title: "HTML Syntax and Structure Overview" sidebar_label: "HTML Syntax and Structure" sidebar_position: 1 -slug: /tutorials/html/html-syntax +slug: /html/html-syntax description: "Master core HTML syntax rules, including tags, attributes, nesting rules, character encoding, and global attributes with CodeHarborHub." keywords: - HTML syntax overview diff --git a/tutorials/html/02-html-syntax/nesting.mdx b/tutorials/html/02-html-syntax/nesting.mdx index f093c12da..3a2d853f5 100644 --- a/tutorials/html/02-html-syntax/nesting.mdx +++ b/tutorials/html/02-html-syntax/nesting.mdx @@ -3,7 +3,7 @@ id: nesting title: "Element Nesting and Hierarchy Rules in HTML" sidebar_label: "Element Nesting" sidebar_position: 6 -slug: /tutorials/html/html-syntax/nesting +slug: /html/html-syntax/nesting description: "Understand proper element nesting, parent-child relationships, tag overlapping errors, and clean DOM tree hierarchy construction." keywords: - HTML element nesting diff --git a/tutorials/html/02-html-syntax/tags.mdx b/tutorials/html/02-html-syntax/tags.mdx index 778d500ae..f76e408f6 100644 --- a/tutorials/html/02-html-syntax/tags.mdx +++ b/tutorials/html/02-html-syntax/tags.mdx @@ -3,7 +3,7 @@ id: tags title: "HTML Tags: Opening, Closing, and Self-Closing Tags" sidebar_label: "Tags" sidebar_position: 3 -slug: /tutorials/html/html-syntax/tags +slug: /html/html-syntax/tags description: "Explore HTML tags, casing rules, self-closing syntax, and how tags define structural elements across web pages." keywords: - HTML tags diff --git a/tutorials/html/02-html-syntax/whitespace.mdx b/tutorials/html/02-html-syntax/whitespace.mdx index 09c939141..f3f0cd9d0 100644 --- a/tutorials/html/02-html-syntax/whitespace.mdx +++ b/tutorials/html/02-html-syntax/whitespace.mdx @@ -3,7 +3,7 @@ id: whitespace title: "Handling Whitespace, Line Breaks, and Collapse in HTML" sidebar_label: "Whitespace & Collapse" sidebar_position: 7 -slug: /tutorials/html/html-syntax/whitespace +slug: /html/html-syntax/whitespace description: "Discover how web browsers process whitespace collapsing, multiple spaces, line breaks, indentation, and preformatted text." keywords: - HTML whitespace collapse diff --git a/tutorials/html/03-text-content/abbreviations.mdx b/tutorials/html/03-text-content/abbreviations.mdx index e079ddbc5..a228497cc 100644 --- a/tutorials/html/03-text-content/abbreviations.mdx +++ b/tutorials/html/03-text-content/abbreviations.mdx @@ -3,7 +3,7 @@ id: abbreviations title: "Defining Abbreviations and Acronyms with abbr" sidebar_label: "Abbreviations" sidebar_position: 10 -slug: /tutorials/html/text-content/abbreviations +slug: /html/text-content/abbreviations description: "Use the abbr element with title attributes to provide tooltips and clear expansion definitions for acronyms and abbreviations." keywords: - HTML abbr tag diff --git a/tutorials/html/03-text-content/citations.mdx b/tutorials/html/03-text-content/citations.mdx index 7400a2a2d..77e594611 100644 --- a/tutorials/html/03-text-content/citations.mdx +++ b/tutorials/html/03-text-content/citations.mdx @@ -3,7 +3,7 @@ id: citations title: "Citing Work and Titles using the cite Tag" sidebar_label: "Citations" sidebar_position: 11 -slug: /tutorials/html/text-content/citations +slug: /html/text-content/citations description: "Learn how to correctly use the cite tag to reference creative works, books, research papers, movies, and external articles." keywords: - HTML cite tag diff --git a/tutorials/html/03-text-content/code-text.mdx b/tutorials/html/03-text-content/code-text.mdx index e5a863e3b..e1b8f5706 100644 --- a/tutorials/html/03-text-content/code-text.mdx +++ b/tutorials/html/03-text-content/code-text.mdx @@ -3,7 +3,7 @@ id: code-text title: "Displaying Code Snippets, Keyboard Input, and Preformatted Text" sidebar_label: "Code & Computer Text" sidebar_position: 12 -slug: /tutorials/html/text-content/code-text +slug: /html/text-content/code-text description: "Explore computer text elements including code, pre, kbd, samp, and var to format inline code snippets, terminal output, and user inputs." keywords: - HTML code tag diff --git a/tutorials/html/03-text-content/emphasis-and-italic.mdx b/tutorials/html/03-text-content/emphasis-and-italic.mdx index 06735cb26..6ca5fa6a9 100644 --- a/tutorials/html/03-text-content/emphasis-and-italic.mdx +++ b/tutorials/html/03-text-content/emphasis-and-italic.mdx @@ -3,7 +3,7 @@ id: emphasis-and-italic title: "Emphasized Text vs Italics: em vs i Tags" sidebar_label: "Emphasis & Italic" sidebar_position: 7 -slug: /tutorials/html/text-content/emphasis-and-italic +slug: /html/text-content/emphasis-and-italic description: "Compare the semantic em tag for stress emphasis with the visual i tag for technical terms, idiomatic phrases, and alternate voices." keywords: - em vs i tag diff --git a/tutorials/html/03-text-content/headings.mdx b/tutorials/html/03-text-content/headings.mdx index c560216fc..aa9e115c5 100644 --- a/tutorials/html/03-text-content/headings.mdx +++ b/tutorials/html/03-text-content/headings.mdx @@ -3,7 +3,7 @@ id: headings title: "HTML Headings: Structuring Pages with h1 to h6" sidebar_label: "Headings (h1-h6)" sidebar_position: 2 -slug: /tutorials/html/text-content/headings +slug: /html/text-content/headings description: "Learn how to establish content hierarchy, improve readability, and boost SEO using HTML heading tags from h1 through h6." keywords: - HTML headings diff --git a/tutorials/html/03-text-content/horizontal-rule.mdx b/tutorials/html/03-text-content/horizontal-rule.mdx index 2af6dc250..6f2241138 100644 --- a/tutorials/html/03-text-content/horizontal-rule.mdx +++ b/tutorials/html/03-text-content/horizontal-rule.mdx @@ -3,7 +3,7 @@ id: horizontal-rule title: "Horizontal Rules: The hr Tag for Thematic Breaks" sidebar_label: "Horizontal Rule" sidebar_position: 5 -slug: /tutorials/html/text-content/horizontal-rule +slug: /html/text-content/horizontal-rule description: "Explore the hr element in HTML to create thematic breaks, section dividers, and visual content shifts across web pages." keywords: - HTML hr tag diff --git a/tutorials/html/03-text-content/index.mdx b/tutorials/html/03-text-content/index.mdx index c430e59bf..d941e98d9 100644 --- a/tutorials/html/03-text-content/index.mdx +++ b/tutorials/html/03-text-content/index.mdx @@ -3,7 +3,7 @@ id: text-content-overview title: "Formatting Text Content in HTML" sidebar_label: "Formatting Text Content" sidebar_position: 1 -slug: /tutorials/html/text-content +slug: /html/text-content description: "Master HTML text elements, formatting tags, semantic text markup, headings, paragraphs, and inline citations with CodeHarborHub." keywords: - HTML text content diff --git a/tutorials/html/03-text-content/line-breaks.mdx b/tutorials/html/03-text-content/line-breaks.mdx index 62f5ee0a2..8dade3818 100644 --- a/tutorials/html/03-text-content/line-breaks.mdx +++ b/tutorials/html/03-text-content/line-breaks.mdx @@ -3,7 +3,7 @@ id: line-breaks title: "Line Breaks and Forced Spaces in HTML" sidebar_label: "Line Breaks" sidebar_position: 4 -slug: /tutorials/html/text-content/line-breaks +slug: /html/text-content/line-breaks description: "Learn when and how to use the self-closing br tag for forcing line breaks in addresses, poetry, and inline text blocks without breaking paragraphs." keywords: - HTML br tag diff --git a/tutorials/html/03-text-content/paragraphs.mdx b/tutorials/html/03-text-content/paragraphs.mdx index 0e02adbee..96f685e7f 100644 --- a/tutorials/html/03-text-content/paragraphs.mdx +++ b/tutorials/html/03-text-content/paragraphs.mdx @@ -3,7 +3,7 @@ id: paragraphs title: "HTML Paragraphs: Structuring Blocks of Text" sidebar_label: "Paragraphs" sidebar_position: 3 -slug: /tutorials/html/text-content/paragraphs +slug: /html/text-content/paragraphs description: "Understand the paragraph tag, block-level text rendering, browser default margins, and proper text grouping techniques in HTML." keywords: - HTML paragraph tag diff --git a/tutorials/html/03-text-content/quotations.mdx b/tutorials/html/03-text-content/quotations.mdx index fed45ac9c..279a18011 100644 --- a/tutorials/html/03-text-content/quotations.mdx +++ b/tutorials/html/03-text-content/quotations.mdx @@ -3,7 +3,7 @@ id: quotations title: "Blockquotes and Inline Quotations in HTML" sidebar_label: "Quotations" sidebar_position: 9 -slug: /tutorials/html/text-content/quotations +slug: /html/text-content/quotations description: "Master blockquote and q elements in HTML for long-form quotes and inline text quotations, including cite attributes for source tracking." keywords: - HTML blockquote tag diff --git a/tutorials/html/03-text-content/semantic-text.mdx b/tutorials/html/03-text-content/semantic-text.mdx index 3b0556c46..02688a7c6 100644 --- a/tutorials/html/03-text-content/semantic-text.mdx +++ b/tutorials/html/03-text-content/semantic-text.mdx @@ -3,7 +3,7 @@ id: semantic-text title: "Semantic Text Elements: mark, small, time, and data Tags" sidebar_label: "Semantic Text" sidebar_position: 14 -slug: /tutorials/html/text-content/semantic-text +slug: /html/text-content/semantic-text description: "Discover utility semantic text tags including mark for highlighted text, small for fine print, time for machine-readable dates, and data for values." keywords: - HTML semantic text diff --git a/tutorials/html/03-text-content/strong-and-bold.mdx b/tutorials/html/03-text-content/strong-and-bold.mdx index 522da79bb..6c5eb985e 100644 --- a/tutorials/html/03-text-content/strong-and-bold.mdx +++ b/tutorials/html/03-text-content/strong-and-bold.mdx @@ -3,7 +3,7 @@ id: strong-and-bold title: "Strong Importance vs Bold Text: strong vs b Tags" sidebar_label: "Strong & Bold" sidebar_position: 6 -slug: /tutorials/html/text-content/strong-and-bold +slug: /html/text-content/strong-and-bold description: "Understand the semantic difference between the strong tag for high importance and the b tag for stylistic bold offset in HTML." keywords: - strong vs b tag diff --git a/tutorials/html/03-text-content/subscript-and-superscript.mdx b/tutorials/html/03-text-content/subscript-and-superscript.mdx index 9216c92b4..76966dd58 100644 --- a/tutorials/html/03-text-content/subscript-and-superscript.mdx +++ b/tutorials/html/03-text-content/subscript-and-superscript.mdx @@ -3,7 +3,7 @@ id: subscript-and-superscript title: "Subscript and Superscript: Working with sub and sup Tags" sidebar_label: "Subscript & Superscript" sidebar_position: 13 -slug: /tutorials/html/text-content/subscript-and-superscript +slug: /html/text-content/subscript-and-superscript description: "Format mathematical formulas, chemical equations, footnotes, and ordinal indicators using HTML sub and sup tags." keywords: - HTML sub tag diff --git a/tutorials/html/03-text-content/underline.mdx b/tutorials/html/03-text-content/underline.mdx index 7a6e37a5f..60b21e352 100644 --- a/tutorials/html/03-text-content/underline.mdx +++ b/tutorials/html/03-text-content/underline.mdx @@ -3,7 +3,7 @@ id: underline title: "The u Tag: Representing Unarticulated Annotations" sidebar_label: "Underline" sidebar_position: 8 -slug: /tutorials/html/text-content/underline +slug: /html/text-content/underline description: "Learn how and when to use the u element for unarticulated non-textual annotations such as misspelling indicators or proper name offsets." keywords: - HTML u tag diff --git a/tutorials/html/04-links-and-navigation/absolute-urls.mdx b/tutorials/html/04-links-and-navigation/absolute-urls.mdx index 09dbe88d9..a6e693e15 100644 --- a/tutorials/html/04-links-and-navigation/absolute-urls.mdx +++ b/tutorials/html/04-links-and-navigation/absolute-urls.mdx @@ -3,7 +3,7 @@ id: absolute-urls title: "Understanding Absolute URLs in HTML Links" sidebar_label: "Absolute URLs" sidebar_position: 3 -slug: /tutorials/html/links-and-navigation/absolute-urls +slug: /html/links-and-navigation/absolute-urls description: "Explore absolute URLs, including protocol definitions, domain names, port numbers, and when to use full external web paths in anchor tags." keywords: - absolute URLs HTML diff --git a/tutorials/html/04-links-and-navigation/anchor-element.mdx b/tutorials/html/04-links-and-navigation/anchor-element.mdx index 3e3578f44..b39c95bfa 100644 --- a/tutorials/html/04-links-and-navigation/anchor-element.mdx +++ b/tutorials/html/04-links-and-navigation/anchor-element.mdx @@ -3,7 +3,7 @@ id: anchor-element title: "The HTML Anchor Element: Creating Hyperlinks" sidebar_label: "Anchor Element ()" sidebar_position: 2 -slug: /tutorials/html/links-and-navigation/anchor-element +slug: /html/links-and-navigation/anchor-element description: "Learn how the HTML anchor element (a tag) works, its essential href attribute, and how it connects web pages together across the internet." keywords: - HTML anchor element diff --git a/tutorials/html/04-links-and-navigation/download-links.mdx b/tutorials/html/04-links-and-navigation/download-links.mdx index 75be6734a..df3bb9763 100644 --- a/tutorials/html/04-links-and-navigation/download-links.mdx +++ b/tutorials/html/04-links-and-navigation/download-links.mdx @@ -3,7 +3,7 @@ id: download-links title: "Triggering File Downloads using the download Attribute" sidebar_label: "Download Links" sidebar_position: 9 -slug: /tutorials/html/links-and-navigation/download-links +slug: /html/links-and-navigation/download-links description: "Discover how to force browser file downloads using the download attribute, custom save-as filenames, and cross-origin security rules." keywords: - HTML download attribute diff --git a/tutorials/html/04-links-and-navigation/email-links.mdx b/tutorials/html/04-links-and-navigation/email-links.mdx index ede787d55..459fe69a1 100644 --- a/tutorials/html/04-links-and-navigation/email-links.mdx +++ b/tutorials/html/04-links-and-navigation/email-links.mdx @@ -3,7 +3,7 @@ id: email-links title: "Creating Mailto Links for Email Integration" sidebar_label: "Email Links (mailto)" sidebar_position: 7 -slug: /tutorials/html/links-and-navigation/email-links +slug: /html/links-and-navigation/email-links description: "Learn how to build interactive mailto anchor links with pre-filled subject lines, body content, CC, and BCC parameters." keywords: - HTML mailto links diff --git a/tutorials/html/04-links-and-navigation/external-links.mdx b/tutorials/html/04-links-and-navigation/external-links.mdx index 34fdc1787..add7e8ea6 100644 --- a/tutorials/html/04-links-and-navigation/external-links.mdx +++ b/tutorials/html/04-links-and-navigation/external-links.mdx @@ -3,7 +3,7 @@ id: external-links title: "Linking to External Websites and Resources" sidebar_label: "External Links" sidebar_position: 6 -slug: /tutorials/html/links-and-navigation/external-links +slug: /html/links-and-navigation/external-links description: "Understand external links, best practices for outbound navigation, SEO implications, and domain authority preservation." keywords: - external links HTML diff --git a/tutorials/html/04-links-and-navigation/index.mdx b/tutorials/html/04-links-and-navigation/index.mdx index 12c4a8f42..28ca60a1b 100644 --- a/tutorials/html/04-links-and-navigation/index.mdx +++ b/tutorials/html/04-links-and-navigation/index.mdx @@ -3,7 +3,7 @@ id: links-and-navigation-overview title: "Links and Navigation in HTML" sidebar_label: "Links and Navigation" sidebar_position: 1 -slug: /tutorials/html/links-and-navigation +slug: /html/links-and-navigation description: "Master hyperlink creation, URL structures, protocol links, link security, and site navigation menus in HTML with CodeHarborHub." keywords: - HTML links overview diff --git a/tutorials/html/04-links-and-navigation/internal-links.mdx b/tutorials/html/04-links-and-navigation/internal-links.mdx index d3cea6ad2..0361ba324 100644 --- a/tutorials/html/04-links-and-navigation/internal-links.mdx +++ b/tutorials/html/04-links-and-navigation/internal-links.mdx @@ -3,7 +3,7 @@ id: internal-links title: "Internal Page Links and Anchor Jumps" sidebar_label: "Internal Links" sidebar_position: 5 -slug: /tutorials/html/links-and-navigation/internal-links +slug: /html/links-and-navigation/internal-links description: "Learn how to link to specific sections within the same webpage using element IDs, hash fragments, and smooth scrolling techniques." keywords: - internal links HTML diff --git a/tutorials/html/04-links-and-navigation/link-security.mdx b/tutorials/html/04-links-and-navigation/link-security.mdx index d8f184e51..a1e9efca7 100644 --- a/tutorials/html/04-links-and-navigation/link-security.mdx +++ b/tutorials/html/04-links-and-navigation/link-security.mdx @@ -3,7 +3,7 @@ id: link-security title: "Link Security and Privacy: rel='noopener noreferrer'" sidebar_label: "Link Security" sidebar_position: 11 -slug: /tutorials/html/links-and-navigation/link-security +slug: /html/links-and-navigation/link-security description: "Protect your users from reverse tabnabbing and window.opener vulnerabilities using rel='noopener noreferrer' and rel='nofollow'." keywords: - rel noopener noreferrer diff --git a/tutorials/html/04-links-and-navigation/navigation-menus.mdx b/tutorials/html/04-links-and-navigation/navigation-menus.mdx index ed2a7a4bd..773eed14d 100644 --- a/tutorials/html/04-links-and-navigation/navigation-menus.mdx +++ b/tutorials/html/04-links-and-navigation/navigation-menus.mdx @@ -3,7 +3,7 @@ id: navigation-menus title: "Building Accessible Navigation Menus with nav" sidebar_label: "Navigation Menus" sidebar_position: 12 -slug: /tutorials/html/links-and-navigation/navigation-menus +slug: /html/links-and-navigation/navigation-menus description: "Learn how to combine semantic nav elements, unordered lists, and links to build clean, accessible website navigation menus." keywords: - HTML nav element diff --git a/tutorials/html/04-links-and-navigation/relative-urls.mdx b/tutorials/html/04-links-and-navigation/relative-urls.mdx index cefd05963..db48c96fb 100644 --- a/tutorials/html/04-links-and-navigation/relative-urls.mdx +++ b/tutorials/html/04-links-and-navigation/relative-urls.mdx @@ -3,7 +3,7 @@ id: relative-urls title: "Working with Relative URLs and File Paths" sidebar_label: "Relative URLs" sidebar_position: 4 -slug: /tutorials/html/links-and-navigation/relative-urls +slug: /html/links-and-navigation/relative-urls description: "Master relative path navigation using root-relative paths, parent directories (..), and current directory references in HTML." keywords: - relative URLs HTML diff --git a/tutorials/html/04-links-and-navigation/target-attribute.mdx b/tutorials/html/04-links-and-navigation/target-attribute.mdx index ca15137d3..21dcc5fa6 100644 --- a/tutorials/html/04-links-and-navigation/target-attribute.mdx +++ b/tutorials/html/04-links-and-navigation/target-attribute.mdx @@ -3,7 +3,7 @@ id: target-attribute title: "Opening Links in New Windows: The target Attribute" sidebar_label: "Target Attribute" sidebar_position: 10 -slug: /tutorials/html/links-and-navigation/target-attribute +slug: /html/links-and-navigation/target-attribute description: "Master target attributes like _blank, _self, _parent, and _top to control how browsing contexts and tabs open links." keywords: - target attribute HTML diff --git a/tutorials/html/04-links-and-navigation/telephone-links.mdx b/tutorials/html/04-links-and-navigation/telephone-links.mdx index 5af1e3adb..f6db4fb3d 100644 --- a/tutorials/html/04-links-and-navigation/telephone-links.mdx +++ b/tutorials/html/04-links-and-navigation/telephone-links.mdx @@ -3,7 +3,7 @@ id: telephone-links title: "Click-to-Call Phone Links with tel Protocol" sidebar_label: "Telephone Links (tel)" sidebar_position: 8 -slug: /tutorials/html/links-and-navigation/telephone-links +slug: /html/links-and-navigation/telephone-links description: "Implement click-to-call mobile features using the tel protocol, international number formatting, and desktop dialing fallbacks." keywords: - HTML tel links diff --git a/tutorials/html/05-images/accessible-images.mdx b/tutorials/html/05-images/accessible-images.mdx index f9dfae4e9..a110bbf23 100644 --- a/tutorials/html/05-images/accessible-images.mdx +++ b/tutorials/html/05-images/accessible-images.mdx @@ -3,7 +3,7 @@ id: accessible-images title: "Best Practices for Accessible Web Images" sidebar_label: "Accessible Images" sidebar_position: 11 -slug: /tutorials/html/images/accessible-images +slug: /html/images/accessible-images description: "Learn how to make visual media fully accessible with decorative alt semantics, complex image descriptions, SVG accessibility, and ARIA roles." keywords: - accessible images HTML diff --git a/tutorials/html/05-images/figure-and-figcaption.mdx b/tutorials/html/05-images/figure-and-figcaption.mdx index 9006ca38a..e60b776d5 100644 --- a/tutorials/html/05-images/figure-and-figcaption.mdx +++ b/tutorials/html/05-images/figure-and-figcaption.mdx @@ -3,7 +3,7 @@ id: figure-and-figcaption title: "Structuring Image Captions with figure and figcaption" sidebar_label: "Figure & Figcaption" sidebar_position: 8 -slug: /tutorials/html/images/figure-and-figcaption +slug: /html/images/figure-and-figcaption description: "Wrap self-contained media content with figure and provide semantic text captions using figcaption for clean document structure." keywords: - HTML figure element diff --git a/tutorials/html/05-images/image-formats.mdx b/tutorials/html/05-images/image-formats.mdx index 838988126..d6acf26c2 100644 --- a/tutorials/html/05-images/image-formats.mdx +++ b/tutorials/html/05-images/image-formats.mdx @@ -3,7 +3,7 @@ id: image-formats title: "Comparing Web Image Formats: JPEG, PNG, GIF, SVG, WebP, and AVIF" sidebar_label: "Image Formats" sidebar_position: 10 -slug: /tutorials/html/images/image-formats +slug: /html/images/image-formats description: "Understand the strengths, compression types, transparency support, and compatibility of modern web image formats like WebP, AVIF, and SVG." keywords: - web image formats diff --git a/tutorials/html/05-images/img-element.mdx b/tutorials/html/05-images/img-element.mdx index 39e0f3c9e..18a09beaf 100644 --- a/tutorials/html/05-images/img-element.mdx +++ b/tutorials/html/05-images/img-element.mdx @@ -3,7 +3,7 @@ id: img-element title: "The HTML Image Element: Inserting Images" sidebar_label: "Image Element ()" sidebar_position: 2 -slug: /tutorials/html/images/img-element +slug: /html/images/img-element description: "Learn the fundamentals of the HTML img tag, its void element syntax, inline display behavior, and basic usage on web pages." keywords: - HTML img tag diff --git a/tutorials/html/05-images/index.mdx b/tutorials/html/05-images/index.mdx index 11189a750..546dd515e 100644 --- a/tutorials/html/05-images/index.mdx +++ b/tutorials/html/05-images/index.mdx @@ -3,7 +3,7 @@ id: images-overview title: "Working with Images in HTML" sidebar_label: "Working with Images" sidebar_position: 1 -slug: /tutorials/html/images +slug: /html/images description: "Master HTML image elements, responsive image techniques, performance optimizations, semantic figures, and image accessibility with CodeHarborHub." keywords: - HTML images overview diff --git a/tutorials/html/05-images/lazy-loading.mdx b/tutorials/html/05-images/lazy-loading.mdx index 8b67996b2..400d6f3e6 100644 --- a/tutorials/html/05-images/lazy-loading.mdx +++ b/tutorials/html/05-images/lazy-loading.mdx @@ -3,7 +3,7 @@ id: lazy-loading title: "Optimizing Image Performance with Native Lazy Loading" sidebar_label: "Lazy Loading" sidebar_position: 9 -slug: /tutorials/html/images/lazy-loading +slug: /html/images/lazy-loading description: "Boost site load speed and save bandwidth by enabling native browser lazy loading using loading='lazy' on images below the fold." keywords: - HTML lazy loading diff --git a/tutorials/html/05-images/picture-element.mdx b/tutorials/html/05-images/picture-element.mdx index 6bfafda79..dbbaaa266 100644 --- a/tutorials/html/05-images/picture-element.mdx +++ b/tutorials/html/05-images/picture-element.mdx @@ -3,7 +3,7 @@ id: picture-element title: "Art Direction with the HTML picture Element" sidebar_label: "Picture Element ()" sidebar_position: 6 -slug: /tutorials/html/images/picture-element +slug: /html/images/picture-element description: "Master the picture element to provide fallback image formats, media query conditioning, and advanced art direction for various device viewports." keywords: - HTML picture element diff --git a/tutorials/html/05-images/responsive-images.mdx b/tutorials/html/05-images/responsive-images.mdx index 6d307e0bd..df3df7872 100644 --- a/tutorials/html/05-images/responsive-images.mdx +++ b/tutorials/html/05-images/responsive-images.mdx @@ -3,7 +3,7 @@ id: responsive-images title: "Introduction to Responsive Images in HTML" sidebar_label: "Responsive Images" sidebar_position: 5 -slug: /tutorials/html/images/responsive-images +slug: /html/images/responsive-images description: "Discover core responsive image concepts, device pixel ratios, viewport switching, art direction, and serving screen-optimized visuals." keywords: - responsive images HTML diff --git a/tutorials/html/05-images/src-and-alt.mdx b/tutorials/html/05-images/src-and-alt.mdx index d571d735f..3c4a186e2 100644 --- a/tutorials/html/05-images/src-and-alt.mdx +++ b/tutorials/html/05-images/src-and-alt.mdx @@ -3,7 +3,7 @@ id: src-and-alt title: "Image Sources and Alt Text: src and alt Attributes" sidebar_label: "src & alt Attributes" sidebar_position: 3 -slug: /tutorials/html/images/src-and-alt +slug: /html/images/src-and-alt description: "Understand the critical role of src paths and descriptive alt text for image rendering, screen readers, fallback handling, and image SEO." keywords: - HTML image src diff --git a/tutorials/html/05-images/srcset-and-sizes.mdx b/tutorials/html/05-images/srcset-and-sizes.mdx index 6f8bfd7f3..83a797c18 100644 --- a/tutorials/html/05-images/srcset-and-sizes.mdx +++ b/tutorials/html/05-images/srcset-and-sizes.mdx @@ -3,7 +3,7 @@ id: srcset-and-sizes title: "Resolution Switching with srcset and sizes Attributes" sidebar_label: "srcset & sizes Attributes" sidebar_position: 7 -slug: /tutorials/html/images/srcset-and-sizes +slug: /html/images/srcset-and-sizes description: "Learn how to use srcset with pixel density descriptors and width descriptors alongside sizes attributes to deliver optimal images per screen size." keywords: - HTML srcset attribute diff --git a/tutorials/html/05-images/width-and-height.mdx b/tutorials/html/05-images/width-and-height.mdx index 182b5d686..4f96a3e89 100644 --- a/tutorials/html/05-images/width-and-height.mdx +++ b/tutorials/html/05-images/width-and-height.mdx @@ -3,7 +3,7 @@ id: width-and-height title: "Setting Image Dimensions: width and height Attributes" sidebar_label: "Width & Height" sidebar_position: 4 -slug: /tutorials/html/images/width-and-height +slug: /html/images/width-and-height description: "Learn how setting aspect ratio, explicit width, and height attributes prevents Cumulative Layout Shift (CLS) and speeds up browser rendering." keywords: - image width and height diff --git a/tutorials/html/06-lists/accessible-lists.mdx b/tutorials/html/06-lists/accessible-lists.mdx new file mode 100644 index 000000000..da9cea9f5 --- /dev/null +++ b/tutorials/html/06-lists/accessible-lists.mdx @@ -0,0 +1,18 @@ +--- +id: accessible-lists +title: "Best Practices for Accessible HTML Lists" +sidebar_label: "Accessible Lists" +sidebar_position: 6 +slug: /html/lists/accessible-lists +description: "Ensure list structures translate effectively to screen readers, avoid CSS list-style accessibility bugs, and utilize ARIA role considerations." +keywords: + - accessible HTML lists + - screen reader list navigation + - CSS list style accessibility + - ARIA list roles + - CodeHarborHub HTML +authors: + - name: ajay-dhangar + link: https://github.com/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 new file mode 100644 index 000000000..d459ddcdd --- /dev/null +++ b/tutorials/html/06-lists/description-lists.mdx @@ -0,0 +1,18 @@ +--- +id: description-lists +title: "Structuring Definition and Description Lists with dl, dt, and dd" +sidebar_label: "Description Lists (
)" +sidebar_position: 4 +slug: /html/lists/description-lists +description: "Learn how to construct semantic term-value pairings, glossaries, and metadata lists using dl, dt, and dd HTML tags." +keywords: + - HTML description list + - dl dt dd tags + - HTML definition list + - key value pairing HTML + - CodeHarborHub HTML +authors: + - name: ajay-dhangar + link: https://github.com/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 d7fe87ec8..7c3605b97 100644 --- a/tutorials/html/06-lists/index.mdx +++ b/tutorials/html/06-lists/index.mdx @@ -1,9 +1,18 @@ -``` - ├── 06-lists/ - │ ├── index.mdx - │ ├── unordered-lists.mdx - │ ├── ordered-lists.mdx - │ ├── description-lists.mdx - │ ├── nested-lists.mdx - │ └── accessible-lists.mdx -``` \ No newline at end of file +--- +id: lists-overview +title: "Working with HTML Lists" +sidebar_label: "Lists" +sidebar_position: 1 +slug: /html/lists +description: "Master HTML list types including unordered, ordered, and description lists, nested list hierarchies, and accessibility best practices with CodeHarborHub." +keywords: + - HTML lists overview + - HTML list elements + - unordered vs ordered lists + - web list structuring + - CodeHarborHub HTML +authors: + - name: ajay-dhangar + link: https://github.com/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 new file mode 100644 index 000000000..bb47e8b40 --- /dev/null +++ b/tutorials/html/06-lists/nested-lists.mdx @@ -0,0 +1,18 @@ +--- +id: nested-lists +title: "Creating Nested and Multi-Level Lists in HTML" +sidebar_label: "Nested Lists" +sidebar_position: 5 +slug: /html/lists/nested-lists +description: "Discover proper structural placement for nesting lists within li elements to build clean hierarchical outlines and multi-tier menus." +keywords: + - HTML nested lists + - multi-level list structure + - sublists in HTML + - nesting ul ol correctly + - CodeHarborHub HTML +authors: + - name: ajay-dhangar + link: https://github.com/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 new file mode 100644 index 000000000..0e3dca27d --- /dev/null +++ b/tutorials/html/06-lists/ordered-lists.mdx @@ -0,0 +1,18 @@ +--- +id: ordered-lists +title: "Building Ordered Lists with ol and li Tags" +sidebar_label: "Ordered Lists (
    )" +sidebar_position: 3 +slug: /html/lists/ordered-lists +description: "Master numbered lists in HTML, customizing start values, reversed ordering, and list item numbering types with the ol element." +keywords: + - HTML ordered list + - ol tag attributes + - numbered lists HTML + - ol type and start attributes + - CodeHarborHub HTML +authors: + - name: ajay-dhangar + link: https://github.com/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 new file mode 100644 index 000000000..341328cf8 --- /dev/null +++ b/tutorials/html/06-lists/unordered-lists.mdx @@ -0,0 +1,18 @@ +--- +id: unordered-lists +title: "Creating Unordered Lists with ul and li Tags" +sidebar_label: "Unordered Lists (
      )" +sidebar_position: 2 +slug: /html/lists/unordered-lists +description: "Learn how to build bulleted lists using ul and li tags, adjust bullet styling, and structure unordered collections on web pages." +keywords: + - HTML unordered list + - ul tag HTML + - li list item + - bulleted lists HTML + - CodeHarborHub HTML +authors: + - name: ajay-dhangar + link: https://github.com/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 new file mode 100644 index 000000000..ac2505fbf --- /dev/null +++ b/tutorials/html/07-tables/caption.mdx @@ -0,0 +1,18 @@ +--- +id: caption +title: "Adding Table Titles with the caption Element" +sidebar_label: "Table Caption" +sidebar_position: 5 +slug: /html/tables/caption +description: "Discover how to provide meaningful summaries and titles for your tabular data using the caption element placed immediately inside the table tag." +keywords: + - HTML caption tag + - table title HTML + - caption placement table + - table accessibility caption + - CodeHarborHub HTML +authors: + - name: ajay-dhangar + link: https://github.com/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 new file mode 100644 index 000000000..416d1629f --- /dev/null +++ b/tutorials/html/07-tables/colspan-rowspan.mdx @@ -0,0 +1,18 @@ +--- +id: colspan-rowspan +title: "Merging Cells Across Columns and Rows: colspan and rowspan" +sidebar_label: "Colspan & Rowspan" +sidebar_position: 7 +slug: /html/tables/colspan-rowspan +description: "Master cell spanning techniques using the colspan and rowspan attributes to merge multiple data cells horizontally or vertically." +keywords: + - HTML colspan attribute + - HTML rowspan attribute + - merge table cells + - multi column table cells + - CodeHarborHub HTML +authors: + - name: ajay-dhangar + link: https://github.com/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 35d3bca26..ced062742 100644 --- a/tutorials/html/07-tables/index.mdx +++ b/tutorials/html/07-tables/index.mdx @@ -1,12 +1,18 @@ -``` - ├── 07-tables/ - │ ├── index.mdx - │ ├── table-basics.mdx - │ ├── table-rows-and-cells.mdx - │ ├── table-headings.mdx - │ ├── caption.mdx - │ ├── thead-tbody-tfoot.mdx - │ ├── colspan-rowspan.mdx - │ ├── table-accessibility.mdx - │ └── responsive-tables.mdx -``` \ No newline at end of file +--- +id: tables-overview +title: "Working with HTML Tables" +sidebar_label: "Tables" +sidebar_position: 1 +slug: /html/tables +description: "Master HTML tabular data structure, row/cell formatting, semantic headers, spanning columns and rows, accessible data tables, and responsive layouts with CodeHarborHub." +keywords: + - HTML tables overview + - HTML table tutorial + - tabular data HTML + - web tables guide + - CodeHarborHub HTML +authors: + - name: ajay-dhangar + link: https://github.com/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 new file mode 100644 index 000000000..28b14beea --- /dev/null +++ b/tutorials/html/07-tables/responsive-tables.mdx @@ -0,0 +1,18 @@ +--- +id: responsive-tables +title: "Creating Responsive HTML Tables for Mobile Screens" +sidebar_label: "Responsive Tables" +sidebar_position: 9 +slug: /html/tables/responsive-tables +description: "Explore techniques for rendering tables on smaller devices, including horizontal scrolling containers, CSS card conversions, and mobile-friendly layouts." +keywords: + - responsive tables HTML + - mobile table design + - overflow scroll table + - table responsive CSS + - CodeHarborHub HTML +authors: + - name: ajay-dhangar + link: https://github.com/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 new file mode 100644 index 000000000..dfaa7b0d6 --- /dev/null +++ b/tutorials/html/07-tables/table-accessibility.mdx @@ -0,0 +1,18 @@ +--- +id: table-accessibility +title: "Building Accessible HTML Data Tables" +sidebar_label: "Table Accessibility" +sidebar_position: 8 +slug: /html/tables/table-accessibility +description: "Best practices for accessible tables: using scope, headers, id associations, ARIA roles, and screen-reader-friendly data structures." +keywords: + - accessible HTML tables + - screen reader table navigation + - table scope headers attribute + - WCAG table guidelines + - CodeHarborHub HTML +authors: + - name: ajay-dhangar + link: https://github.com/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 new file mode 100644 index 000000000..838e557bb --- /dev/null +++ b/tutorials/html/07-tables/table-basics.mdx @@ -0,0 +1,18 @@ +--- +id: table-basics +title: "Introduction to HTML Tables and the table Tag" +sidebar_label: "Table Basics" +sidebar_position: 2 +slug: /html/tables/table-basics +description: "Learn the core concepts of creating web tables using the table element, understanding tabular data usage, and avoiding layout misuse." +keywords: + - HTML table tag + - table element basics + - tabular data representation + - HTML markup tables + - CodeHarborHub HTML +authors: + - name: ajay-dhangar + link: https://github.com/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 new file mode 100644 index 000000000..b652cca8a --- /dev/null +++ b/tutorials/html/07-tables/table-headings.mdx @@ -0,0 +1,18 @@ +--- +id: table-headings +title: "Table Headings and Header Cells: The th Tag" +sidebar_label: "Headings (th & scope)" +sidebar_position: 4 +slug: /html/tables/table-headings +description: "Learn how to define column and row headers using the th element alongside the scope attribute to improve semantic clarity and screen reader access." +keywords: + - HTML th tag + - table header cells + - scope attribute table + - semantic table headers + - CodeHarborHub HTML +authors: + - name: ajay-dhangar + link: https://github.com/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 new file mode 100644 index 000000000..55bf72640 --- /dev/null +++ b/tutorials/html/07-tables/table-rows-and-cells.mdx @@ -0,0 +1,18 @@ +--- +id: table-rows-and-cells +title: "Structuring Rows and Cells: tr and td Tags" +sidebar_label: "Rows & Cells (tr, td)" +sidebar_position: 3 +slug: /html/tables/table-rows-and-cells +description: "Understand how to define horizontal table rows using tr and insert standard data cells using td tags for clean data alignment." +keywords: + - HTML tr tag + - HTML td tag + - table row data + - table cell layout + - CodeHarborHub HTML +authors: + - name: ajay-dhangar + link: https://github.com/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 new file mode 100644 index 000000000..7818f0325 --- /dev/null +++ b/tutorials/html/07-tables/thead-tbody-tfoot.mdx @@ -0,0 +1,18 @@ +--- +id: thead-tbody-tfoot +title: "Semantic Table Sections: thead, tbody, and tfoot" +sidebar_label: "thead, tbody & tfoot" +sidebar_position: 6 +slug: /html/tables/thead-tbody-tfoot +description: "Structure complex data tables logically using thead for header rows, tbody for primary dataset entries, and tfoot for summary footers." +keywords: + - HTML thead tbody tfoot + - table semantic structure + - table header body footer + - dataset layout HTML + - CodeHarborHub HTML +authors: + - name: ajay-dhangar + link: https://github.com/ajay-dhangar +tags: [html, tables, semantics, layout] +--- \ No newline at end of file diff --git a/tutorials/html/index.mdx b/tutorials/html/index.mdx index e4d7c58b1..7053044b2 100644 --- a/tutorials/html/index.mdx +++ b/tutorials/html/index.mdx @@ -125,7 +125,7 @@ Start by understanding what HTML is and how a basic web page works. - Developer tools - Your first web page -👉 **[Start: Getting Started](#)** +👉 **[Start: Getting Started](/tutorials/html/getting-started)**
      @@ -149,7 +149,7 @@ Learn the building blocks of HTML. - Valid HTML - Common syntax mistakes -👉 **[Learn HTML Syntax](#)** +👉 **[Learn HTML Syntax](/tutorials/html/html-syntax)**
      @@ -173,7 +173,7 @@ Learn how to structure readable content. - Abbreviations - Dates and times -👉 **[Learn Text and Content](#)** +👉 **[Learn Text and Content](/tutorials/html/text-content)**
      @@ -197,7 +197,7 @@ Learn how users move between pages and resources. - `rel` - Link security -👉 **[Learn Links and Navigation](#)** +👉 **[Learn Links and Navigation](/tutorials/html/links-and-navigation)**
      @@ -220,7 +220,7 @@ Learn how to add images correctly and efficiently. - Image performance - Decorative images -👉 **[Learn HTML Images](#)** +👉 **[Learn HTML Images](/tutorials/html/images)**