Semantic tags for citation and author

Asked

Viewed 213 times

4

I’m making a Landing page as Challenge of Frontend Mentor and would like to know which are the best tags semantics to make this block below. I used the <blockquote> for the quote, but I don’t know which tag to use for the phrase author.

Resultado

html html5 tags semantics

  • An important question that was not commented: what does this block mean? Would it be customer testimonials? Comments on a post? Reply to a questionnaire?

  • As it is something fictitious I can not say exactly what it would be, in my interpretation I imagined that they were only reports of people working in imaginary companies that use the service of Fylo. As well as those websites that post the reports of people who made a review on Facebook.

  • 1

    So I disagree with the use of <blockquote>, because you wouldn’t be quoting from an outside source. You’re just presenting testimonials and that’s not a quote.

  • @Alexandre Did any of the answers solve your question? Do you think you can accept one of them? Check out the [tour] how to do this, if you haven’t already done so. You would help the community by identifying what was the best solution for you. You can accept only one of them. But you can vote on any question or answer you find useful on the entire site

2 answers

2


I’m basing myself on in that reply in the OS.

<blockquote>"Money is the real cause of poverty,"
    <footer>
        <cite id="baseref">The Ragged-Trousered Philanthropists, page 89.</cite>
    </footer>
</blockquote>

This is in accordance with the example of the specification. But there’s nothing specific that’s only right.

And that used to be done like this, which I thought was particularly beautiful:

<figure>
    <blockquote>
        "This is what I think"
    </blockquote>
    <footer>
        — <cite class="author">My Name</cite>, <cite class="company">My Company</cite>
    </footer>
</figure>

I put in the Github for future reference.

There’s another answer that used this form:

<blockquote cite="http://a.uri.com/">
    <p>This is a really insightful sentence.</p>
    <cite>Darko Z</cite>
</blockquote>

And she cites that in HTML5 the quote should not use the author’s name, so it’s a little confusing.

To MDN which is kind of an "official" documentation that people use gives this example:

<blockquote>
    <p>It was a bright cold day in April, and the clocks were striking thirteen.</p>
    <footer>
        First sentence in <cite><a href="http://www.george-orwell.org/1984/0.html"><i>Nineteen Eighty-Four</i></a></cite> by George Orwell (Part 1, Chapter 1).
    </footer>
</blockquote>

But I’ve seen things wrong at MDN.

An important part of the specific:

User Agents may allow users to follow such Citation links, but they are primarily intended for private use (e.g: by server-side scripts Collecting statistics about a site’s edits), not for Readers

Are you saying that the use of this is not for the reader but for something internal, private, for the use of tools.

Its use seems more interesting for indexers who can use it as they wish, it does not have an established pattern.

Do you have any other questions answers, but I didn’t find them so grounded.

I tried and did not find a right way to do, has to do with taste, especially if the quote does not involve a scientific aspect, but it is good to use the cite one way or another to give semantics and at least the searchers index properly. It will probably help in accessibility, and some tools may have their work better.

Obviously the look is something you’ll get with CSS and other forms of HTML that has nothing to do with the quote itself.

  • Fantastic already brought me a very big light, I noticed that there is still a certain consensus and taking a look at other sources I realized this same problem, but these your examples seemed to me very good, I will see what best fits my intention. Thank you very much.

1

In a blockquote you can tag footer to mention its origin, example:

<blockquote cite="http://www.imdb.com/character/ch0000672/quotes">
<p>You know the golden rule, don’t you boy? Those who have the gold make the rules.</p>
<footer>— <a href="http://www.imdb.com/character/ch0000672/quotes">Crazy hunch-backed old guy in Aladdin</a></footer>
</blockquote>

  • Interesting, it seems to me that has more to do with what I need. Thank you very much

Browser other questions tagged html html5 tags semantics

You are not signed in. Login or sign up in order to post.