Is enclosing a div around HTML5 semantic elements a good practice?

Have you ever wondered about the best way to use a div with HTML5 semantic markup? I've been pondering this question for some time and haven't found a definitive answer online.

One way you could do it is like this:

<div class="header-wrapper">
    <header>
        <h1>Some header</h1>
    </header>
</div>

But would the following code be better?

<header>
    <div class="header-wrapper">
        <h1>Some header</h1>
    </div>
</header>

Or maybe it doesn't matter at all? Should we just add a class to the HTML5 semantic tag and skip the div altogether?

p.s. This is my first post, so let me know if this question is too general or broad.

Answer №1

There are two valid ways to approach this problem, using either the <header> element or the <div> element. Both elements support flow content for their children and can be considered as flow content themselves. The choice between them ultimately boils down to personal preference.

That being said, it may not make sense to use both a <header> and a

<div class="header-wrapper">
if there is no additional content within the <header> aside from the wrapper (or vice versa). It would be more efficient to stick with just one tag.

From a technical standpoint, opting for the <header> element makes more sense, as the element name clearly indicates that its contents should represent the header of the document, making it easier to understand and interpret at a glance. While there may not be any SEO advantage to choosing one over the other, using a <header> tag could potentially save time for developers navigating through the DOM hierarchy.

Nevertheless, the decision ultimately rests on personal preference and what works best for individual coding practices.

I hope this explanation provides some clarity :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The application rejected the styling from 'http://localhost:3000/css/style.css' due to its unsupported MIME type ('text/html') for a stylesheet

While working on an example website template, I encountered an error in the Chrome console: Refused to apply style from 'http://localhost:3000/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, ...

Is there a glitch in the Selenium Java CSS Selector functionality?

Everything seems to be working smoothly with that code! It successfully locates and clicks on my button within the span tag. driver.findElement(By.cssSelector("span[id$=somePagesCollection] a")).click(); However, after clicking the button, an input field ...

IE7's hidden input type takes up space in the layout

I am encountering an issue with hidden input fields within a form in IE7 causing the layout to shift. The submit button is getting placed on the next line, and when selecting the space in between, it appears that each hidden input is blank. How can I resol ...

Tips for inserting an object model with a hyperlink attribute into a table cell using Django

Currently, I am creating a basic web page with the help of django. I have a table on this page that displays a list of articles. Each article is comprised of a name, id, summary, and link. The main objective is to have the article name function as a clicka ...

Choose a single SVG file based on its unique ID

Looking for some guidance - I have a vector file with 40 svgs all combined into one image. Each vector is identified by an id inside the <g> tag. How can I select a specific svg from this single file without choosing the entire image in html? PS: E ...

What is the best way to determine the width of a device, rather than just the

I'm currently working on my debut website and I’ve encountered a minor setback with the meta tag. It seems to be defining a fixed width instead of adapting to the device screen, which is hindering my CSS animation endeavors. Most of the design displ ...

Shaded box with bootstrap palette

After implementing Bootstrap to make my website responsive, I noticed that adding the container caused a white margin that does not blend with the background color. How can I fix this issue? https://i.sstatic.net/2gGL6.png <!-- Bootstrap-4 --> < ...

Using multiple background images in CSS on mobile devices

I decided to experiment with creating a grid pattern using css background-images in this way: .grid { width:720px; height:720px; background-color: #333333; background-image: linear-gradient(rgba(255,255,255,0.1), 1px, transparent 1px), ...

The HTML/CSS authentication system is experiencing technical difficulties and is not functioning as intended

I came across this code on codepen.io and tried to implement it using the provided HTML and CSS. However, I encountered some errors during implementation. While the code works perfectly in the CodePen compiler, it doesn't seem to be error-free. One i ...

I would appreciate your assistance in the modification of the input type from text to radio within the PHP code

I've been struggling to update the input type from text to a radio button for Gender selection in my Wordpress theme's user profile settings. I can't seem to get it right in the code and I'm not sure how to make the change. I tried usi ...

CSS Duo-Toned Background

I've been searching everywhere for a solution to this issue. I have a design that I'm attempting to code using divs and CSS. The top half of the image features a gradient that transitions from left to right with different colors. My struggle lies ...

Using Angular's ng-repeat to iterate through multiple table rows along with ng-show

Check out this awesome table: <tbody ng-repeat="items in Items" ng-click="Click()"> <tr> <td><img src="{{items.img}}">{{items.name}}</td> <td>{{items.owner}}</td> <td>{{items.time ...

A significant decrease in speed is noticeable when Raphael JS is utilized with a large number of rectangles with backgrounds

I am faced with a challenge involving a large collection of small rectangles (4K-5K) and I am looking to implement the sprite technique in order to assign them a background using just one image to avoid overwhelming the server with requests. When I opt fo ...

I am experiencing an issue wherein after using jquery's hover() function, the CSS :hover state is not

Following the jquery hover function, the css hover feature ceases to work. In my html, there are multiple svg elements. A jquery script is applied where hovering over a button at the bottom triggers all svg elements to change color to yellow (#b8aa85). S ...

Having trouble implementing absolute css positioning on my custom composite button

I encountered a peculiar issue that I have managed to work around, but I am still curious about why it is happening. Below is the code for my Composite class: import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.clie ...

Guide on Deleting Specific Item Using SQL Data Source Delete Statement

I am facing an issue when trying to remove a specific item from a grid view in my SQL server database. I have configured DataKeyNames and linked a sql data source with the grid view. The delete command is set as follows: DeleteCommand="DELETE FROM product ...

Is there a way to extract JSON information from the source code of an HTML page?

I'm currently in the process of extracting data from an online music database. Specifically, I am interested in retrieving information that can be identified using CTRL+F -- "isrc":"GB-FFM-19-0853." view-source: Utilizing Python and Selenium, I have ...

Checking Twitter follower count using Jquery and JSON

Here is a script that counts twitter followers:. However, it seems to be displaying the list of followers twice. I would like some assistance in getting just the follower count stats for the array elements. Thank you! echo "<div id='twitter'& ...

Place the Share and Like buttons on a single line

I need help aligning my Facebook share button with the FB like button on my WordPress post. Despite adding both buttons on the same line, the Like button keeps appearing below the share button. I've checked in Firefox's inspector and confirmed t ...

Is there a way for me to include the input into the link within the action of a search bar?

As I work on my HTML script to create a search bar, I've run into an issue. Currently, the page redirects to instead of the input in the search box. For example, if the input in the search box is "icecreamshop", I want it to redirect to <form a ...