Streaming live at 10am (PST)

Confused as to which is the Best HTML Formatting?


#1

Confused as to which is the Best HTML Formatting?
1. I have created a “Class” with padding on all sides which centers the image.
2. I’ve noticed I can apply the class to a: “Section”, “Container” or “Image” and it still enters the image but which is the “Correct” element to apply the “Class” too. a “Section”, “Container” or “Image”?

For e.g. There seems to be 3 ways to do this and I am wanting to know “Which is the best HTML formatting?”

  • I can create (Sectionr) and apply a “Class” to it, then nest the image in the Section

or

  • I can create (Section > Container) and apply a “Class” to the “Container”, then nest the image in the Container

or

  • I can create (Section > Container > Image) and apply a “Class” to the “Image”, then nest the image in the Container

#2

Are you confused about the best strategy for nesting the different elements or just which HTML tag to give them?

For information about the HTML tags and how to use them I'd look at http://www.w3schools.com/html/html5_new_elements.asp.

As for the nesting, really there isn't a correct or incorrect answer – it depends on the project, use case and to some extent personal preference.


#3

Trying to explain this but obviously I'm not explaining it correctly. :slightly_smiling:
So if I add (nest) an image in a Section, the image will stretch to fill the full width of the page. I don't want this. I want the image to stay 60 px. from the left and right sides of the page.

So I created a "Class" with padding of 60 px. on all four sides. This makes my image stay 60 px. from the left and right sides of the page.

So I noticed through trial and error, that I can:

1. Adding a "Class" to a Section
If I add this "Class" to a "Section" and then nest the image inside the "Section", the image will stay 60 px. away from the page edge.

2. Adding a "Class" to a Container
If I add this "Class" to a "Container" inside the Section and then nest the image inside the "Container" the image will stay 60 px. away from the page edge.

3. Adding a "Class" to an Image
If I add this "Class" to an "Image" and then nest the image inside the "Section" and use no "Container" the image will stay 60 px. away from the page edge.

So all of the above scenarios allow my image to stay 60 px. away from the page edge.

Question: I am wondering of the 3 ways above, should I apply the "Class" to the: Section, Container, or Image? I want to follow the proper "web" standards method to do this. I hope this explains it better.


#4

Sections and containers are both just HTML divs. Sections and containers are terms Webflow has assigned to the elements and they have some pre-existing CSS attached (width, for example on the container). Both have the standard HTML5 "div" tag assigned by default and neither has a pre-existing HTML5 Tag of "section" assigned.

If you want a div to a specific HTML tag then you can assign that under settings.

The three methods you mentioned are all acceptable to use. I personally don't usually apply much CSS to images but to the div I place it in. Not to say I haven't if it makes the most sense for the project. When it comes to nesting, you want items nested enough so that you can accomplish more of a variety of looks and effects but not so many that the content is deeply buried or the structure cumbersome.

For example, some designers I've worked with create a div inside the Body and place all other content inside. They do this so they can easily establish consistent margins or padding...or perhaps to accomplish other effects. I've used that approach but lately I've been working using Sections and creating a class "base-section" and applying to every section – I've switched simply because for what I've been working on it made sense. I want some sections to expand the full width and other sections I want to be padded on the right and left.

Hope this helps. :grinning:


#5

Just the answer I needed. Thanks design. :slightly_smiling:


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.