HTML reusing components

Question

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>

The one the says you can provides code, so this is easy to test for yourself. — Quentin, Aug 07 '14 at 18:58
Most developers use a serverside language with serverside includes. And that second on is not PURE html, it is JavaScript. — epascarello, Aug 07 '14 at 18:59
Put it in a seperate HTML file and use the Jquery load() method. http://api.jquery.com/load/ — Konstantin, Aug 07 '14 at 18:59
@Quentin This isn't just a question about those 2 examples, it is a broader question about component reuse in* html. From my mention of elegance I was hoping for hints at good coding practice, but really I'm happy with anything. — Alter, Aug 07 '14 at 19:04
@epascarello — The second one uses an object element, which is pure HTML — Quentin, Aug 07 '14 at 19:05
Popped a +1 only because there was a googled attempt, but it seems that this is person is starting from ground 0, and needs answers directed that way. — Brian Webb, Aug 07 '14 at 19:18

Brian Webb · Accepted Answer · 2014-08-07T19:16:16.007

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: 
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.

score 1 · Answer 2 · answered Aug 07 '14 at 19:02

1

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

answered Aug 07 '14 at 19:02

Yazan Rawashdeh

1,017
2
16
26

1

+1 for workable solution (also I didn't like that someone downvoted this w/o a comment D:<) – Alter Aug 07 '14 at 19:14

HTML reusing components

2 Answers2