In HTML, what is the suggested tag for marking up file paths?

Question

What is the proposed replacement sometagin this context:

<p>Please find the configuration in <sometag>/etc/important.conf</sometag>.</p>

Is there an established standard for this situation?

Answer 1

From a semantic point of view, I would go with an ordered list ol, since the path consists of a list of folders in which order matters, if necessary, the culmination of the file name.

Of course, you will need to customize the standard CSS for olit to look the way you want. CSS example that also set the delimiters:

.path {
  list-style-type: none;
  display: inline;
  font-size: 0;
  margin: 0;
  padding: 0;
}
.path li {
  display: inline;
  font-size: 16px;
  font-family: monospace;
}
li[role=folder]::before,
li[role=file]::before {
  content: "/";
}
li[role=extension]::before {
  content: ".";  
}

<div>Please find the configuration in
  <ol class="path" reversed="reversed">
    <li role="folder">etc</li>
    <li role="file">important</li>
    <li role="extension">conf</li>
  </ol>
</div>

Run codeHide result

MDN <ol> vs <ul> , :

<ol> <ul> . , <ol> . , , , ; , <ol>, <ul> .

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol

reversed, , , 1. . , , , , <li> , <span>. , , "":

.path {
  list-style-type: none;
  display: inline;
  font-size: 0;
  margin: 0;
  padding: 0;
}
.path li {
  display: inline;
  font-size: 14px;
  font-family: Consolas, monospace;
  font-weight: 600;
}
li[role=folder] {
  color: #00a;
}
li[role=file] {
  color: #a00;
}
li[role=folder]::before,
li[role=file]::before {
  content: "/";
  color: #888;
}
[role=file-extension] {
  color: #0a0;
  }
[role=file-extension]::before {
  content: ".";
  color: #888;
}

<div>Please find the configuration in
  <ol class="path" reversed="reversed">
    <li role="folder">etc</li>
    <li role="folder">conf</li>
    <li role="file"><span role="file-name">important</span><span role="file-extension">cfg</span>
    </li>
  </ol>
</div>

Hide result

reversed - boolean. , , (..., 3, 2, 1). , (1, 2, 3,...).

<ol> HTML 5

Answer 2

HTML5:

• :

MARK

HTML Mark() , .. , , - . , , , .

, " ".

, , .

<strong> <span>, , , , , <span> MDN.

, HTML5

- HTML5, <pre>:

HTML ( HTML- ) . ( "" ) , . .

<pre> , , . , , , , <mark>. , <mark> <pre>.

<span>, <kbd> <code> . , <mark> .

, , .

Answer 3

( OP) , ol mark code:

. XML, , .

. HTML /?.