Is this blockquote written correctly?

HTML & CSS
1

Would I change anything in how I wrote it?

A lot of them I’m seeing shown are using both margin and padding.

blockquote {
  position: relative;
  width: 400px;
  margin: 8px 0 0 14px;
}

blockquote p {
  display: inline;
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.45;
  color: #383838;
  text-decoration: none;
}

blockquote cite {
  color: #999999;
  font-size: 14px;
  display: block;
  margin-top: 5px;
}

<div class="outer">
  <div class="tcell">
    <div class="container ">
      <div class="container-top  ">
        <a href="" target="_blank">
          <div class="header" title="New Video">
            <blockquote>
              <p> <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>
              <cite> - Mehmet Murat ildan</cite>
            </blockquote>
            <svg class="play" width="100%" height="100%" viewBox="0 0 68 48">
              <title>New Video</title>
              <path class="front" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path>
              <path class="middle" d="M 45,24 27,14 27,34z"></path>
            </svg>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>
2

define ‘correctly’.

There’s not, to my knowledge, any global standard for the styling of a blockquote.

2 Likes
3

Have you tried validating it?

4

I’m referring to the css.

CSS has no errors found.

It could still be written incorrectly though.

5

Be that as it may, the <cite> tag is intended to be used for the title of the work from which the quote comes, not the author.

6

Like this then?

blockquote {
  position: relative;
  width: 400px;
  margin: 8px 0 0 14px;
}

blockquote p {
  display: inline;
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.45;
  color: #383838;
  text-decoration: none;
}

blockquote span {
  color: #999999;
  font-size: 14px;
  display: block;
  margin-top: 5px;
  font-style: italic;
}

<blockquote>
  <p> <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>
  <span> - Mehmet Murat ildan</span>
</blockquote>
7

You don’t need the <q></q> tags, which are intended for short, inline quotes.

I would also use <p></p>, rather than <span></span> for the author’s name.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

1 Like
8

Span seems to work better for some reason.

Span

 blockquote span{
}

<span> - Mehmet Murat ildan</span>

P

.blockquote p.an {
}

 <p class="an">- Mehmet Murat ildan</p>
9

That would be because for some reason you have this:

blockquote p {
  display: inline;

Why? What are you trying to achieve?

10

All the examples I have seen were using display inline.

11

1st Way

This way works.

Is that better?


blockquote {
  position: relative;
  width: 400px;
  margin: 8px 0 0 14px;
}

blockquote p {
  display: inline;
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.45;
  color: #383838;
  text-decoration: none;
}

p.an {
  color: #999999;
  font-size: 14px;
  margin-left: 14px;
  margin-top: 5px;
  font-style: italic;
}

<blockquote>
  <p> <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>
</blockquote>
<p class="an">- Mehmet Murat ildan</p>

2nd. Way

What about setting it up like this?

https://maedi.com/code/semantic-blockquote-html5/

blockquote {
  position: relative;
  width: 400px;
  margin: 8px 0 0 14px;
}

blockquote p {
  display: inline;
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.45;
  color: #383838;
  text-decoration: none;
}

figcaption {
  color: #999999;
  font-size: 14px;
  margin-left: 14px;
  margin-top: 5px;
  font-style: italic;
}


<figure>
  <blockquote>
    <p> <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>
  </blockquote>
  <figcaption>- Mehmet Murat ildan</figcaption>
</figure>

3rd Way

What if I used a footer instead?

This way seems to work good.
https://jsfiddle.net/1x45yhcq/4/


blockquote {
  position: relative;
  width: 400px;
  margin: 8px 0 0 14px;
}

blockquote p {
  display: inline;
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.45;
  color: #383838;
  text-decoration: none;
}

blockquote footer {
  color: #999999;
  font-size: 14px;
  margin-top: 5px;
  font-style: italic;
}

<blockquote>
  <p> <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>
  <footer>- Mehmet Murat ildan</footer>
</blockquote>
13

How you should structure it, and how best to style it, depends to some extent on the context in which it’s placed. Without that, then yes - you can go on posting different ways to do it, but as we don’t know what you’re trying to achieve, it’s impossible to comment, beyond the obvious.

As I mentioned above, you are using <q></q> incorrectly in all your examples.

You are also using <footer> incorrectly in your last example, as I explained in your other thread.

Edit: I notice that the MDN blockquote example users a footer, but that seems incorrect to me.

The HTML <footer> element represents a footer for its nearest sectioning content or sectioning root element.

<blockquote> is not among the elements listed as “sectioning content”, so therefore it appears to me the use of <footer> here is incorrect.

If you are unfamiliar with an element, I suggest you always check with the MDN HTML reference for guidance on correct usage, rather than simply guessing.

2 Likes
14

There are lots of examples from the specs of how to do this properly.

https://www.w3.org/TR/2013/WD-html51-20131029/grouping-content.html#the-blockquote-element

However, none are straight forward which is why everyone gets it wrong :slight_smile:

2 Likes
15

How would you write this differently if this is not good.

blockquote {
  position: relative;
  width: 400px;
  margin: 8px 0 0 14px;
}

blockquote p.quote {
  display: inline;
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.45;
  color: #383838;
  text-decoration: none;
}

blockquote p.author {
  color: #999999;
  font-size: 14px;
  margin-top: 5px;
  font-style: italic;
}

<blockquote>
  <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><br>
  <p class="author">- Mehmet Murat ildan</p>
</blockquote>
16

Remove the <br> as @TechnoBear has pointed out.

17

Why is this one shown using a footer inside a blockquote?

If I just wanted to add the author inside it, which creates a line break.

Is it being used differently here?


<blockquote cite="https://www.huxley.net/bnw/four.html">
    <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
    <footer>—Aldous Huxley, <cite>Brave New World</cite></footer>
</blockquote>
18

Can you or someone find for me where it says <br> tags can’t be used inside a blockquote?

Instead of a <br> tag I was using a <footer>.

But then I was told I shouldn’t use that.

19

We are saying that is an incorrect use of the <br> tag. That was first explained to you over two years ago. When using a br tag, do you use <br> or <br/> and why? and is there a difference? - #4 by PaulOB

There is a link in that post to

2 Likes
20

For some reason after I removed the <br> tag it now seems as if there is already a line break there.

<blockquote>
  <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>
  <p class="author">- Mehmet Murat ildan</p>
</blockquote>
21

or I could just set it up like this instead and not bother with blockquotes.

.my-content {
  position: relative;
  width: 400px;
  margin: 8px 0 0 14px;
}

.quote {
  display: inline;
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.45;
  color: #383838;
  text-decoration: none;
}

.author {
  color: #999999;
  font-size: 14px;
  margin-top: 5px;
  font-style: italic;
}

<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>