Shiny HTML Tags Glossary
By: Garrett Grolemund
In Customize your Shiny UI with HTML you saw that Shiny provides a list of functions named
tags. Each function in the list creates an HTML tag that you can use to layout your Shiny App. But what if you are unfamiliar with HTML tags? The glossary below explains what the most popular tags in
shiny::tags object contains R functions that recreate 110 HTML tags.
You can use any of these functions by subsetting the
tags list. For example to create an
h1 header in HTML, run:
Some tags functions come with a helper function that makes accessing them easier. For example, the
shiny::h1 function is a wrapper for
However, you can access many of the functions in tags only through
tags because they share a name with a common R function.
The glossary below explains what the most popular tag functions do. The tag functions that do not appear here are less popular, but still useful. You can look them up at an HTML documentation site such as w3schools.
Note about non-standard attribute names
Like in all R code, if you need to use a non-standard argument or variable name, you will also need to use backticks around it. This can come up for attribute names, since a few of these will include dashes. For example, the following code will not work:
Here’s the correct version:
Creates a link to a web page. You can access the “a” tag with the helper function
|href||the address of the web page to link to|
Adds an audio element (e.g., a sound to your app).
|autoplay||A valueless attribute. If present, audio starts playing automatically when loaded|
|controls||A valueless attribute. If present, play controls are displayed|
|src||The location of the audio file to play|
|type||The type of file to play|
Creates bold text.
Creates a block of quoted text. Usually it is displayed in a special way.
|cite||the source of the quote|
Creates a line break. You can use the helper function
Creates text formatted as computer code. You can use the helper function
Creates a section (e.g., “division”) of an HTML document. divs provide a useful hook for CSS styling. You can use the helper function
|class||The class of the div, a useful way to style the div with CSS|
|id||The ID of the div, a useful way to style the div with CSS|
|style||CSS styling to apply to the div|
Creates emphasized (e.g., italicized) text. You can use the helper function
Embed a plug-in or third party application.
|src||The source of the file to embed|
|type||The MIME type of the embedded content|
|height||The height of the embedded content|
|width||The width of the embedded content|
h1, h2, h3, h4, h5, h6
Adds hierarchical headings.
h1 creates a first level heading and
h6 create a hierarchy of decreasing subheadings. You can use the helper functions
Adds a horizontal line (e.g., horizontal rule). You can use the helper function
Creates italicized text.
Creates an inline frame to embed an HTML document in.
|src||The URL of the HTML document to embed|
|srcdoc||A raw HTML document to embed|
|scrolling||Should iframe display scrollbars (
|seamless||A valueless attribute. Should the iframe seem like part of the web page?|
|height||The height of the iframe|
|width||The width of the iframe|
|name||The name of the iframe|
Creates an image. You can use the helper function
|src||The source of the image to embed|
|height||The height of the image|
|width||The width of the image|
Creates a link to a separate document. Normally used with CSS style sheets.
ol and li
Create an ordered list (i.e., a numbered list).
Create a paragraph (a block of text that begins on its own line). You can access the p tag with the helper function
Create pre-formatted text, text that looks like computer code. You can use the helper function
HTML to prevent it from being passed as text.
Create a group of inline elements. Normally used to style a string of text. You can use the helper function
Create bold text. You can use the helper function
Create style specifications. A way to add CSS styles directly to your Shiny App.
Create subscript or super script.
ul and li
Create an unordered list (i.e., a list of bullet points).
Add a video.
|autoplay||A valueless attribute. If present, video starts playing automatically when loaded|
|controls||A valueless attribute. If present, Shiny will display play controls.|
|src||The location of the video file to play|
|height||The height of the video|
|width||The width of the video|
If you have questions about this article or would like to discuss ideas presented here, please post on RStudio Community. Our developers monitor these forums and answer questions periodically. See help for more help with all things Shiny.