Kio estas Blockquote?

Se vi iam rigardis liston de HTML-elementoj, vi eble trovis vin demandante "kio estas blokokoto?" La blockquote elemento estas HTML-etiketo, kiu estas uzata por difini longajn citaĵojn. Jen la difino de ĉi tiu elemento laŭ la W3C-HTML5-specifaĵo:

La blokkoto-elemento reprezentas sekcion cititan de alia fonto.

Kiel Uzi Blockquote sur Viaj Retpaĝoj

Kiam vi skribas tekston en retpaĝaro kaj kreas la aranĝon de tiu paĝo, vi foje volas voki blokon de teksto kiel citaĵo.

Ĉi tio povus esti citaĵo de ie alia, kiel klienta atestaĵo, kiu akompanas kazan studon aŭ projektan sukceson. Ĉi tio ankaŭ povus esti traktado de dezajno kiu ripetas iun gravan tekston de la artikolo aŭ enhavo mem. En eldonejo, ĉi tio foje estas nomata tiro-citaĵo . En dezajno retejo, unu el la manieroj por atingi ĉi tion (kaj la maniero, kiun ni kovras en ĉi tiu artikolo) estas nomata "blockquote".

Do ni rigardu kiel vi uzus la blockquote etikedo por difini longajn citaĵojn, ekzemple ĉi tiu eltiraĵo de "The Jabberwocky" de Lewis Carroll:

"Dufoje brila kaj la maldikaj bukedoj
Fariĝis gaja kaj gimble en la vosto:
Ĉiuj mimsioj estis la borogoves,
Kaj la Momo rabas senpripense.

(de Lewis Carroll)

Ekzemplo de Uzado de la Blockquote Tag

La blockquote etikedo estas semantika etikedo, kiu rakontas al la retumilo aŭ uzanto, ke la enhavo estas longa citaĵo. Kiel tia, vi ne devus alŝovi tekston, kiu ne estas citaĵo ene de la blokokesto. Memoru, "citaĵo" ofte estas realaj vortoj, kiujn iu diris aŭ tekstis el ekstera fonto (kiel la teksto de Lewis Carroll en ĉi tiu artikolo), sed ? i #anka? povas esti la drawquote koncepto ke ni kovris antaŭe.

Kiam vi pensas pri tio, tiu sorto estas citaĵo de teksto, ĝi nur okazas de la sama artikolo, kiun la citaĵo mem aperas.

Plej multaj retumiloj aldonas iujn dentojn (ĉirkaŭ 5 spacojn) al ambaŭ flankoj de blokkoto por eviti ĝin el la ĉirkaŭa teksto. Kelkaj ekstreme malnovaj retumiloj eĉ povas repagi la cititan tekston en kursivon.

Memoru, ke ĉi tio estas simple la defaŭlta stilo de la blokokoto. Kun CSS, vi havas tutan kontrolon pri kiel via blokokoto montriĝos. Vi povas pliigi aŭ eĉ forigi la indenton, aldoni fonkolorojn aŭ pliigi tekston por pluvoki la citaĵon. Vi povas flosi tiun citaĵon al unu flanko de la paĝo kaj havi la alian tekston envolvante ĝin, kiu estas komune vida stilo uzata por pullokotoj en presitaj revuoj. Vi havas kontrolon pri la aspekto de la blockquote kun CSS, io ni diskutos iom pli baldaŭ. Nuntempe, ni daŭre rigardu kiel aldoni la citaĵon al via HTML-marko.

Por aldoni la protokolon al via teksto, simple ĉirkaŭigu la tekston, kiu estas citaĵo kun la sekva etikedo -

Ekzemple:


"Dufoje brila kaj la maldikaj bukedoj

Fariĝis gaja kaj gimble en la vosto:

Ĉiuj mimsioj estis la borogoves,

Kaj la Momo rabas senpripense.

Kiel vi povas vidi, vi simple aldonu la paron de blockquote-etikedoj ĉirkaŭ la enhavo de la citaĵo mem. En ĉi tiu ekzemplo, ni ankaŭ uzis iujn rompojn etikedojn (
) por aldoni ununurajn rompojn, kien taŭgas ene de la teksto. Ĉi tio estas ĉar ni amuzas tekston de poemo, kie tiuj specifaj rompoj estas gravaj. Se vi kreis atestan citaĵon de kliento, kaj la linioj ne bezonis rompi en specifaj partoj, vi ne volus aldoni ĉi tiujn rompojn etikedojn kaj permesi la retumilon mem envolvi kaj rompi laŭ neceseco laŭ la grandeco de la ekrano.

Ne Uzu Blockquote al Indent-Teksto

Dum multaj jaroj, homoj uzis la blockquote-tagon, se ili volis indenti tekston en sia retpaĝo, eĉ se tiu teksto ne estis ero. Ĉi tio estas malbona praktiko! Vi ne volas uzi la semantikon de blockkote nur por vidaj kialoj. Se vi bezonas indentigi vian tekston, vi devas uzi stilojn, ne la etikedojn de blokokoto (se ne, kurioze, kion vi provas indentiĝi estas citaĵo!). Provu meti ĉi tiun kodon en vian retpaĝon, se vi provas simple aldoni indenton:

Ĉi tio estos teksto, kiu estas indentita.

Poste vi celus tiun klason per CSS-stilo

.indented {
kompletigo: 0 10px;
}

Ĉi tio aldonas la 10 pikselojn de kompletigo al ĉiu flanko de la alineo.

Originala artikolo de Jennifer Krynin. Redaktita de Jeremy Girard la 5/8/17.