diff --git a/docs/html/next-steps-and-resources/advanced-html-topics.md b/docs/html/next-steps-and-resources/advanced-html-topics.md index 91132dfe9..85bd43920 100644 --- a/docs/html/next-steps-and-resources/advanced-html-topics.md +++ b/docs/html/next-steps-and-resources/advanced-html-topics.md @@ -5,69 +5,110 @@ sidebar_label: Advanced HTML Topics sidebar_position: 2 tags: [html, web-development, advanced] description: In this tutorial, we will explore advanced HTML topics such as web components, microdata, and more. +keywords: + [ + advanced html, + web components, + microdata, + semantic html, + html5, + html best practices, + ] --- -Welcome to a simplified exploration of advanced HTML topics! This guide is designed to make complex concepts more accessible, helping you enhance your web development skills with practical examples. - -### Web Components - -Web components allow you to create custom, reusable web elements. Think of them as LEGO blocks for web pages, where each block can be used across different projects. - -**Custom Elements** - -Imagine creating a `` tag that displays user information. Custom elements let you define such new HTML tags, making your code more semantic and easier to read. - -**Example:** -```html - +In this tutorial, we will explore advanced HTML topics such as web components, microdata, semantic HTML, and more. + + + +## Web Components + +Web components are a set of web platform APIs that allow you to create custom, reusable, and encapsulated HTML elements. Web components consist of four main technologies: + +- **Custom Elements**: Custom elements allow you to define your own HTML elements with custom behavior and styling. +- **Shadow DOM**: Shadow DOM provides encapsulation for custom elements by hiding their implementation details from the rest of the page. +- **HTML Templates**: HTML templates allow you to define reusable chunks of HTML that can be cloned and inserted into the document. +- **HTML Imports**: HTML imports allow you to include and reuse HTML documents in other HTML documents. +- **ES Modules**: ES modules provide a way to define and load JavaScript modules in the browser. +- **Web Components**: Web components are a set of web platform APIs that allow you to create custom, reusable, and encapsulated HTML elements. +- **Custom Elements**: Custom elements allow you to define your own HTML elements with custom behavior and styling. + +Here's an example of how to create a custom element using the Custom Elements API: + +```html title="index.html" + + + + + + Custom Element Example + + + + + + ``` -**Shadow DOM** - -The Shadow DOM is like a secret room for your web component, where its styles and scripts are hidden away from the rest of the page. This ensures your component doesn't accidentally change because of other CSS or JavaScript. - -**Templates** - -Templates are blueprints for parts of your webpage. You can define a chunk of HTML that doesn't get displayed until you need it, making it perfect for repeating structures like comment threads or product listings. - -**Example:** -```html - +In the above example, we define a custom element called `my-element` that displays the text "Hello, World!" when inserted into the document. + + + +## Microdata + +Microdata is a specification that allows you to add machine-readable metadata to your HTML content. Microdata provides a way to annotate HTML elements with additional information that can be used by search engines, web crawlers, and other applications. + +Here's an example of how to use microdata to mark up a recipe on a web page: + +```html title="index.html" + + + + + + Recipe + + +
+

Classic Chocolate Chip Cookies

+ Chocolate Chip Cookies +

A classic recipe for delicious chocolate chip cookies.

+
    +
  • 2 1/4 cups all-purpose flour
    • +
  • 1 tsp baking soda
    • +
  • 1/2 tsp salt
    • +
+
+ + ``` -### Microdata - -Microdata adds extra information to your HTML, making it easier for search engines to understand the content of your pages. It's like adding labels to your website's elements so that search engines know exactly what they're looking at. - -**Example:** -```html -
- John Doe - johndoe@example.com -
-``` - -### Other Advanced HTML Topics - -**ARIA Attributes** - -ARIA attributes make your web pages more accessible to people with disabilities. For example, `role="button"` tells screen readers that an element is a button, even if it's not a ` + +

+ {faq.answer} +

+ + + ))} + - -

{faq.answer}

- - - ))} + + - + ); }; diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js index 067bd01f3..350d23183 100644 --- a/src/theme/MDXComponents.js +++ b/src/theme/MDXComponents.js @@ -25,6 +25,7 @@ import TabItem from "@theme/TabItem"; import Tabs from "@theme/Tabs"; import { FaReact } from "react-icons/fa"; import LiteYouTubeEmbed from "react-lite-youtube-embed"; +import Comming from "@site/src/components/Comming"; export default { // Re-use the default mapping @@ -54,4 +55,5 @@ export default { Author, LinearSearchVisualizer, AdsComponent, + Comming, }; diff --git a/static/img/ajay-dhangar.jpg b/static/img/ajay-dhangar.jpg new file mode 100644 index 000000000..7ef7c13d2 Binary files /dev/null and b/static/img/ajay-dhangar.jpg differ diff --git a/static/sponsors/ajay-dhangar.jpg b/static/sponsors/ajay-dhangar.jpg index 6e0f5bfc1..7ef7c13d2 100644 Binary files a/static/sponsors/ajay-dhangar.jpg and b/static/sponsors/ajay-dhangar.jpg differ