CODEWITHSUNDEEP
html
Alter
Alter

Reputation: 3464

HTML reusing components

I have an HTML component I want to reuse on several pages. For the sake of elegance, I would like to reuse the component rather than copy and paste it.

This is a tricky question, in my searches I have found this post, which simply says it is not possible in pure html. But then I also found this post, which seems like it could accomplish exactly what I want.
So, which one is right?

For reference, here is the component that I'm trying to reuse:

<div id="topbar" class="container">
    <div class="test1">
        <p> Style1
    </div>

    <div class="test2">
        <p> Style2
    </div>

    <div id="test3">
        <p> Style3
    </div>
</div>

Upvotes: 0

Views: 448

Answers (2)

Brian Webb
Brian Webb

Reputation: 1156

Pure html does not have the reusable component architecture, however there are several options.

  • jQuery: You can execute a load, to grab your HTML fragment from a file and embed it into your page.
  • Angular.Js: You can create a custom directive that acts like an HTML tag, but renders as your HTML fragment
  • Server Side Includes: If this feature is included in your server, then you can implement this.
    • ASP: <!--#include file="my fragment file name"-->
  • Server code execution: Like server side includes, if you are running on a server that supports PHP, ASP, Ruby, ASP.NET, or one of several other languages, you can have them embed the code snipped into your HTML at the server.
    • ASP.NET C#: @MyStringVariable
    • PHP: include("my fragment file name");

Your question is one of the first of stepping into the huge world of software engineering and web development.

Upvotes: 2

Yazan Rawashdeh
Yazan Rawashdeh

Reputation: 1041

you can do this with server side languages, so if you're using PHP you can do this 

include("MyMarkup.php");

or if you're using ASP , you can do this 

<!--#include file="includefile.asp"-->

Upvotes: 1

Related Questions