So i just wanted to create a blovkquote like THIS one.
The best markup i could come up with was the following:
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <footer> <p>Testing Lala,</p> <p>Lorem ipsum</p> </footer> </blockquote>
i believe cite can no longer be used to just quote somebodys name , i read the specs on cite , but what about the name and designation inside the footer , is p too generic a tag to use here or could some other tag be used ?
HTML5 clarifies
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite for the easiest to grok explanation.
This would be a correct usage:
<blockquote> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Courtesy of <cite>Joe Blow of Big Winds, D.C.</cite> </p> <blockquote>
The cite attribute is a different animal.
cheers,
gary
Thanks gary
The cite attribute is a different animal.
Haha , i know , there are alot of contradictory view on how to use it , but thanks. i think HTML5 redefines its usage
Thanks gary , what about my usage of footer ? , i think that should be fine right ?
Technically, yes. I suppose
I am not all happy with the new html5 elements. In particular because they reset the Hx hierarchy. If you use these elements, e.g. header, section, main, etc. each has an h1 as its top heading element. Again going back to assistive technologies, all sense of the document's outline structure is lost. If you're visually impaired, trying to walk the outline to find your place, well you're just screwed.
Again, view in a pure text browser; see how much sense the headings make when most if not all headings are h1.
cheers,
gary
Thanks gary
Thank you gary. I had the same taughts as what you mentioned. i have't throughly read the docs but what i beleive is every section , header , main etc must have a heading ... it need not be an h1 though ... maybe h2 for each section. i beleive in the "one H1" per document rule.
Unfortunately,
You will need to override the Hx style rules and ignore W3C's specs on article, aside, nav, and section in order to maintain the proper hierarchy of heading elements.
Here are the rules in Firefox to graphically implement the STUPID HTML5 specifications.
h1 { display: block; font-size: 2em; font-weight: bold; margin-block-start: .67em; margin-block-end: .67em; } h2, :-moz-any(article, aside, nav, section) h1 { display: block; font-size: 1.5em; font-weight: bold; margin-block-start: .83em; margin-block-end: .83em; } h3, :-moz-any(article, aside, nav, section) :-moz-any(article, aside, nav, section) h1 { display: block; font-size: 1.17em; font-weight: bold; margin-block-start: 1em; margin-block-end: 1em; } h4, :-moz-any(article, aside, nav, section) :-moz-any(article, aside, nav, section) :-moz-any(article, aside, nav, section) h1 { display: block; font-size: 1.00em; font-weight: bold; margin-block-start: 1.33em; margin-block-end: 1.33em; } h5, :-moz-any(article, aside, nav, section) :-moz-any(article, aside, nav, section) :-moz-any(article, aside, nav, section) :-moz-any(article, aside, nav, section) h1 { display: block; font-size: 0.83em; font-weight: bold; margin-block-start: 1.67em; margin-block-end: 1.67em; } h6, :-moz-any(article, aside, nav, section) :-moz-any(article, aside, nav, section) :-moz-any(article, aside, nav, section) :-moz-any(article, aside, nav, section) :-moz-any(article, aside, nav, section) h1 { display: block; font-size: 0.67em; font-weight: bold; margin-block-start: 2.33em; margin-block-end: 2.33em; }
gary
Wow !!
Wow ! thats look quite ugly and unnecessary . Thanks for the heads up.