HTML5 Page Structure Design

As I embark on my journey to create my very first Wordpress theme for my personal blog, I have a few questions regarding the layout. Should I use Grid960? Also, should I put the articles in one section or the opposite? Here is the layout structure I am considering. Can you please let me know if it is correct?

<body class="container_12"> 
    <nav>           
    </nav>  
         <article 1>
            <h2></h2>
            <p</p>
            <a href="#"> Show More</a>          
          </article>
                  <article 2>
            <h2></h2>
            <p</p>
            <a href="#"> Show More</a>          
          </article>
    <aside>
        <section> 
        <h4></h4>
        </section>
        <section> 
        <h4></h4>
            </section>
    </aside>
       <footer>
       </footer>
</body>

csshtmlwordpresslayout

Answer №1

You created paragraph tags incorrectly, like this <p</p> , they should be written as <p></p>

Additionally, you used incorrect syntax with 

<article 1> <article 2>
. Keep in mind that article tags function similar to p tags. You only need the word article inside the <> , such as <article> .. However, you can include more elements within it by using proper formatting.

For instance

Valid syntax looks like this

<article class="article1" id="firstarticle" style="background: blue;"> </article>

The examples below are considered invalid

<article 3>
<article someword anotherword>
<article class=article1>

Your corrected code

<body class="container_12"> 
    <nav>           
    </nav>  
         <article class="article1">
            <h2></h2>
            <p></p>
            <a href="#"> Show More</a>          
          </article>
                  <article class="article2">
            <h2></h2>
            <p></p>
            <a href="#"> Show More</a>          
          </article>
    <aside>
        <section> 
        <h4></h4>
        </section>
        <section> 
        <h4></h4>
            </section>
    </aside>
       <footer>
       </footer>
</body>

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

Loop through multiple levels of elements using jQuery

I have a snippet of HTML that resembles the following structure: <div class="block"> <div id="item1"></div> <div id="item2"></div> </div> <div class="block"> <div id="item3"></div> </di ...

jqueryhtmlloopsforeach

What is the syntax for implementing a for loop/for each loop in EJS?

I'm trying to figure out how to include this code snippet inside <% %>. I'm not sure if it's similar to a typical forEach/for loop. The documentation on EJS site is quite limited, so I've turned to this forum for help. <% incl ...

javascripthtmlloopsexpresspartials

Placing a collection of <a> anchor tags inside a div and making them float

I've been experimenting with building a website from scratch, opting for a simple and blocky design. I placed the navigation at the top of the page in an unordered list format containing <a> elements within list tags, all enclosed within a <n ...

htmlcss

Guide on displaying a modal from a separate file onto my HTML page with Laravel and Ajax

In my project, I am utilizing Laravel and AJAX. Inside the index.blade.php file, I have the following code: <a onclick="addForm()" class="btn btn-success " style="float:right;">Tambah</a> Additionally, I have the following script: <script ...

htmlcssajaxlaravelmodal-dialog

css malfunctioning user interface

I'm struggling to figure out how to design a CSS toolbar. My goal is to create a 22x22 button toolbar with 4 buttons. I have this PNG image: and the following code: <style> #nav {background: url(content/images/crtoolbar.png) no-repeat;height: ...

htmlcss

Enhance D3 Version 6 Stacked Bar Chart with Spacing and Interactive Features

My bar chart lacks the spacing between bars that I intended to achieve, and the interactive tooltip doesn't show up when hovering over the bars. I could use some assistance with this. The purpose is to display the value of a specific color when hoveri ...

javascripthtmlcssd3.js

Ensure that the width of the sibling div matches the width of its sibling image

I need help displaying an image with two buttons positioned below it. The dimensions of the image can vary, so I've set a max-width of 60% and max-height of 80%. However, I'm struggling to align the buttons correctly under the image - with the le ...

htmlcssalignment

Stop IOS return button from triggering submission action

Having trouble with the IOS return key function on the keyboard (specifically in Safari on an iPhone). In my web application using Vue JS, I have a textarea within a chat component: <textarea class="field-text__input field-text__input--height-s ...

javascripthtmliosvue.jspreventdefault

Error encountered: PHP class malfunctioning when trying to access post metadata

This is my first dive into Object-Oriented Programming, as I'm creating my own class for practical use. Currently, I am working on a class that will save or update a post every time it's instantiated. While the code below successfully creates a p ...

phpwordpressclassoop

Issue with jQuery scrolling functionality

Can someone explain why the site is loading in this specific part of the page? My guess is that it has something to do with jQuery. You can view the live website here: Instead of loading in the home section, the site is loading in the portfolio section. I ...

jqueryhtmlcss

Delightful Popup for Successful Woocommerce Additions

I have created a plugin that transforms Wordpress Woocommerce variations into a table layout. I made significant changes to the code and now I'm attempting to integrate Sweet Alerts 2 in place of the current alerts displayed when a user adds a product ...

javascriptjqueryajaxwordpresssweetalert

Expanding an element to cover all columns in a grid with automatically generated columns

I am working on a CSS grid layout with automatic columns and 2 rows. All elements are normally placed in the first row except for one special element that should span both rows while filling all available column space. My current code looks like this: ...

csscss-grid

Create a dynamic onClick event script and integrate it into Google Optimize

I need to incorporate a button element into my website using Google Optimize for an experiment. This button needs to trigger a specific script depending on the variation of the experiment. I have attempted two different methods: <button id="my-button" ...

javascripthtmldynamic-htmldynamic-script-loadinggoogle-optimize

Employ CSS to target the initial and final items within sets of identical elements

I created the following CSS styles: div { width: 300px; text-align: center; } p:not(.vrt) { text-align: left; } p.vrt { writing-mode: vertical-rl; display: inline-block; } div :nth-child(1 of p.vrt) { margin-left: 0; } div :nth-last-child(1 of ...

cssselection

An exciting tutorial on creating a animated dropdown using vueJS

I've set up a navigation menu with mouseover and mouse leave events to toggle a dropdown by changing a boolean value. Now, I'm trying to apply different animations to the list items in the dropdown compared to the surrounding box, but I'm f ...

cssvue.jstransition

Encountering a static build error with Wordpress GraphQL on Nextjs 13 beta deployed on Verc

I encountered an issue while creating static pages in Next JS using GraphQL requests with fetch. I created a page where I display a list with over 100 items and implemented static dynamic pages for each item using the generateStaticParams function provided ...

wordpressnext.jsgraphqlvercelwp-graphql

Conceal certain profile details on the Profile Page using the Lamba Theme

Seeking assistance from the community here. Currently using Moodle version 3.8+, paired with the Lambda theme, I have a query to address. Specifically on the Profile Page, I aim to eliminate certain elements. Typically, I would apply additional CSS with ...

cssmoodleprofile

Looking to retrieve HTML elements based on their inner text with queryselectors?

I am looking to extract all the HTML divs that contain specific HTML elements with innerText = ' * ' and save them in an array using Typescript. If I come across a span element with the innerText= ' * ', I want to add the parent div to ...

javascripthtmltypescriptqueryselector

How can I ensure my md-sidenav takes up the entire height when using ui-router?

Currently, I am utilizing the most recent version of Angular Material (1.0.0) library and I am attempting to ensure that my <md-sidebar> panel occupies the entire height of the available space on the webpage. While it functions correctly on a regul ...

htmlcssangularjsangular-material

Display the menu and submenus by making a request with $.get()

My menu with submenu is generated in JSON format, but I am facing issues displaying it on an HTML page using the provided code. Can someone please assist me in identifying what mistakes I might be making? let HandleClass = function() { ...

javascriptjqueryhtmljsonajax