I'm currently building a website and I have a questions about copying and pasting HTML to duplicate elements

Question

Copying and pasting the same HTML and the same CSS gets annoying after awhile. Is there anyway I can multiply and HTML element like a <div> and keep it in the same alignment as the other elements but place it under it the previous copied HTML <div>?

Could you do this with JavaScript?

Answer 1

Ideally as with any code you shouldt really be repeating yourself too much as it gets harder to maintain...also you should be repeating css..that suggests bad structuring..try and think of a way to achieve the same result with minimal code, are you using the most appropriate html tags?.....what sort of content and you creating...if for example it's something like a shop or page listing items from a database your code should only need one section code/css for how each item is displayed and your javascript/phop or whatever you're using to list your content should loop through and repeat your code naturally.

If you can explain what you want to present I could maybe advise better.

Answer 2

You only really need to use divs if no other relevant tag is available, there are other tags like <section><article><h1>etc then you would just create one section of css like;
section {
display:block;
border:1px solid;
}

This will style all section tags

If you want to apply styles to all divs you could wrap them all in another div and give that a class like
<div class="myClass">
<div>div 1 content </div>
<div>div 2 content </div>
</div>

then add your styles etc

.myClass div{
//your styles here
}

That will apply that css to all the divs inside the one you created that has that class name.

That's one out of a few ways to style multiple elements without repeating your car.

Hope that helps.

Answer 3

You're welcome, always use the most appropriate tag, try to minimise additional tags for sake of ease, and try to make your code as reusable as possible..so if lots of your elements share the same styling maybe create a style and apply it to all rather than new styles for each. Also don't forget elements can have multiple classes class="class1 class2"

Answer 4

Right now I'm creating a simple small website that showcases all the legends and lore of a state here in the US.

For each legend I've created a set of <div>'s. One for the title and one for the caption. I also integrate a picture that includes a link to content in-between these two <div>'s and then creating a new set of <div>'s for the next legend.

Each new div set, means new class's for each div since I have to center, color and size them. For each new set, I have to copy and paste the same CSS from the previous legends created. This is a bit of a process and I'm trying to speed it up.

I wish I could create 4 or more sections of div's at once with all the same CSS not needing to be copied over.

Answer 5

That definitely helps. I think I took the wrong approach to my layout a little. I pretty much said screw article, sections and footers, I'm going to div everything and place them with CSS.... I'm such a newb ha!

Thank you for sharing some of your expertise!!