6 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 12 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

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 ?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 37 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 12 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

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 Laughing out loud

Thanks gary , what about my usage of footer ? , i think that should be fine right ?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 37 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 12 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 37 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

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;
}
Did I mention STUPID? HTML structure is destroyed; screw the people who depend on structure to navigate the page.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 12 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Wow !!

Wow ! thats look quite ugly and unnecessary . Thanks for the heads up.