Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Am trying to decide the best way to markup this design I'm working on. The quick outline of it is here:
It's a news article.. so I'd like to use the article tag and then some aside information. My issue is the design layout of it.. the h1 of the article spans over the 2 columns.. I want to use article tag for the h1, publish information and main body.. but in order to do that and fit the design I'd have to include the rightcolumn inside the article which is not great semantically. The information in the right column is common to lots of pages so shouldn't be part of an aside.
So at the moment I'm thinking along the lines of
<h1>News article title</h1>
<div class="leftcol">
<article>
<p>publish information</p>
<p>Main body in general markup</p>
</article>
<aside>
Related content here
</aside>
</div> <!-- end left col -->
<div class="rightcolumn">
Contact form code, followed by customer quote stuff
</div> <!-- end right column -->
I'm concerned about leaving the H1 outside the article tag - Seems like it kind of defeats the purpose, but I'm not sure what other way would work. Possible repeat of the h1 tag inside the article as well but that's definitely not ideal..
What is the most semantically correct way of marking this design up?
*ED
Can't do opinion based questions.. but in case anyone else is considering the same thing (and not allowed to ask it) I went with the following:
<div class="page-heading">News article title</div>
<div class="leftcol">
<article>
<h1>News article title</h1>
<p>publish information</p>
<p>Main body in general markup</p>
</article>
<aside>
Related content here
</aside>
</div> <!-- end left col -->
<div class="rightcolumn">
Contact form code, followed by customer quote stuff
</div> <!-- end right column -->
Decided to keep the h1 within the article (and hide it with css) and then just use a div outside the columns with the same content to hold true to the design.
Related
My question is probably based on a bad design. However, I can't change that and need to work with it. This is the visual draft I'm talking about, it's just a part of a full website:
As you can see there's a title of an article with a background image, then a breadcrumb toolbar and finally, the articles content. Now, usually, if there wouldn't be the breadcrumb toolbar you could simply wrap it into an <article>. But the breadcrumb divides the article in a "pre" article and a main article part. The only "clean" HTML5 way would be to wrap the article including the header with background image into an <article> and position the breadcrumb into the target visual position. However, I'm classifying this as "hack" and I'm searching a better way.
What would be the preferred markup for this scenario?
There won't be any perfect the solution for the current requirement.
As pointed out by comments to the previous answer, the nav is not related to the article.
Also, WCAG instructs that :
1.3.2 Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A)
EDIT : If changing the order of the element can preserve a meaningful sequence (G57), when the elements does not match visually the DOM order (see C27) the visual focus indicator of the screen reader will not match the standard reading order which will result in bad UX for people with low vision using a screenreader.
So it's impossible to try a CSS visual hack to invert the order between the elements visually without breaking another rule.
You may think of a third technique :
set aria-hidden on the visible title,
use aria-labelledby on the article tag to point to the h1 outside the article element :
For instance:
<header>
<h1 aria-hidden="true" id="title">Your title</h1>
<nav><!-- nav here --></nav>
</header>
<article aria-labelledby="title">
// article here
</article>
Another way to do is to duplicate the title element, one visible, one for assistive technology
<header>
<div aria-hidden="true">Your title</div>
<nav><!-- nav here --></nav>
</header>
<article>
<h1 class="sr-only">Your title</h1>
// article here
</article>
It could be something like this -
<article>
<header>
//APPLY BACKGROUND IMAGE
<h1>YOUR TITLE</h1>
</header>
<nav>
//USE BREADCRUMBS HERE
</nav>
<section>
//USE THIS FOR CONTENT
</section>
</article>
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
I love these following portfolios:
http://www.ericryananderson.com/
http://jeremycowart.com/portfolio/featured/
I wanted to create a website with the same concept of a collage of photos connecting together. But I am not sure the best way to approach this, would I just use box-sizing and floats? Or would bootstrap make this project easier? Thank you for your help!
Edit: I was told in order to do this, photoshop would be the best method, but I would like to complete this with just programming if possible.
I don't think it's possible to achieve this with purely CSS, correct me if I am wrong.
For that kind of thing I usually use isotope (http://isotope.metafizzy.co/), it has a setting called "masonry" that absolutely positions the images like that. The http://jeremycowart.com/ one you linked up there also uses isotope.
If you wanted to go strictly with CSS all I could think of would be setting four columns and then stacking the images inside. Kind of like this https://jsfiddle.net/x74rbraa/
<div class="container">
<div class="col">
<div class="box box--portrait">
</div>
<div class="box box--portrait">
</div>
<div class="box box--landscape">
</div>
</div>
<div class="col">
<div class="box box--landscape">
</div>
<div class="box box--portrait">
</div>
<div class="box box--landscape">
</div>
</div>
That wouldn't be very mobile friendly, though. And you'd have to do the sorting/ordering in the code that generates your columns. For example iterate over all entries you want to show, save them in an array, split the array in multiple smaller arrays and put their contents in one col each.
This question already has answers here:
What is the difference between <section> and <div>?
(12 answers)
Closed 6 years ago.
Please Give me details what is difference between bellow code
<section >
Some text goes here...
</section>
and same write like inside div
<div class="section">
Some text goes here...
</div>
<section> marks up a section, <div> marks up a generic block with
no associated semantics.
See it here on SO
this is possibly a duplicate of What is the difference between <section> and <div>?
but to answer your question section tag is a html5 semantic tag that represents a generic section of a document or application
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I would like to know the best way of using HTML5 and div tags together. I have posted my html below.
I am using the article tag then I have sections which I am sure are correct, but I am using grids as well, so where should I put the grid div?
Is my method the best way of doing it?
<article>
<div class="grid-wrapper">
<section>
<div class="grid-4-col">
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
</div>
</section>
<section>
<div class="grid-4-col">
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
</div>
</section>
<section>
<div class="grid-4-col">
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
</div>
</section>
<section>
<div class="grid-4-col grid-last">
<h3>Chicago</h3>
<h5 hidden>City in Illinois</h5>
<img src="chicago.jpg" alt="Chicago, the third most populous city in the United States">
<ul>
<li>234 square miles</li>
<li>2.715 million residents</li>
</ul>
</div>
</section>
</div>
</article>
According to HTML5Doctor, the way you've gone about it is fine. You're effectively using the divs as wrappers and that's permitted.
Source: http://html5doctor.com/you-can-still-use-div/
Since you are using a grid system, and a section element sections off content, you want the section to be inside the grid, which is defined by the div. So put the section element inside the div. Otherwise, your grid is relative to the section and not the whole page and grid system.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I've been using an html5 doctype for a while now but haven't really been using many more tags than header, nav and footer. I would like to understand when to implement the article and aside tags and if in my example I am implementing them correctly.
The entire reason that I ask this question is because there seems to be a lot of controversy on how exactly they should be used and whether certain tags like the aside tag can be nested within the article tag. I'm just looking for clarity here.
Here is my example. I have 2 questions:
Is there anything about this layout that is incorrect?
Can I style aside these new tags or do I have to apply styles to the elements within the new html5 tags?
<header>
</header>
<main>
<article id="article">
<div id="full">
<aside id="page-left">
<div>
<h1>title</h1>
<p>content</p>
</div>
</aside>
<aside id="page-right">
<div>
<h2>title</h2>
<p>content</p>
</div>
</aside>
</div>
</article>
</main>
<footer>
</footer>
EDIT:
What I am after is simply a wrapper div that was changed to an article tag that will contain 2 inline elements. The left element will contain the actual article and the right side will contain testimonials.
What would the correct tags be in this case?
From W3C:
--
The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. Each article should be identified, typically by including a heading (h1-h6 element) as a child of the article element.
A general rule is that the article element is appropriate only if the element's contents would be listed explicitly in the document's outline.
--
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
--
So I would not put the article content inside an aside tag.
more here
One would normally put ads and other stuff that has nothing - or less - to do with the article, in aside tags. I can't tell you if you're using them properly since only you can decide whats necessary and what's not. But I guess you're using them fine. just make sure you don't put important stuff in them because google and other search engines won't show anything in aside tags in your websites description
EDIT: this is how - I think - your example should look:
</header>
<main>
<div id="full">
<article id="page-left">
<div>
<h1>title</h1>
<p>content</p>
</div>
</article>
<aside id="page-right">
<div>
<h2>title</h2>
<p>content</p>
</div>
</aside>
</div>
</main>
<footer>
</footer>