Welcome to TalkGraphics.com
Results 1 to 5 of 5
  1. #1
    Join Date
    May 2021
    Posts
    5

    Default Add Bullet lists in HTML Place Holders

    Hello there, I have used Xara for few years for a simple website I have built. I am sure you have dealt with this question several times, but can you advise? I notice that Xara bulleted lists are not using the <ul> <li> tags on the rendered HTML pages. I use bulleted lists on my web pages a lot and I am concerned about their recognition by Search Engines for SEO purposes. (my SEO skills were learned many years ago and I have trouble keeping up to date) I have tried using the object name HTMLBlockText as suggested in documentation but this did not stop the spanned paragraphs being created for each bullet item. I also created a list style for the bullet list, thinking this might change how it rendered but that did not solve it.

    I then created an html place holder and put the raw html for the bulleted list in there. This displayed correctly on the page with the corresponding <ul> and <li> tags in the page code. But do I really have to do this? Do you think that the Google of today will still pick up that the Xara bulleted list is actually a list? Hope that makes sense. If you can direct me to any previous thread on this that would be great.

    Shirley
    IP

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Lightbulb Re: Add Bullet lists in HTML Place Holders

    Quote Originally Posted by ShirleyAtkins View Post
    Hello there, I have used Xara for few years for a simple website I have built. I am sure you have dealt with this question several times, but can you advise? I notice that Xara bulleted lists are not using the <ul> <li> tags on the rendered HTML pages. I use bulleted lists on my web pages a lot and I am concerned about their recognition by Search Engines for SEO purposes. (my SEO skills were learned many years ago and I have trouble keeping up to date) I have tried using the object name HTMLBlockText as suggested in documentation but this did not stop the spanned paragraphs being created for each bullet item. I also created a list style for the bullet list, thinking this might change how it rendered but that did not solve it.

    I then created an html place holder and put the raw html for the bulleted list in there. This displayed correctly on the page with the corresponding <ul> and <li> tags in the page code. But do I really have to do this? Do you think that the Google of today will still pick up that the Xara bulleted list is actually a list? Hope that makes sense. If you can direct me to any previous thread on this that would be great.

    Shirley
    Shirley, a very good question and description.

    I too have been frustrated with Xara's lack of attention to correct HTML semantics: a list should be presented as a list, a table as a table, ...
    Currently, it is a collection of SPANs for each line.
    Bullets are be presented as gylphs or blobs in the own SPAN.

    I am less troubled by SEO and very much more so for Xara's poor handling for Accessibility.

    Here is a very quick bodge:
    • Ensure you have applied your Name htmlblocktext.
    • Add your bullet(s) of choice.
    • Add jQuery, if not installed with another Name, UsesJQuery. Only needed once in the design.
    • Add to Website > HTML Code (body):

    Code:
    <script>
      $("p.xr_tu").wrap("<li></li>");
    </script>
    • Add to Website > HTML Code (head):

    Code:
    <style>
    
    li {
    
     list-style-type: none;
    
    }
    
    </style>
    This wraps each <p> tag, basically your bulleted item, in <li></li> tags.
    It preserved what you have defined for your bullet symbol(s) (remains part of your text).
    AFAICT, it reverts all the text lines back to SPANs as if htmlblocktext was not ever applied.

    If I can throw a bodge together in 30 minutes, what is Xara doing all day?
    It is a bodge as it worsens Accessibility scoring slightly but should improve SEO, if SEO cares.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
    IP

  3. #3
    Join Date
    May 2021
    Posts
    5

    Default Re: Add Bullet lists in HTML Place Holders

    Acorn, I have done as instructed. Can the name "UsesJQuery" be added to any object on the web page? I added it to the logo.
    In the rendered HTML, the Jquery piece of script appeared at the bottom of the HTML body; the style instruction appeared in the <head></head> area. But when I checked the html, (both Edge and Chrome) I could not see the <li> tags - still as before. When I chose 'Inspect' by r.clicking the web page in the browser, A warning had been issued for each of my list items: "<li> elements must be contained in a <ul> or <ol>". BTW, I ran this on my local pc, not on my live site.

    Thanks very much for your help - I am sure I am nearly there - I would be happy to get this working on my other bullet lists if I can figure out what I am doing wrong.
    Shirley
    IP

  4. #4
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: Add Bullet lists in HTML Place Holders

    Quote Originally Posted by ShirleyAtkins View Post
    Acorn, I have done as instructed. Can the name "UsesJQuery" be added to any object on the web page? I added it to the logo.
    In the rendered HTML, the Jquery piece of script appeared at the bottom of the HTML body; the style instruction appeared in the <head></head> area. But when I checked the html, (both Edge and Chrome) I could not see the <li> tags - still as before. When I chose 'Inspect' by r.clicking the web page in the browser, A warning had been issued for each of my list items: "<li> elements must be contained in a <ul> or <ol>". BTW, I ran this on my local pc, not on my live site.

    Thanks very much for your help - I am sure I am nearly there - I would be happy to get this working on my other bullet lists if I can figure out what I am doing wrong.
    Shirley
    Shirley, probably nothing too awry.

    Here is a demo file: JQ+CSS - Adding LI Tags.xar

    As htmlblocktext blows away the Line Spacing, you have to add it back yourself. Mine was 120%, revision is 135%.
    You may get close but don't get hung up over it.

    UsesJQuery can be Named to any shape.

    To see the LI Tags in place you need to press Browser > F12 > Elements.

    It will run local or live.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
    IP

  5. #5
    Join Date
    May 2021
    Posts
    5

    Default Re: Add Bullet lists in HTML Place Holders

    Acorn
    That is very clever! Thank you so much! I will now have a go at doing that to my bullet point lists on my website.
    Thanks again for your help.

    Shirley
    IP

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •