What is the difference between a section and a div section?
Are you referring to the blocks or the tags?
Both.
I don’t know which block to use, and I don’t know the difference between section and div section tags.
Sorry, I haven’t learned HTML and CSS properly.
Blocks:
- Information on what a Cwicly Section Block is and how to use it
- A Div block is just a plain HTML container which you can tweak to your needs. It’s the base of every website. More info
Tags:
-
Difference between
<section>
and<div>
-
Personal recommendation regarding the
section
tag (which might not be suitable for beginners)
In case something is unclear, just let me know and I will go into more detail, especially in relaition to Cwicly’s use cases.
Let me know if you have any recommendations for websites you think are correctly marked up.
I think the best idea would focus on sites that teach you the actual topic. It is crucial for them to have it for obvious reasons.
A small downside might be that they are mainly blog sites. So you might missing things.
You could check the Kinsta site, I think that covers almost every possible use case, and it has a beautiful design.
This is what you call perfect HTML.
They also focus on accessibility and it’s WP based I think, so that might be also a bonus.
I would also recommend checking some technical references to learn about semantic HTML tags:
Take it a bit at a time, learning as you go. Don’t have to learn every single one of them all at once.
I would also recommend using DevTools (inspector) in your browser on sites you normally browse. Get familiar with how big companies with large teams of developers put things together. Great to learn different techniques.
To your original question, the Cwicly Section block is a composite element made up of two divs: A wrapper, and an inner container div. It’s a quirky element, since some settings apply to the wrapper, and others to the inner container.
For what it’s worth, I do not use it. It’s meant to help, but once you get more comfortable building sites, you may realize you don’t need it.
I’ve created a header, footer, and page template…what could possibly go wrong with this kind of markup?
Nothing wrong with the general setup @Takeru
You could change the HTML tag of the header template part block to <header>
(the same thing you did with the footer, I guess), but don’t forget to remove it from your inner div then.
Make sure you use the <article>
tag in a correct way.
@Marius Thank you!
I can’t change the tags in the header of the template parts, is this using WordPress?
I have not done anything to the footer.
@Marius Thanks!
I was not aware of that setting.
I was trying to set up everything within Cwicly, but I should have learned to set up FSE in WordPress itself.
Great!
That’s how it should be
Keep in mind to remove the <header>
tag from your inner Cwicly div (id="div-c166a07"
).
There is nothing wrong with that as well.
It’s totally up to you, feel free to handle everything with Cwicly blocks only.
On the other side, using template parts, you have a more modular approach which makes life a lot of easier.
The most important part is to understand your possibilities and then choose the way you feel most comfortable or you think is most efficient for you.
I removed that tag.
I am getting better at using it every day through trial and error, but there are still many things I don’t understand.
The members of the Cwicly community, including you, have been very helpful!
Thanks for this. I wasn’t aware this was possible.