I'm trying to develop a CSS library where I style each element on an example HTML page.

However, I came across those two elements (<cite> <blockquote>) whose examples must be shared with since they are always used together. Here is the example code:

    <p>It was a bright cold day in April, and the clocks were striking thirteen.</p>
        First sentence in <cite><a href="http://www.george-orwell.org/1984/0.html"><i>Nineteen Eighty-Four</i></a></cite> by George Orwell (Part 1, Chapter 1).

(Code by MDN contributors, page link above.)

Thus, to demonstrate those two elements, I have to place examples into two directories which look like this:

+-- cite
    +-- index.css
    +-- index.html
+-- blockquote
    +-- index.css
    +-- index.html

Thus, I am generating duplicate code which I want to avoid since I will need to update those examples in the future when, let's say, MDN docs change. Of course, there's more to it.

I have researched the StackExchange network and surprised to not find a question asking about this, so I must have not used the correct keywords. Please suggest.

Since this question is not specific about HTML, I'm not appending any tags.

Please help me on what is the best way to make one file appear in two directories. If that is not possible, maybe limiting it to only files of some types would help.

If that is still not possible, I'd like to know the best way to handle this.

  • Is there going to be some kind of index/table of contents at the site root? Just have both entries load the same sample directory.
    – Ian Jacobs
    Dec 13, 2019 at 5:19
  • @IanJacobs Since this is intended to not rely on a web server to display those contents (users may pull the source and load it inside a browser by file URL), a "site root" like solution is not possible. Thank you for your advice though.
    – freezable
    Dec 13, 2019 at 7:54
  • you don't need a web server, just an index.html at the root of your project that can handle this navigation for you. I don't think a simple filesystem will do what you want. If you want custom navigation, you'll need to bake it into your project. You may be able to leverage symbolic links, but you still need a way to install them on the machines this project is being installed to.
    – Ian Jacobs
    Dec 13, 2019 at 12:46
  • @IanJacobs Thank you. Symbolic links are the best ideas I can think of as of now as git supports them. The index.html approach seems not sufficient for me due to the reliance on itself. It seems that MDN uses this method as well. I prefer a File System based approach though.
    – freezable
    Dec 13, 2019 at 17:17
  • 1
    I don't even understand most parts of the question. cite and blockquote are not related at all and don't have to be used together. You can use cite also outside a blockquote context for any citation you want. The first sentence seems incomplete ("and it an"?). You don't explain why your directory structure has to look that way (many other ways are thinkable).
    – Mecki
    Feb 22, 2020 at 21:40

3 Answers 3


Symlinks are usually the only way to have the same file appear within two directories; well, except hardlinks, of course, but hardlinks are not portable and not useful across multiple storage volumes. I don't know of any other way how this should be possible and if there is no other way at all, then the question of the "best way" does not even arise.

The only question that may arise is whether it is really required to have the same file appear within two directories or if there is an alternative way that doesn't even have this requirement. From server side includes on a webserver up to a simple solution as having an index page just link both tags to the same sample page, there are dozen of possibilities thinkable. I would go for the last option:

<a href="blockquote-cite-sample.hmtl>Blockquote</a><br>
<a href="blockquote-cite-sample.hmtl>Cite</a>
  • Thanks! At this time I decide to just write the files twice, as this isn't really that much duplicate.
    – freezable
    Feb 23, 2020 at 2:58

I would use a templating engine or a preprocessor which can include text (or html) blocks. There are about a dozen examples here: https://css-tricks.com/the-simplest-ways-to-handle-html-includes/

  • Thanks. I can't imagine how the problem is solved though. Could you be more detailed?
    – freezable
    Feb 23, 2020 at 2:57
  • Well you have a block that's identical in two documents. So you put that block in it's own file and in the two documents, you just include a reference to the block. Then you need a compiler of sorts to produce the final documents.
    – Martin K
    Feb 23, 2020 at 20:00

Two separate documentation pages on two different tags should generally not be exactly the same. One page should explain the purpose of the blockquote, the other should explain the tag. The example itself may be the same, but the surrounding description should not be.

This is already the case on the two MDN pages you linked. While the example HTML is structurally the same, most of the information on the page is not.

If you are convinced that these two element are completely inseparable and it's impossible to explain one without explaining the other, then the pages shouldn't be separated to begin with.

It makes little sense to at the same time argue that the elements are completely inseparable (even from a documentative point of view) yet also that they should appear as separate entries in the table of contents.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.