BCLibCoop / nnels-a11y-publishing

GNU Lesser General Public License v3.0
5 stars 0 forks source link

Swap out generic HTML for more semantic tags, specifically <section>, <blockquote>, <figure> and <figcaption>, and <cite>. #5

Open zwettemaan opened 5 years ago

LauraB7 commented 5 years ago

InDesign does a crap job creating meaningful HTML -- it is excellent at producing <div><span><p> soup. We need a way to force ID to do a better job or, alternatively, a post-export script that will help clean up the HTML. Managing how to apply better HTML 5 tags on a variety of input is tricky. Automating this one will be a little tricky?

flittle8 commented 5 years ago

Clues for what type of tags should be used may be found in the class attribute of existing

tags:

  • <p class="heading"> should be a heading tag (h1, h2, etc.)
  • <div class="quote"> should be a <blockquote>
flittle8 commented 5 years ago

One possible solution to this issue might be something that prompts that editor to ask themselves whether or not they want to use a <div> tag in this situation and presents the user with other more semantic tag options such as<section>.

LauraB7 commented 5 years ago

Screen Shot 2019-04-29 at 9 08 22 AM

Okay, this sample is full of tricks. I have mapped the object style on the chapter-opener image to a <figure> tag. It exports with a _idGenObjectLayout-3, which is completely unnecessary.

I've mapped a frame with the image caption to a <figcaption> tag, but it needs to be inside the <figure> tag in order to be valid HTML.

I mapped the paragraph class "dinkus" (Australian typography terms are so funny) to an


tag. But that tag is not allowed to have content, and so shows up redlined in my text editing software. (The <img> needs to be deleted and called from the CSS.)

In addition, the title have a page stake -- with character overrride! -- in the middle of it. I presume this present some difficulty for your <title> script.

Screen Shot 2019-04-29 at 9 16 27 AM AliceHart_HTML5-sample.zip

flittle8 commented 5 years ago

@zwettemaan I uploaded a video related to this issue, basically just adding <section> tags to each page. One thing not shown in the video is what to do if there are lower-level headings (h2's, h3's etc) on the page as well. These would all need to be wrapped in a section tag too. So, a page should look like the below.

<body>
    <section>
        <h1>Heading 1</h1>
        <p>text</p>
        <p>text</p>
        <section>
            <h2>Heading 2</h2>
            <p>text</p>
            <p>text</p>
            <section>
                <h3>Heading 3</h3>
                <p>text</p>
                <p>text</p>
            </section>
        </section>
    </section>
</body>
flittle8 commented 5 years ago

@zwettemaan also uploaded a video re updating image tags so that images are wrapped in <figure> instead of a<p> or <div> etc video