Member Avatar for Fiorentino01^

Hi I am studying html5 and have a hard time understanding exactly how those tags function.Maybe I am used to the old div tags and cannot figure out what is going on. For example I look at a page made with html5 and css3.In the page there are 3 article section one on top of the other, 2 on the side and 3 more on the bottom.Looking at the source code all the tags are articles, no class or id to identify them and no positioning whatsoever(I cannot see any anyway).How do they do it? Thank you for your help.

Edited by pritaeas because: Moved to HTML.
  • 2 Contributors
  • 2 Replies
  • 308 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Fiorentino01^

Dani AI

Generated

Short primer and practical tips that follow on ’s semantic explanation and ’s observation about old presentational attributes being replaced by CSS.

Semantic vs layout — the tags (article, section, aside, header, footer, nav, etc.) exist to give meaning and accessible landmarks, not to position content on screen. Using them makes the document easier for screen readers and search engines to understand while keeping markup clearer. (web.dev)

Why many articles can appear in columns with no classes or inline positioning: HTML provides the structure; CSS controls layout. Common techniques site authors use are:

  • tag selectors and structural pseudo-classes (e.g. element, :nth-child()) to style repeated elements without unique classes; (developer.mozilla.org)
  • classic methods (floats, inline-block) or modern layout systems (Flexbox, Grid) to create columns/rows; (developer.mozilla.org)

A minimal Grid pattern (example) — place articles into columns by styling the parent container:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Troubleshooting checklist (use browser DevTools to confirm what the page actually uses): inspect the parent wrapper for display rules (grid/flex), look for float/position rules, check for :nth-child() or type selectors, and scan loaded CSS/Framework files that may add layout rules. Historically IE8 and older needed an HTML5 shiv to allow styling of new elements; that’s largely unnecessary today but still documented. (web.dev)

Practical note: semantic elements improve accessibility and code clarity, but classes/IDs are still useful for specific styling or JS hooks when precise control is required.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

The main purpose of these new elements is to provide the element itself with meaning (semantics). For example, prior to HTML5, if you wanted to create a navigation menu or footer, you would create divs as follows:

<div id="navmenu"></div>....<div id="footer"></div>

With HTML5, you can use newer elements so that user agents (browsers/spiders) can have a better understanding of the purpose of the content within the element. if a spider comes accross a <footer> element, it will have a better understanding of its purpose.

With regard to class or ids, you may not need them because you can select these elements by type in your stylesheet. For example..

section { ... }
aside { ... }

You should note that HTML5 elements are not supported accross all browsers that are currently in use. For older browsers, specifically IE, you will need to include a html5shiv so that you can select these elements in your style sheet. browers, by default, will ignore elements that they are not familiar with. However, most browsers, except for IE, will allowing styling of unfamiliar elements. the html5shiv addresses this issue.

Edited by JorgeM
Member Avatar for Fiorentino01^

Hi thank you for your help.I am starting to understand how it works. I was able to create a page using the new tags.I see that a lot of the html4 tags are now obsolete like hspace and vspace, also cellspacing and cellpadding and that you are supposed to position the elements setting margins and paddings.Actually I think the main diference is that with the div tags we were using coords like top so many px and left or right so many This makes it cleaner and easier interesting,thanks again.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.