タグ<dt>・<article>・<dfn>・<abbr>・<figure>とは

➡スマートフォンはこちら

 Home

 Tags

Canape2020

<article>

article :〔雑誌や新聞の〕記事、論説、論文◆小説などのフィクションを含まない 、条項の意味

FAQ

「よくある質問FAQの語は英語のFrequently Asked Questionsの略語」 
< abbr title="Frequently Asked Questions"> FAQ</abbr>  <article>内のCODEはこの様になる


「article要素は、ドキュメント、ページ、アプリケーション、またはサイト内の自己完結した内容を表す。これは原則として、独立に配信または再使用可能なものである。例としては、フォーラムの投稿、雑誌や新聞の記事、ブログのエントリー、ユーザーが送信したコメント、インタラクティブなウィジェットやガジェット、その他コンテンツ内の独立した項目が挙げられる。」

独立した投稿として構文の<article><header><section><footer> 使用例


-- .article{border-style: ridge;}で囲んでみた --
<article>
<header>

Anchoring isn't for beginnersアンカーは初心者向けではありません

</header>

If you've ever chartered a 45ft catamaran, you know that mooring balls are your friends. They protect the coral and sea bottom from the constant abuse of frequently anchoring boats.

45フィートのカタマラン(双胴船)をチャーターしたことがあるなら、係留ボールがあなたの友達であることを知っています。 それらは、頻繁に停泊するボートの絶え間ない乱用からサンゴと海底を保護します。

...

<section>

Comments コメント

<article>
<footer>

Posted by: Peg Leg Patooty /投稿者：ペグレッグパトゥーティ

</footer>

Right! Mooring balls are for wusses! Pirates only use anchors! Arrrrr!

正しい！ 係留ボールはワス用です！ 海賊はアンカーのみを使用します！ Arrrrr！
</article>
<article>
<footer>

Posted by: Ariel

</footer>

Thank you for thinking of what's under the sea. Even Ursula would be thrilled.

海の下にあるものを考えてくれてありがとう。 ウルスラでさえわくわくするでしょう。
</article>
</section>
</article>
----------------------------
<dl>
What do we want?
Our data.
When do we want it?
Now.
Where is it?
We are not sure.
</dl>
-CODE- 
<article>
 　　　
<abbr title="Frequently Asked Questions">FAQ</abbr>
「よくある質問FAQの語は英語のFrequently Asked Questionsの略語
 <dl>
   <dt>What do we want?
 　  <dd>Our data.
   <dt>When do we want it?
     <dd>Now.
   <dt>Where is it?
     <dd>We are not sure.
 <dl>
</article>

63<dl><dfn><abbr><i>

<dfn>タグは、用語が使用されていることを示す際に使用します。 <dfn>〜</dfn>の中には用語を配置しますが、 その直近の親要素となる<p>・<dl>・<section> などの中には用語の定義内容を一緒に入れる必要があります。
<ABBR>とはAbbreviationの略で、このタグで囲まれた語句が略語であることを表します。
happiness
/'hæ p. nes/
n.
The state of being happy.
Good fortune; success. Oh happiness! It worked!
rejoice
/ri jois'/
v.intr. To be delighted oneself.
v.tr. To cause one to be delighted.
-CODE- 
<dl>
<dl>
 <dt><dfn>happiness</dfn></dt>
 <dd class="pronunciation">/'hæ p. nes/</dd>
 <dd class="part-of-speech"><i><abbr>n.</abbr></i></dd>
 <dd>The state of being happy.</dd>
 <dd>Good fortune; success. <q>Oh <b>happiness</b>! It worked!</q></dd>
 <dt><dfn>rejoice</dfn></dt>
 <dd class="pronunciation">/ri jois'/</dd>
 <dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> To be delighted oneself.</dd>
 <d><i class="part-of-speech"><abbr>v.tr.</abbr></i> To cause one to be delighted.</dd>
</dl>
-CODE-
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
この例は、フレンチレストランでアイスクリームデザートを注釈付けするために、div要素と共に、dl要素でmicrodata属性を使用する。
Café ou Chocolat Liégeois
3.50 €
2 boules Café ou Chocolat, 1 boule Vanille, sause café ou chocolat, chantilly
Américaine
3.50 €
1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly

éは、＆#233;　èは、＆＃２３２; 　ûは、＆#251;　　€は、＆#8364

ソースコード



            <dl>
            <div itemscope itemtype="http://schema.org/Product">
              <dt itemprop="name">Café ou Chocolat Liégeois
              <dd itemprop="offers" itemscope itemtype="http://schema.org/Offer">
              <span itemprop="price">3.50</span>
              <data itemprop="priceCurrency" value="EUR">€</data>
            <dd itemprop="description">
              2 boules Café ou Chocolat, 1 boule Vanille, sause café ou chocolat, chantilly
            </div>
            <div itemscope itemtype="http://schema.org/Product">
              <dt itemprop="name">Américaine
              <dd itemprop="offers" itemscope itemtype="http://schema.org/Offer">
              <span itemprop="price">3.50</span>
              <data itemprop="priceCurrency" value="EUR">€</data>
              <dd itemprop="description">
              1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
            </div>
            </dl>


見たことないitemscopeプロパティ▶参考サイト

＝マイクロデーターMDN ＝

Microdataのプロパティについて▶参考サイト




  Angry Birds -

  REQUIRES ANDROID

  

  

    RATING:
    4.6 (
    8864 ratings )
  


  

    Price: $1.00
    
  









  
幸福とは

    
/'hæ p. nes/

    
なないふ

    
The state of being happy.

    
Good fortune; success. Oh happiness! It worked!

  
rejoice

    
/ri jois'/

    
v.intr. To be delighted oneself.

    
v.tr. To cause one to be delighted.



   
72<dl><dfn><abbr>

      


    
探偵とは

      
秩序Order

      
体系System 自分を喜ばせること.

      
真理Truth 喜ばせるために.



 
81<abbr>
とは、「abbreviation」（略語）の略で、略語を示すタグです　「<i>タグ使用　斜体」

WWW
   上のコードは<p><abbr title="World Wide Web">WWW</abbr></p>


abber例文参照サイト

86<dfn>
dfnとは「definition」（定義）の略で、何らかの用語の意味を定義（解説）する際、文章中に出てくるその定義用語の部分に対してこの要素を使用します

I define the term in the dfn element.
[dfn要素で用語を定義します。]

title属性
定義される用語の正式な名称を指定

いま解説しているHTMLは、ウェブページを作成するための言語の一つです。



HTMLはそれほど難しいものではありません。簡単なウェブページなら数種類のタグを覚えれば十分に作成することが可能です。


#上部へ
---------------------------

<figure>タグは、図表であることを示す際に使用します。 ここで言う図表とは、文書の本文（メインフロー）から参照されるようなイラスト・図・写真・ソースコードなどのことです。
図表にキャプションや注釈を付けても良いでしょう。 図表にキャプションを付ける場合には、<figcaption>タグを使用します。


112<figure><figcaption>


　　　　　　この例は、コードリストをマークアップするためのfigure要素を示す。


In listing 4 we see the primary core interface
API declaration.
<a href="#l4">listing 4 </a>   は、idが同じ#14に飛ぶ。


[リスト４にプライマリコアインターフェイスが表示されます
API宣言。]



text


text


text


text



　　
　　<figure id="l4">　　　- 以下は<figure>タグ使用

 
Listing 4. The primary core interface API declaration.[リスト4.プライマリー・コア・インターフェースAPI宣言]

    
interface PrimaryCore {[インターフェース プライマリーコア]
    boolean verifyDataLine();[ブール値確認データライン]
    void sendData(in sequence<byte> data);[無効 データ送る（順番通りにltバイト）データ]
    void initSelfDestruct();[無効 初期化自己破壊する]
    
    }





The API is designed to use UTF-8.[APIは、UTF-8を使用するように設計されています。]

これは（ギャラリー内のような）ページの主コンテンツである写真をマークアップするfigure要素である。

-ソースコード-
  <!DOCTYPE HTML>
  <title>Bubbles at work — My Gallery™画廊</title>
  <figure>
  <img src="wine2.jpeg"
      alt="Bubbles, sitting in his office chair, works on his
           latest project intently.">
  <figcaption>Bubbles at work</figcaption>
  </figure>





Bubbles at work — My Gallery™画廊


 Bubbles, sitting in his office chair, works on his
           latest project intently.
 
Bubbles at work






         

この例において、figureにない画像にくわえて、figureにある画像と動画が見られる。
自己完結型のユニットではないので、最初の画像はリテラルに例の第2文の一部である。
したがって、figureは不適切であろう。



305 以下<blockquote>タグ使用



           
Malinko's comics[マリンコの漫画]


           
This case centered on some sort of "intellectual property"[この事件は、ある種の「知的財産」を中心にした]

          infringement related to a comic (see Exhibit A)[コミックに関連する侵害（別紙Aを参照）]. The suit started
          after a trailer ending with these words:[訴訟が始まったこれらの単語で終わるトレーラーの後：]
        
          ROUGH COPY! Promblem-Packed Action![下書き！ 問題満載のアクション！」]

        
          <Q>タグはQuotation（引用）の略で、<Q>〜</Q>で 囲まれた部分が引用であることを表します。

          <Q>タグは、改行を必要としない程度の比較的短い文を引用・抜粋する際に使用します。 長めの文章を引用・転載する際には、<BLOCKQUOTE>タグを使用してください。







           
引用コンテンツ

           
...was aired. A lawyer, armed with a Bigger Notebook, launched a
            preemptive strike using snowballs. A complete copy of the trailer is
            included with Exhibit B.[放映されました。 より大きなノートブックで武装した弁護士が、
            雪玉を使った先制攻撃。 トレーラーの完全なコピーは
           別紙Bに含まれています。]

   
     引用元：ページタイトル





    トーマス・ヘンリー・ハクスリーの生涯と手紙

彼の息子

[1870年になると、ハクスリーのキャリアに新たな転機が訪れる。
<1850年に英国に戻ってから1854年までの4年間、彼は希望を失った苦しい闘いに耐えてきた。

動物学者としての彼の名声は英国到着前に確立されていたし、彼自身のエネルギーと力によってそれ以上のものになっていた。

ジャーミン・ストリートの教授職に落ち着いた彼は、自分が知識の一角で働くことを学んだ初心者以上の存在であるとは考えておらず、

自分の小さな部分の本当の意味を知るためには、関連するすべてのテーマを深く研究する必要があると考え、その後の6年間を単にさらなる見習いの年と考えていました。

そして、オックスフォードで行われた新しい仮説を守るための戦いは、彼を、攻撃されたときに信念を貫く勇気を持っているだけでなく、敵の国に効果的に戦争を持ち込むことができる、

いや、そうしたいと思っている人物として、初めて世間の目に触れさせたのです。

闘士として、長年確立されてきた誤りを攻撃する者として、彼は単なる象徴破壊者、神学的、教育的、道徳的に根付いたあらゆる制度を破壊する者と見なされることが多かったのです。


60年代から70年代初頭にかけて、一般的な家庭で彼がどのような感情で見られていたのか、今となっては理解できません。



 

例文・引用文献に最適です



349 以下<figure>タグ



 　　　Two squiggles on a dirty piece of paper.
 　　　
Exhibit A. The alleged rough copy comic.



#上部へ


355 <figure>　<video>　<cite>

   

    
    
Free video pexels Copy trailer

    



The case was resolved out of court.
ここでは、詩の一部にfigureを用いてマークアップしている。

200<figure>



 
'Twas brillig, and the slithy toves

 Did gyre and gimble in the wabe;

 All mimsy were the borogoves,

 And the mome raths outgrabe.

 
<cite>Jabberwocky斜体文字！</cite> (first verse). Lewis Carroll, 1832-98



この例において、それは城を取り扱うより大きな作品の一部である可能性があり、ネストされたfigure要素は、グループ内の各図に対してグループのキャプションと個々のキャプションの両方を提供するために使用される：

209<figure>



 
The castle through the ages: 1423, 1858, and 1999 respectively.

 
180<figure>

 

  
Etching. Anonymous, ca. 1423.

  The castle has one tower, and a tall wall around it.
 

 
217<figure>

 

  
Oil-based paint on canvas. Maria Towle, 1858.

  The castle now has two towers and two walls.
 

 
222<figure>

 

  
Film photograph. Peter Jankle, 1999.

  The castle lies in ruins, the original tower all that remains in one piece.
 



#UP
図は、時にはコンテンツからのみ、暗黙的に参照される：

230<article><figure>



 
Fiscal negotiations stumble in Congress as deadline nears

 

  Obama and Reid sit together smiling in the Oval Office.
  
Barrak Obama and Harry Reid. White House press photograph.

 

   
火曜日に財政の行き詰まりを終わらせるための議会での交渉が飛び散り、両方の商工会議所を去った
       政府を再開し、国の借入権限を引き上げる方法を把握し、
      木曜日の締め切りが近づいています。
Negotiations in Congress to end the fiscal impasse sputtered on Tuesday, leaving both chambers
      grasping for a way to reopen the government and raise the country's borrowing authority with a
     Thursday deadline drawing near.

    ...



#UP 
--s-244行目-----------

これは、主要コンテンツセクションがmain要素を用いて定義される卒業式のプログラムである。この例において、main要素は、主要コンテンツのサブセクションへのリンクで構成する
nav要素を含むことに注意する。


  
  
Graduation Ceremony Summer 2022
  
  

<header>
  
The Lawson Academy:
   
  

</header>



<main>

  
Graduation


  

  
Ceremony

  
Opening Procession

  
Speech by Valedictorian

  
Speech by Class President

  
Presentation of Diplomas

  
Closing Speech by Headmaster


  
Graduates

  
    
  
  • Eileen Williams
    • 
  
  • Andy Maseyk
    • 
  
  • Blanca Sainz Garcia
    • 
  
  • Clara Faulkner
    • 
  
  • Gez Lemon
    • 
  
  • Eloisa Faulkner
    • 
  


  
Awards

  
    
  
  • Clara Faulkner
    • 
  
  • Eloisa Faulkner
    • 
  
  • Blanca Sainz Garcia
    • 
  

</main>



  
 Copyright 2012 B.lawson

#上部へ
  
  
  
267Code Exampe:

  たとえば、ブログの投稿はarticle、章にsection、ページのナビゲーションの目的にnav、フォームコントロールのグループにfieldsetを使用してマークアップされるだろう。

一方、div要素は、文体上の目的のため、すなわち類似の方法で注釈をつけたすべてのセクション内の複数段落を包むために有用であるかもしれない。次の例は、別々な2つの段落要素に言語の設定を一度に設定する代わりに、一度に2つの段落の言語を設定する方法として使用されるdiv要素である：

281<article><lang="">



 
My use of language and my cats私の言語と猫の使い方

 
私の猫の行動は、彼女が不在だったときを除いて、あまり変わっていません。
 that she plays her new physique to the neighbors regularly, in an
 attempt to get pets.

 

  
My other cat, coloured black and white, is a sweetie. He followed
  us to the pool today, walking down the pavement with us. Yesterday
  he apparently visited our neighbours. I wonder if he recognises that
  their flat is a mirror image of ours.

  
Hm, I just noticed that in the last paragraph I used British
  English. But I'm supposed to write in American English. So I
  shouldn't say "pavement" or "flat" or "colour"...

 

 
I should say "sidewalk" and "apartment" and "color"!




fieldset
#上部へ

--------------------------

<FIELDSET>はフォームの入力項目をグループ化する際に使用します。 グループの先頭には、<LEGEND>〜</LEGEND>で入力項目グループにタイトルをつけます。




  
formはsubmitされないようになってます。
単なるボタンとして使う場合は、type="button"を指定する。
省略すると、type="submit"で解釈されsubmitされる。

枠のサイズ・高さ・幅やり方


  

    

      

        

          
            氏名
          
          

            
                    
          

        
           
      

    


    
  


<fieldset><legend>やっとこさ枠ができた‐参照サイト  


------------------------------------------------




299HTMLソース<label><fieldset><legend>


       

           

      
　　　　　　　　　　　　　　　　　
            性別
            

            

       

      

         趣味
        

        

        

        

     








    <fieldset><legend>タグに枠を付けたこちらのサイト


#上部へ
--------------------------


317First


Second


Third

Fourth
Fifth


  • First
    • 

  • Second
    • 

  • Third
    • 

  • Fourth
    • 

  • Fifth
    • 


    A simple link

    
参照サイト

    
<a href>について
    

    322<a href="#" target="_blank"><a href="#" target="_self">
    <a href="#" target="_parent"><a href="#" target="_top"><a href="#" target="abc">
    
    別画面を開いてリンクします
    
リンク元と同じフレームにリンクします
    
ひとつ上の親フレームにリンクします
    
フレームをすべて解除してリンクします
    
abcという名前のフレームにリンクします
    
相対パスでリンクしますa href="a.shtml
    
絶対パスでリンクしますa href="http://www.htmq.com/html5/a.shtml"
    
ひとつ上のディレクトリへa href="../index.htm"
    
メールa href="mailto:info@htmq.com"
    
HTMLクイックリファレンスa href="../index.htm

    

https://canape2020.stars.ne.jp/" target="_blank" onClick="new_open(); return falseさてこれはs無くてもOK

    href="#" というのは「そのページの最上部へのリンク」という意味
    

    

    

    ===========================================
    

    
 The castle has one tower, and a tall wall around it.
 The castle now has two towers and two walls.
 The castle lies in ruins, the original tower all that remains in one piece.
 
    The castle through the ages: 1423, 1858, and 1999 respectively.
    

    

    ============================================
    
　　　
    http://ww2019.starfree.jp/hidden/hidden.html以下の内容を実装してみました
    
   
    <!DOCTYPE html>
<html lang="en">
<title>RPG System 17</title>
<style>
 header, nav, aside, main, footer {
   margin: 0.5em; border: thin solid; padding: 0.5em;
   background: #EFF; color: black; box-shadow: 0 0 0.25em #033;
 }
 h1, h2, p { margin: 0; }
 nav, main { float: left; }
 aside { float: right; }
 footer { clear: both; }
</style>
<header>
 <h1>System Eighteen</h1>
</header>
<nav>
 <a href="../16/">← System 17</a>
 <a href="../18/">RPXIX →</a>
</nav>
<aside>
 <p>This system has no HP mechanic, so there's no healing.
</aside>
<main>
 <h2>Character creation</h2>
 <p>Attributes (magic, strength, agility) are purchased at the cost of one point per level.</p>
 <h2>Rolls</h2>
 <p>Each encounter, roll the dice for all your skills. If you roll more than the opponent, you win.</p>
</main>
<footer>
 <p>Copyright © 2013
</footer>
</html>
    

   
    次の例において、複数のmain要素が使用されており、
   スクリプトは、サーバーのラウンドトリップを行わずにナビゲーションを実行し、
   最新でないものにhidden属性を設定するために
   使用される：
    <!doctype html>
<html lang=en-CA>>>
<meta charset=utf-8>
<title> … </title>
<link rel=stylesheet href=spa.css>
<script src=spa.js async></script>
<nav>
 <a href=/>Home</a>
 <a href=/about>About</a>
 <a href=/contact>Contact</a>
</nav>
<main>
 <h1>Home</h1>
 …
</main>
<main hidden>
 <h1>About</h1>
 …
</main>
<main hidden>
 <h1>Contact</h1>
 …
</main>
<footer>Made with ❤️ by <a href=https://example.com/>Example 👻</a>.</footer>