Compatibility of custom HTML tags

Discussion in 'HTML' started by jwcarlton@gmail.com, Sep 6, 2012.

  1. Guest

    I have a site where I use a JavaScript function to let the user increase font sizes in preselected areas. Those areas are currently denoted with a <p></p>.

    Recently, I've come across the issue where user-generated content may include a <div> </div>, which then breaks the <p> tag.

    In retrospect, I don't really have very many tags that I can use that wouldnever be included in the user-generated content, so I'm giving thought to a custom HTML tag; something like <mydomain> </mydomain>, then apply the JavaScript function to that tag instead of <p> </p>.

    My question is, if I went that route, would the <mydomain> tag be compatible on all of the modern browsers (meaning, the last year or two)? Or am I going to run in to issues of certain browsers totally ignoring all content between the open and close, or worse, throwing an error?
     
    , Sep 6, 2012
    #1
    1. Advertising

  2. wrote:
    > I have a site where I use a JavaScript function to let the user increase font sizes in preselected areas. Those areas are currently denoted with a <p> </p>.
    >
    > Recently, I've come across the issue where user-generated content may include a <div> </div>, which then breaks the <p> tag.


    Breaks the <p> tag? Maybe a URL will be helpful for what you are trying
    to describe. If you mean placing a DIV within a P element, well that
    isn't valid. You can place a P with a DIV though.

    >
    > In retrospect, I don't really have very many tags that I can use that would never be included in the user-generated content, so I'm giving thought to a custom HTML tag; something like <mydomain> </mydomain>, then apply the JavaScript function to that tag instead of <p> </p>.
    >
    > My question is, if I went that route, would the <mydomain> tag be compatible on all of the modern browsers (meaning, the last year or two)? Or am I going to run in to issues of certain browsers totally ignoring all content between the open and close, or worse, throwing an error?
    >


    Not sure what you are trying to accomplish. Custom elements are not
    valid with HTML. To extend it your would need XHTML,
    Extensible HyperText Markup Language. But since MS never really "came on
    board" the XHTML bandwagon XHTML is really dead. You need to give more
    details of what you wish to do.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 6, 2012
    #2
    1. Advertising

  3. dorayme Guest

    In article <>,
    wrote:

    > I have a site where I use a JavaScript function to let the user increase font
    > sizes in preselected areas. Those areas are currently denoted with a <p>
    > </p>.
    >
    > Recently, I've come across the issue where user-generated content may include
    > a <div> </div>, which then breaks the <p> tag.
    >
    > In retrospect, I don't really have very many tags that I can use that would
    > never be included in the user-generated content, so I'm giving thought to a
    > custom HTML tag; something like <mydomain> </mydomain>, then apply the
    > JavaScript function to that tag instead of <p> </p>.
    >
    > My question is, if I went that route, would the <mydomain> tag be compatible
    > on all of the modern browsers (meaning, the last year or two)? Or am I going
    > to run in to issues of certain browsers totally ignoring all content between
    > the open and close, or worse, throwing an error?


    Why not just use a regular classed DIV instead of a P, at least, then,
    any inner DIV would be kosher. And if you were using P for its default
    styling (the browser provides a default style, usually via a hidden
    style sheet), nothing is easier to style the classed DIV replacement
    to be similar. There would be no particular browser issues with such
    simple things as bits of top or bottom margins and paddings.

    --
    dorayme
     
    dorayme, Sep 6, 2012
    #3
  4. dorayme Guest

    In article <>,
    dorayme <> wrote:

    er...

    > nothing is easier to style [than] the classed DIV replacement
    > to be similar to a P.


    --
    dorayme
     
    dorayme, Sep 6, 2012
    #4
  5. Guest

    On Thursday, September 6, 2012 3:59:32 AM UTC-4, dorayme wrote:
    > > nothing is easier to style [than] the classed DIV replacement

    >
    > > to be similar to a P.


    If I understand correctly, though, getElementByClassName (which would be necessary for this feature) isn't supported in IE7 or IE8. For this site, 51%of my traffic comes from IE, and 42% of that is IE7 or IE8, so I still have to worry about backwards compatibility :-(

    On the plus side, I only see 0.5% from IE6! LOL
     
    , Sep 6, 2012
    #5
  6. Guest

    On Thursday, September 6, 2012 12:05:31 AM UTC-4, Jonathan N. Little wrote:
    > > Recently, I've come across the issue where user-generated content may include a <div> </div>, which then breaks the <p> tag.

    >
    > Breaks the <p> tag? Maybe a URL will be helpful for what you are trying
    > to describe. If you mean placing a DIV within a P element, well that
    > isn't valid. You can place a P with a DIV though.


    That's exactly what I meant. For example, if I have (in PHP):

    <p>
    $user_content
    </p>

    and the user submits something that includes <div>...</div>, then it's not valid.

    FWIW, I'm using a contenteditable field, so the user doesn't necessarily mean to include the tags; they're just being copied when they quote other sites.

    With the script that I'm using to change the font size of <p>, the embedded<div></div> ends the script. Anything in $user_content before the first <div> will be affected, but anything after is ignored.


    > > My question is, if I went that route, would the <mydomain> tag be compatible on all of the modern browsers (meaning, the last year or two)? Or am I going to run in to issues of certain browsers totally ignoring all content between the open and close, or worse, throwing an error?

    >
    > Not sure what you are trying to accomplish. Custom elements are not
    > valid with HTML. To extend it your would need XHTML,
    > Extensible HyperText Markup Language. But since MS never really "came on
    > board" the XHTML bandwagon XHTML is really dead. You need to give more
    > details of what you wish to do.


    Ahh, I didn't realize that. I recently came across the idea of a custom tagfrom WashingtonPost.com, but it does look like their doctype is XHTML 1.0 Transitional.

    What I'm really trying to do is find is a tag name that I could use to safely wrap $user_content, and that's obscure enough that the user will not be likely to submit content with it included.
     
    , Sep 6, 2012
    #6
  7. 2012-09-06 19:40, wrote:

    > For example, if I have (in PHP):
    >
    > <p>
    > $user_content
    > </p>
    >
    > and the user submits something that includes <div>...</div>, then it's not valid.


    There are loads of tags that aren't valid within a <p> element. For
    example, <p>. Or, rather, a <p> tag implicitly closes an open <p>
    element and starts a new one.

    There should be no reason to use <p> here. Instead, use <div>, which
    allows anything that is valid inside <body>, and use class and/or id
    attributes to make it possible to refer to a specific <div> element. I
    would recommend using a semicryptic id, with a value that won't appear
    in the user data in practice. Say, <div id="-input">.

    > FWIW, I'm using a contenteditable field, so the user doesn't necessarily
    > mean to include the tags; they're just being copied when they quote other sites.


    Right. So they might contain <p>, <div>, and fancy classes and ids.

    > With the script that I'm using to change the font size of <p>, the embedded
    > <div></div> ends the script.


    Script? Changing font size does not need a script, just a little piece
    of CSS. And surely a <div> tag implicitly closes an open <p> element.
    This won't happen if your editable block is marked up as <div>.

    There's a catch, though.

    > I recently came across the idea of a custom tag from WashingtonPost.com,
    > but it does look like their doctype is XHTML 1.0 Transitional.


    That's rather irrelevant. XHTML on the web is parsed as HTML in reality.
    They do their daily tag slurping. But custom tags are not the solution here.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Sep 6, 2012
    #7
  8. In article <>,
    <> wrote:
    >
    >That's exactly what I meant. For example, if I have (in PHP):
    >
    ><p>
    > $user_content
    ></p>
    >
    >and the user submits something that includes <div>...</div>, then it's not valid.


    If you're letting the user submit un-vetted content, you've got worse
    problems than that.

    Sometimes when I encounter a site that I suspect is accepting user content
    without validating it first, I add an unclosed <blink> tag.

    Read this comic and get back to us: http://xkcd.com/327/

    --
    -Ed Falk,
    http://thespamdiaries.blogspot.com/
     
    Edward A. Falk, Sep 6, 2012
    #8
  9. Guest

    On Thursday, September 6, 2012 12:56:31 PM UTC-4, Jukka K. Korpela wrote:
    > There are loads of tags that aren't valid within a <p> element. For
    > example, <p>. Or, rather, a <p> tag implicitly closes an open <p>
    > element and starts a new one.


    Good point.


    > There should be no reason to use <p> here. Instead, use <div>, which
    > allows anything that is valid inside <body>, and use class and/or id
    > attributes to make it possible to refer to a specific <div> element. I
    > would recommend using a semicryptic id, with a value that won't appear
    > in the user data in practice. Say, <div id="-input">..


    Yes, but I'm using <div> tags heavily throughout the site, so I can't rely on it for this purpose. I'll explain more later in this post...


    > > With the script that I'm using to change the font size of <p>, the embedded
    > > <div></div> ends the script.

    >
    > Script? Changing font size does not need a script, just a little piece
    > of CSS. And surely a <div> tag implicitly closes an open <p> element.
    > This won't happen if your editable block is marked up as <div>.


    I apologize for not being more clear. I'm specifically using a JavaScript function to let the user increase font sizes in preselected areas, and currently those areas are denoted with a <p></p>. This gives the user the optionto zoom in on certain areas, without zooming in with their browser or negatively affecting other parts of the page.

    This is mostly used by less-savvy users that don't understand how to zoom with their browser, but do understand a section of the webpage that says "click here to make the text larger" :)

    This is why I can't really use a <div> tag for this purpose. I'm using <div> tags for things like the logo, etc, and specifically don't want them to be affected by the script. And since there are multiple user posts that would be affected by the script, I can't rely on an id, either.
     
    , Sep 6, 2012
    #9
  10. Guest

    On Thursday, September 6, 2012 1:43:12 PM UTC-4, Edward A. Falk wrote:
    > If you're letting the user submit un-vetted content, you've got worse
    > problems than that.


    LOL I'm not quite THAT naive! The content isn't "un-vetted" at all; in fact, it's been a rather cumbersome PITA to write a function to format all of the posts correctly. Removing unrecognized classes, relative images, CSS backgrounds and positions, etc... it's been a pain, trust me!

    Realistically, I do strip all HTML and JavaScript tags except for:

    div|p|a|span|font|img|br|b|u|i

    So if there's an HTML tag (except for a <table>, which I do use somewhat inother parts of the site) that I could use to wrap any/all of these tags without an error, then I could probably use it.
     
    , Sep 6, 2012
    #10
  11. 2012-09-06 22:14, wrote:

    > I apologize for not being more clear. I'm specifically using a
    > JavaScript function to let the user increase font sizes in
    > preselected areas, and currently those areas are denoted with a
    > <p></p>.


    That's just illogical, unless each of the areas constitutes a paragraph
    of text and nothing more.

    > This is mostly used by less-savvy users that don't understand
    > how to zoom with their browser,


    You can't make anything foolproof, because the fools are so clever. And
    trying to treat your visitors as clueless tends to make things worse.

    > but do understand a section of the webpage that says
    > "click here to make the text larger":)


    Why would they need to understand it? Unless you haven't reduced font
    size below normal readability, most people have no problem. Those that
    have have it on most pages, so they have either learned how to deal with
    it or qui using the web.

    The morale is that second-guessing is the surest way of guessing wrong.

    > This is why I can't really use a <div> tag for this purpose.


    Really?

    > I'm using <div> tags for things like the logo, etc, and specifically
    > don't want them to be affected by the script.


    Do you mean that your page has no paragraphs, i.e. <p> elements? And you
    use logos in a manner that breaks them when font size is changed?

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Sep 6, 2012
    #11
  12. Jukka K. Korpela wrote:
    > 2012-09-06 22:14, wrote:



    >> This is why I can't really use a <div> tag for this purpose.

    >
    > Really?


    Yes, what is wrong with <div id="zoomable"></div>?

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 6, 2012
    #12
  13. Guest

    On Thursday, September 6, 2012 3:26:45 PM UTC-4, Jukka K. Korpela wrote:
    > That's just illogical, unless each of the areas constitutes a paragraph
    > of text and nothing more.


    Yes and no; it depends on your definition of "logic"! LOL

    I'm not so concerned with technical logic as I am with presentation. And for this purpose, using:

    <p>
    First paragraph
    <br>
    <br>
    Second paragraph
    </p>

    works just fine.


    > You can't make anything foolproof, because the fools are so clever.


    LOL


    > And
    > trying to treat your visitors as clueless tends to make things worse.
    >
    > > but do understand a section of the webpage that says
    > > "click here to make the text larger":)

    >
    > Why would they need to understand it? Unless you haven't reduced font
    > size below normal readability, most people have no problem. Those that
    > have have it on most pages, so they have either learned how to deal with
    > it or qui using the web.
    >
    > The morale is that second-guessing is the surest way of guessing wrong.


    This isn't a new feature for me, and I keep track of how often it's used. The site is currently 10 years old with a little over 100,000 daily users and about 400,000 registered users. When a registered user changes the font size, I set a 1-year cookie, but also add it to a database so that when theylog in again, if the cookie isn't present then I can put it back.

    So this really isn't an issue of my second guessing the user, or implementing an unnecessary feature. I know for a fact that about 12% of my daily users have either increased or decreased the default font size using this script.


    > > I'm using <div> tags for things like the logo, etc, and specifically
    > > don't want them to be affected by the script.

    >
    > Do you mean that your page has no paragraphs, i.e. <p> elements?


    No, I mean that it has no <p> elements in locations that I wouldn't want tobe affected by the font size script.


    > And you
    > use logos in a manner that breaks them when font size is changed?


    Yes and no. The logo and tagline are a text/CSS object as opposed to an image, which has worked out great for search engines. And when the user uses the font size script that's built in to the website, no, I wouldn't want thelogo (or navigation, or other elements in the header or footer) to change.
     
    , Sep 6, 2012
    #13
  14. Guest

    On Thursday, September 6, 2012 4:48:19 PM UTC-4, Jonathan N. Little wrote:
    >
    > Yes, what is wrong with <div id="zoomable"></div>?


    The script would apply to multiple blocks on the same page, and AFAIK, an ID can only be used on one block of the page.

    For example, think of a message board thread with numerous posts. I want the post to be increased or decreased on each post, but not the username, timestamp, or other data around the post.
     
    , Sep 6, 2012
    #14
  15. wrote:
    > On Thursday, September 6, 2012 4:48:19 PM UTC-4, Jonathan N. Little wrote:
    >>
    >> Yes, what is wrong with <div id="zoomable"></div>?

    >
    > The script would apply to multiple blocks on the same page, and AFAIK, an ID can only be used on one block of the page.
    >
    > For example, think of a message board thread with numerous posts. I want the post to be increased or decreased on each post, but not the username, timestamp, or other data around the post.
    >


    <div id="zoomable0"></div>
    <div id="zoomable1"></div>
    <div id="zoomable2"></div>

    var divs=document.getElementsByTagName('div');
    for( var i=0; i<divs.length; i++){
    var theID=divs.id;
    if(theID.match(/^zoomable[\d]+/)){
    //do whatever you want with zoomable DIVs
    alert('found ' + theID);
    }
    }

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 6, 2012
    #15
  16. On Thu, 6 Sep 2012 14:36:23 -0700 (PDT), wrote:

    >On Thursday, September 6, 2012 4:48:19 PM UTC-4, Jonathan N. Little wrote:
    >>
    >> Yes, what is wrong with <div id="zoomable"></div>?

    >
    >The script would apply to multiple blocks on the same page, and AFAIK, an ID can only be used on one block of the page.


    So use
    <div class=zoomable></div>
    instead.

    [snip]

    Sincerely,

    Gene Wirchenko
     
    Gene Wirchenko, Sep 6, 2012
    #16
  17. Guest

    On Thursday, September 6, 2012 6:54:55 PM UTC-4, Gene Wirchenko wrote:

    > >The script would apply to multiple blocks on the same page, and AFAIK, an ID can only be used on one block of the page.

    >
    > So use
    > <div class=zoomable></div>
    > instead.


    LOL Well, as I said earlier, getElementByClassName (which would be necessary for this feature) isn't supported in IE7 or IE8 :-(
     
    , Sep 7, 2012
    #17
  18. Guest

    On Thursday, September 6, 2012 6:24:38 PM UTC-4, Jonathan N. Little wrote:

    > <div id="zoomable0"></div>
    > <div id="zoomable1"></div>
    > <div id="zoomable2"></div>
    >
    > var divs=document.getElementsByTagName('div');
    >
    > for( var i=0; i<divs.length; i++){
    > var theID=divs.id;
    >
    > if(theID.match(/^zoomable[\d]+/)){
    > //do whatever you want with zoomable DIVs
    > alert('found ' + theID);
    > }
    > }


    Thanks, that's not a bad plan :) I think it would be quite a bit slower than the original script that just sets the style for all <p> elements, though. In one section of the site (a classifieds section), there could easily be over 1,000 blocks, so this would have to loop through all 1,000 of them.

    In an ideal world, I'd much rather find an HTML tag that could wrap other block elements, and then just set that tag one time. I'm starting to think that a tag like that doesn't really exist, though.


    *** sorry if this goes through twice. I had an error when I posted it the first time, and 10 or 15 minutes later I didn't see it.
     
    , Sep 7, 2012
    #18
  19. BootNic Guest

    In article <>,
    wrote:

    > On Thursday, September 6, 2012 6:54:55 PM UTC-4, Gene Wirchenko wrote:


    >>> The script would apply to multiple blocks on the same page, and
    >>> AFAIK, an ID can only be used on one block of the page.


    >> So use <div class=zoomable></div> instead.


    > LOL Well, as I said earlier, getElementByClassName (which would be
    > necessary for this feature) isn't supported in IE7 or IE8 :-(


    I suppose if one is stuck on the ideal of iterating over an unknown
    number of elements … but then again there are other ways to get a
    similar result even in IE 6/7/8.

    My main point is one does not need to iterate over all elements with a
    className to change a style on those elements.

    Add or edit rules in a stylesheet.

    Something to get started with, not intended to be complete.

    function setFontSize(classname, fontsize) {
    var mySheet,selector,rule;
    if(!(document.styleSheets && document.styleSheets.length)) {
    mySheet = document.createElement('style');
    document.getElementsByTagName('head')[0].appendChild(mySheet);
    }
    mySheet = document.styleSheets[document.styleSheets.length - 1];
    selector = "." + classname + " ";
    rule = "{ font-size:" + fontsize + "; }";
    if ('insertRule' in mySheet) {
    mySheet.insertRule(selector + rule, mySheet.cssRules.length);
    } else if ('addRule' in mySheet) {
    mySheet.addRule(selector, rule);
    }
    }

    setFontSize('zoomable','48px')


    --
    BootNic Thu Sep 6, 2012 11:13 pm
    Facts do not cease to exist because they are ignored.
    *Aldous Huxley*

    -----BEGIN PGP SIGNATURE-----
    Version: GnuPG v1.4.11 (GNU/Linux)

    iEYEARECAAYFAlBJZksACgkQOcdbyBqMFBHIAQCeJ5prk244eKitrEnp+gKiHZ5B
    PRwAn0mjVV7Jkuk8nCpvKSJ9u9gANm0l
    =dTx4
    -----END PGP SIGNATURE-----
     
    BootNic, Sep 7, 2012
    #19
  20. Doug Miller Guest

    wrote in
    news::

    > On Thursday, September 6, 2012 12:05:31 AM UTC-4, Jonathan N.
    > Little wrote:
    >> > Recently, I've come across the issue where user-generated
    >> > content may i

    > nclude a <div> </div>, which then breaks the <p> tag.
    >>
    >> Breaks the <p> tag? Maybe a URL will be helpful for what you
    >> are trying

    >
    >> to describe. If you mean placing a DIV within a P element,
    >> well that isn't valid. You can place a P with a DIV though.

    >
    > That's exactly what I meant. For example, if I have (in PHP):
    >
    > <p>
    > $user_content
    > </p>
    >
    > and the user submits something that includes <div>...</div>,
    > then it's not valid.


    If you are accepting user input and redisplaying it on your page
    without editing or validating it in any way, you have FAR larger
    problems than invalid HTML.

    For example, what would stop me from submitting this user content?
    <iframe src="http://www.identitytheftwebsite.com">

    or this?
    <img src="http://www.pornographicpictures.png">

    Suggest you post in alt.php and/or comp.lang.php to learn
    about proper editing and validation of user input, BEFORE you go
    any farther with this project.
     
    Doug Miller, Sep 7, 2012
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ranganath

    Custom Tags within Custom Tags.

    Ranganath, Oct 17, 2003, in forum: Java
    Replies:
    2
    Views:
    499
    Ranganath
    Oct 21, 2003
  2. Mike
    Replies:
    3
    Views:
    981
    Michael Borgwardt
    Jan 9, 2004
  3. Jay Golden
    Replies:
    4
    Views:
    1,118
  4. A. Brinkmann
    Replies:
    2
    Views:
    1,118
    A. Brinkmann
    Apr 16, 2004
  5. Dave
    Replies:
    0
    Views:
    468
Loading...

Share This Page