Top tips for optimizing HTML and utilizing div elements

Could you please provide some insights on how to effectively utilize HTML5 in conjunction with div tags? Below is the snippet of my HTML code.
I am incorporating the article tag and have segmented sections, which seem to be in order. However, I am also using grids - where should I insert the grid div?
Is my approach considered optimal?

<article>
  <div class="grid-wrapper">
    <section>
      <div class="grid-4-col">
        <h1>Welcome Back</h1>
       <p>It has been a while. What have you been up to lately?</p>
   </div>
</section>

<section>
  <div class="grid-4-col">
    <h1>Welcome Back</h1>
    <p>It has been a while. What have you been up to lately?</p>
  </div>
</section>

<section>
  <div class="grid-4-col">
    <h1>Welcome Back</h1>
    <p>It has been a while. What have you been up to lately?</p>
  </div>
</section>

<section>
  <div class="grid-4-col grid-last">
    <h3>Chicago</h3>
    <h5 hidden>City in Illinois</h5>
    <img src="chicago.jpg" alt="Chicago, the third most populous city in the United States">
    <ul>
      <li>234 square miles</li>
      <li>2.715 million residents</li>
    </ul>
  </div>
</section>
</div>
</article>

Answer №1

As per HTML5Doctor, your approach seems to be appropriate. By utilizing the divs as wrappers, you are following the allowed guidelines.

Reference:

Answer №2

When implementing a grid system, it is important to ensure that the section element containing your content is positioned within the defined grid container (div). Placing the section element outside of the div can cause the grid to be relative to the section itself rather than the entire page and grid system.

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

What steps do I need to take in order to accomplish this specific CSS

Hey there, I have a question that may seem silly, but I am struggling to find a solution on my own. Unfortunately, my CSS skills are not the best :( I'm trying to achieve the following layout where the text should wrap at the end of the container (di ...

What could be causing my Styled Components not to display the :before and :after pseudo elements?

When attempting to use the content property in a :before or :after pseudo element, I am encountering a rendering issue. Here is a simplified version of the component: import React from 'react'; import PropTypes from 'prop-types'; import ...

How can I customize the color of the title and property value in Handlebars?

Here is the list I am working with: <li>Equipment Area:{{equipment_area}}</li> <li>Equipment Type: {{equipment_type}}</li> <li>Manufacturer: {{manufacturer}}</li> <li>Model Number: {{model_number}}</li> < ...

Implementing a design aesthetic to installed React components

After downloading a react multiselect component created by an individual, I installed it using npm install .... and incorporated the component in my react code with <MultiSelect .../>. The dropdown checkbox 'menu' is designed to allow users ...

Retrieving Basic HTML Source Code in UITextView Without CSS Styling Using Objective-C

I am looking to make changes to HTML text within a UITextView. The original text was created using an HTML editor in the web version of the app and needs to be edited with a default font on iOS. Here is the simple HTML code for the text that needs editing ...

Ways to stop VoiceOver from selecting the background content when a modal is open

Is there a way to prevent VoiceOver from reading the content behind a modal? I tried using aria-modal=true, but it seems VoiceOver does not support this feature by default like NVDA and JAWS do. I found more information about this on . According to the in ...

Positioning my login form in the right spot is proving to be a challenge

I'm working on integrating this form into my website, but I'm having trouble placing it in the top right corner of the header. Below is the HTML code: $(function(){ var $form_inputs = $('form input'); var $rainbow_and_b ...

When using Angular with mdbootstrap, the mdb-tabs directive will move to the end if the ngIf condition is true

Currently facing a challenge with a significant amount of code here. It is referenced as follows: "ng-uikit-pro-standard": "file:ng-uikit-pro-standard-8.3.0.tgz", I am attempting to display a tab between 1 and 3 if a certain condition ...

Change the text inside a container without losing any associated event listeners using JavaScript or jQuery

Here is the HTML code: <div id="div001"> This is ${Row.1}. <p>${Row.2} explain something else.</p> <p>${Row.3} welcome you. <span>${Hello.World}, this is a new world.</span></p> </div> My objective is ...

What are the best ways to change the styling of jquery ui widgets?

Currently utilizing jQuery UI, I have encountered an issue with the font size within a dialog. When utilizing the standard settings, the font size appears to be excessively large. To address this, I used the element inspector to identify the class name o ...

Is it possible for a website administrator to view the modifications I have made to the CSS and HTML code?

Is it possible for a website to detect any temporary changes made to their CSS or Html through developer tools, even though these changes are not permanent? ...

What is the best way to set up a side-opening feature in the UI design?

I am having trouble with the Amoclan shape transitioning to the next side. I need the transition to occur exactly as specified in the documentation, but for some reason it is still moving on to the next side. <html> <head> <script src=" ...

Dynamically adjusting CSS Max-Height according to scroll position

Is there a CSS only technique to achieve the following scenario: An element is positioned absolutely at x,y coordinates on the screen. The document includes a vertical scrollbar depending on its content. Can the height of the element be adjusted based on ...

Invoke data-id when the ajax call is successful

Initially, there was a smoothly working "like button" with the following appearance: <a href="javascript:void();" class="like" id="<?php echo $row['id']; ?>">Like <span><?php echo likes($row['id']); ?></span ...

What is the best way to click within a web browser control?

I'm attempting to automate the process of clicking a specific div id button using vb.net. I have integrated a webbrowser for this purpose, and here is my current code snippet. The goal is to click the 'Do Job' button on the website through v ...

The Bootstrap row fails to align elements side by side as intended

I'm trying to arrange elements in my navigation menu side by side, so I decided to use the row class from Bootstrap 5.0. However, they are still stacking on top of each other. I am currently working on a Flask project and using Jinja to some extent. ...

Concentrate and select non-interactive elements with your mouse

Is it possible to set tab index on non-form elements like the div tag? I tried using tab index, but when the div is focused and the enter button is tapped, the ng-click event associated with the div tag is not triggered. <div tabindex="0" role="butto ...

Preserving the scroll position of "md-content" when navigating between various views using "ngView"

While using angularJs and implementing ngView, it's known that scroll position is maintained when navigating back and forth between different views. However, I've incorporated angular material directives like md-toolbar and md-content in my views ...

How can I dynamically update an img src using JavaScript on a PHP webpage?

I have a PHP page where I display image thumbnails. I am trying to implement a feature where the thumbnail expands in another image on mouseover. Here is the PHP code snippet: echo "<tr><td><a href='$imgrow[location]' target=&ap ...

The issue arises when attempting to render an SVG with JavaScript embedded inside using the img, object, or

Issue with the title ... please follow these steps: (view codes below) Create an svg + open it separately (name it keysaway.svg) Create html + open it individually When you observe, the svg displays a simple up and down animation but fails to work when l ...