Vue Play supports dropping native HTML elements directly into your projects. Almost every standard HTML element is available, allowing you to build flexible layouts and content without limitations.
Structure elements
Used to define the layout and organization of a page, helping to group related content into meaningful sections. They improve content accessibility, readability, and provide a clear structure for both users and search engines.
<article>
<aside>
<dialog>
<div>
<footer>
<header>
<main>
<nav>
<output>
<section>
<hr>
<br>
Typography elements
Used to define and style text content on a page. They control how text is displayed, including its size, weight, and alignment. These elements help structure text in a readable and visually appealing way, enhancing the overall user experience.
<a>
<b>
<bdi>
<code>
<del>
<dfn>
<i>
<ins>
<kbd>
<label>
<mark>
<p>
<pre>
<rp>
<rt>
<ruby>
<s>
<small>
<span>
<strong>
<sub>
<sup>
<u>
<var>
<wbr>
Form elements
Used to collect user input on a page. They allow users to interact with the site by entering data, selecting options, or submitting information. These elements include inputs for text, buttons, checkboxes, radio buttons, and more, enabling the creation of interactive forms for tasks like registration, login, or surveys.
<textarea>
<button>
<datalist>
<details>
<fieldset>
<form>
<legend>
<optgroup>
<select>
<option>
<summary>
<input>
Graphic elements
Graphic elements in HTML allow the display and manipulation of visual content. They enable the inclusion of images, shapes, and interactive graphics, contributing to the overall design and user experience. These elements support visual enhancements like illustrations, charts, animations, and other media that enrich the page's presentation.
<canvas>
<figcaption>
<figure>
<map>
<meter>
<progress>
<svg>
<area>
Header elements
Header elements are used to define the hierarchy and structure of content on a webpage. They range from <h1>, representing the most important heading, to <h6>, the least important. These elements help organize content, making it easier for both users and search engines to understand the page’s structure and key topics.
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
List elements
List elements are used to group related items together in an organized way. They allow content to be presented in either ordered or unordered formats. These elements help structure information clearly, making it easier to read and understand.
<dd>
<dl>
<dt>
<ol>
<ul>
<li>
<menu>
Media elements
Media elements are used to embed and control multimedia content, such as audio, video, and images, within a page. They enable the integration of interactive and dynamic media, enhancing user engagement and providing rich content experiences.
<data>
<source>
<track>
<iframe>
<object>
<picture>
<time>
<video>
<audio>
<img>
<embed>
Quotation elements
Quotation elements are used to mark text that is a direct quote from another source. They help distinguish quoted content from the rest of the text, providing clarity and proper attribution. These elements enhance the readability and credibility of information presented.
<blockquote>
<cite>
<q>
<samp>
<address>
<bdo>
<abbr>
Table elements
Table elements are used to display data in a tabular format, organizing information into rows and columns. They help structure content like datasets, schedules, and comparisons in an easy-to-read manner, with clear organization and alignment.
<td>
<tfoot>
<th>
<thead>
<tr>
<caption>
<colgroup>
<table>
<tbody>
<col>
Vue elements
Vue elements are components and directives used within the Vue.js framework to build interactive user interfaces. They allow for the creation of reusable, modular UI components with dynamic data binding and event handling
<router-view>
<transition>
<transition-group>
<keep-alive>
<suspense>
<router-link>
<teleport>
<slot>
<component>
<template>
All elements comes with prop, attribute & style controls where it is supported, allowing you to configure them for any use case.