|
|
#1 |
|
Member
![]() Posts: 13
Karma: 10
Join Date: Nov 2025
Device: none
|
About <section> and <article>
So I am reading <<epub3 best practice>>. And I stood upon two tags that is <section> and <article>. I have read the text, but I have no idea what exactly do they do in epub, seems noting happens after I add them in some test files.
I'm new here, if I did something wrong or awkward, feel free to correct me. By the way, is there better way to learn how to make epub properly rather than reading Technical Documentation like <<epub3 best practice>>?
|
|
|
|
|
|
#2 |
|
Sigil Developer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 9,093
Karma: 6404930
Join Date: Nov 2009
Device: many
|
The section tag and the article tag are "semantic" tags vs more generic tags with similar functionality like "div". They form the basis for epub semantics and in combination with epub:type and aria role attributes added to them allow the page to be more easily navigated by those with Accessibility issues using Screen and/or Accessibility readers.
Epub Accessibility in general has become increasingly important and especially for those in Europe with its recent law changes. See for example: https://www.accessiblepublishing.ca/...ic-aria-roles/ https://www.w3.org/TR/epub-ssv-11/ https://idpf.github.io/epub-guides/epub-aria-authoring/ Last edited by KevinH; 11-25-2025 at 03:34 PM. |
|
|
|
| Advert | |
|
|
|
|
#3 |
|
Member
![]() Posts: 13
Karma: 10
Join Date: Nov 2025
Device: none
|
I see, they rely on reader app heavily, it's more of a function thing rather than content thing.
I thought it can auto page-break or something. Thanks a lot. |
|
|
|
|
|
#4 |
|
Sigil Developer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 9,093
Karma: 6404930
Join Date: Nov 2009
Device: many
|
It is content but with a tag that says exactly what it is used/meant for. i.e. section of a document, or sub article inside a document. And for accessibility this is more important than you think.
It also points out how silly some epub devs get when they replace semantic tags like h1-h6 with generic p tags and somehow think this is a good idea. The tag always should help the reader to identify the structure of the document/page not make them guess. CSS and proper aria role attributes can do the rest. |
|
|
|
|
|
#5 |
|
Member
![]() Posts: 13
Karma: 10
Join Date: Nov 2025
Device: none
|
I'm not a native English speaker so my wording might be off, but I am think just what you said.
It is important to hold a good structure and readability, I fully aware that. Truly even some big publishers can put out some atrocious files that can severly hurt one's eyes and mind, or some auto transfered unreadable garbage. It is a common situation that the industry lacking comptent person to do the professional things. I think it's due to lacking of caring and the way people distribute content nowadays. And of course brianrot tiktoks that make reading as a whole plummet. |
|
|
|
| Advert | |
|
|
|
|
#6 |
|
Member
![]() Posts: 13
Karma: 10
Join Date: Nov 2025
Device: none
|
But speaking of brainrot, I'm also one of them, I cannot put too much time and effort into learning professional level formating, is there any easy to digest tutorial for a middle skill level?
|
|
|
|
|
|
#7 |
|
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,696
Karma: 9500498
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
|
Who are you creating the ebooks for? Just yourself? If just for yourself, do you need all the advanced accessibility coding in them? Maybe you are stressing about coding you don't really need.
Different issue, though, if you are publishing to the general public as then you also need to worry about the capabilities of the ereaders and apps out there in the wild. |
|
|
|
|
|
#8 |
|
Member
![]() Posts: 13
Karma: 10
Join Date: Nov 2025
Device: none
|
I'm making epubs for some hobby group and post it out to random fans online to download, so I do want to improve for some degree. I originally want to communicate in relative groups, sadly I'm already the best in formating.
So what I want is some advanced skills, but not so professional. And accessibility truly is out of my reach. As for compatibility, I'm only aiming for more popular options such as PC, smart phones and kindle maybe. |
|
|
|
|
|
#9 |
|
Bibliophagist
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 48,614
Karma: 174510110
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
One tool that may help with accessibility is the Sigil ePub editor and its builtin Add Aria Role and Add Aria Clip tools and it's Access-Aide plugin.
Overall, I find if I build accessibility into an ePub, it's a lot easier than editing the ePub to add those features. Last edited by DNSB; Today at 12:22 AM. Reason: Added r to edito... fat fingers cause typos. |
|
|
|
|
|
#10 |
|
Running with scissors
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,593
Karma: 14328510
Join Date: Nov 2019
Device: none
|
Just like any other tag, you can style it with css.
Code:
article {
font-family: sans-serif;
}
Code:
article {
font-family: sans-serif;
display: block;
}
|
|
|
|
|
|
#11 |
|
Member
![]() Posts: 13
Karma: 10
Join Date: Nov 2025
Device: none
|
I have been using <span> and <div> with class to make more fine tuning and customability in style. Except for <i> and <b> since they are short. Now that I know about accessibility things I might be using more <em> and <strong> like.
|
|
|
|
|
|
#12 | |
|
Member
![]() Posts: 13
Karma: 10
Join Date: Nov 2025
Device: none
|
Quote:
|
|
|
|
|
|
|
#13 |
|
Member
![]() Posts: 13
Karma: 10
Join Date: Nov 2025
Device: none
|
Why my post quoting others not shown?
|
|
|
|
|
|
#14 |
|
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 81,013
Karma: 150249633
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Don't do this. It may not be backwards compatible. Make a proper div and use that for any styling. For example, a number of Reader (including Kobo) use an older version of RMSDK. So if someone goes to read the ePub with the older RMSDK, then it may not work. You have to code for old software when possible when you don't know what will be used to read the eBook. It's only when you can't code for backward comparability is it OK to do something more modern.
|
|
|
|
|
|
#15 | |
|
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 81,013
Karma: 150249633
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
For example... <i>U.S.S. Enterprise</i> <em>Holy Cow!</em> |
|
|
|
|
![]() |
|
Similar Threads
|
||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| Is it possible to remove the section/article table of contents & header navigation? | Maleficent-Fly | Recipes | 1 | 05-29-2022 12:01 AM |
| "Outlook" article, Business section... | carpetmojo | News | 1 | 02-22-2012 11:17 AM |
| SF Chronicle recipe lost section/article format? | daletsteele | Recipes | 0 | 09-18-2011 03:38 AM |
| Section and Article Lists | Valhalla | Calibre | 1 | 06-05-2010 04:51 AM |