2
\$\begingroup\$

I made a fairly simple template engine (if I could call it that). Basically my server returns something like

string "This text should be [color:red;font-weight:bold; red and bold]"

Then on the client side I have my parser, for HTML in this case

function parse(str){
    return str.replace(/\[(.+?) (.+?)\]/g,'<span style="$1">$2</span>');
}

I was wondering, however, do HTML tags make a difference? If I were to use font instead of span, would I win/lose anything?

P.S.: I am aware that this regex may pick up something that wasn't meant to be parsed, but my application doesn't use these braces in texts it returns, so it is alright.

\$\endgroup\$
5
  • \$\begingroup\$ You should definitely check out handlebars (handlebarsjs.com), KnockoutJS (knockoutjs.com) or Angular (angularjs.org) instead of rolling your own. If client side templating is your thing, that is. \$\endgroup\$
    – Machinarius
    Commented Jun 7, 2014 at 12:30
  • 1
    \$\begingroup\$ @Machinarius Thanks for the advice, but I was asking about a completely different thing. I don't feel like including a whole library to do what I've done in one line. \$\endgroup\$
    – php_nub_qq
    Commented Jun 7, 2014 at 12:34
  • \$\begingroup\$ I assumed you rolled your own thing because you'd be doing this a lot. Just pointing out some alternatives that may save you time and headaches \$\endgroup\$
    – Machinarius
    Commented Jun 7, 2014 at 12:35
  • \$\begingroup\$ Are you... parsing HTML with regex? \$\endgroup\$
    – Mathieu Guindon
    Commented Jun 7, 2014 at 13:11
  • 4
    \$\begingroup\$ @Mat'sMug: No, he's parsing his own syntax and turning it into HTML. That's a fine usecase. \$\endgroup\$
    – Madara's Ghost
    Commented Jun 7, 2014 at 13:13

4 Answers 4

Reset to default
14
\$\begingroup\$

There are several advantages to writing proper HTML and using semantic tags. Instead of asking yourself "How should this look?" Ask yourself "What does this mean?".

What does it mean for a text to be red? Does it mean <em>phasized text? Maybe <strong> text? You can always apply the style="color: red;" on top of that (or even better, with a classname).

What are the advantages?

  • <font> is deprecated. Today it's still supported, mainly due to idiots who want their sites to run with IE5.5, but that may not be the case in the future. One day, <font> might just stop working altogether. Its behavior is currently undefined in latest versions of HTML, and will lead to unpredictable variations between browser implementations, and between browser versions.
  • Using proper elements (<em>, <strong> as opposed to <span> or <font>) makes machines understand your text better. That's good for accessibility, SEO, and a bunch of other things that entities which are not actual human readers do.
  • Using proper elements makes your site look better by default. Say a client does not use CSS, he's on a very old phone, or just uses some obscure browser. <em> shows up as italicized, <strong> shows up as bold. <span> shows up completely normally.

Other than that, if you're already defining all of the CSS rules in your template engine, why not use HTML to begin with? There's no point in complicating things with yet another syntax. Write valid, proper HTML from start to end, and be done with it.

\$\endgroup\$
3
  • \$\begingroup\$ I wouldn't want to complicate code needlessly, but I suspect that if the project grows bigger in future I will eventually end up building mobile apps, and there will be literally thousands of texts that will need coloring and stuff. If I put them as HTML then I would need to parse html into other languages which I suspect would be a bit harder than that simple little syntax. Other than that thank you for this little reminder, I seem to have forgotten about html tags other than span and div. \$\endgroup\$
    – php_nub_qq
    Commented Jun 7, 2014 at 15:28
  • 5
    \$\begingroup\$ @php_nub_qq: Actually, parsing HTML is a thoroughly solved problem. Lookup DOM (it's language agnostic, it doesn't apply just for JavaScript or PHP or whatever). Parsing your custom syntax would prove harder. Especially if you want to add functionality to it, which would result in monster regex. Don't do it to yourself, HTML scales better. \$\endgroup\$
    – Madara's Ghost
    Commented Jun 7, 2014 at 15:55
  • 1
    \$\begingroup\$ @php_nub_qq And if your custom syntax has any nesting like HTML does, you're going to run into the same problems trying to parse it with regex as there are with HTML. \$\endgroup\$
    – Izkata
    Commented Jun 8, 2014 at 21:02
12
\$\begingroup\$

This question is borderline off-topic for Code Review, but, I find that in reviewing what little code you have, there is actually a lot to say.

Your question asks whether <span ...></span> is OK when compared to a specific tag, like <font ...></font>. This A vs. B style of question has been discussed on Meta.

In this case, neither system you have is best. The best thing is to remove the styling from the local element, and apply it using CSS classes, in which case, span would be fine, but not with a style attribute, but with a class attribute.

Also, your solution is very, very limited. You have already identified the problem with your regex where it does not accomodate [ and ] in the 'value' content, but what about the opposite problem, spaces in the first part of the style? For example, how do you set a span with the font style: font-family: Gill Sans Extrabold, sans-serif;?

So, use a style sheet, and reference a class in your span.

\$\endgroup\$
1
  • \$\begingroup\$ +1 for the spaces in the first part of the style issue, I was thinking of the same thing. \$\endgroup\$
    – Simon Forsberg
    Commented Jun 7, 2014 at 18:23
2
\$\begingroup\$

In practice, there is normally no difference between span and font if you do not use any of the specific attributes of font but only a style attribute. In principle, the difference is that span has no meaning whatsoever beyond turning a piece of text to an inline element, whereas font additionally means that some font styling is applied to the text. However, when none of the attributes size, face, and color is used, font does not say anything about font styling.

There is nothing you can win by using font in the case described. There is hardly anything to lose either, though various theoretical possibilities can be presented.

It would be a different matter if you used the attributes of font in addition to or instead of CSS styling and/or other presentational markup. If you generated <font color=red><b>...</b></font>, then the text would be in bold and in red even when CSS has been disabled. This is relatively theoretical, though, and the downside is that many people would blame you for not using “proper markup” by their standards.

\$\endgroup\$
1
  • 3
    \$\begingroup\$ Not only "by their standards", the <font> tag is officially deprecated in the standards. HTML should be used to describe a document, not to style it. \$\endgroup\$
    – 11684
    Commented Jun 7, 2014 at 16:49
1
\$\begingroup\$

I think simply put, HTML semantics is closely related to grammar in any other type of language.

If you want the people (or computers) that are reading your text to best understand what you're doing, you need to use proper grammar.

We can still understand you if you write like a ghetto fool but if you want anyone to take you seriously in writing, you have to do it right and follow basic grammar conventions.

\$\endgroup\$

Your Answer

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

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