What Are the Two Main Parts of an HTML Document?

The two main parts of an HTML document are the head and the body. Each section contains specific information. The head section contains information that is useful to the Web browser and search engines but is not visible to the reader. The body section contains the information that you want the visitor to see. The document is specifically formatted so that Web browsers are able to parse the information and present it to the visitor correctly.

Structure of an HTML document

An HTML document must be formatted correctly to be read by a Web browser. The following is a general outline of a typical HTML document:

<!DOCTYPE> Information for Web browser and search engines Contents visible to reader

Both the tags and the tags are contained within the main tag. Both sections must be terminated with the "</>" characters for the document to be read.

Head Contents

The head section of the document contains the site's title, keywords for search engines, scripts and the location of a cascading style sheet that should be used in formatting the page. Typical HTML tags used in the head section include the , <link>, <style>, <meta> and <script> tags.</p> <section id="jwplayer-section" class="jwplayer-section"> <h2 class="jwplayer__label"> Video of the Day </h2> <div id="jwplayerContainerOuter" class="jwplayer__container-outer"> <div id="jwplayerContainer" class="jwplayer__container"> <div id="jw-player"> </div> <div id="jwplayerClose" class="jwplayer__close"> <span class="close-x"></span> </div> </div> </div> </section> <script> const cat = formatDFPCat(window.dataLayer[0].category); const scat = formatDFPCat(window.dataLayer[0].subcategory); const art = window.dataLayer[0].article_id; const lg_uuid = window.lg_uuid; const adcat1 = window.dataLayer[0].adcat1; const adcat2 = window.dataLayer[0].adcat2; const adcat3 = window.dataLayer[0].adcat3; const adcat4 = window.dataLayer[0].adcat4; const article_id = window.dataLayer[0].article_id; const category = formatDFPCategory(window.dataLayer[0].category); const subcategory = formatDFPCategory(window.dataLayer[0].subcategory); const ctype = window.dataLayer[0].pagetype; const pagetype = formatDFPPagetype(window.dataLayer[0].pagetype, window.dataLayer[0].subpagetype); const subpagetype = window.dataLayer[0].subpagetype; const topic1 = window.dataLayer[0].topic1; const topic2 = window.dataLayer[0].topic2; const topic3 = window.dataLayer[0].topic3; let tags = ["Group 5"] || []; tags = tags.map((tag) => { return tag.replace(/\s/g, '').replace(/-/g, '').toLowerCase() }).join(','); var vastTag = `https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/6117/techwalla.jw&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=lg_uuid%3D${lg_uuid}%26cat%3D${cat}%26scat%3D${scat}%26art%3D${art}%26tags%3D${tags}%26adcat1%3D${adcat1}%26adcat2%3D${adcat2}%26adcat3%3D${adcat3}%26adcat4%3D${adcat4}%26article_id%3D${article_id}%26category%3D${category}%26subcategory%3D${subcategory}%26ctype%3D${ctype}%26pagetype%3D${pagetype}%26subpagetype%3D${subpagetype}%26topic1%3D${topic1}%26topic2%3D${topic2}%26topic3%3D${topic3}%26[TARGETING_PLACEHOLDER]%22&correlator=`; const jwpState = { adCompleted: false, adRequest: false, // pause video if closed when sticky and closed and no ad was requested allowSticky: true, // don't allow sticky again when player was sticky and closed isSticky: false, jwpHandler: {}, needToPause: false, // pause video after ad plays if closed when sticky }; const publisherConfig = { "siteID": 247074, "videoCommonArgs" : { "protocols": [2, 3, 5, 6], "mimes": ["video/mp4", "video/webm", "application/javascript"], "apiList": [1, 2] } }; function showJwplayer () { return (!isMobile()) } function pushToDataLayer ({ event, message, tag, size }) { window.dataLayer.push({ 'event': event || '', 'message': message || '', 'tag': tag || '', 'size': size || '', }) } function getJwplayerSize () { return (jwpState.isSticky) ? 'resized' : 'fullsize' } function setJwplayerStickiness (isSticky) { jwpState.isSticky = isSticky const $jwplayerContainer = document.getElementById('jwplayerContainer') if (!$jwplayerContainer) { return } if (isSticky) { $jwplayerContainer.classList.add('jwplayer__container--sticky') } else { $jwplayerContainer.classList.remove('jwplayer__container--sticky') } } function setJwPlayerPosition () { if (!jwpState.allowSticky) { return } const $jwplayerContainerOuter = document.getElementById('jwplayerContainerOuter') if (!$jwplayerContainerOuter) { return } const rect = $jwplayerContainerOuter.getBoundingClientRect() // if no change to stickiness if (jwpState.isSticky === (rect.top < -50)) { return } $jwplayerContainerOuter.style.height = (rect.top < -50) ? `${$jwplayerContainerOuter.offsetHeight}px` : 'auto' // set video container stickiness setJwplayerStickiness(rect.top < -50) if (jwpState.isSticky) { pushToDataLayer({ event: 'player_resize', }) // resize player to be fixed player width resizeJwPlayer(300) } else { // resize player to match content width resizeJwPlayer() } } function resizeJwPlayer (width) { const $jwplayerContainerOuter = document.getElementById('jwplayerContainerOuter') if (!$jwplayerContainerOuter) { return } width = width || $jwplayerContainerOuter.offsetWidth // assume 16:9 aspect ratio const height = width * (9 / 16) jwpState.jwpHandler.resize(width, height) } function closeJwplayer () { // move video back to inside article content setJwplayerStickiness(false) jwpState.allowSticky = false jwpState.jwpHandler.setMute(true) // resize player to match content width resizeJwPlayer() // if ad has finished playing, then pause video if (jwpState.adCompleted || !jwpState.adRequest) { jwpState.jwpHandler.pause() } else { // queue up pause event for when ad has completed jwpState.needToPause = true } } function getVideoAds (masterVideoTag, callback, timeout, config) { var done = 0; var amzBids = null; var updatedMVT = null; var safeCallback = function(tag, bids) { if(!done) { done = 1; tag = tag || masterVideoTag; if (!(window.localStorage && window.localStorage._pdfps)) { window.permutive.readyWithTimeout(() => { tag = getPermutiveSegments(tag) callback(tag, bids) }, 'realtime', 1500) } else { tag = getPermutiveSegments(tag) callback(tag, bids); } } }; function getPermutiveSegments (tag) { const permutiveSegments = JSON.parse(window.localStorage._pdfps || '[]').slice(0, 250).join(',') const premutiveKeyValue = encodeURIComponent('permutive=' + permutiveSegments + '&') return tag.replace('cust_params=', 'cust_params=' + premutiveKeyValue) } setTimeout(function() { safeCallback(updatedMVT, amzBids); }, timeout || 5000); // amazon video bidding apstag.fetchBids({ slots: [{ slotID: 'videoSlotName1', sizes: [[640, 480]], mediaType: 'video' }] }, function(bids) { amzBids = bids if(updatedMVT !== null) { safeCallback(updatedMVT, amzBids); } }); // Index exchange callback window.indexapi = window.indexapi || {}; window.indexapi.deferQueue = window.indexapi.deferQueue || []; window.indexapi.deferQueue.push(function() { window.indexapi.solicitIndexVideoAds(masterVideoTag, (mvt, targeting) => { updatedMVT = mvt if(amzBids !== null) { safeCallback(updatedMVT, amzBids) } }, config); }); } var mvtCallback = function(updatedMVT, bids) { // todo remove var tag = updatedMVT.replace('[TARGETING_PLACEHOLDER]%22', ''); if(bids != null && bids.length > 0) { tag += `&scp=${bids[0].encodedQsParams}`; } jwpState.jwpHandler.playAd(tag); } document.addEventListener('DOMContentLoaded', (e) => { const player = document.getElementById('jwplayer-section'); if (!showJwplayer()) { player.style.display = 'none'; return } window.dataLayer = window.dataLayer || []; jwpState.jwpHandler = window.jwplayer('jw-player'); pushToDataLayer({ event: 'player_jwcall_attempt', }); const playlist = '//cdn.jwplayer.com/v2/playlists/09DuNs0X'; const setupConfig = { mute: true, playlist, advertising: { client: 'googima', offset: 'pre' } }; jwpState.jwpHandler.setup(setupConfig) // default google preroll ad, for dev purposes // return 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=' // register error events jwpState.jwpHandler.on('error', (e) => { player.style.display = 'none' return }) jwpState.jwpHandler.on('setupError', (e) => { // this.showPlayer = false const message = ((e) ? 'error' : 'Error: setup error') pushToDataLayer({ event: 'player_error', message, size: getJwplayerSize(), }) }) jwpState.jwpHandler.on('beforePlay', (e) => { getVideoAds(vastTag, mvtCallback, null, publisherConfig); }) jwpState.jwpHandler.on('adError', (e) => { pushToDataLayer({ event: 'ad_error', size: getJwplayerSize(), tag: e.tag, }) }) // jwplayer events jwpState.jwpHandler.on('ready', (e) => { pushToDataLayer({ event: ((e.viewable) ? 'player_impression_resized' : 'player_impression_fullsize'), message: ((e.viewable) ? 'in view' : 'not in view'), }) }) jwpState.jwpHandler.on('play', (e) => { // not in view AND resized AND muted if (!e.viewable && jwpState.isSticky && jwpState.jwpHandler.getMute()) { jwpState.jwpHandler.pause() return } const reason = e.playReason if (reason === 'interaction') { if (isMobile()) { jwpState.jwpHandler.setMute(false) } pushToDataLayer({ event: 'player_play_button', message: ((e.viewable) ? 'in view' : 'not in view'), }) } if (reason === 'autostart' || reason === 'playlist') { pushToDataLayer({ event: 'video_play', size: getJwplayerSize(), message: ((e.viewable) ? 'in view' : 'not in view'), }) } // video starts playing after the sticky player was closed when an ad was playing if (jwpState.needToPause) { jwpState.needToPause = false jwpState.jwpHandler.pause() } }) jwpState.jwpHandler.on('complete', (e) => { pushToDataLayer({ event: 'video_complete', size: getJwplayerSize(), }) }) jwpState.jwpHandler.on('adClick', (e) => { pushToDataLayer({ event: 'ad_click', size: getJwplayerSize(), tag: e.tag, }) }) jwpState.jwpHandler.on('adRequest', (e) => { jwpState.adRequest = true pushToDataLayer({ event: 'ad_tagcalled', size: getJwplayerSize(), tag: e.tag, }) }) jwpState.jwpHandler.on('adPlay', (e) => { if (e.oldjwpState !== 'paused') { pushToDataLayer({ event: 'ad_play', size: getJwplayerSize(), tag: e.tag, }) } }) jwpState.jwpHandler.on('adComplete', (e) => { pushToDataLayer({ event: 'ad_complete', size: getJwplayerSize(), tag: e.tag, }) jwpState.adCompleted = true }) jwpState.jwpHandler.on('adSkipped', (e) => { jwpState.adCompleted = true }) // window events window.addEventListener('scroll', setJwPlayerPosition, false) window.addEventListener('resize', (e) => { // no reason to resize if it's sticky if (!jwpState.isSticky) { resizeJwPlayer() } }, false) document.getElementById('jwplayerClose').addEventListener('click', closeJwplayer, false) }) </script> <p class="section-content">The <title> tag defines the title of the document. The <link> tag links an external resource, such as a CSS file, to the document. The <style> tag defines document styles. The <meta> tag is used to define the author, keywords and description of the document. The <script> tag defines a script that is to be run on the visitor's computer. If the head section is not placed in the document, the contents of the document are still displayed by the browser.</p> <div id="" class="module-ad-wrapper initial-page"> <div id="slot1-2" class=" slot module " data-device="mobile" data-loc="ad_2" data-slot="slot1-2" data-sizes="[[300, 250], [320, 50], [320, 100]]"></div> </div> <script> if ((isMobile() && 'mobile' === 'mobile') || (!isMobile() && 'mobile' === 'desktop')) { googletag.cmd.push(function() { googletag.display("slot1-2"); }); } </script> <h2 class="section-title">Body Contents</h2> <p class="section-content">The body section is used to format the actual Web page. Most of the HTML tags, such as the paragraph tag (<p class="section-content">), the anchor tag (<a>), the headings tags (<h1> to <h6>) and the section tag (<div>) are used in this section of the document. Server side scripts are also placed in this section of the document. If you do not have a body section in your HTML document, nothing is displayed in the Web browser.</p> <h2 class="section-title">DOCTYPE</h2> <p class="section-content">The only thing not included between the <html> tags is the DOCTYPE declaration. If used, it should be the first line in the HTML document. It is used to tell the Web browser what version of HTML the document is using. The browser uses this declaration to render the page correctly. The DOCTYPE declaration can be ommitted, but the browser may not present your page correctly.</p> <div id="" class="module-ad-wrapper ad-desktop-gpt initial-page"> <div id="inline1-3" class=" inline module ad-desktop-gpt" data-device="desktop" data-loc="inline_3" data-slot="inline1-3" data-sizes="[[728, 90],[300, 250]]"></div> </div> <script> if ((isMobile() && 'desktop' === 'mobile') || (!isMobile() && 'desktop' === 'desktop')) { googletag.cmd.push(function() { googletag.display("inline1-3"); }); } </script> <div id="" class="module-ad-wrapper initial-page"> <div id="slot1-3" class=" slot module " data-device="mobile" data-loc="ad_3" data-slot="slot1-3" data-sizes="[[300, 250], [320, 50], [320, 100]]"></div> </div> <script> if ((isMobile() && 'mobile' === 'mobile') || (!isMobile() && 'mobile' === 'desktop')) { googletag.cmd.push(function() { googletag.display("slot1-3"); }); } </script> </article> <div class="article-close"></div> <div id="adsense-link-below-336"></div> <script> if (!isMobile()) { var styleframeLinkBelow336 = document.createElement('ins'); styleframeLinkBelow336.className = 'adsbygoogle'; styleframeLinkBelow336.dataset.adClient = "pub-0316265116163263"; styleframeLinkBelow336.dataset.adSlot = "4465103631"; styleframeLinkBelow336.style.display = "inline-block"; styleframeLinkBelow336.style.width = "440px"; styleframeLinkBelow336.style.height = "200px"; styleframeLinkBelow336.dataset.adFormat = "link"; var below336AdsenseLinkUnit = document.getElementById("adsense-link-below-336"); below336AdsenseLinkUnit.appendChild(styleframeLinkBelow336); (adsbygoogle = window.adsbygoogle || []).push({}); } </script> <div id="taboola-below-article-thumbnails" class="taboola"></div> <script type="text/javascript"> window._taboola = window._taboola || []; _taboola.push({ mode: 'thumbnails-a', container: 'taboola-below-article-thumbnails', placement: 'Below Article Thumbnails', target_type: 'mix' }); </script> <a class="fb-button-show" data-fb-target="fb-initial0" onclick="showFacebookComments(this)" data-event="expand comments"> <div class="fb-comment-button"> <div class="fb-icon"> <icon class="social-share-facebook svg"></icon> </div> Show Comments </div> </a> <div class="fb-comments-wrapper" id="fb-initial0"> <div class="fb-comments" data-href="https://www.techwalla.com/articles/what-are-the-two-main-parts-of-an-html-document" data-width="970" data-numposts="5"></div> </div> </section> <aside class="right-rail"> <div id="" class="module-ad-wrapper initial-page"> <div id="rightrail1-1" class=" rightrail module " data-device="desktop" data-loc="atf" data-slot="rightrail1-1" data-sizes="[[300, 250], [300, 600]]"></div> </div> <script> if ((isMobile() && 'desktop' === 'mobile') || (!isMobile() && 'desktop' === 'desktop')) { googletag.cmd.push(function() { googletag.display("rightrail1-1"); }); } </script> <div id="adsense-link-right-rail"></div> <script> if (!isMobile()) { var styleframeLinkRightRail = document.createElement('ins'); styleframeLinkRightRail.className = 'adsbygoogle'; styleframeLinkRightRail.dataset.adClient = "pub-0316265116163263"; styleframeLinkRightRail.dataset.adSlot = "7087397541"; styleframeLinkRightRail.style.display = "block"; styleframeLinkRightRail.dataset.adFormat = "link"; var rightrailAdsenseLinkUnit = document.getElementById("adsense-link-right-rail"); rightrailAdsenseLinkUnit.appendChild(styleframeLinkRightRail); (adsbygoogle = window.adsbygoogle || []).push({}); } </script> <div class="section-heading-container hidden-on-mobile"> <h2 class="section-heading">Related Articles</h2> </div> <div class="related-articles hidden-on-mobile"> <article class="related-article related-article--around-the-home"> <a href="/articles/how-to-center-an-image-using-html-programming" class="image" data-event="rc_right_rail" data-info="0"> <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://img.techwallacdn.com/100/cpcd/upload/6000/000/70/9/176079.jpg" data-srcset="https://img.techwallacdn.com/100/cpcd/upload/6000/000/70/9/176079.jpg 1x, https://img.techwallacdn.com/220/cpcd/upload/6000/000/70/9/176079.jpg 2x" alt="How to Center an Image Using HTML Programming" /> </a> <div class="info"> <h2 class="title"> <a href="/articles/how-to-center-an-image-using-html-programming" title="How to Center an Image Using HTML Programming" data-event="rc_right_rail" data-info="0">How to Center an Image Using HTML Programming</a> </h2> <div class="category"> <a href="/around-the-home">Around The Home</a> </div> <div class="subcategory"> <a href="/productivity">Productivity</a> </div> <div class="author"><span class="author-by">By: </span>Techwalla Editor</div> </div> </article> <article class="related-article related-article--around-the-home"> <a href="/articles/scroll-marquee-multiple-images" class="image" data-event="rc_right_rail" data-info="1"> <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="" data-srcset=" 1x, 2x" alt="How to Scroll a Marquee With Multiple Images" /> </a> <div class="info"> <h2 class="title"> <a href="/articles/scroll-marquee-multiple-images" title="How to Scroll a Marquee With Multiple Images" data-event="rc_right_rail" data-info="1">How to Scroll a Marquee With Multiple Images</a> </h2> <div class="category"> <a href="/around-the-home">Around The Home</a> </div> <div class="subcategory"> <a href="/productivity">Productivity</a> </div> <div class="author"><span class="author-by">By: </span>Chad Buleen</div> </div> </article> <article class="related-article related-article--around-the-home"> <a href="/articles/what-does-html-stand-for" class="image" data-event="rc_right_rail" data-info="2"> <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://img.techwallacdn.com/100/photos.demandstudios.com/getty/article/103/148/467341943.jpg" data-srcset="https://img.techwallacdn.com/100/photos.demandstudios.com/getty/article/103/148/467341943.jpg 1x, https://img.techwallacdn.com/220/photos.demandstudios.com/getty/article/103/148/467341943.jpg 2x" alt="What Does HTML Stand for?" /> </a> <div class="info"> <h2 class="title"> <a href="/articles/what-does-html-stand-for" title="What Does HTML Stand for?" data-event="rc_right_rail" data-info="2">What Does HTML Stand for?</a> </h2> <div class="category"> <a href="/around-the-home">Around The Home</a> </div> <div class="subcategory"> <a href="/productivity">Productivity</a> </div> <div class="author"><span class="author-by">By: </span>Jennifer Claerr</div> </div> </article> <article class="related-article related-article--around-the-home"> <a href="/articles/how-to-reduce-the-spacing-between-lines-in-html" class="image" data-event="rc_right_rail" data-info="3"> <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://img.techwallacdn.com/100/clsd/getty/cache.gettyimages.com/279f985204f74f2b8577540951ddbb74.jpg" data-srcset="https://img.techwallacdn.com/100/clsd/getty/cache.gettyimages.com/279f985204f74f2b8577540951ddbb74.jpg 1x, https://img.techwallacdn.com/220/clsd/getty/cache.gettyimages.com/279f985204f74f2b8577540951ddbb74.jpg 2x" alt="How to Reduce the Spacing Between Lines in HTML" /> </a> <div class="info"> <h2 class="title"> <a href="/articles/how-to-reduce-the-spacing-between-lines-in-html" title="How to Reduce the Spacing Between Lines in HTML" data-event="rc_right_rail" data-info="3">How to Reduce the Spacing Between Lines in HTML</a> </h2> <div class="category"> <a href="/around-the-home">Around The Home</a> </div> <div class="subcategory"> <a href="/productivity">Productivity</a> </div> <div class="author"><span class="author-by">By: </span>Richard Graham</div> </div> </article> <article class="related-article related-article--around-the-home"> <a href="/articles/html-coding-to-change-the-width-of-a-paragraph" class="image" data-event="rc_right_rail" data-info="4"> <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://img.techwallacdn.com/100/photos.demandstudios.com/getty/article/83/133/186309877.jpg" data-srcset="https://img.techwallacdn.com/100/photos.demandstudios.com/getty/article/83/133/186309877.jpg 1x, https://img.techwallacdn.com/220/photos.demandstudios.com/getty/article/83/133/186309877.jpg 2x" alt="HTML Coding to Change the Width of a Paragraph" /> </a> <div class="info"> <h2 class="title"> <a href="/articles/html-coding-to-change-the-width-of-a-paragraph" title="HTML Coding to Change the Width of a Paragraph" data-event="rc_right_rail" data-info="4">HTML Coding to Change the Width of a Paragraph</a> </h2> <div class="category"> <a href="/around-the-home">Around The Home</a> </div> <div class="subcategory"> <a href="/productivity">Productivity</a> </div> <div class="author"><span class="author-by">By: </span>Steve McDonnell</div> </div> </article> <article class="related-article related-article--around-the-home"> <a href="/articles/how-to-make-columns-in-html" class="image" data-event="rc_right_rail" data-info="5"> <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://img.techwallacdn.com/100/photos.demandstudios.com/49/2/fotolia_8847103_XS.jpg" data-srcset="https://img.techwallacdn.com/100/photos.demandstudios.com/49/2/fotolia_8847103_XS.jpg 1x, https://img.techwallacdn.com/220/photos.demandstudios.com/49/2/fotolia_8847103_XS.jpg 2x" alt="How to Make Columns in HTML" /> </a> <div class="info"> <h2 class="title"> <a href="/articles/how-to-make-columns-in-html" title="How to Make Columns in HTML" data-event="rc_right_rail" data-info="5">How to Make Columns in HTML</a> </h2> <div class="category"> <a href="/around-the-home">Around The Home</a> </div> <div class="subcategory"> <a href="/productivity">Productivity</a> </div> <div class="author"><span class="author-by">By: </span>ScottS</div> </div> </article> </div> <div id="" class="module-ad-wrapper initial-page"> <div id="rightrail1-2" class=" rightrail module " data-device="desktop" data-loc="btf" data-slot="rightrail1-2" data-sizes="[[300, 250], [300, 600]]"></div> </div> <script> if ((isMobile() && 'desktop' === 'mobile') || (!isMobile() && 'desktop' === 'desktop')) { googletag.cmd.push(function() { googletag.display("rightrail1-2"); }); } </script> </aside> </div> </div> <div class="article-separator"></div> <script type="text/javascript"> window.addEventListener('scroll', function() { if (!window.hasPinterest) { var scriptTag = document.createElement('script'); scriptTag.src = '//assets.pinterest.com/js/pinit.js' scriptTag.setAttribute('data-pin-hover', 'true') scriptTag.setAttribute('data-pin-tall', 'true') scriptTag.setAttribute('data-pin-save', 'true') if (isMobile()) { scriptTag.setAttribute('data-ping-save', 'false') } var parent =document.getElementsByTagName('script')[0]; parent.parentNode.insertBefore(scriptTag, parent) window.hasPinterest = true; } }); </script> <div id="js-adhesion" class="module-ad-wrapper adhesion initial-page"> <div id="adhesion1-1" class=" adhesion module adhesion" data-device="mobile" data-loc="adhesion" data-slot="adhesion1-1" data-sizes="[[320, 50], [320, 100]]"></div> </div> <script> // instantiate adhesion counter if (!window.adhesionCounter) { window.adhesionCounter = 1 } window.testadhesion = () => { // limit the number of adhesion refreshes if (window.adhesionCounter >= 6) { return } // destroy adhesion div const $adhesionWrapper = document.getElementById('js-adhesion') $adhesionWrapper.innerHTML = '' // increment global adhesion counter window.adhesionCounter++ // build and inject new adhesion div const adSlot = 'adhesion1-' + window.adhesionCounter const $newAdhesionAd = document.createElement('div') $newAdhesionAd.setAttribute('id', adSlot) $newAdhesionAd.setAttribute('class', ' adhesion module adhesion') $newAdhesionAd.setAttribute('data-device', 'mobile') $newAdhesionAd.setAttribute('data-loc', 'adhesion') $newAdhesionAd.setAttribute('data-slot', adSlot) $newAdhesionAd.setAttribute('data-sizes', [[320, 50], [320, 100]]) $adhesionWrapper.appendChild($newAdhesionAd) var initialSlotsAdhesion = []; var amazonSlotsAdhesion = []; amazonSlotsAdhesion.push({ slotID: 'adhesion1-' + window.adhesionCounter, sizes: [[320, 50], [320, 100]], }); googletag.cmd.push(function() { // googletag.pubads().setTargeting("envr", "stage"); googletag.pubads().setTargeting("cat", dataLayer[0].category.toLowerCase().replace(/[^a-zA-Z0-9]/g, "")); googletag.pubads().setTargeting("scat", dataLayer[0].subcategory.toLowerCase().replace(/[^a-zA-Z0-9]/g, "")); googletag.pubads().setTargeting("tags", dataLayer[0].tags); googletag.pubads().setTargeting("lg_uuid", window.lg_uuid); // ET-2388 Amazon header bidding !function(a9,a,p,s,t,A,g){if(a[a9])return;function q(c,r){a[a9]._Q.push([c,r])}a[a9]={init:function(){q("i",arguments)},fetchBids:function(){q("f",arguments)},setDisplayBids:function(){},_Q:[]};A=p.createElement(s);A.async=!0;A.src=t;g=p.getElementsByTagName(s)[0];g.parentNode.insertBefore(A,g)}("apstag",window,document,"script","//c.amazon-adsystem.com/aax2/apstag.js"); apstag.init({ pubID: 3066, adServer: 'googletag' }); // IAS window.iasInitialAdsHaveBeenFetched = false; // create closure window.requestAds = function (slots) { return function () { apstag.fetchBids({ slots: slots, timeout: 2e3, }, function(bids) { if (window.adhesionFired === 'triggered') { return } // trigger the first request to DFP googletag.cmd.push(function() { initialSlotsAdhesion.push( googletag .defineSlot(adUnitCode + adSlot, [[320, 50], [320, 100]], adSlot) .addService(googletag.pubads()).setTargeting('loc', 'adhesion') ); apstag.setDisplayBids(); googletag.pubads().refresh(initialSlotsAdhesion); }); }); } } // Set up IAS pet.js var iasDataHandler, __iasPET = __iasPET || {}; __iasPET.queue = __iasPET.queue || []; __iasPET.pubId = '928482'; var IASPET_TIMEOUT = 2000; var __iasPETTimeoutRequestAds = setTimeout(function () { if (!window.iasInitialAdsHaveBeenFetched) { window.iasInitialAdsHaveBeenFetched = true; window.requestAds(amazonSlotsAdhesion)(); } }, IASPET_TIMEOUT); iasDataHandler = function(adSlotData) { return function () { if (!window.iasInitialAdsHaveBeenFetched) { window.iasInitialAdsHaveBeenFetched = true clearTimeout(__iasPETTimeoutRequestAds); __iasPET.setTargetingForGPT(); window.requestAds(adSlotData)(); } } }; // make PET request googletag.cmd.push(function() { var gptSlots = googletag.pubads().getSlots(); // pop off the last one gptSlots = gptSlots.slice(gptSlots.length - 1); var iasPETSlots = []; for (var i = 0; i < gptSlots.length; i++) { var sizes = gptSlots[i].getSizes().map(function(size) { if (size.getWidth && size.getHeight) { return [size.getWidth(), size.getHeight()]; } return [1, 1]; }) iasPETSlots.push({ adSlotId: gptSlots[i].getSlotElementId(), size: sizes, adUnitPath: gptSlots[i].getAdUnitPath() }); } __iasPET.queue.push({ adSlots: iasPETSlots, dataHandler: iasDataHandler(amazonSlotsAdhesion) }); }); }); } if ((isMobile() && 'mobile' === 'mobile') || (!isMobile() && 'mobile' === 'desktop')) { googletag.cmd.push(function() { googletag.display("adhesion1-1"); }); } </script> </main> <footer class="footer"> <div class="body-row black"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-12 col-lg-2"> <div id="bottomSocial"> <a data-event="facebook" target="_blank" href="https://www.facebook.com/pages/Techwalla/1116406528374498" aria-label="Share on Facebook" class="social_facebook footer-social--facebook svg"></a> <a data-event="twitter" target="_blank" href="https://twitter.com/techwallahq" aria-label="Share on Twitter" class="social_twitter footer-social--twitter svg"></a> </div> </div> <div class="col-xs-12 col-lg-7"> <div id="footer-menu"> <ul> <li><a href="/how-we-score">HOW WE SCORE</a></li> <li><a href="/about">ABOUT US</a></li> <li><a href="/about#contact">CONTACT US</a></li> <li><a href="/terms-of-use">TERMS</a></li> <li><a href="/privacy-policy">PRIVACY POLICY</a></li> <li><a href="/copyright-policy">COPYRIGHT POLICY</a></li> <li><a href="/advertise">Advertise</a></li> </ul> </div> </div> <div class="col-xs-12 col-md-12 col-lg-3"> <div class="newsletter"> <form class="tw-newsletter-footer"> <div class="input-group form-group newsletter-signup"> <input type="email" name="email" placeholder="Enter email for updates" aria-label="email address" class="form-control" required> <div type="submit" class="input-group-btn"><button class="btn newsletter-btn" aria-label="submit button"><span class="footer-capture-submit svg"></span></button></div> <div class="message-invalid"> <p class="copy">An error occurred. Try again later.</p> </div> </div> </form> <div class="message-success">Thanks for signing up!</div> </div> </div> </div> </div> </div> <div id="attribution" class="body-row black"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="leaf-logo"></div> </div> <div id="copyright" class="col-xs-12">© 2020 Leaf Group Ltd. Leaf Group Media</div> </div> </div> </div> </footer> <script type="text/javascript" src="/ui/js/common.js?v=31be71f4011a080090addd818ae78735b339a908" async="async" crossorigin="anonymous"></script> <!-- Capture Modals --> <!-- Capture --> <div id="email-capture" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Capture content--> <div class="modal-content email-capture"> <div class="modal-header"> <div class="x-close email-capture-close-icon svg" data-dismiss="modal" alt="close modal"> </div> </div> <div class="modal-body"> <h4 class="modal-title">Get great tech advice delivered to your inbox.</h4> <p>Keep your family productive, connected, entertained, and safe.</p> <div class="main-content"> <form class="form-centered auth-form email-form" method="post" action="/subscribe" autocomplete="off"> <fieldset class="form-group"> <input type="text" name="email" id="email" class="form-control" placeholder="Email" aria-label="Input email" required /> <div class="message-invalid"> <p class="copy">Please enter a valid email.</p> </div> </fieldset> <fieldset class="form-group"> <input type="submit" class="submit btn" value="SUBSCRIBE" /> </fieldset> </form> </div> </div> </div> </div> </div> <!-- Quantcast Tag --> <script> var ezt = ezt ||[]; (function(){ var elem = document.createElement('script'); elem.src = (document.location.protocol == "https:" ? "https://secure" : "http://pixel") + ".quantserve.com/aquant.js?a=p-4dIM5nVs2rFio"; elem.async = true; elem.type = "text/javascript"; var scpt = document.getElementsByTagName('script')[0]; scpt.parentNode.insertBefore(elem,scpt); }()); var quantcastCategory = 'Around The Home'; var quantcastSubCategory = 'Productivity'; var quantcastLabel = 'Techwalla'; quantcastLabel += quantcastCategory ? ('.' + quantcastCategory) : ''; quantcastLabel += quantcastSubCategory ? ('.' + quantcastSubCategory) : ''; var qcdata = { qacct: 'p-4dIM5nVs2rFio', uid: '', labels: quantcastLabel, } ezt.push(qcdata); </script> <noscript> <img src="//pixel.quantserve.com/pixel/p-4dIM5nVs2rFio.gif" style="display: none;" border="0" height="1" width="1" alt="Quantcast"/> </noscript> <!-- End Quantcast Tag --> </body> </html>