Is this blockquote written correctly?

HTML & CSS
22

You could.

1 Like
23

You could, but as what you have is clearly a blockquote, why would you use the <q> tag incorrectly, rather than use the <blockquote> tag correctly? As always in HTML, you should use the correct tag(s) for your content.

1 Like
24

<q></q> tags are not allowed inside <p></p> tags?

<div class="my-content">
  <p class="quote"> <q>Never let society to turn you into a grain of sand on the
      beach. Be different, be individual. Refuse to look alike
      with others. Leave your herd, only then you will have a
      real name and till then your name will remain as the grain
      of sand.</q></p>
  <p class="author">- Mehmet Murat ildan</p>
</div>
25

Yes they are.

You have too much text for use within a q element so use the correct blockquote element instead.

I’d probably mark it up like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.my-quote {
	position: relative;
	max-width: 400px;
	margin: 8px 0 0 14px;
	font-family: Georgia, serif;
}
.quote {
	margin:0 0 1em;
	font-size: 1.125rem;
	font-style: italic;
	line-height: 1.45;
	color: #383838;
	text-decoration: none;
}
.author a {
	color: #999;
	font-size:.875rem;
	font-style: italic;
	text-decoration:none;
}
</style>
</head>

<body>
<blockquote class="my-quote">
  <p class="quote"> Never let society to turn you into a grain of sand on the
    beach. Be different, be individual. Refuse to look alike
    with others. Leave your herd, only then you will have a
    real name and till then your name will remain as the grain
    of sand.</p>
  <cite class="author"><a href="sourceofquote/">- Mehmet Murat ildan</a></cite>
</blockquote>
</body>
</html>

The specs shows similar and alternate ways of marking this up especially noting that the use of cite within blockquote was updated in the specs.

As usual there is not one right definitive answer but all must use valid techniques and semantic mark up. (Experts will always disagree especially when specs have been changed to reflect common usage.)

3 Likes
26

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.