HTML Tags and Attributes You May Not Know About

image







This article is a cheat sheet for HTML tags. Therefore, let's not rant, straight to the point.







abbr





The tag abbr



defines an abbreviation or acronym . An abbreviation or acronym stands for using the attribute title



.







<abbr title="HyperText Markup Language">HTML</abbr>      -   1986—1991 .
      
      





abbr



often used in conjunction with a tag dfn



that identifies a concept or term:







<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> -       (-).</p>
      
      





address





address



. , , , , ..







<address>
 : <a href="mailto:ivan@mail.com"> </a><br />
 : <a href="http://example.com" target="_blank" rel="noopener noreferrer">Example.com</a><br />
:  ,  
<address>
      
      





audio





audio



- ( .) -.







- src



, source



. , ( - type



).







<audio>



</audio>



, audio



.







: MP3



, WAV



OGG



.







:







  • autoplay



    — ( )
  • controls



    — ( audio



    , , )
  • loop



    — , , ,
  • muted



    — ( autoplay



    )
  • preload



    — , - . : auto



    , metadata



    , none



    . none



    JavaScript



  • src





<audio controls>
      
      





       "audio".
</audio>

<!--  -->
<audio src="music.mp3" preload="metadata" controls muted loop>     "audio".</audio>
      
      





video





video



- ( .) -.







- src



, source



. , ( - type



).







<video>



</video>



, video



.







: MP4



, WebM



OGG



.







:







  • autoplay



    — ( )
  • controls



  • loop



    — , , ,
  • muted



    — ( autoplay



    )
  • preload



    — , - . : auto



    , metadata



    , none



    . none



    JavaScript



  • src



  • poster



    — ,
  • width



  • height





<video width="320" height="240" controls>
      
      





       "".
</video>

<!--  -->
<!--            -->
<video src="movie.mp4" autoplay muted loop>     "".</video>
      
      





DOM API



, audio



video



.







base





base



(URL



) / (target



) . head



:







  • href



  • target



    target



    . : _blank



    , _parent



    , _self



    _top





<head>
  <base href="http://example.com/" target="_blank">
</head>

<body>
  <header>
    <nav>
      <!-- http://example.com/product.html -->
      <a href="product.html"></a>
    </nav>
  </header>
  <main>
    <!-- http://example.com/images/happy_face.png -->
    <img src="images/happy_face.png" alt="" />
  </main>
  <footer>
    <nav>
      <!-- http://example.com/contacts.html -->
      <a href="contacts.html"></a>
    </nav>
  </footer>
</body>
      
      





blockquote



cite





blockquote



, . cite



.







<blockquote cite="https://ru.wikipedia.org/wiki/JavaScript">
JavaScript -   .  -,    .    ECMAScript ( ECMA-262).
</blockquote>
      
      





cite



- (, , , , , ..). .







<p>    JavaScript    <cite>"   JS"</cite>  .</p>
      
      





code





code



:







<p>HTML- `button`   .</p>

<p>CSS- `background-color`    .</p>
      
      





code



pre



:







<pre>
  `
    const name = prompt('  ?')
    if (name?.trim()) alert(`, ${name}!`)
    else console.info('   ')
  `
</pre>
      
      





datalist





datalist



. "" input



: .







id



datalist



list



input



.







<!--  `for`  `label`     `id`  `input` -->
<label for="browser">    :</label>
<input list="browsers" id="browser">

<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
      
      





options



Datalist



.







dl



, dt



dd





dl



(, ). dt



, , dd



, .







dd



, , , ..







<dl>
  <dt></dt>
  <dd>  </dd>
  <dt></dt>
  <dd>  </dd>
</dl>
      
      





details





details



. , JavaScript



. .







details



.







details



.







details



summary



.







details



open



( CSS- — details[open]



JavaScript- — document.querySelector('[open]')



).







<details>
  <summary> -    "details"</summary>
  <p>  -  </p>
</details>
      
      





dialog





dialog



. "" .







dialog



.







dialog



open



.







<dialog open>  </dialog>
      
      





Dialog



JavaScript



show()



, close()



showModal()



, open



.







figure





figure



() , , , , ..







, figure



(main flow), () . figure



.







figure



figcaption



.







<figure>
  <img src="v8-compiler-pipeline.png" alt="V8 compiler pipeline" style="width:100%">
  <figcaption>. 1 -    "" JavaScript V8.</figcaption>
</figure>
      
      





meter





meter



. , meter



- (gauge).







.







meter



label



.







:







  • value



    min



    max



  • min



  • max



  • low



    — . min



    , high



    max



  • high



  • optimum



    min



    max



    . . , optimum



    min



    low



    , ,
  • form



    form



    , meter





<label for="disk_d">  "D":</label>
<meter id="disk_d" min="0" max="100" value="60">60%</meter>
      
      





meter



:







// <meter id="meter" max="100"></meter>
if ('getBattery' in navigator) {
  navigator.getBattery()
    .then(({ level }) => {
      meter.value = level * 100
    })
}
      
      





progress





progress



.







-.







progress



label



.







:







  • max



    — . 1



  • value





<label for="file"> :</label>
<progress id="file" max="100" value="32">32%</progress>
      
      





:







// <progress id="progress" value="0" max="10"></progress>
const timerId = setInterval(() => {
  progress.value += 1
  if (progress.value === progress.max) {
    progress.remove()
    clearInterval(timerId)
  }
}, 1000)
      
      





output





output



.







:







  • for



    — ,
  • form



    form



    , output



  • name



    output





<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="25" />
  +
  <input type="number" id="b" value="50" />
  =
  <output name="x" for="a b">75</output>
</form>
      
      





picture





picture



( ).







(viewport width) .







picture



: source



img



.







source



-, . img



source



.







srcset



, - — media



.







<picture>
  \<source media="(min-width:768px)" srcset="big.jpg"/>
  \<source media="(min-width:480px)" srcset="small.jpg"/>
  <img src="default.jpg" alt="" style="width:auto;"/>
</picture>
      
      





template





template



, .







, , ( ).







template



JavaScript



.







<template>
  <h1></h1>
  <p> - </p>
</template>

<button id="button">  </button>
      
      





((body, { content }) => {
  button.onclick = () => {
    body.append(content.cloneNode(true))
  }
})(document.body, document.querySelector('template'))
      
      





time





time



( ).







datetime



.







<p>     ,   <time datetime="2000-01-01 00:01"> 2000 </time>   , ,  ,  . ,    <time datetime="3000-01-01 00:01"> 3000 </time>,    </p>
      
      





noscript





noscript



, , JavaScript



. head



, body



. noscript



link



, style



meta



.







<script>
document.write('   ...  ?')
</script>
<noscript>,  JavaScript</noscript>
      
      







""



<body>
  <header>
    <h1>Page Title</h1>
    <nav>
      <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
      </ul>
    </nav>
    <img src="images/logo.png" alt="" />
  </header>

  <aside>
    <h2>Aside Title</h2>
    <p>Aside Content</p>
  </aside>

  <main>
    <article>
      <h2>Atricle Title</h2>
      <section>
        <h3>Section Title</h3>
        <p>Section Content</p>
      </section>
    </article>

    <div>
      <section>
        <h2>Section2 Title</h2>
        <p>Section2 Content</p>
      </section>
      <section>
        <p>Section3 Content</p>
      </section>
    </div>
  </main>

  <footer>
    <nav>
      <ol>
        <li><a href="#">Link3</a></li>
        <li><a href="#">Link4</a></li>
      </ol>
    </nav>
    <div>
      <p>Block text &amp; <span>inline text</span></p>
    </div>
  </footer>
</body>
      
      







<p>
    
    <b></b>,
    <strong>  ""</strong>,
    <i>""</i>,
    <em>  </em>,
    <small></small>,
    <del>  </del>,
    <ins>  </ins>,
    <u></u>
    <s></s>.

     
    <q> </q>,
    <kbd>  </kbd>,
    <samp> </samp>.

    
    <sup> </sup> 
    <sub> </sub>.

  ,    <mark></mark>.

  <wbr />.

    <br />    <hr /> .
</p>
      
      







/







.







<form
  action="URL"
  autocomplete="on / off"
  enctype=""
  id="form"
  method="GET / POST"
  name="form"
  novalidate
>
  <fieldset>
    <legend>Title</legend>

    <label for="first_name">:</label>
    <input type="text" id="first_name">

    <label>:
      <input type="text">
    </label>
  </fieldset>

  <select
    autofocus
    disabled
    form="form"
    multiple
    name="select"
    required
    size="10"
  >
    <optgroup label="Group1">
      <option
        value="option1"
        disabled
        label="option1"
      ></option>
      <option value="option2" selected></option>
    </optgroup>

    <optgroup label="Group2" disabled>
      <option value="option3"></option>
    </optgroup>

    <option value="option4"></option>
  </select>

  <textarea
    autofocus
    cols="30"
    disabled
    form="form"
    maxlength="50"
    name="textarea"
    placeholder=" ..."
    readonly
    required
    rows="10"
    wrap="hard / soft"
  ></textarea>

  <button
    type="submit"
    autofocus
    disabled
    form="form"
    formaction="URL"
    formenctype=""
    formmethod="GET / POST"
    formnovalidate
    name="submit"
  >
       
  </button>
  <button type="reset">    (    )</button>
  <button type="button"> </button>
</form>
      
      







<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text"> (  )
<input type="time">
<input type="url">
<input type="week">
      
      





:







  • accept



    — MIME- ( type="file"



    ). : , , .png



    , audio/*



    , video/*



    , image/*



    , , , json



  • alt



  • autocomplete



    on / off



  • autofocus



  • checked



    type="checked"



    type="radio"



  • disabled



  • form



  • formaction



    type="submit"



    type="image"



  • formenctype



    type="submit"



    type="image"



    . : application/x-www-form-urlencoded



    , multipart/form-data



    , text/plain



  • formmethod



    type="submit"



    type="image"



    (get / post



    )
  • formnovalidate



  • formtarget



    — , , ( type="submit"



    type="image"



    ). : _blank



    , _self



    , _parent



    , _top



    ,



  • height



    — ( type="image"



    )
  • list



  • max



    — ( )
  • maxlength



    — ( )
  • min



    — ( )
  • minlength



    — ( )
  • multiple



  • name



  • pattern



  • placeholder



  • readonly



  • required



  • size



    — ,
  • src



    — , ( type="image"



    )
  • step



    — () min



    max



  • type



  • value



  • width



    — ( type="image"



    )


:







<form>
  <input
    type="email"
    id="email"
    name="email"
    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
    required
  />

  <input
    type="password"
    id="password"
    name="password"
    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
    title="     8      ,   ()     "
    required
  />
  <input type="submit" />
</form>
      
      







<table>
  <caption>
    Table Title
  </caption>
  <colgroup>
    <col span="2" />
    <col />
  </colgroup>
  <thead>
    <tr>
      <th
        abbr="H1"
        colspan="2"
        rowspan="2"
        scope="col / colgroup / row / rowgroup"
      >
        Heading1
      </th>
      <th>Heading2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" rowspan="2">1-1</td>
      <td>1-2</td>
    </tr>
    <tr>
      <td>2-1</td>
      <td>2-2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>3-1</td>
      <td>3-2</td>
    </tr>
  </tfoot>
</table>
      
      





colgroup



col



.









HTML-. . map



area



, ( , ..), . , svg



canvas



, , ( ).










-.







10% !














All Articles