Search code examples
htmlsemanticssemantic-markupsemantic-html

Semantic HTML element for a book content?


I would like to put the entire book content (all the text, chapters etc.) into an HTML file.

Is there any semantic HTML element that I can use to wrap the text from the book?

Let's say for example that I want to make a website where someone can read copyright-free books. How should I manage the book content? Using the simple paragraph <p> or there is a more specific element? Does <article> fit these requirements?

Does the code below have a sense in a semantic way? Or there is a better way to do it.

    <article>
        <header>
            <h1>BOOK TITLE</h1>
            <p>Story by AUTOHOR NAME</p>
        </header>
        <section>
            <h2>CHAPTER ONE</h2>
            <p>PART Of THE TEXT...</p>
            <p>PART Of THE TEXT...</p>
            <p>PART Of THE TEXT...</p>
        </section>
        <section>
            <h2>CHAPTER TWO</h2>
            <p>PART Of THE TEXT...</p>
            <p>PART Of THE TEXT...</p>
            <p>PART Of THE TEXT...</p>
        </section>
        <!-- more SECTION elements -->
    </article>

Thank you for helping me out.


Solution

  • This is a matter of preference, but you can use the <section> and <article> elements that come with HTML5.

    <section> and <article> are similar to each other. You can decide which one to use by:

    1- An article is intended to be independently distributed or reusable.

    2- A section is a thematic grouping of content.

    <section>
       <p>Stories</p>
       <section>
         <article>Story 1</article>
         <article>Story 2</article>
         <article>Story 3</article>
       </section>
    </section>