What is the purpose and uniqueness SHTML?

HtmlSsiShtml

Html Problem Overview


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?

Html Solutions


Solution 1 - Html

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 is Microsoft's name for Javascript+HTML+CSS or something).

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.

Solution 2 - Html

It’s just HTML with Server Side Includes.

Solution 3 - Html


> "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).

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionbalaweblogView Question on Stackoverflow
Solution 1 - HtmlRob GrantView Answer on Stackoverflow
Solution 2 - HtmlGumboView Answer on Stackoverflow
Solution 3 - Htmlj D3VView Answer on Stackoverflow