Skip to content

Supported HTML Elements

Jump to bottom
Matthew Whitaker edited this page May 12, 2023 · 5 revisions

List of Supported HTML Elements

  • <a>
  • <abbr>
  • <acronym>
  • <address>
  • <article>
  • <aside>
  • <audio>
  • <b>
  • <bdi>
  • <bdo>
  • <big>
  • <blockquote>
  • <body>
  • <br>
  • <center>
  • <cite>
  • <code>
  • <col>
  • <colgroup>
  • <data>
  • <dd>
  • <del>
  • <details>
  • <dfn>
  • <div>
  • <dl>
  • <dt>
  • <em>
  • <figcaption>
  • <figure>
  • <font>
  • <footer>
  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>
  • <head>
  • <header>
  • <hr>
  • <html>
  • <i>
  • <iframe>
  • <img>
  • <ins>
  • <kbd>
  • <li>
  • <main>
  • <mark>
  • <math>
  • <nav>
  • <noscript>
  • <ol>
  • <p>
  • <pre>
  • <q>
  • <rp>
  • <rt>
  • <ruby>
  • <s>
  • <samp>
  • <section>
  • <small>
  • <span>
  • <strike>
  • <strong>
  • <sub>
  • <summary>
  • <sup>
  • <svg>
  • <table>
  • <tbody>
  • <td>
  • <template>
  • <tfoot>
  • <th>
  • <thead>
  • <time>
  • <tr>
  • <tt>
  • <u>
  • <ul>
  • <var>
  • <video>
  • <wbr>

Detailed Guides

Below are detailed guides for some of the supported HTML elements so you can make better use of available features and debug your app if you encounter problems.

<a>

You can use the onLinkTap callback to receive all interactions with <a> elements.

Example: Using onLinkTap 

Html(
  data: '<a href="https://github.com">GitHub</a>',
  onLinkTap: (url) {
    //Do something with url, e.g. launch(url);
  },
),

<audio>

NOTE: <audio> requires that you add the package flutter_html_audio as a dependency.

Support for the <audio> tag is turned off by default. To enable it, add the flutter_html_audio package as a dependency and configure your Html widget:

Html(
  data: ...,
  extensions: [
    // Add this to your extensions
    AudioHtmlExtension(),
  ],
)

<hr>

Renders a horizontal bar. <hr> is styled using the border property. See https://www.w3schools.com/howto/howto_css_style_hr.asp for more details. Other than only producing solid-style borders (no dashed or dotted), flutter_html fully supports the code example on that page.

<iframe>

NOTE: <iframe> requires that you add the package flutter_html_iframe as a dependency.

Support for the <iframe> tag is turned off by default. To enable it, add the flutter_html_iframe package as a dependency and configure your Html widget:

Html(
  data: ...,
  extensions: [
    // Add this to your extensions
    IframeHtmlExtension(),
  ],
)

<img>

Coming Soon!

<math>

NOTE: <math> requires that you add the package flutter_html_math as a dependency.

Support for the <math> tag is turned off by default. To enable it, add the flutter_html_math package as a dependency and configure your Html widget:

Html(
  data: ...,
  extensions: [
    // Add this to your extensions
    MathHtmlExtension(),
  ],
)

<ruby>

Coming Soon!

<svg>

NOTE: <svg> requires that you add the package flutter_html_svg as a dependency.

Support for the <svg> tag is turned off by default. To enable it, add the flutter_html_svg package as a dependency and configure your Html widget:

Html(
  data: ...,
  extensions: [
    // Add this to your extensions
    SvgHtmlExtension(),
  ],
)

<table>

NOTE: <table> and related tags require that you add the package flutter_html_table as a dependency.

Support for the <table> tag and related tags are turned off by default. To enable them, add the flutter_html_table package as a dependency and configure your Html widget:

Html(
  data: ...,
  extensions: [
    // Add this to your extensions
    TableHtmlExtension(),
  ],
)

<video>

NOTE: <video> requires that you add the package flutter_html_video as a dependency.

Support for the <video> tag is turned off by default. To enable it, add the flutter_html_video package as a dependency and configure your Html widget:

Html(
  data: ...,
  extensions: [
    // Add this to your extensions
    VideoHtmlExtension(),
  ],
)
Clone this wiki locally