HTML elements

The most common type of element used in toddle are HTML elements.

HTML elements are native to the browser, so the browser knows exactly what to do when encountering a HTML element.

☝️ To learn more about HTML checkout MDN web docs

toddle deliberately use HTML element so that you always know what the browser will see when running your toddle application. This is an important part of building applications that are both SEO friendly and accessible.

HTML element are differentiated on their name or "tag". The names have special meanings, so you cannot simply rename an element.

Some tags like, video , audio and img have special functionality built into them for displaying media.

Others like button , input and select have custom functionality for inputting data.

Some tags have semantic meaning such as h1, header and li. These elements tell the browser what the content inside these elements represent.

☝️ Heading elements are an important concept when building web apps. They help the browser identify important parts of your application and are used both by search engines and screen readers.

Example:

A h1 element or Heading 1. represents the primary heading on a page. there should only be one h1 on a page, and it should discibe what the page is about.

Attributes

HTML elements can be configured using attributes. Some attributes are common for all elements such as id or class.

Other attributes are element specific such as src which tells an img or video element where to fetch its media content.

☝️ Read about attributes on MDN web docs

You can modify an elements attributes in the Attributes tab in the element panel.

Events

HTML elements can trigger events when the user interacts with them. The most common events are click or mousover but there is a long list of possible events that an element can trigger.

☝️ Read about events on MDN web docs