Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Handle HTML5 block-level elements such as aside, section, and figure #347

Open
stanio opened this issue Dec 29, 2024 · 3 comments
Open

Handle HTML5 block-level elements such as aside, section, and figure #347

stanio opened this issue Dec 29, 2024 · 3 comments

Comments

@stanio
Copy link

stanio commented Dec 29, 2024

HTML5 has some newer (compared to HTML 4) sectioning elements that should be displayed as blocks rather than inline:

<!DOCTYPE html>
<title>HTML5 Block-level Elements</title>

<header>
  Header
</header>

<main>
  Main
  <aside>
    Aside
  </aside>
  <section>
    Section
    <figure>
      Figure
      <figcaption>
        Figcaption
      </figcaption>
    </figure>
  </section>
</main>

<footer>
  Footer
</footer>

In contemporary graphical browsers, this displays as follows:

Firefox

In ELinks it displays as:

ELinks

Relevant specification (§ 15 Rendering) – Flow content:

address, blockquote, center, dialog, div, figure, figcaption, footer, form,
header, hr, legend, listing, main, p, plaintext, pre, search, xmp {
  display: block;
}

blockquote, figure, listing, p, plaintext, pre, xmp {
  margin-block: 1em;
}

blockquote, figure { margin-inline: 40px; }

Sections and headings:

article, aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section {
  display: block;
}

Rendering these unrecognized HTML5 elements inline may produce confusing results.

Somewhat related to #341.
rkd77 added a commit that referenced this issue Dec 29, 2024
@rkd77
[html] Add line break after aside, figure, figcaption and section. Refs
c63931e 
#347
@rkd77
Copy link
Owner

rkd77 commented Dec 29, 2024

Now they are rendered similar to div.

@stanio
Copy link
Author

stanio commented Dec 29, 2024

Now they are rendered similar to div.

Are header and footer handled explicitly? (didn't see them listed in the element_info array)

<section>
  <header>
    Header
  </header>

  Section

  <footer>
    Footer
  </footer>
</section>

rkd77 added a commit that referenced this issue Dec 29, 2024
@rkd77
[html] line break after footer and header. Refs #347
2aed70b
@rkd77
Copy link
Owner

rkd77 commented Dec 29, 2024

Now header and footer are also similar to div. Unknown tags are rendered inline (at least I think so).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@stanio @rkd77