Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Brendan Whiting
Front End Web Development Techdegree Graduate 84,735 Pointssrcset and sizes
I ran the html from this video through the html validator while trying to troubleshoot something, and it gave me an error that also applies to the original downloaded from the project files. "When the srcset attribute has any image candidate string with a width descriptor, the sizes attribute must also be present." Why does this code work even though there is this error?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Images</title>
<link rel="stylesheet" href="css/normalize.css" />
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css" />
<script src="js/picturefill.min.js" async></script>
</head>
<body>
<div class="wrapper">
<picture>
<source
media="(orientation: landscape)"
srcset="img/banner-large.jpg 2048w,
img/banner-medium.jpg 1400w,
img/banner-small.jpg 800w"
/>
<source
srcset="img/banner-square-large.jpg 1000w,
img/banner-square-medium.jpg 800w"
/>
<img
src="img/banner-medium.jpg"
alt="Photograph of Nick Pettit in front of trees."
class="banner-image"
/>
</picture>
<div class="content-block">
<div class="profile-description">
<div class="profile-image">
<img
srcset="img/photo-@2x.jpg 2x,
img/photo-@1x.jpg 1x"
src="img/photo-@1x.jpg"
alt="Photograph of a flower."
/>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere nec quam vitae aliquet. Etiam sodales feugiat gravida. Donec tincidunt facilisis arcu, ut sagittis eros iaculis a. Nam fringilla erat id lorem pellentesque ornare. Curabitur sed interdum tellus. Etiam imperdiet, dui id condimentum ullamcorper, lectus nibh venenatis lectus, id ullamcorper nibh nibh id dolor. Suspendisse tempor turpis vel commodo consequat. Phasellus at posuere velit. Sed vehicula lacinia mauris sit amet mollis. Etiam semper leo blandit massa molestie congue. Sed ac purus ipsum.</p>
<p>Integer dignissim ultrices lacus tincidunt aliquet. Cras maximus eleifend felis. Pellentesque in nulla condimentum, aliquet orci sed, gravida velit. Pellentesque mattis ex at magna consectetur porta. Aenean eget volutpat urna. Maecenas sed nisl sit amet tortor vulputate vulputate non nec elit. Mauris bibendum erat nec purus finibus, eget molestie dolor placerat. Pellentesque at massa et ligula sagittis gravida. Nunc libero dolor, luctus ac imperdiet ac, suscipit nec nibh. Ut non diam urna.</p>
<p>Cras blandit at urna sagittis consequat. Integer tristique mollis metus, at varius leo imperdiet vitae. Donec a porta tellus. Sed sit amet euismod urna. Vestibulum varius urna vitae odio eleifend, et consectetur felis congue. Sed vulputate mattis mauris, eget euismod ante condimentum nec. Integer augue ex, pharetra vitae rutrum a, tristique vitae mauris.</p>
</div>
</div>
</div>
</body>
</html>
3 Answers
Iain Simmons
Treehouse Moderator 32,305 PointsBecause that's the new standard and browsers will still be playing catch up, so often they are a little more forgiving of technically invalid HTML5.
Was it an error or a warning?
OLUBUKOLA OGUNSOLA
Full Stack JavaScript Techdegree Graduate 30,442 Pointsim currently having the same issues on this and my project was returned because of the validator error, what is the solution to this ?
Iain Simmons
Treehouse Moderator 32,305 PointsAdd the sizes attribute. It can be a little tricky to figure out what goes in there, but it's kind of like using media queries.
Here are some resources that might help:
Brendan Whiting
Front End Web Development Techdegree Graduate 84,735 PointsBrendan Whiting
Front End Web Development Techdegree Graduate 84,735 PointsAn error.
Iain Simmons
Treehouse Moderator 32,305 PointsIain Simmons
Treehouse Moderator 32,305 PointsYeah, like I said, browsers tend to be 'forgiving' of invalid HTML. Some more than others! Lots of popular code is often invalid HTML, like Facebook and Twitter widgets were in the early days...