How can one add a label to a Markdown box in Gradio?

Question

I tried:

import gradio as gr
with gr.Blocks(css="footer{display:none !important}") as demo:
    answer = gr.Markdown(value='[StackOverflow](https://stackoverflow.com/)', label="Answer")
demo.launch(share=True)

but to my surprise, the label "Answer" doesn't appear in the UI:

I don't have that issue with Textbox:

E.g.,

import gradio as gr
with gr.Blocks(css="footer{display:none !important}") as demo:
    answer = gr.Textbox(value='[StackOverflow](https://stackoverflow.com/)', label="Answer")
demo.launch(share=True)

will display the label "Answer" for the textbox:

How can one add a label to a Markdown box in Gradio?

I use Gradio 4.16.0 with Python 3.11.7 on Windows 10.

Answer 1

yuvi posted this great answer on Discord:

label doesn't work the same way for gr.HTML and gr.markdown as it does for other components. Example for intended use of the label param in both these components :

import gradio as gr
with gr.Blocks() as demo:
    answerhtml = gr.HTML(value='''<a href='https://hf.co//'>huggingface</a>''', label="Answer HTML")
    answer = gr.Markdown(value='[gradio](https://gradio.app/)', label="Answer Markdown")

    gr.Examples([
        ['[StackOverflow](https://stackoverflow.com/)', '''<a href='https://stackoverflow.com/'>stackoverflow</a>'''],
        ['[google](https://google.com/)', '''<a href='https://google.com/'>google</a>''']
    ], [answer, answerhtml])
demo.launch(share=True)

Here, you'll see that the labels for these two are used as headers for the example table below your app:

One way to add a label could be to encase the markdown in an gr.Accordion and keep it open by default:

import gradio as gr
with gr.Blocks() as demo:
  with gr.Accordion('Answers:', open=True):
    answerhtml = gr.HTML(value='''<a href='https://hf.co//'>huggingface</a>''', label="Answer HTML")
    answer = gr.Markdown(value='[gradio](https://gradio.app/)', label="Answer Markdown")

  gr.Examples([
        ['[StackOverflow](https://stackoverflow.com/)', '''<a href='https://stackoverflow.com/'>stackoverflow</a>'''],
        ['[google](https://google.com/)', '''<a href='https://google.com/'>google</a>''']
    ], [answer, answerhtml])
demo.launch(share=True)

What else you can do is add headings as h1/h2/h3 tags within an HTML component or use hashtags within your markdown examples.

import gradio as gr
val = '''<h1>Answers</h1>
'''
with gr.Blocks() as demo:
    heading = gr.HTML(value=val)
    answerhtml = gr.HTML(value='''<a href='https://hf.co//'>huggingface</a>''', label="Answer HTML")
    answer = gr.Markdown(value='[gradio](https://gradio.app/)', label="Answer Markdown")

    gr.Examples([
        ['[StackOverflow](https://stackoverflow.com/)', '''<a href='https://stackoverflow.com/'>stackoverflow</a>'''],
        ['[google](https://google.com/)', '''<a href='https://google.com/'>google</a>''']
    ], [answer, answerhtml])
demo.launch(share=True)

Based on that answer, I replaced:

import gradio as gr
with gr.Blocks(css="footer{display:none !important}") as demo:
    answer = gr.Markdown(value='[StackOverflow](https://stackoverflow.com/)', label="Answer")
demo.launch()

with

import gradio as gr
with gr.Blocks(css="footer{display:none !important}") as demo:
    with gr.Accordion('Answer:', open=True):
        answer = gr.Markdown(value='[StackOverflow](https://stackoverflow.com/)', label="")
demo.launch()

which gives: