These are special markers added to your website code that give the browser extra instructions. They act like custom attributes that tell the page how to behave.

Special Commands for HTML

This feature allows you to display or remove parts of a page based on specific rules. For example, you can show a 'Welcome' message only when someone is logged in.

Showing and Hiding Content

This command takes a single template and repeats it for every item in a list, like a row for every product in a shop. It saves you from writing the same code over and over.

Repeating Items from Lists

This links your website's internal information directly to HTML settings, such as an image's source or a link's destination. If the data changes, the page updates automatically.

Connecting Data to Tags

This ensures that whatever a user types into a text box is instantly saved and kept identical to the data in the background. It makes filling out forms much more reliable.

Keeping Inputs in Sync

This lets you change the look of an element, like its color or size, while the user is viewing the page. It helps make the website feel interactive and alive.

Updating Styles on Demand

Some commands physically add or remove chunks of the page layout rather than just hiding them. This allows the website to reorganize itself dynamically as needed.

Changing the Page Structure

If the standard instructions aren't enough, you can create custom shortcuts for your specific needs. This lets you teach the browser new tricks that you can use anywhere on your site.

Building Your Own Commands

Frameworks come with a library of ready-to-use commands for common tasks like checking boxes. These save you time by handling the difficult parts of web coding for you.

Using Pre-made Shortcuts

Directives act as a remote control for the different pieces of a website. They define the specific logic and rules that each part of the page must follow.

Managing Page Element Behavior

By packaging behavior into a single command, you can apply it to many different places on your site. This keeps your project clean and makes it easier to update in the future.

Directives (Vue/Angular) Concepts