Semantic and samp tag

HTML-CSS
1

As I understand correctly is used for script generated content? Like in that samp tag can use for example:

<samp>You filled following message at textarea when you submit form: blablabla</samp>

Is correct? Or what means about message from script language :D?

Thanks!

2

It doesn’t really have to do with outputting program/computer generated content, like say printing a JS executed console.log() message to the page. But is more about the semantic and visual representation of a sample or quoted output.

4.5.17 The samp element

The samp element represents sample or quoted output from another program or computing system.

Like in the example given in the spec, here the command to run is in the <code> element and the output you would get from running the code is in the <samp> element.

<pre>
  <code class="language-javascript">console.log(2.3 + 2.4)</code>
  <samp>4.699999999999999</samp>
</pre>
1 Like
3

So as I understand the output from script sent result is fine with code tag? samp is used for display value? Is can be combined? Like

<pre><code>console.log(2.3 + 2.4)<samp>4.699999999999999</samp></code></pre>

I think use is as

First or

<pre>
<code>
<samp>Full name: John Doe
Email address: john@gmail.com</samp>
</code>
</pre>

Second

<pre>
<code>
Full name: <samp>John Doe</samp>
Email address: <samp>john@gmail.com</samp>
</code>
</pre>

How is can be print the value with filled form include semantic?

Thanks!

4

No that is not what the elements are for.

The <code> element is a container to hold written code. The <samp> is a container to hold what might be the output of some code or program if it had been run.

They are not containers to output actual running code coming from a script or program.

Usage notes

If you need an element which will serve as a container for output generated by your website or app’s JavaScript code, you should instead use the <output> element.

There is no code or “sample (or quoted) output from a computer program” in the examples you gave.

5

Ah got it!

<pre>
<output>
Full name: John Doe
Email address: john@gmail.com
</output>
</pre>

This way is fine? To display submited data?

Thank you!

6

I guess technically if that is an output coming from a script.

But, I’m not sure that is how you want to use it for your use case. If you just need to let the user know what information they filled in for a form submit, you can just use a <p> element or something equivalent.

7

Well I got it! I think just still see output “results of a calculation or the outcome of a user action.” is also comes out from user action. Not? I mean the filled data so I try to not make with p tag because many use of them. Just try all! Thanks!

8

Off course you have a lot of paragraph elements, it is the main container used for holding text. There is nothing wrong or strange about that. There is really no reason to go out of your way not to use paragraphs when putting text on the page.

Sure the output element can be used to show “a calculation or user action” but I’m not really sure how you are using it serves that purpose. It makes more sense in the context given in the example where you have a slider and its value is output to the page.

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" name="b" value="50" /> +
  <input type="number" name="a" value="10" /> =
  <output name="result">60</output>
</form>

Anyway, I’m not saying you shouldn’t try to have a good document structure. Just remember time is valuable, so spend it wisely. :wink:

9