How can you extend HTML syntax and functionality?

1 Custom elements

Custom elements are a way of creating your own HTML tags that can have custom attributes, behaviors, and styles. You can use custom elements to encapsulate reusable components, add functionality to existing elements, or create new types of content. To create a custom element, you need to define its name, template, and class using the customElements.define() method. You also need to use a hyphen in the name to avoid conflicts with existing or future HTML tags. For example, you can create a custom element called <hello-world> that displays a greeting message.

2 Data attributes

Data attributes are a way of adding extra information to your HTML elements that can be accessed and manipulated by JavaScript or CSS. You can use data attributes to store data that is relevant to your web page, such as user preferences, settings, or states. To create a data attribute, you need to prefix the attribute name with data- and use lowercase letters and hyphens. For example, you can create a data attribute called data-theme that specifies the color scheme of your web page.

3 Template literals

Template literals are a way of writing dynamic and multi-line strings in JavaScript that can include expressions, variables, and HTML tags. You can use template literals to generate HTML code that is easier to read and write, and that can change based on the input or context. To create a template literal, you need to use backticks ( ` ) instead of quotes, and use dollar signs and curly braces ( ${} ) to insert expressions. For example, you can create a template literal that displays a personalized welcome message based on the user's name.

4 CSS variables

CSS variables are a way of storing and reusing values in your CSS code that can be updated or changed by JavaScript or media queries. You can use CSS variables to create consistent and flexible styles, and to adapt your web page to different devices, themes, or modes. To create a CSS variable, you need to use two dashes ( -- ) before the variable name, and use the var() function to access the variable value. For example, you can create a CSS variable called --main-color that defines the primary color of your web page.

5 Media queries

Media queries are a way of applying different styles to your HTML elements based on the characteristics of the device or browser that displays your web page. You can use media queries to create responsive web design, which means that your web page can adjust its layout, content, and appearance to different screen sizes, orientations, resolutions, or preferences. To create a media query, you need to use the @media rule, and specify the conditions or features that trigger the styles. For example, you can create a media query that changes the font size of your web page based on the width of the device.