Static HTML

HTML elements usually consist of a start and end tag, with the content inserted between the two tags. Shiny provides helper functions for creating the most common HTML elements

Wrapper functions

We've used titlePanel() to create static html but there are many other Shiny functions that do so too.

The most common HTML tags have helper functions in Shiny.


Header functions allow a range of headings and subheadings

h1()

h2()

h3()

h4()

h5()
h6()

bold text can be created using the strong() function.

italic text can be created using the em() function.


The horizontal lines are created using hr() and line breaks with br()


Other wrapper functions include:

p() creates a paragraph (starts on a new line)

a() insert a link to a web page

div() create a new section (division) of the HTML. Useful when customising the display with CSS

span() Create a group of inline elements. Normally used to style a string of text.

pre() Create pre-formatted text.

code() insert text that looks like computer code (the red text in this document)

tags$

The elements above can also be created using the tags list, tags$h1("Header 1") is equivalent to h1("Header 1")

tags$ is the method of creating tags for the HTML elements that do not have wrapper functions. Shiny supports 110 HTML tags in total. RStudio have provided a glossary of these

HTML tag glossary

Raw HTML

Raw HTML can be inserted using the HTML() function

This is raw HTML

show with app
library(shiny)
library(magrittr)
library(ggplot2)

ui <- fluidPage(
  titlePanel("Static HTML"),
  p("HTML elements usually consist of a start and end tag, with the content inserted 
  between the two tags. Shiny provides helper functions for creating the most common 
  HTML elements"), 
  h3("Wrapper functions"),
  p("We've used ", code("titlePanel()"), " to create static html but there are many other Shiny functions that do so too."),
  p("The most common HTML tags have helper functions in Shiny."),
  hr(),
  p("Header functions allow a range of headings and subheadings"),
  h1("h1()"),
  h2("h2()"),
  h3("h3()"),
  h4("h4()"),
  h5("h5()"),
  h6("h6()"),
  hr(),
  p(strong("bold"), " text can be created using the ", code("strong()"), " function."),
  p(em("italic"), " text can be created using the ", code("em()"), " function."),
  hr(),
  p("The horizontal lines are created using ", code("hr()"), " and line breaks with ", code("br()")),
  hr(),
  p("Other wrapper functions include:"),
  p(code("p()")     , " creates a paragraph (starts on a new line)"),
  p(code("a()")     , " insert a link to a web page"),
  p(code("div()")   , " create a new section (division) of the HTML. Useful when customising the display with CSS "),
  p(code("span()")  , " Create a group of inline elements. Normally used to style a string of text."),
  p(code("pre()")   , " Create pre-formatted text."),
  p(code("code()")  , " insert text that looks like computer code (the red text in this document)"),
  h3("tags$"),
  p("The elements above can also be created using the tags list,", 
    code('tags$h1("Header 1")'), " is equivalent to ", code('h1("Header 1")')),
  p(code("tags$"), " is the method of creating tags for the HTML elements that do not have wrapper functions. Shiny supports 110 HTML tags in total. RStudio have provided a glossary of these"),
  a("HTML tag glossary", href="https://shiny.rstudio.com/articles/tag-glossary.html"),
  hr(),  
  h3("Raw HTML"),
  p("Raw HTML can be inserted using the ", code("HTML()"), " function"),
  HTML("<p>This is raw HTML</p>"),

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

}

shinyApp(ui, server)