Editing HTML Elements

Author

David Gerard

Published

June 3, 2025

Learning Objectives

Edit style of Shiny App with HTML elements.
Chapter 13 of Mastering Shiny.
Shiny Cheatsheet.
Optional Resources
- Shiny Tutorial.
- Shiny Examples.

HTML

HTML (Hypertext Markup Language) is a coding language like markdown used to style web documents.
When you look at a webpage, that is a browser interpreting HTML code.

The user interface in all Shiny Apps is basically just a way to write HTML code using R.

library(shiny)
ui <- fluidPage(
    titlePanel("Hello"),
    textInput("text", "What Text?")
)
ui

Hello

What Text?

Elements surounded by “<>” are called HTML “tags”. For example:
- <strong>...</strong>: Makes text bold.
```
<strong>Sesquipedalian</strong>
```
  Sesquipedalian
- <u>...</u>: Makes text underlined.
```
<u>Sesquipedalian</u>
```
  Sesquipedalian
- <s>...</s>: Makes text strikeout.
```
<s>Sesquipedalian</s>
```
  ~~Sesquipedalian~~
- <code>...</code>: Makes text monospaced.
```
<code>Sesquipedalian</code>
```
  Sesquipedalian
- <h1>...</h1>, <h2>...</h2>, <h3>...</h3>: Creates headings, subheadings, subsubheadings.
```
<h3>Sesquipedalian</h3>
```
  Sesquipedalian
- <p>...</p>: Makes paragraphs.
```
<strong>Sesquipedalian</strong>
```
  Sesquipedalian
- The following creates an itemized list:
```
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
```
  - Item 1
  - Item 2
- <br></br>: Inserts a line break.
```
Some text
<br></br>
More text
```
  Some text
  
  More text
- <hr></hr>: Inserts a horizontal “rule” (line).
```
<hr></hr>
```
- <img></img>: Inserts images (see below).
- <a>...</a>: The “anchor” tag. Creates hyperlinks (see below).
- Tag arguments are called “attributes” and are placed after the tag name in the first <>. For example, for hyperlinks you need to give it the URL with the href attribute:
```
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Click Me!</a>
```
  Click Me!

Another example with images:

<img src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Ohio_State_Buckeyes_logo.svg" 
     height="100" 
     width="100">
</img>

HTML in R

When you load the shiny library, it will load a list of functions called tags.

Each function in tags is an HTML tag. For example, to create an anchor tag use:

tags$a("Click Me!", href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ")

<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Click Me!</a>

Click Me!

Any named argument becomes an HTML attribute.
Any unnamed argument is placed between the tags.

You can put tags inside tags.

tags$a(tags$h1("Click Me!"), "Now!",
       href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ")

<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
  <h1>Click Me!</h1>
  Now!
</a>

Click Me!

Now!

Exercise: Create an itemized list using function elements from tags.

Using HTML in a Shiny App

Just put these HTML elements inside the fluidPage() call.

library(shiny)

ui <- fluidPage(
  tags$h1("I am a title"),
  tags$a("I am a link", href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ")
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

Exercise: Use the img tag to insert the Ohio State logo into a Shiny App. The url can be found here:

https://upload.wikimedia.org/wikipedia/commons/c/c1/Ohio_State_Buckeyes_logo.svg
To add an image not from a webpage, add a “www” folder inside your Shiny app. Add all images into that folder. Reference to those images by name only (not by the path) in the img tag.
```
library(shiny)

ui <- fluidPage(
  tags$img(src = "osu.png")
)

server <- function(input, output, session) {

}

shinyApp(ui, server)
```