[{"data":1,"prerenderedAt":1362},["ShallowReactive",2],{"article-new-features-of-html-5-1":3,"authors":1346},{"id":4,"title":5,"author":6,"body":7,"date":1336,"description":1337,"extension":1338,"meta":1339,"navigation":1340,"path":1341,"seo":1342,"stem":1343,"thumbnail":1344,"__hash__":1345},"article\u002Farticle\u002Fnew-features-of-html-5-1.md","New Features of HTML 5.1","ashwin",{"type":8,"value":9,"toc":1324},"minimark",[10,31,40,45,48,200,218,222,224,434,458,462,569,601,606,613,617,619,872,875,889,893,895,906,954,958,960,1003,1024,1034,1038,1040,1094,1129,1133,1135,1195,1220,1240,1244,1278,1282,1320],[11,12,13,14,18,19,26,27,30],"p",{},"The HTML specification got a ",[15,16,17],"strong",{},"major overhaul"," a couple of weeks ago when W3C published its new ",[20,21,25],"a",{"href":22,"rel":23},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml\u002F",[24],"nofollow","HTML 5.1 recommendation"," in November 2016. In its recent blog post, W3C called the new major release the ",[15,28,29],{},"gold standard",", as HTML 5.1 provide us with new ways of how we can use HTML to create more flexible web experiences.",[11,32,33,39],{},[15,34,35],{},[36,37,38],"em",{},"Note:"," Currently not all browsers support all of these features, so don’t forget to check browser support before you use them in production.",[41,42,44],"h2",{"id":43},"define-multiple-image-resources-for-responsive-design","Define multiple image resources for responsive design",[11,46,47],{},"Code:",[49,50,55],"pre",{"className":51,"code":52,"language":53,"meta":54,"style":54},"language-html shiki shiki-themes material-theme-darker","\u003Cpicture>\n  \u003Csource srcset=\"mobile.jpg, mobile-hd.jpg 2x\" media=\"(max-width: 360px)\" \u002F>\n  \u003Csource srcset=\"large.jpg, large-hd.jpg 2x\" media=\"(min-width: 1920px)\" \u002F>\n  \u003Cimg src=\"default.jpg\" srcset=\"default-hd.jpg 2x\" alt=\"your image\" \u002F>\n\u003C\u002Fpicture>\n","html","",[56,57,58,74,114,145,190],"code",{"__ignoreMap":54},[59,60,63,67,71],"span",{"class":61,"line":62},"line",1,[59,64,66],{"class":65},"sAklC","\u003C",[59,68,70],{"class":69},"s-wAU","picture",[59,72,73],{"class":65},">\n",[59,75,77,80,83,87,90,93,97,99,102,104,106,109,111],{"class":61,"line":76},2,[59,78,79],{"class":65},"  \u003C",[59,81,82],{"class":69},"source",[59,84,86],{"class":85},"sJ14y"," srcset",[59,88,89],{"class":65},"=",[59,91,92],{"class":65},"\"",[59,94,96],{"class":95},"sfyAc","mobile.jpg, mobile-hd.jpg 2x",[59,98,92],{"class":65},[59,100,101],{"class":85}," media",[59,103,89],{"class":65},[59,105,92],{"class":65},[59,107,108],{"class":95},"(max-width: 360px)",[59,110,92],{"class":65},[59,112,113],{"class":65}," \u002F>\n",[59,115,117,119,121,123,125,127,130,132,134,136,138,141,143],{"class":61,"line":116},3,[59,118,79],{"class":65},[59,120,82],{"class":69},[59,122,86],{"class":85},[59,124,89],{"class":65},[59,126,92],{"class":65},[59,128,129],{"class":95},"large.jpg, large-hd.jpg 2x",[59,131,92],{"class":65},[59,133,101],{"class":85},[59,135,89],{"class":65},[59,137,92],{"class":65},[59,139,140],{"class":95},"(min-width: 1920px)",[59,142,92],{"class":65},[59,144,113],{"class":65},[59,146,148,150,153,156,158,160,163,165,167,169,171,174,176,179,181,183,186,188],{"class":61,"line":147},4,[59,149,79],{"class":65},[59,151,152],{"class":69},"img",[59,154,155],{"class":85}," src",[59,157,89],{"class":65},[59,159,92],{"class":65},[59,161,162],{"class":95},"default.jpg",[59,164,92],{"class":65},[59,166,86],{"class":85},[59,168,89],{"class":65},[59,170,92],{"class":65},[59,172,173],{"class":95},"default-hd.jpg 2x",[59,175,92],{"class":65},[59,177,178],{"class":85}," alt",[59,180,89],{"class":65},[59,182,92],{"class":65},[59,184,185],{"class":95},"your image",[59,187,92],{"class":65},[59,189,113],{"class":65},[59,191,193,196,198],{"class":61,"line":192},5,[59,194,195],{"class":65},"\u003C\u002F",[59,197,70],{"class":69},[59,199,73],{"class":65},[11,201,202,203,206,207,210,211,214,215,217],{},"In HTML 5.1, you can use ",[56,204,205],{},"\u003Cpicture>"," tag together with the ",[56,208,209],{},"srcset"," attribute to make ",[15,212,213],{},"responsive image selection"," possible. The ",[56,216,205],{}," tag represents an image container that allows developers to declare different image resources in order to adapt to the UA’s viewport size, screen pixel density, screen type, and other parameters used in responsive design.",[41,219,221],{"id":220},"show-or-hide-extra-information","Show or hide extra information",[11,223,47],{},[49,225,227],{"className":51,"code":226,"language":53,"meta":54,"style":54},"\u003Csection>\n  \u003Ch2>Error Message\u003C\u002Fh2>\n  \u003Cdetails>\n    \u003Csummary>We couldn't finish downloading this video.\u003C\u002Fsummary>\n    \u003Cdl>\n      \u003Cdt>File name:\u003C\u002Fdt>\n      \u003Cdd>yourfile.mp4\u003C\u002Fdd>\n      \u003Cdt>File size:\u003C\u002Fdt>\n      \u003Cdd>100 MB\u003C\u002Fdd>\n      \u003Cdt>Duration:\u003C\u002Fdt>\n      \u003Cdd>00:05:27\u003C\u002Fdd>\n    \u003C\u002Fdl>\n  \u003C\u002Fdetails>\n\u003C\u002Fsection>\n",[56,228,229,238,257,266,285,294,314,333,351,369,387,405,415,425],{"__ignoreMap":54},[59,230,231,233,236],{"class":61,"line":62},[59,232,66],{"class":65},[59,234,235],{"class":69},"section",[59,237,73],{"class":65},[59,239,240,242,244,247,251,253,255],{"class":61,"line":76},[59,241,79],{"class":65},[59,243,41],{"class":69},[59,245,246],{"class":65},">",[59,248,250],{"class":249},"svy0-","Error Message",[59,252,195],{"class":65},[59,254,41],{"class":69},[59,256,73],{"class":65},[59,258,259,261,264],{"class":61,"line":116},[59,260,79],{"class":65},[59,262,263],{"class":69},"details",[59,265,73],{"class":65},[59,267,268,271,274,276,279,281,283],{"class":61,"line":147},[59,269,270],{"class":65},"    \u003C",[59,272,273],{"class":69},"summary",[59,275,246],{"class":65},[59,277,278],{"class":249},"We couldn't finish downloading this video.",[59,280,195],{"class":65},[59,282,273],{"class":69},[59,284,73],{"class":65},[59,286,287,289,292],{"class":61,"line":192},[59,288,270],{"class":65},[59,290,291],{"class":69},"dl",[59,293,73],{"class":65},[59,295,297,300,303,305,308,310,312],{"class":61,"line":296},6,[59,298,299],{"class":65},"      \u003C",[59,301,302],{"class":69},"dt",[59,304,246],{"class":65},[59,306,307],{"class":249},"File name:",[59,309,195],{"class":65},[59,311,302],{"class":69},[59,313,73],{"class":65},[59,315,317,319,322,324,327,329,331],{"class":61,"line":316},7,[59,318,299],{"class":65},[59,320,321],{"class":69},"dd",[59,323,246],{"class":65},[59,325,326],{"class":249},"yourfile.mp4",[59,328,195],{"class":65},[59,330,321],{"class":69},[59,332,73],{"class":65},[59,334,336,338,340,342,345,347,349],{"class":61,"line":335},8,[59,337,299],{"class":65},[59,339,302],{"class":69},[59,341,246],{"class":65},[59,343,344],{"class":249},"File size:",[59,346,195],{"class":65},[59,348,302],{"class":69},[59,350,73],{"class":65},[59,352,354,356,358,360,363,365,367],{"class":61,"line":353},9,[59,355,299],{"class":65},[59,357,321],{"class":69},[59,359,246],{"class":65},[59,361,362],{"class":249},"100 MB",[59,364,195],{"class":65},[59,366,321],{"class":69},[59,368,73],{"class":65},[59,370,372,374,376,378,381,383,385],{"class":61,"line":371},10,[59,373,299],{"class":65},[59,375,302],{"class":69},[59,377,246],{"class":65},[59,379,380],{"class":249},"Duration:",[59,382,195],{"class":65},[59,384,302],{"class":69},[59,386,73],{"class":65},[59,388,390,392,394,396,399,401,403],{"class":61,"line":389},11,[59,391,299],{"class":65},[59,393,321],{"class":69},[59,395,246],{"class":65},[59,397,398],{"class":249},"00:05:27",[59,400,195],{"class":65},[59,402,321],{"class":69},[59,404,73],{"class":65},[59,406,408,411,413],{"class":61,"line":407},12,[59,409,410],{"class":65},"    \u003C\u002F",[59,412,291],{"class":69},[59,414,73],{"class":65},[59,416,418,421,423],{"class":61,"line":417},13,[59,419,420],{"class":65},"  \u003C\u002F",[59,422,263],{"class":69},[59,424,73],{"class":65},[59,426,428,430,432],{"class":61,"line":427},14,[59,429,195],{"class":65},[59,431,235],{"class":69},[59,433,73],{"class":65},[11,435,436,437,440,441,444,445,448,449,451,452,454,455,457],{},"With the ",[56,438,439],{},"\u003Cdetails>"," and ",[56,442,443],{},"\u003Csummary>"," tags, you can add ",[15,446,447],{},"extended information"," to a content piece. The extra information isn’t shown by default, but if users are interested, they have the option to take a look. In your code, you are supposed to place the ",[56,450,443],{}," tag inside ",[56,453,439],{},". After the ",[56,456,443],{}," tag you can add the extra information you want to hide.",[41,459,461],{"id":460},"add-functionality-to-the-browsers-context-menu","Add functionality to the browser’s context menu",[49,463,465],{"className":51,"code":464,"language":53,"meta":54,"style":54},"\u003Cbutton contextmenu=\"rightclickmenu\">Right click me\u003C\u002Fbutton>\n  \u003Cmenu type=\"context\" id=\"rightclickmenu\">\n  \u003Cmenuitem type=\"checkbox\" label=\"I ♥ HTML5.1.\">\n\u003C\u002Fmenu>\n",[56,466,467,497,529,561],{"__ignoreMap":54},[59,468,469,471,474,477,479,481,484,486,488,491,493,495],{"class":61,"line":62},[59,470,66],{"class":65},[59,472,473],{"class":69},"button",[59,475,476],{"class":85}," contextmenu",[59,478,89],{"class":65},[59,480,92],{"class":65},[59,482,483],{"class":95},"rightclickmenu",[59,485,92],{"class":65},[59,487,246],{"class":65},[59,489,490],{"class":249},"Right click me",[59,492,195],{"class":65},[59,494,473],{"class":69},[59,496,73],{"class":65},[59,498,499,501,504,507,509,511,514,516,519,521,523,525,527],{"class":61,"line":76},[59,500,79],{"class":65},[59,502,503],{"class":69},"menu",[59,505,506],{"class":85}," type",[59,508,89],{"class":65},[59,510,92],{"class":65},[59,512,513],{"class":95},"context",[59,515,92],{"class":65},[59,517,518],{"class":85}," id",[59,520,89],{"class":65},[59,522,92],{"class":65},[59,524,483],{"class":95},[59,526,92],{"class":65},[59,528,73],{"class":65},[59,530,531,533,536,538,540,542,545,547,550,552,554,557,559],{"class":61,"line":116},[59,532,79],{"class":65},[59,534,535],{"class":69},"menuitem",[59,537,506],{"class":85},[59,539,89],{"class":65},[59,541,92],{"class":65},[59,543,544],{"class":95},"checkbox",[59,546,92],{"class":65},[59,548,549],{"class":85}," label",[59,551,89],{"class":65},[59,553,92],{"class":65},[59,555,556],{"class":95},"I ♥ HTML5.1.",[59,558,92],{"class":65},[59,560,73],{"class":65},[59,562,563,565,567],{"class":61,"line":147},[59,564,195],{"class":65},[59,566,503],{"class":69},[59,568,73],{"class":65},[11,570,436,571,574,575,578,579,581,582,585,586,589,590,592,593,596,597,600],{},[56,572,573],{},"\u003Cmenuitem>"," element and its ",[56,576,577],{},"type=\"context\""," attribute, you can add custom functionality to the context menu of the browser. You need to assign ",[56,580,573],{}," as the child element of the",[56,583,584],{},"\u003Cmenu>","tag. The ",[56,587,588],{},"id"," of the ",[56,591,584],{}," element needs to carry the same value as the ",[56,594,595],{},"contextmenu"," attribute of the element to which we want to add the context menu to (which is the ",[56,598,599],{},"\u003Cbutton>"," element in the example above).",[11,602,603],{},[15,604,605],{},"NOTE:",[11,607,608,609,612],{},"However the ",[15,610,611],{},"browser support"," for this feature is not very good yet. Chrome 54 doesn’t support it, and Firefox 50 only allows the presence of one extra context menu.",[41,614,616],{"id":615},"nest-headers-and-footers","Nest headers and footers",[11,618,47],{},[49,620,622],{"className":51,"code":621,"language":53,"meta":54,"style":54},"\u003Carticle>\n  \u003Cheader>\n    \u003Ch1>Article Title\u003C\u002Fh1>\n    \u003Caside>\n      \u003Cheader>\n        \u003Ch2>About the author\u003C\u002Fh2>\n        \u003Cp>\u003Ca href=\"#\">Email\u003C\u002Fa>\u003Ca href=\"#\">Twitter\u003C\u002Fa>\u003C\u002Fp>\n      \u003C\u002Fheader>\n      \u003Cimg src=\"photo.jpg\" alt=\"Author photo\" \u002F>\n      \u003Cp>Author bio ...\u003C\u002Fp>\n    \u003C\u002Faside>\n  \u003C\u002Fheader>\n  \u003Cp>Article intro\u003C\u002Fp>\n  \u003Cp>Other paragraphs ...\u003C\u002Fp>\n\u003C\u002Farticle>\n",[56,623,624,633,642,660,669,677,695,757,766,796,813,821,829,846,863],{"__ignoreMap":54},[59,625,626,628,631],{"class":61,"line":62},[59,627,66],{"class":65},[59,629,630],{"class":69},"article",[59,632,73],{"class":65},[59,634,635,637,640],{"class":61,"line":76},[59,636,79],{"class":65},[59,638,639],{"class":69},"header",[59,641,73],{"class":65},[59,643,644,646,649,651,654,656,658],{"class":61,"line":116},[59,645,270],{"class":65},[59,647,648],{"class":69},"h1",[59,650,246],{"class":65},[59,652,653],{"class":249},"Article Title",[59,655,195],{"class":65},[59,657,648],{"class":69},[59,659,73],{"class":65},[59,661,662,664,667],{"class":61,"line":147},[59,663,270],{"class":65},[59,665,666],{"class":69},"aside",[59,668,73],{"class":65},[59,670,671,673,675],{"class":61,"line":192},[59,672,299],{"class":65},[59,674,639],{"class":69},[59,676,73],{"class":65},[59,678,679,682,684,686,689,691,693],{"class":61,"line":296},[59,680,681],{"class":65},"        \u003C",[59,683,41],{"class":69},[59,685,246],{"class":65},[59,687,688],{"class":249},"About the author",[59,690,195],{"class":65},[59,692,41],{"class":69},[59,694,73],{"class":65},[59,696,697,699,701,704,706,709,711,713,716,718,720,723,725,727,729,731,733,735,737,739,741,743,746,748,750,753,755],{"class":61,"line":316},[59,698,681],{"class":65},[59,700,11],{"class":69},[59,702,703],{"class":65},">\u003C",[59,705,20],{"class":69},[59,707,708],{"class":85}," href",[59,710,89],{"class":65},[59,712,92],{"class":65},[59,714,715],{"class":95},"#",[59,717,92],{"class":65},[59,719,246],{"class":65},[59,721,722],{"class":249},"Email",[59,724,195],{"class":65},[59,726,20],{"class":69},[59,728,703],{"class":65},[59,730,20],{"class":69},[59,732,708],{"class":85},[59,734,89],{"class":65},[59,736,92],{"class":65},[59,738,715],{"class":95},[59,740,92],{"class":65},[59,742,246],{"class":65},[59,744,745],{"class":249},"Twitter",[59,747,195],{"class":65},[59,749,20],{"class":69},[59,751,752],{"class":65},">\u003C\u002F",[59,754,11],{"class":69},[59,756,73],{"class":65},[59,758,759,762,764],{"class":61,"line":335},[59,760,761],{"class":65},"      \u003C\u002F",[59,763,639],{"class":69},[59,765,73],{"class":65},[59,767,768,770,772,774,776,778,781,783,785,787,789,792,794],{"class":61,"line":353},[59,769,299],{"class":65},[59,771,152],{"class":69},[59,773,155],{"class":85},[59,775,89],{"class":65},[59,777,92],{"class":65},[59,779,780],{"class":95},"photo.jpg",[59,782,92],{"class":65},[59,784,178],{"class":85},[59,786,89],{"class":65},[59,788,92],{"class":65},[59,790,791],{"class":95},"Author photo",[59,793,92],{"class":65},[59,795,113],{"class":65},[59,797,798,800,802,804,807,809,811],{"class":61,"line":371},[59,799,299],{"class":65},[59,801,11],{"class":69},[59,803,246],{"class":65},[59,805,806],{"class":249},"Author bio ...",[59,808,195],{"class":65},[59,810,11],{"class":69},[59,812,73],{"class":65},[59,814,815,817,819],{"class":61,"line":389},[59,816,410],{"class":65},[59,818,666],{"class":69},[59,820,73],{"class":65},[59,822,823,825,827],{"class":61,"line":407},[59,824,420],{"class":65},[59,826,639],{"class":69},[59,828,73],{"class":65},[59,830,831,833,835,837,840,842,844],{"class":61,"line":417},[59,832,79],{"class":65},[59,834,11],{"class":69},[59,836,246],{"class":65},[59,838,839],{"class":249},"Article intro",[59,841,195],{"class":65},[59,843,11],{"class":69},[59,845,73],{"class":65},[59,847,848,850,852,854,857,859,861],{"class":61,"line":427},[59,849,79],{"class":65},[59,851,11],{"class":69},[59,853,246],{"class":65},[59,855,856],{"class":249},"Other paragraphs ...",[59,858,195],{"class":65},[59,860,11],{"class":69},[59,862,73],{"class":65},[59,864,866,868,870],{"class":61,"line":865},15,[59,867,195],{"class":65},[59,869,630],{"class":69},[59,871,73],{"class":65},[11,873,874],{},"HTML 5.1 allows you to nest headers and footers if each level is contained within sectioning content.",[11,876,877,878,440,881,884,885,888],{},"This feature can be useful if you want to add elaborated headers to semantic sectioning elements, such as ",[56,879,880],{},"\u003Carticle>",[56,882,883],{},"\u003Csection>",". The code example below creates a sidebar inside the header, the ",[56,886,887],{},"\u003Caside>"," tag is also a sectioning element, and adds extra information about the author inside it. The sidebar inside the header has its own header as well, with a subtitle and the author’s contact info.",[41,890,892],{"id":891},"use-cryptographic-nonces-for-styles-scripts","Use cryptographic nonces for styles & scripts",[11,894,47],{},[49,896,900],{"className":897,"code":898,"language":899,"meta":54,"style":54},"language-javascript shiki shiki-themes material-theme-darker","\u003Cscript nonce=\"adfjaf8eda64U7\">\u002F\u002F some JavaScript\u003C\u002Fscript>\n","javascript",[56,901,902],{"__ignoreMap":54},[59,903,904],{"class":61,"line":62},[59,905,898],{},[11,907,908,909,912,913,916,917,920,921,920,924,920,927,920,930,933,934,937,938,941,942,947,948,953],{},"With HTML 5.1, you can ",[15,910,911],{},"add cryptographic nonces to styles and scripts",". You can use the ",[56,914,915],{},"nonce"," attribute ",[15,918,919],{},"within the"," ",[56,922,923],{},"\u003Cscript>",[15,925,926],{},"and the",[56,928,929],{},"\u003Cstyle>",[15,931,932],{},"elements",". A cryptographic nonce is a randomly generated number that can be ",[15,935,936],{},"used only once",", and ",[15,939,940],{},"has to be regenerated"," for every page request. A nonce can be used by the ",[20,943,946],{"href":944,"rel":945},"http:\u002F\u002Fwww.cspplayground.com\u002Fhome",[24],"Content Security Policy"," of a website to decide if the certain script or style should be applied on the page. In ",[20,949,952],{"href":950,"rel":951},"https:\u002F\u002Fdevelopers.google.com\u002Fweb\u002Ffundamentals\u002Fsecurity\u002Fcsp\u002F",[24],"Google Developers’ Web Fundamentals"," you can read more on the proper usage of nonces and CSP.",[41,955,957],{"id":956},"create-reverse-link-relationships","Create reverse link relationships",[11,959,47],{},[49,961,963],{"className":51,"code":962,"language":53,"meta":54,"style":54},"\u003C!-- Current document is the parent of the linked category.html document -->\n\u003Clink rev=\"parent\" href=\"category.html\" \u002F>\n",[56,964,965,971],{"__ignoreMap":54},[59,966,967],{"class":61,"line":62},[59,968,970],{"class":969},"smLnX","\u003C!-- Current document is the parent of the linked category.html document -->\n",[59,972,973,975,978,981,983,985,988,990,992,994,996,999,1001],{"class":61,"line":76},[59,974,66],{"class":65},[59,976,977],{"class":69},"link",[59,979,980],{"class":85}," rev",[59,982,89],{"class":65},[59,984,92],{"class":65},[59,986,987],{"class":95},"parent",[59,989,92],{"class":65},[59,991,708],{"class":85},[59,993,89],{"class":65},[59,995,92],{"class":65},[59,997,998],{"class":95},"category.html",[59,1000,92],{"class":65},[59,1002,113],{"class":65},[11,1004,1005,1006,1009,1010,440,1013,1016,1017,1019,1020,1023],{},"You can add the ",[56,1007,1008],{},"rev"," attribute to your links again. It was previously defined in HTML 4, however it wasn’t supported by HTML5. HTML 5.1 allows developers to use this attribute again for the ",[56,1011,1012],{},"\u003Clink>",[56,1014,1015],{},"\u003Ca>"," elements. The ",[56,1018,1008],{}," attribute is the opposite of ",[56,1021,1022],{},"rel",", it specifies the relationship of the current and the linked document in the reverse direction (how the current document is related to the linked one).",[11,1025,1026,1027,1029,1030,1033],{},"The ",[56,1028,1008],{}," attribute has been included in the HTML 5.1 specs primarily to ",[15,1031,1032],{},"support RDFa"," which is a widely-used structured data markup format, and extends the HTML language.",[41,1035,1037],{"id":1036},"use-zero-width-images","Use zero-width images",[11,1039,47],{},[49,1041,1043],{"className":51,"code":1042,"language":53,"meta":54,"style":54},"\u003Cimg src=\"yourimage.jpg\" width=\"0\" height=\"0\" alt=\"\" \u002F>\n",[56,1044,1045],{"__ignoreMap":54},[59,1046,1047,1049,1051,1053,1055,1057,1060,1062,1065,1067,1069,1072,1074,1077,1079,1081,1083,1085,1087,1089,1092],{"class":61,"line":62},[59,1048,66],{"class":65},[59,1050,152],{"class":69},[59,1052,155],{"class":85},[59,1054,89],{"class":65},[59,1056,92],{"class":65},[59,1058,1059],{"class":95},"yourimage.jpg",[59,1061,92],{"class":65},[59,1063,1064],{"class":85}," width",[59,1066,89],{"class":65},[59,1068,92],{"class":65},[59,1070,1071],{"class":95},"0",[59,1073,92],{"class":65},[59,1075,1076],{"class":85}," height",[59,1078,89],{"class":65},[59,1080,92],{"class":65},[59,1082,1071],{"class":95},[59,1084,92],{"class":65},[59,1086,178],{"class":85},[59,1088,89],{"class":65},[59,1090,1091],{"class":65},"\"\"",[59,1093,113],{"class":65},[11,1095,1096,1097,1102,1103,920,1106,920,1109,920,1111,1114,1115,1118,1119,920,1122,920,1125,1128],{},"HTML 5.1 makes it possible to**",[20,1098,1101],{"href":1099,"rel":1100},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml\u002Fsemantics-embedded-content.html#an-image-not-intended-for-the-user",[24],"create zero-width images","**by permitting developers to use the ",[56,1104,1105],{},"width",[15,1107,1108],{},"attribute with",[56,1110,1071],{},[15,1112,1113],{},"as value"," . This feature can be useful if you want to include images that you ",[15,1116,1117],{},"don’t want to show to users",", such as tracking image files. Zero-width images are recommended to be ",[15,1120,1121],{},"used together with empty",[56,1123,1124],{},"alt",[15,1126,1127],{},"attributes",".",[41,1130,1132],{"id":1131},"separate-browser-contexts-to-prevent-phishing-attacks","Separate browser contexts to prevent phishing attacks",[11,1134,47],{},[49,1136,1138],{"className":51,"code":1137,"language":53,"meta":54,"style":54},"\u003Ca href=\"#\" target=\"_blank\" rel=\"noopener\">\n  Your link that won't make troubles\n\u003C\u002Fa>\n",[56,1139,1140,1182,1187],{"__ignoreMap":54},[59,1141,1142,1144,1146,1148,1150,1152,1154,1156,1159,1161,1163,1166,1168,1171,1173,1175,1178,1180],{"class":61,"line":62},[59,1143,66],{"class":65},[59,1145,20],{"class":69},[59,1147,708],{"class":85},[59,1149,89],{"class":65},[59,1151,92],{"class":65},[59,1153,715],{"class":95},[59,1155,92],{"class":65},[59,1157,1158],{"class":85}," target",[59,1160,89],{"class":65},[59,1162,92],{"class":65},[59,1164,1165],{"class":95},"_blank",[59,1167,92],{"class":65},[59,1169,1170],{"class":85}," rel",[59,1172,89],{"class":65},[59,1174,92],{"class":65},[59,1176,1177],{"class":95},"noopener",[59,1179,92],{"class":65},[59,1181,73],{"class":65},[59,1183,1184],{"class":61,"line":76},[59,1185,1186],{"class":249},"  Your link that won't make troubles\n",[59,1188,1189,1191,1193],{"class":61,"line":116},[59,1190,195],{"class":65},[59,1192,20],{"class":69},[59,1194,73],{"class":65},[11,1196,1197,1198,1205,1206,920,1209,1214,1215,1128],{},"Using same origin links on your website can eventually get you into some trouble. The vulnerability is called the ",[15,1199,1200],{},[20,1201,1204],{"href":1202,"rel":1203},"https:\u002F\u002Fwww.jitbit.com\u002Falexblog\u002F256-targetblank---the-most-underestimated-vulnerability-ever\u002F",[24],"target=”_blank” exploits"," , and it’s a nasty phishing attack. You can (safely) test ",[15,1207,1208],{},"how this attack works",[20,1210,1213],{"href":1211,"rel":1212},"https:\u002F\u002Fmathiasbynens.github.io\u002Frel-noopener\u002F",[24],"on this clever Github demo page",", and its background code you can find ",[20,1216,1219],{"href":1217,"rel":1218},"https:\u002F\u002Fgithub.com\u002Fmathiasbynens\u002Frel-noopener",[24],"here on Github",[11,1221,1222,1223,1226,1227,1230,1231,1233,1234,440,1236,1239],{},"HTML 5.1 has standardized the usage of the ",[56,1224,1225],{},"rel=\"noopener\""," attribute which ",[15,1228,1229],{},"separates browser contexts"," therefore eliminates this issue. You can use ",[56,1232,1225],{}," within the ",[56,1235,1015],{},[56,1237,1238],{},"\u003Carea>"," elements.",[41,1241,1243],{"id":1242},"create-an-empty-option","Create an empty option",[11,1245,1246,1247,920,1250,920,1253,1256,1257,1259,1260,1263,1264,1267,1268,1271,1272,920,1275,1277],{},"HTML 5.1 allows developers to ",[15,1248,1249],{},"create an empty",[56,1251,1252],{},"\u003Coption>",[15,1254,1255],{},"element",". The ",[56,1258,1252],{}," tag can be the child element of the ",[56,1261,1262],{},"\u003Cselect>"," , ",[56,1265,1266],{},"\u003Coptgroup>"," , or ",[56,1269,1270],{},"\u003Cdatalist>"," elements. The possibility of ",[15,1273,1274],{},"having an empty",[56,1276,1252],{}," can be useful if you don’t want to suggest which option users should select, and which can be useful when you want to design user-friendly forms.",[41,1279,1281],{"id":1280},"handle-figure-captions-more-flexibly","Handle figure captions more flexibly",[11,1283,1026,1284,1287,1288,1291,1292,1295,1296,1298,1299,920,1302,920,1304,1306,1307,1310,1311,920,1313,1316,1317,1319],{},[56,1285,1286],{},"\u003Cfigcaption>"," tag represents a ",[15,1289,1290],{},"caption or a legend"," belonging to the ",[56,1293,1294],{},"\u003Cfigure>"," element which is a container for visuals, such as illustrations, photos, and diagrams. Previously, the ",[56,1297,1286],{}," tag could be used only ",[15,1300,1301],{},"as the first or last child of the",[56,1303,1294],{},[15,1305,1255],{},". HTML 5.1 ",[15,1308,1309],{},"has loosened this rule",", and now ",[56,1312,1286],{},[15,1314,1315],{},"can appear anywhere"," within its ",[56,1318,1294],{}," container.",[1321,1322,1323],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}html pre.shiki code .smLnX, html code.shiki .smLnX{--shiki-default:#545454;--shiki-default-font-style:italic}",{"title":54,"searchDepth":76,"depth":76,"links":1325},[1326,1327,1328,1329,1330,1331,1332,1333,1334,1335],{"id":43,"depth":76,"text":44},{"id":220,"depth":76,"text":221},{"id":460,"depth":76,"text":461},{"id":615,"depth":76,"text":616},{"id":891,"depth":76,"text":892},{"id":956,"depth":76,"text":957},{"id":1036,"depth":76,"text":1037},{"id":1131,"depth":76,"text":1132},{"id":1242,"depth":76,"text":1243},{"id":1280,"depth":76,"text":1281},"2016-12-20T07:48:58.926Z","HTML 5.1 provide us with new ways of how we can use HTML to create more flexible web experiences.","md",{},true,"\u002Farticle\u002Fnew-features-of-html-5-1",{"title":5,"description":1337},"article\u002Fnew-features-of-html-5-1","\u002Fimg\u002Fhtml.jpg","vdw5m4-dY4_B6pD4v2Sylfb6ylnL-r0sluzdroNxsQY",{"id":1347,"extension":1348,"meta":1349,"stem":1360,"__hash__":1361},"author\u002Fauthor\u002FauthorDetails.json","json",{"body":1350},[1351,1355],{"id":6,"fullName":1352,"description":1353,"image":1354},"Ashwin K Shenoy","Hi! I am Ashwin, an Software Engineer and Consultant based out of Bengaluru, India.","https:\u002F\u002Fsimpletech.xyz\u002Fimg\u002Fauthor\u002Fashwin.jpg",{"id":1356,"fullName":1357,"description":1358,"image":1359},"paul","Paul Shan","Hello! I am Paul, a front end engineer and consultant based out of Bengaluru, India.","https:\u002F\u002Fashwinshenoy.com\u002Fimg\u002Fashwin2.jpg","author\u002FauthorDetails","k8atXxcwAcv_rjC8llPba18X62upiKWYGU5dL4-S4lw",1782187479879]