What is the purpose and uniqueness SHTML?

Question

Recently I came to know about SHTML when I saw a site with .shtml extensions.

What is the purpose of SHTML, and in what ways does it differ from HTML and DHTML?

Weft

If you think my answer is the correct one after 14 years, please mark it as such (-: – Aurify

Answer 1

SHTML is a file extension that lets the web server know the file should be processed as using Server Side Includes (SSI).

(HTML is...you know what it is, and DHTML - Dynamic HTML - is Microsoft's name for Javascript+HTML+CSS).

You can use SSI to include a common header and footer in your pages, so you don't have to repeat code as much. Changing one included file updates all of your pages at once. You just put it in your HTML page as per normal.

It's embedded in a standard XML comment, and looks like this:

<!--#include virtual="top.shtml" -->

It's been largely superseded by other mechanisms, such as PHP includes, but some hosting packages still support it and nothing else.

You can read more in this Wikipedia article.

Aurify

I've found that it's pretty handy for non-programmers/front end people to use and understand. Gives them includes (which are fundamentally important) without them having to get into and understand something like PHP. – Buonaparte

seems at the ReactJS Angular or Vue period, service side includes is far less useful than by the past ? – Fdic

@Webwoman indeed. server side includes are useful when the entire html document is built up on the server side and sent back to browser in one response and you want some composability of reusable "pieces" (for example, header, footer, nav, other shared content across pages..). Using ajax and dynamically building views on the front end (as common in jquery, angular, vue, react apps, etc) basically supersedes that functionality in most cases – Daumier

@Webwoman a long time before that, even. It's a very specific case these days, but say if you serve static files but want a tiny bit of dynamism (e.g. config injection), this will still be a super quick, if old school, solution for that. – Aurify

Answer 2

It’s just HTML with Server Side Includes.

Aret

Answer 3

"Since it is 2021, I am going to answer this, because the original answer answers the question from the perspective of a person who was living during a time that SSI's were very common, however, they are nearly obsolete in contemporary web development."

"SSI is an Acronym that abbreviates: Server Side Includes."

"SHTML", or (.shtml) is nothing more than a simple file extension used to denote to developers & browsers that the current document is an "HTML Doc", that implements "Server Side Includes".

I feel the best way to explain SSI's are to compare them to C-Languages (not to be confused with C-Style Syntax). The reason C-Languages make a good reference point is because of two reasons:

• A. Most Software/Web-developers who have went to school for computer science are at least "somewhat" familiar with one of the C languages (for me it was, and still is C++).

• B. The syntax was obviously dirived from the original C-language as its exactly the same as the #include statments in C languages.

---

So now if you are familiar with a C language you probably already have a good idea of what I am describing.

And, if I continue, and I say:

"They are pre-processor directives for webpages, that developers implement to keep their code DRY and maintain consistent headers and footers, which are implemented via the standard C-directives syntax (e.g. #includes, #ifdef, #define, #if, etc...)

Then you probably know exactly what they are.

---

If you haven't studied a C-language before, then this excerpt is for you:

In C languages, there are syntax statements, that are used for adding libraries, classes, interfaces, templates, etc.., and they look like this:

• #include

• #define

• #undef

• #ifdef

• #ifndef

etc...

Well, "in a nut shell", that same syntax is implemented in webpages via "Server Side Includes", or SSI's

---

• Key-Difference: Where C Directives are used in programs, SSI's are used in websites.

• Key-Similarity They both import code to be used by the program/website.

---

SSIs look like this:

<!--
 #include ifheader="reference-page" file="header.html" else="header-alt.html" 
-->

• SSIs also have #if, #else, etc...

Now that we have determined what an SSI looks like, as well as its syntax, I will explain what they are in reference to the contemporary world.

I am writing this in Mid 2021, so it is important to note, that as far as I can tell, 2012 was the last time SSIs were updated at all, furthermore; they are standardized by W3C. Today we really don't need them, because we have much more powerful technologies. The first being templating engines (Pug, Handlebars, etc..., and frameworks like Vue, and React). Now days, if you see a page, and it has the extension SHTML, its an old page most likely, and probably needs to be updated. The reason I found, and answered this question is because a professor of mine has a website that makes use of SSIs, and I noticed that edge doesn't load it properly — the header drops into the text body. Seeing a new browser like edge, not correctly rendering a technology that is well past its prime, is a pretty good sign that support is falling for that technology, and it is fading into the sunset. To conclude; if you see the "SHTML" file extension — i.e. foo.shtml — you now know why it is there, and you now know what it is, that it is, doing there,

Quick last note:

SSIs where big during the days of XHTML. But, in the contemporary Dev-World, SSI's are best utilized as a teacher, or reminder, that a technology can be extremely popular, and the standardization can be maintained by a group known for standardizing the most concrete web technologies ever created (W3C), and still it can crumble in a roman fashion. SSI's were a great idea, but there is a reason why the web is written in a language that is written in C++, and not actually written in C++ (JavaScript).

Phil