Pages

25 Nov 2024

How the DIV tag can disrupt blog formatting

When a new, programmed blog post was automatically posted to my blog, once in a while it happened to mess up the layout of the blog. Strangely, the Archive and Label sections to the right of the blog post, then appeared at the bottom of the blogs.

Recently, I had a newly released blog post that didn't mess up the layout at first, but when I pressed the "Read more »" link, the Archive and Label sections moved to the bottom. Thus, I knew the problem was after the jump-break tag. That section contained a HTML list. Immediately before the list I noticed a
tag. The matching end tag with the slash, however, didn't appear until the very end of the blog post. When I removed both this opening divider tag and its end tag, the Archive and Label sections of the blog page returned to their normal position at the right.

The <div> tag in HTML is a fundamental and versatile element used for grouping and structuring content on a web page. It stands for “division” or “divider”. It is by default a block element, meaning that it takes all available width, and comes with line breaks before and after.
This is the HTML layout:

<div>
<!-- contained content goes here -->
</div>

My impression is that Blogger inserts <div> tags too casually in blog posts.

Further reading: w3schools.com, GeeksForGeeks.org, Elementor.com/blog, Shiksha.com/online-courses.

No comments:

Post a Comment

I'd like to read your comments and/or additions to my articles!
Due to spamming issues, all submitted comments are moderated.