The HTML 5 Layout Elements Rundown

TML 5 is an interesting beastie. The specification was not planned; The W3C was committed to HTML 4.1 as the last word in HTML. As such, most of the requests for HTML 5 came from the HTML user community itself, largely through the advent of the Web Hypertext Application Technology Working Group (WHATWG). The push from WHATWG was strong enough to prompt the formation of a HTML 5 working group a couple of years ago. Since then, the HTML 5 working group has slowly gone through the process of taking a somewhat hand-waving specification and recasting it in W3C terms, along with all the politics that the process entails.

On April 23, 2009, the HTML 5 group released the most recent draft of the specification. Overall, it represents a considerable simplification from the previous release, especially as a number of initially proposed changes to the specification have been scaled back. The group defined roles for the proposed changes elsewhere.

HTML 5 is a broad specification, and consequently, dozens of distinct changes?more than a single article can reasonably cover in any detail?occurred between HTML 4 and 5. This article focuses on the HTML 5 layout elements. Subsequent articles will examine forms-related changes (which are substantial), the new media elements, and DOM-related changes.

General Changes

One of the most significant changes in HTML 5 is that both the HTML and XHTML formats are recognized as legitimate expressions of the specification. This is a major change that has among its implications the requirement for browsers to recognize fully the XHTML version of the syntax (this currently is not the case with Internet Explorer, for instance). This also means that all browsers should recognize application/xhtml+xml or application/xml as legitimate mime-types for encoding HTML documents. The HTML document DocType has also undergone some revisions. The long doctype of HTML 4 has been replaced with the far shorter :

              Example Document                  

Example Document

This is an example document

This represents the continued “de-SGMLification” of HTML, which has been underway for a number of years. While this shortened doctype construct is still legitimate SGML, the heavy SGML trappings of previous years are disappearing in favor of the simplified XML interface.

HTML 5 also recognizes SVG and MathML as additional valid formats within even HTML documents. Such instances do not necessarily need to incorporate namespaces in HTML, although they are of course required in XHTML.

Layout Element Changes

Beyond the media elements (which will be deployed in the upcoming Firefox 3.5 implementation), a number of the new elements introduced into HTML 5 are intended to establish structure or divisions on the page.

and

The

tag is intended for use as a container to hold article content, such as the main story on a web page. Similarly, the

tag subdivides an article into individual sections, making it easier to identify and navigate such content. Within each of these, the headings tags (

,

, etc.) serve to demarcate header titles, indicating the level of importance of each particular section.

Two of the biggest mistakes made in the original HTML specification were not having a formal containment model for sections?content is simply a linear narrative with the occasional header rather than sections within sections?and reserving the </tt> element early on as the title for the page itself within the <tt><head></tt> element. </p> <p>One consequence of the latter mistake was that it prohibited the use of a generic <tt><title></tt> element as a section, image, table, or other structure label. At the same time, there no longer was a direct one-to-one correlation between the title of a document and the actual title of the main body (the article) within that document. At this stage, there’s no real way to change this; <tt><title></tt> is too intimately embedded into the framework of the web to change its definition. </p> <p>However, the use of the <tt></p> <article></tt> and <tt></p> <section></tt> groups indicates that the emerging HTML document bears an increasingly close resemblance to <a href="http://wiki.docbook.org/topic/DocBook" target="_blank">DocBook</a>. What’s more, such a containment organization will:</p> <ul> <li>Make things such as automatic generation of meaningful tables of content far easier.</li> <li>Make it generally simpler to lay out content in meaningful ways.</li> <li>Make storing subordinate content within web pages for later inclusion more efficient, as you need only store the articles rather than the whole page.</li> </ul> <p><h3><span class="pfhead"></p> <hgroup></span></h3> <p>HTML 5 includes a <tt></p> <hgroup></tt> element that can hold subordinate <tt></p> <h1></tt>, <tt></p> <h2></tt>, etc. elements. This at least ameliorates one of the trickier problems involved with layout: providing a semantically consistent way of creating subtitles, especially at different levels in a document. For instance, take the following snippet: </p> <pre><code><article> <hgroup> <h1>An Overview of HTML 5</h1> <h2>Looking at Spec Changes</h2> </hgroup> <p>This is the first paragraph.</p> <p>This is the second paragraph.</p> <section> <hgroup> <h1>Tags</h1> <h2>Laying out the markup</h2> </hgroup> <p>This is the subsection P1</p> ... </section></article></code></pre> <p>This markup shifts the <tt>h1</tt> tag from a single document-level tag to something bound to the scope of its container, whether article or section. Using <tt></p> <hgroup></tt> also makes it easier to put together tables of content. As HTML becomes more widely used for purposes other than simple browser display, changes like this should serve to make the language sufficiently flexible for print or other media organization. </p> <p><h3><span class="pfhead"></p> <aside></span></h3> <p>The <tt></p> <aside></tt> element establishes inline sidebars or related content. In a magazine, short articles often run within the context of a larger article. For instance, a review of HTML 5 may contain a quick summary of the relevant tags, as a floating block above or below the main article. While this is certainly feasible on the web, the implementation typically was left to CSS gurus (usually as part of a larger organizational stylesheet) because it was so difficult. The <tt></p> <aside></tt> element performs the same function, but it lets the browser establish a default style-setting so that people can use it semantically without needing to know the gory details of supporting it in CSS. </p> <p><h3><span class="pfhead"></p> <nav></span></h3> <p>The <tt></p> <nav></tt> element uses a similar rationale to <tt></p> <aside></tt>. Any given page usually draws a fairly clean line between the navigational elements and the primary content. One or more <tt></p> <nav></tt> elements in a page clearly delineates what is navigational and what is content. As with <tt></p> <aside></tt>, the role of <tt></p> <nav></tt> is semantic more than presentational; it clearly identifies a given purpose for the content within the <tt></p> <nav></tt>. A browser may then take this content and, without any CSS, lay it out in a cohesive manner. </p> <p><h3><span class="pfhead"></p> <header></span> and <span class="pfhead"></p> <footer></span></h3> <p>The <tt></p> <header></tt> and <tt></p> <footer></tt> elements work as additional page-level organizational elements. Header content appears at the top of the page, and footer content at the bottom. Both may end up getting repeated on each page when HTML documents are printed. </p> <p>Typically, header content contains a web site’s banner and related content, and it may contain a <tt>menu</tt> or <tt>nav</tt> element as well. The <tt></p> <footer></tt> element, on the other hand, usually runs along the bottom of the page (though it may also be at the bottom of an article or section) and contains boilerplate legal content, secondary navigational links to pages and email, or related communication content. </p> <p><h3><span class="pfhead"></p> <menu></span></h3> <p>There are a plethora of navigational structures within HTML 5, but the <tt></p> <menu></tt> element may be one of the most important. In the abstract, a menu is a sequence of commands. In practice, a menu is a visible structure that can be one of three types: </p> <ul> <li><em>Context Menu:</em> The menu items contained within the menu replace the context menu for that page. The commands within the menu are available only when the user initiates the context menu sequence, typically by right- or option-clicking on a page.</li> <li><em>Toolbar:</em> When a toolbar menu is instantiated, it creates a toolbar if one doesn’t already exist and establishes a menu on the toolbar in the order encountered.</li> <li><em>List:</em> The list items are simply enumerated either as a list (via the <tt> <li></tt> tag) or inline via other elements. This is often useful when creating custom menu formats using CSS.</li> </ul> <p>Each of the menus make use of <tt></p> <li></tt> elements in order to define each entry, with the <tt><command></tt>, <tt><a></tt>, <tt><button></tt>, or related command-enabled elements actually performing the actions. For instance, if you wished to create a context menu that handled editing a blog, you’d probably build something like the following: <pre><code><menu type="context> <li><command label="Clear Record" action="this.clear()"/></li> <li><command label="Submit Record" action="this.submit('submission-agent'"/></li> <hr/> <!-- this creates a break --></hr> <li><command label="Search Records" action="this.search('submission-agent'"/></li></menu></code></pre> <p>Not surprisingly, menus can get very complex. Moreover, the menu specifications still don’t appear as well established as those across most of the navigation elements. </p> <p><h3><span class="pfhead"><dialog></span></h3> <p>In a couple of cases, HTML 5 repurposes existing content for more contemporary uses. As an example, one set of terms that are almost never used anymore are the <tt></p> <dl></tt>, <tt></p> <dt></tt>, and <tt></p> <dd></tt> tags, used initially for dictionary entries (<u>d</u>ictionary <u>l</u>isting, <u>d</u>ictionary <u>t</u>erm, <u>d</u>ictionary <u>d</u>efinition). While <tt></p> <dl></tt> is still supported, HTML 5 introduces the <tt><dialog></tt> tag and then uses <tt></p> <dt></tt> and <tt></p> <dd></tt> as speaker identifier and what’s being spoken, respectively. Here is an example of <tt><dialog></tt> using a segment from the classic Abbot and Costello comedy routine, “Who’s on First:” </p> <pre><code><dialog> <dt> Costello</dt> <dd> Look, you gotta first baseman?</dd> <dt> Abbott</dt> <dd> Certainly.</dd> <dt> Costello</dt> <dd> Who's playing first?</dd> <dt> Abbott</dt> <dd> That's right.</dd> <dt> Costello</dt> <dd> When you pay off the first baseman every month, who gets the money?</dt> <dt> Abbott</dt> <dd> Every dollar of it.</dt></dialog></code></pre> <p>The result is:</p> <pre>Costello Look, you gotta first baseman? Abbott Certainly. Costello Who's playing first? Abbott That's right. Costello When you pay off the first baseman every month, who gets the money? Abbott Every dollar of it.</pre> <p>The beauty of this is that most older browsers will still render this more or less properly because the dictionary listing and dialog terms are very similar in underlying structure. </p> <p><h3><span class="pfhead"><mark></span></h3> <p>HTML 5 also adds a few new inline tags. The <tt><mark></tt> tag is designed to emphasize text content in a quotation that was added by the current writer, not the original quoted writer (such as emphasizing a particular statement within a paragraph). For instance, if you had a paragraph along the lines of: </p> <pre><code><p>The economic conditions continue to deteriorate, <mark>even as the media focus on "green shoots" showing apparent growth in various sectors</mark> (emphasis mine).</p></pre> <p></code></p> <p>The result is:</p> <blockquote><p>The economic conditions continue to deteriorate, <em>even as the media focus on "green shoots" showing apparent growth in various sectors</em> (emphasis mine).</p></blockquote> <p>In addition to emphasizing previously quoted content, <tt>mark</tt> could be used to mark search terms in a retrieved web page or similar content. </p> <p><h3><span class="pfhead"><time></span></h3> <p>The <tt><time></tt> element is used to wrap a specific date, time, or period of time in a semantic label, making it easier to build applications that can parse the document and build timelines. Here is an example for the Web 2.0 Conference:</p> <pre><code><div class="event"> <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a> <span class="summary">Web 2.0 Conference</span>: <time class="dtstart" datetime="2007-10-05">October 5</time> - <time class="dtend" datetime="2007-10-20">19</time>, at the <span class="location">Argent Hotel, San Francisco, CA</span> </div></pre> <p></code></p> <p><h3><span class="pfhead"></p> <details></span></h3> <p>The <tt></p> <details></tt> element is perhaps more useful than <tt><time></tt>. It actually resolves a fairly common challenge for HTML: placing inline, detailed content into a page that shows up only when a link is activated. Tooltips were one way of solving this problem, but because most tooltip mechanisms (<tt>@alt</tt> or <tt>@title</tt> attributes) didn't allow for inline markup, the content could only be unmarked text. The <tt></p> <details></tt> element changes this by using a <tt></p> <legend></tt> element to render the link content, which when activated via a click or rollover would then pop up the contained, marked up text: </p> <pre><code><p>The conference was most notable for it's coverage of <details><legend>HTML 5</legend> The successor to HTML 4 that's intended to work with new web technologies such as <i>AJAX</i> and inline graphics.</details> as well as other new standards.</p></pre> <p></code> </p> <p>When rendered, the phrase "HTML 5" in the text would be highlighted in some manner. Also, when the user rolled over the link, the detailed text would be displayed in a popup or similar type of inline display. </p> <p><h3><span class="pfhead"></p> <figure></span></h3> <p>The <tt></p> <figure></tt> element provides yet another DocBook-like feature. Images, as originally defined, were generally seen as standalone entities in HTML. However, in many cases, it may be advantageous to have a wrapper around images (especially for blog content) that can also showcase a caption and possibly a sub-leader. This is the role of the <tt></p> <figure></tt> element. In addition to acting as a container, specific identification of <tt></p> <figure></tt> elements makes it possible to put together a table of figures (just as <tt></p> <section></tt> elements would support a table of contents). Additionally, figures do not need to hold illustrations (though its likely this will be the common use case). They can be used as something between a sidebar (which is usually fully self contained) and a section. The <tt></p> <legend></tt> element serves to identify the caption for the figure. </p> <p><h3><span class="pfhead"><progress></span> and <span class="pfhead"><meter></span></h3> <p>The <tt><progress></tt> and <tt><meter></tt> elements are intended to indicate the status of a given operation or state. Both are forms components, though they serve fairly different roles. The <tt><progress></tt> element is used to indicate the state of completion of a given operation, such as the percentage completed of a download operation. As such, it would typically be implemented as a progress bar. The <tt><meter></tt> element, on the other hand, is used to show a number within a given range of numbers, such as a gauge or other indicator. </p> <p>It's a little hard to tell from the specification whether these are input controls, though it would seem odd if they weren't. Thus, if you wanted to show a grade inline as a ranking, it might look something like: </p> <pre><code><div class="score">Your score was <br> <meter value="88" min="0" max="100" low="64" high="96" optimum="100">B+</meter><br></div></pre> <p></code></p> <p>How this would be represented is still up in the air, however. Obviously, deriving the real value of something like both <tt><meter></tt> and <tt><progress></tt> would require using them in conjunction with JavaScript, something I actually find a little disturbing. The shift towards JavaScript-centric elements doesn't necessarily bode well for the use of HTML 5 in a purely declarative sense, and also illustrates the continued resistance on the part of the HTML contingency towards XForms, which is friendlier to a declarative architecture. </p> <p><h3>Deprecated Elements</h3> <p>There aren't a large number of deprecated elements in HTML 5, but there are a few. Here are the ones that emerged in the earliest days of the web and in general are better handled by more specific content:</p> <ul> <li><tt><applet></tt>: The <tt><applet></tt> tag appeared at a time when Java was widely predicted to be the next major client language. It has long since been made obsolete by other developments. The <tt><applet></tt> tag is deprecated in HTML 5, and in general, people should make use of the <tt><object></tt> or <tt><embed></tt> tags instead to accomplish the same things.</li> <li><tt><marquee></tt>: The <tt><marquee></tt> tag was intended to provide a bit of animated eye candy in the early days of the browser by scrolling content within a given <tt>div</tt> element. The capabilities of the <tt>marquee</tt> are now far better handled via CSS and JavaScript as appropriate, especially as it is only one (and not a widely used one at that) of hundreds of different AJAX-like behaviors for performing animation capabilities within browsers.</li> <li><tt><acronym></tt>: The <tt>acronym</tt> tag was originally intended to encode acronyms for identification, but it was too similar to the shorter <tt><abbr></tt> tag, which should be used instead.</li> <li><tt><dir></tt>: This was originally used to create a directory listing assuming static content, but has become obsolete because of new elements. Use <tt> <ul></tt> instead.</li> <li><tt><frame></tt>, <frameset></tt>, and <noframes></tt>: The <tt>frame</tt> is officially dead. This bane of web designers, SEO specialists, programmers, and security experts has now been officially expunged from the HTML language. If you have to use embedded content, use the <tt><iframe></tt> element instead. Most of the needs for frames generally could be accomplished via AJAX or related local client/server interactions as well.</li> <li><tt><isindex></tt>: This holdover from the archeo-HTML era was so obscure that I had to look it up. The <tt><isindex></tt> element creates a single-line text input control. Use <tt><input type="text"></tt> instead.</li> <li><tt><basefont></tt>,<big></tt>, <blink></tt>, <center></tt>, <font></tt>, <s></tt>, <spacer></tt>, <strike></tt>, <tt></tt>, and <u></tt>: CSS has made all of these obsolete (it's made <tt><b></tt> and <tt><i></tt> obsolete too, of course, but these are too heavily embedded in the design psyche to ever fully remove). In general, if you need these, use a <tt><span></tt> with <tt>@style</tt> or (better) <tt>@class</tt> attribute instead.</li> </ul> <p>In addition to these obsolete elements, a few obsolete attributes also have been deprecated: </p> <ul> <li><tt>@name</tt>: Used on elements, this should be replaced with the <tt>@id</tt> attribute. So <tt>#idname</tt> will now point to the <tt><a></tt> element with an <tt>@id</tt> of "idname" rather than an <tt>@name</tt> of "idname."</li> <li><tt>@alink</tt>, <tt>@background</tt>, <tt>@bgcolor</tt>, <tt>@link</tt>, <tt>@text</tt>, <tt>@vlink</tt>: These controlled the color (or background image in the case of <tt>@background</tt>) for the body element or any contained content within the body. All of these now have CSS analogs, which should be used accordingly in HTML 5.</li> </ul> <p>Given the prevalence of HTML generators (of varying ages) out there, these likely will take a while to fade away. However, the message in nearly all cases is clear: CSS is the presentation layer for HTML and should be treated accordingly. </p> <p><h3>Towards a Document Language</h3> <p>When HTML was first introduced in 1991, the language was very much geared towards its original purpose: creating citation abstractions for scientific documents. The 3.0 and 4.0 releases have left that original purpose behind, but a significant amount of current development has made HTML almost too generic?nothing but <tt></p> <div></tt> and <tt><span></tt> elements?and as a consequence it is losing much of the structure that provides at least the foundation of document structure. While HTML 5 includes significant concessions to the AJAX revolution, one of its more fundamental goals is to make the language an appropriate document language. While time will tell whether the changes being introduced now succeed in achieving that goal, they are certainly a good, productive start. </p> <p>The next piece in this series will focus on the forms content and data-binding model associated with HTML 5, including many of the new input elements, list and table data-binding facilities, and DOM support for the same. </p> <p> </div> </div> <div class="elementor-element elementor-element-4f9883d elementor-widget elementor-widget-post-navigation" data-id="4f9883d" data-element_type="widget" data-widget_type="post-navigation.default"> <div class="elementor-widget-container"> <div class="elementor-post-navigation"> <div class="elementor-post-navigation__prev elementor-post-navigation__link"> <a href="https://www.devx.com/tip-bank/42233/" rel="prev"><span class="elementor-post-navigation__link__prev"><span class="post-navigation__prev--label">Previous</span></span></a> </div> <div class="elementor-post-navigation__next elementor-post-navigation__link"> <a href="https://www.devx.com/database-development-zone/42281/" rel="next"><span class="elementor-post-navigation__link__next"><span class="post-navigation__next--label">Next</span></span></a> </div> </div> </div> </div> <section class="elementor-section elementor-inner-section elementor-element elementor-element-277ab1 elementor-section-full_width elementor-section-content-middle elementor-section-height-default elementor-section-height-default" data-id="277ab1" data-element_type="section"> <div class="elementor-container elementor-column-gap-no"> <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-584e67da" data-id="584e67da" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-2bf5b4bc elementor-widget elementor-widget-heading" data-id="2bf5b4bc" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <span class="elementor-heading-title elementor-size-default">Share the Post:</span> </div> </div> </div> </div> <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-2288ce90" data-id="2288ce90" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-496b8f65 elementor-share-buttons--view-icon elementor-share-buttons--skin-minimal elementor-share-buttons--color-custom elementor-share-buttons--shape-square elementor-grid-0 elementor-widget elementor-widget-share-buttons" data-id="496b8f65" data-element_type="widget" data-widget_type="share-buttons.default"> <div class="elementor-widget-container"> <link rel="stylesheet" href="https://www.devx.com/wp-content/plugins/elementor-pro/assets/css/widget-share-buttons.min.css"> <div class="elementor-grid"> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_facebook"> <span class="elementor-share-btn__icon"> <i class="fab fa-facebook" aria-hidden="true"></i> <span class="elementor-screen-only">Share on facebook</span> </span> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_twitter"> <span class="elementor-share-btn__icon"> <i class="fab fa-twitter" aria-hidden="true"></i> <span class="elementor-screen-only">Share on twitter</span> </span> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_linkedin"> <span class="elementor-share-btn__icon"> <i class="fab fa-linkedin" aria-hidden="true"></i> <span class="elementor-screen-only">Share on linkedin</span> </span> </div> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div> <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-8905b95" data-id="8905b95" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-46d69df elementor-widget elementor-widget-html" data-id="46d69df" data-element_type="widget" data-widget_type="html.default"> <div class="elementor-widget-container"> <iframe id="JotFormIFrame-230167013128041" title="Daily Technology News Straight to Your Inbox" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/230167013128041" frameborder="0" style=" min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-230167013128041"); if (ifr) { var src = ifr.src; var iframeParams = []; if (window.location.href && window.location.href.indexOf("?") > -1) { iframeParams = iframeParams.concat(window.location.href.substr(window.location.href.indexOf("?") + 1).split('&')); } if (src && src.indexOf("?") > -1) { iframeParams = iframeParams.concat(src.substr(src.indexOf("?") + 1).split("&")); src = src.substr(0, src.indexOf("?")) } iframeParams.push("isIframeEmbed=1"); ifr.src = src + "?" + iframeParams.join('&'); } window.handleIFrameMessage = function(e) { if (typeof e.data === 'object') { return; } var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) { return; } switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; if (!isNaN(args[1]) && parseInt(iframe.style.minHeight) > parseInt(args[1])) { iframe.style.minHeight = args[1] + "px"; } break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; case "loadScript": if( !window.isPermitted(e.origin, ['jotform.com', 'jotform.pro']) ) { break; } var src = args[1]; if (args.length > 3) { src = args[1] + ':' + args[2]; } var script = document.createElement('script'); script.src = src; script.type = 'text/javascript'; document.body.appendChild(script); break; case "exitFullscreen": if (window.document.exitFullscreen) window.document.exitFullscreen(); else if (window.document.mozCancelFullScreen) window.document.mozCancelFullScreen(); else if (window.document.mozCancelFullscreen) window.document.mozCancelFullScreen(); else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen(); else if (window.document.msExitFullscreen) window.document.msExitFullscreen(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; window.isPermitted = function(originUrl, whitelisted_domains) { var url = document.createElement('a'); url.href = originUrl; var hostname = url.hostname; var result = false; if( typeof hostname !== 'undefined' ) { whitelisted_domains.forEach(function(element) { if( hostname.slice((-1 * element.length - 1)) === '.'.concat(element) || hostname === element ) { result = true; } }); return result; } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script> </div> </div> <div class="elementor-element elementor-element-87227ec elementor-hidden-tablet elementor-hidden-mobile elementor-toc--minimized-on-tablet elementor-widget elementor-widget-table-of-contents" data-id="87227ec" data-element_type="widget" data-settings="{"headings_by_tags":["h2"],"exclude_headings_by_selector":[],"marker_view":"bullets","icon":{"value":"fas fa-circle","library":"fa-solid"},"minimize_box":"yes","minimized_on":"tablet","hierarchical_view":"yes","min_height":{"unit":"px","size":"","sizes":[]},"min_height_tablet":{"unit":"px","size":"","sizes":[]},"min_height_mobile":{"unit":"px","size":"","sizes":[]}}" data-widget_type="table-of-contents.default"> <div class="elementor-widget-container"> <style>/*! elementor-pro - v3.6.2 - 14-02-2022 */ .elementor-widget-table-of-contents .elementor-toc__header-title{color:var(--header-color)}.elementor-widget-table-of-contents.elementor-toc--collapsed .elementor-toc__toggle-button--collapse,.elementor-widget-table-of-contents:not(.elementor-toc--collapsed) .elementor-toc__toggle-button--expand{display:none}.elementor-widget-table-of-contents .elementor-widget-container{min-height:var(--box-min-height);border:var(--box-border-width,1px) solid var(--box-border-color,#a4afb7);border-radius:var(--box-border-radius,3px);background-color:var(--box-background-color);-webkit-transition:min-height .4s;-o-transition:min-height .4s;transition:min-height .4s;overflow:hidden}.elementor-toc__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:var(--box-padding,20px);background-color:var(--header-background-color);border-bottom:var(--separator-width,1px) solid var(--box-border-color,#a4afb7)}.elementor-toc__header-title{font-size:18px;margin:0;color:var(--header-color)}.elementor-toc__toggle-button{cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.elementor-toc__toggle-button i{color:var(--toggle-button-color)}.elementor-toc__toggle-button svg{height:1em;width:1em;fill:var(--toggle-button-color)}.elementor-toc__spinner-container{text-align:center}.elementor-toc__spinner{font-size:2em}.elementor-toc__spinner.e-font-icon-svg{height:1em;width:1em}.elementor-toc__body{padding:var(--box-padding,20px);max-height:var(--toc-body-max-height);overflow-y:auto}.elementor-toc__body::-webkit-scrollbar{width:7px}.elementor-toc__body::-webkit-scrollbar-thumb{background-color:#c2cbd2;border-radius:10px}.elementor-toc__list-wrapper{list-style:none;padding:0}.elementor-toc__list-item{margin-bottom:.5em}.elementor-toc__list-item.elementor-item-active{font-weight:700}.elementor-toc__list-item .elementor-toc__list-wrapper{margin-top:.5em;margin-left:var(--nested-list-indent,1em)}.elementor-toc__list-item-text:hover{color:var(--item-text-hover-color);-webkit-text-decoration:var(--item-text-hover-decoration);text-decoration:var(--item-text-hover-decoration)}.elementor-toc__list-item-text.elementor-item-active{color:var(--item-text-active-color);-webkit-text-decoration:var(--item-text-active-decoration);text-decoration:var(--item-text-active-decoration)}.elementor-toc__list-item-text-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.elementor-toc__list-item-text-wrapper:before,.elementor-toc__list-item-text-wrapper i{margin-right:8px;color:var(--marker-color)}.elementor-toc__list-item-text-wrapper svg{margin-right:8px;fill:var(--marker-color);height:var(--marker-size,.5em);width:var(--marker-size,.5em)}.elementor-toc__list-item-text-wrapper i{font-size:var(--marker-size,.5em)}.elementor-toc__list-item-text-wrapper:before{font-size:var(--marker-size,1em)}.elementor-toc--content-ellipsis .elementor-toc__list-item-text{white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis}.elementor-toc__list-items--collapsible>.elementor-toc__list-wrapper>.elementor-toc__list-item>.elementor-toc__list-wrapper{display:none}.elementor-toc__heading-anchor{position:absolute}.elementor-toc__body .elementor-toc__list-item-text{color:var(--item-text-color);-webkit-text-decoration:var(--item-text-decoration);text-decoration:var(--item-text-decoration)}.elementor-toc__body .elementor-toc__list-item-text:hover{color:var(--item-text-hover-color);-webkit-text-decoration:var(--item-text-hover-decoration);text-decoration:var(--item-text-hover-decoration)}.elementor-toc__body .elementor-toc__list-item-text.elementor-item-active{color:var(--item-text-active-color);-webkit-text-decoration:var(--item-text-active-decoration);text-decoration:var(--item-text-active-decoration)}ol.elementor-toc__list-wrapper{counter-reset:item}ol.elementor-toc__list-wrapper .elementor-toc__list-item{counter-increment:item}ol.elementor-toc__list-wrapper .elementor-toc__list-item-text-wrapper:before{content:counters(item,".") ". "}@media only screen and (max-width:-1px){.elementor-toc--minimized-on-tablet_extra .elementor-toc__body{display:none}}@media only screen and (max-width:1024px){.elementor-toc--minimized-on-tablet .elementor-toc__body{display:none}}@media only screen and (max-width:-1px){.elementor-toc--minimized-on-mobile_extra .elementor-toc__body{display:none}}@media only screen and (max-width:767px){.elementor-toc--minimized-on-mobile .elementor-toc__body{display:none}}</style> <div class="elementor-toc__header"> <h4 class="elementor-toc__header-title"> Overview </h4> <div class="elementor-toc__toggle-button elementor-toc__toggle-button--expand"><i class="fas fa-chevron-down"></i></div> <div class="elementor-toc__toggle-button elementor-toc__toggle-button--collapse"><i class="fas fa-chevron-up"></i></div> </div> <div class="elementor-toc__body"> <div class="elementor-toc__spinner-container"> <i class="elementor-toc__spinner eicon-animation-spin eicon-loading" aria-hidden="true"></i> </div> </div> </div> </div> </div> </div> </div> </section> <section class="elementor-section elementor-top-section elementor-element elementor-element-7ef94119 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="7ef94119" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-59974df2" data-id="59974df2" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-ab68ddb elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="ab68ddb" data-element_type="widget" data-widget_type="divider.default"> <div class="elementor-widget-container"> <style>/*! elementor - v3.5.5 - 03-02-2022 */ .elementor-widget-divider{--divider-border-style:none;--divider-border-width:1px;--divider-color:#2c2c2c;--divider-icon-size:20px;--divider-element-spacing:10px;--divider-pattern-height:24px;--divider-pattern-size:20px;--divider-pattern-url:none;--divider-pattern-repeat:repeat-x}.elementor-widget-divider .elementor-divider{display:-webkit-box;display:-ms-flexbox;display:flex}.elementor-widget-divider .elementor-divider__text{font-size:15px;line-height:1;max-width:95%}.elementor-widget-divider .elementor-divider__element{margin:0 var(--divider-element-spacing);-ms-flex-negative:0;flex-shrink:0}.elementor-widget-divider .elementor-icon{font-size:var(--divider-icon-size)}.elementor-widget-divider .elementor-divider-separator{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;direction:ltr}.elementor-widget-divider--view-line_icon .elementor-divider-separator,.elementor-widget-divider--view-line_text .elementor-divider-separator{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.elementor-widget-divider--view-line_icon .elementor-divider-separator:after,.elementor-widget-divider--view-line_icon .elementor-divider-separator:before,.elementor-widget-divider--view-line_text .elementor-divider-separator:after,.elementor-widget-divider--view-line_text .elementor-divider-separator:before{display:block;content:"";border-bottom:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-top:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--element-align-left .elementor-divider .elementor-divider-separator>.elementor-divider__svg:first-of-type{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:100;flex-shrink:100}.elementor-widget-divider--element-align-left .elementor-divider-separator:before{content:none}.elementor-widget-divider--element-align-left .elementor-divider__element{margin-left:0}.elementor-widget-divider--element-align-right .elementor-divider .elementor-divider-separator>.elementor-divider__svg:last-of-type{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:100;flex-shrink:100}.elementor-widget-divider--element-align-right .elementor-divider-separator:after{content:none}.elementor-widget-divider--element-align-right .elementor-divider__element{margin-right:0}.elementor-widget-divider:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator{border-top:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--separator-type-pattern{--divider-border-style:none}.elementor-widget-divider--separator-type-pattern.elementor-widget-divider--view-line .elementor-divider-separator,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:after,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:before,.elementor-widget-divider--separator-type-pattern:not([class*=elementor-widget-divider--view]) .elementor-divider-separator{width:100%;min-height:var(--divider-pattern-height);-webkit-mask-size:var(--divider-pattern-size) 100%;mask-size:var(--divider-pattern-size) 100%;-webkit-mask-repeat:var(--divider-pattern-repeat);mask-repeat:var(--divider-pattern-repeat);background-color:var(--divider-color);-webkit-mask-image:var(--divider-pattern-url);mask-image:var(--divider-pattern-url)}.elementor-widget-divider--no-spacing{--divider-pattern-size:auto}.elementor-widget-divider--bg-round{--divider-pattern-repeat:round}.rtl .elementor-widget-divider .elementor-divider__text{direction:rtl}</style> <div class="elementor-divider"> <span class="elementor-divider-separator"> </span> </div> </div> </div> <div class="elementor-element elementor-element-2298c708 elementor-widget elementor-widget-heading" data-id="2298c708" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <p class="elementor-heading-title elementor-size-default">The Latest </p> </div> </div> <div class="elementor-element elementor-element-39bd7056 elementor-grid-1 elementor-posts--thumbnail-right elementor-grid-tablet-2 elementor-grid-mobile-1 elementor-widget elementor-widget-posts" data-id="39bd7056" data-element_type="widget" data-settings="{"classic_columns":"1","classic_columns_tablet":"2","classic_columns_mobile":"1","classic_row_gap":{"unit":"px","size":35,"sizes":[]},"classic_row_gap_tablet":{"unit":"px","size":"","sizes":[]},"classic_row_gap_mobile":{"unit":"px","size":"","sizes":[]}}" data-widget_type="posts.classic"> <div class="elementor-widget-container"> <link rel="stylesheet" href="https://www.devx.com/wp-content/plugins/elementor-pro/assets/css/widget-posts.min.css"> <div class="elementor-posts-container elementor-posts elementor-posts--skin-classic elementor-grid"> <article class="elementor-post elementor-grid-item post-24626 post type-post status-publish format-standard has-post-thumbnail hentry category-technology tag-real-estate-industry tag-technology-in-real-estate tag-wholesale-real-estate"> <a class="elementor-post__thumbnail__link" href="https://www.devx.com/technology/tech-trends-impacting-the-real-estate-industry/" > <div class="elementor-post__thumbnail"><img width="1920" height="1080" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="attachment-full size-full ewww_webp" alt="homes in the real estate industry" loading="lazy" data-src-img="https://www.devx.com/wp-content/uploads/real-estsate-industry.jpg" data-src-webp="https://www.devx.com/wp-content/uploads/real-estsate-industry.jpg.webp" data-eio="j" /><noscript><img width="1920" height="1080" src="https://www.devx.com/wp-content/uploads/real-estsate-industry.jpg" class="attachment-full size-full" alt="homes in the real estate industry" loading="lazy" /></noscript></div> </a> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://www.devx.com/technology/tech-trends-impacting-the-real-estate-industry/" > Exploring the Latest Tech Trends Impacting the Real Estate Industry </a> </h3> <div class="elementor-post__meta-data"> <span class="elementor-post-date"> January 31, 2023 </span> </div> <div class="elementor-post__excerpt"> <p>The real estate industry is changing thanks to the newest technological advancements. These new developments — from blockchain and AI to virtual reality and 3D printing — are poised to change how we buy and sell homes. Real estate brokers, buyers, sellers, wholesale real estate professionals, fix and flippers, and beyond may</p> </div> </div> </article> <article class="elementor-post elementor-grid-item post-24238 post type-post status-publish format-standard has-post-thumbnail hentry category-data-access-and-management tag-data-ingestion"> <a class="elementor-post__thumbnail__link" href="https://www.devx.com/data-access-and-management/devx-quick-guide-to-data-ingestion/" > <div class="elementor-post__thumbnail"><img width="1920" height="1280" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="attachment-full size-full ewww_webp" alt="man on floor with data" loading="lazy" data-src-img="https://www.devx.com/wp-content/uploads/data-ingestion.jpg" data-src-webp="https://www.devx.com/wp-content/uploads/data-ingestion.jpg.webp" data-eio="j" /><noscript><img width="1920" height="1280" src="https://www.devx.com/wp-content/uploads/data-ingestion.jpg" class="attachment-full size-full" alt="man on floor with data" loading="lazy" /></noscript></div> </a> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://www.devx.com/data-access-and-management/devx-quick-guide-to-data-ingestion/" > DevX Quick Guide to Data Ingestion </a> </h3> <div class="elementor-post__meta-data"> <span class="elementor-post-date"> January 30, 2023 </span> </div> <div class="elementor-post__excerpt"> <p>One of the biggest trends of the 21st century is the massive surge in internet usage. With major innovations such as smart technology, social media, and online shopping sites, the internet has become an essential part of everyday life for a large portion of the population. Due to this internet</p> </div> </div> </article> <article class="elementor-post elementor-grid-item post-24501 post type-post status-publish format-standard has-post-thumbnail hentry category-enterprise category-technology tag-mobile-wallets tag-online-banking tag-payments"> <a class="elementor-post__thumbnail__link" href="https://www.devx.com/technology/technology-changed-traditional-payments/" > <div class="elementor-post__thumbnail"><img width="1708" height="2560" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="attachment-full size-full ewww_webp" alt="payment via phone" loading="lazy" data-src-img="https://www.devx.com/wp-content/uploads/payment-via-phone-scaled.jpg" data-src-webp="https://www.devx.com/wp-content/uploads/payment-via-phone-scaled.jpg.webp" data-eio="j" /><noscript><img width="1708" height="2560" src="https://www.devx.com/wp-content/uploads/payment-via-phone-scaled.jpg" class="attachment-full size-full" alt="payment via phone" loading="lazy" /></noscript></div> </a> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://www.devx.com/technology/technology-changed-traditional-payments/" > 7 Ways Technology Has Changed Traditional Payments </a> </h3> <div class="elementor-post__meta-data"> <span class="elementor-post-date"> January 26, 2023 </span> </div> <div class="elementor-post__excerpt"> <p>In today’s digital world, technology has changed how we make payments. From contactless cards to mobile wallets, it’s now easier to pay for goods and services without carrying cash or using a checkbook. This article will look at seven of the most significant ways technology has transformed traditional payment methods.</p> </div> </div> </article> </div> </div> </div> </div> </div> <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-e055498" data-id="e055498" data-element_type="column"> <div class="elementor-widget-wrap"> </div> </div> </div> </section> </div> <footer data-elementor-type="footer" data-elementor-id="23300" class="elementor elementor-23300 elementor-location-footer" data-elementor-settings="[]"> <section class="elementor-section elementor-top-section elementor-element elementor-element-c97199d elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="c97199d" data-element_type="section" data-settings="{"background_background":"classic"}"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-291c4e4" data-id="291c4e4" data-element_type="column"> <div class="elementor-widget-wrap"> </div> </div> <div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-92d2c65" data-id="92d2c65" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-269b367 elementor-nav-menu__align-center elementor-nav-menu--dropdown-tablet elementor-nav-menu__text-align-aside elementor-nav-menu--toggle elementor-nav-menu--burger elementor-widget elementor-widget-nav-menu" data-id="269b367" data-element_type="widget" data-settings="{"layout":"horizontal","submenu_icon":{"value":"<i class=\"fas fa-caret-down\"><\/i>","library":"fa-solid"},"toggle":"burger"}" data-widget_type="nav-menu.default"> <div class="elementor-widget-container"> <nav migration_allowed="1" migrated="0" role="navigation" class="elementor-nav-menu--main elementor-nav-menu__container elementor-nav-menu--layout-horizontal e--pointer-underline e--animation-fade"> <ul id="menu-1-269b367" class="elementor-nav-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-23808"><a href="https://www.devx.com/" class="elementor-item">Home</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23809"><a href="https://www.devx.com/advertise/" class="elementor-item">Advertise</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23816"><a href="https://www.devx.com/about/" class="elementor-item">About</a></li> </ul> </nav> <div class="elementor-menu-toggle" role="button" tabindex="0" aria-label="Menu Toggle" aria-expanded="false"> <i aria-hidden="true" role="presentation" class="elementor-menu-toggle__icon--open eicon-menu-bar"></i><i aria-hidden="true" role="presentation" class="elementor-menu-toggle__icon--close eicon-close"></i> <span class="elementor-screen-only">Menu</span> </div> <nav class="elementor-nav-menu--dropdown elementor-nav-menu__container" role="navigation" aria-hidden="true"> <ul id="menu-2-269b367" class="elementor-nav-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-23808"><a href="https://www.devx.com/" class="elementor-item" tabindex="-1">Home</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23809"><a href="https://www.devx.com/advertise/" class="elementor-item" tabindex="-1">Advertise</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23816"><a href="https://www.devx.com/about/" class="elementor-item" tabindex="-1">About</a></li> </ul> </nav> </div> </div> </div> </div> <div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-280ec0d" data-id="280ec0d" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-5d5f4dc5 elementor-shape-rounded elementor-grid-0 e-grid-align-center elementor-widget elementor-widget-social-icons" data-id="5d5f4dc5" data-element_type="widget" data-widget_type="social-icons.default"> <div class="elementor-widget-container"> <style>/*! elementor - v3.5.5 - 03-02-2022 */ .elementor-widget-social-icons.elementor-grid-0 .elementor-widget-container,.elementor-widget-social-icons.elementor-grid-mobile-0 .elementor-widget-container,.elementor-widget-social-icons.elementor-grid-tablet-0 .elementor-widget-container{line-height:1;font-size:0}.elementor-widget-social-icons:not(.elementor-grid-0):not(.elementor-grid-tablet-0):not(.elementor-grid-mobile-0) .elementor-grid{display:inline-grid}.elementor-widget-social-icons .elementor-grid{grid-column-gap:var(--grid-column-gap,5px);grid-row-gap:var(--grid-row-gap,5px);grid-template-columns:var(--grid-template-columns);-webkit-box-pack:var(--justify-content,center);-ms-flex-pack:var(--justify-content,center);justify-content:var(--justify-content,center);justify-items:var(--justify-content,center)}.elementor-icon.elementor-social-icon{font-size:var(--icon-size,25px);line-height:var(--icon-size,25px);width:calc(var(--icon-size, 25px) + (2 * var(--icon-padding, .5em)));height:calc(var(--icon-size, 25px) + (2 * var(--icon-padding, .5em)))}.elementor-social-icon{--e-social-icon-icon-color:#fff;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;background-color:#818a91;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;cursor:pointer}.elementor-social-icon i{color:var(--e-social-icon-icon-color)}.elementor-social-icon svg{fill:var(--e-social-icon-icon-color)}.elementor-social-icon:last-child{margin:0}.elementor-social-icon:hover{opacity:.9;color:#fff}.elementor-social-icon-android{background-color:#a4c639}.elementor-social-icon-apple{background-color:#999}.elementor-social-icon-behance{background-color:#1769ff}.elementor-social-icon-bitbucket{background-color:#205081}.elementor-social-icon-codepen{background-color:#000}.elementor-social-icon-delicious{background-color:#39f}.elementor-social-icon-deviantart{background-color:#05cc47}.elementor-social-icon-digg{background-color:#005be2}.elementor-social-icon-dribbble{background-color:#ea4c89}.elementor-social-icon-elementor{background-color:#d30c5c}.elementor-social-icon-envelope{background-color:#ea4335}.elementor-social-icon-facebook,.elementor-social-icon-facebook-f{background-color:#3b5998}.elementor-social-icon-flickr{background-color:#0063dc}.elementor-social-icon-foursquare{background-color:#2d5be3}.elementor-social-icon-free-code-camp,.elementor-social-icon-freecodecamp{background-color:#006400}.elementor-social-icon-github{background-color:#333}.elementor-social-icon-gitlab{background-color:#e24329}.elementor-social-icon-globe{background-color:#818a91}.elementor-social-icon-google-plus,.elementor-social-icon-google-plus-g{background-color:#dd4b39}.elementor-social-icon-houzz{background-color:#7ac142}.elementor-social-icon-instagram{background-color:#262626}.elementor-social-icon-jsfiddle{background-color:#487aa2}.elementor-social-icon-link{background-color:#818a91}.elementor-social-icon-linkedin,.elementor-social-icon-linkedin-in{background-color:#0077b5}.elementor-social-icon-medium{background-color:#00ab6b}.elementor-social-icon-meetup{background-color:#ec1c40}.elementor-social-icon-mixcloud{background-color:#273a4b}.elementor-social-icon-odnoklassniki{background-color:#f4731c}.elementor-social-icon-pinterest{background-color:#bd081c}.elementor-social-icon-product-hunt{background-color:#da552f}.elementor-social-icon-reddit{background-color:#ff4500}.elementor-social-icon-rss{background-color:#f26522}.elementor-social-icon-shopping-cart{background-color:#4caf50}.elementor-social-icon-skype{background-color:#00aff0}.elementor-social-icon-slideshare{background-color:#0077b5}.elementor-social-icon-snapchat{background-color:#fffc00}.elementor-social-icon-soundcloud{background-color:#f80}.elementor-social-icon-spotify{background-color:#2ebd59}.elementor-social-icon-stack-overflow{background-color:#fe7a15}.elementor-social-icon-steam{background-color:#00adee}.elementor-social-icon-stumbleupon{background-color:#eb4924}.elementor-social-icon-telegram{background-color:#2ca5e0}.elementor-social-icon-thumb-tack{background-color:#1aa1d8}.elementor-social-icon-tripadvisor{background-color:#589442}.elementor-social-icon-tumblr{background-color:#35465c}.elementor-social-icon-twitch{background-color:#6441a5}.elementor-social-icon-twitter{background-color:#1da1f2}.elementor-social-icon-viber{background-color:#665cac}.elementor-social-icon-vimeo{background-color:#1ab7ea}.elementor-social-icon-vk{background-color:#45668e}.elementor-social-icon-weibo{background-color:#dd2430}.elementor-social-icon-weixin{background-color:#31a918}.elementor-social-icon-whatsapp{background-color:#25d366}.elementor-social-icon-wordpress{background-color:#21759b}.elementor-social-icon-xing{background-color:#026466}.elementor-social-icon-yelp{background-color:#af0606}.elementor-social-icon-youtube{background-color:#cd201f}.elementor-social-icon-500px{background-color:#0099e5}.elementor-shape-rounded .elementor-icon.elementor-social-icon{-webkit-border-radius:10%;border-radius:10%}.elementor-shape-circle .elementor-icon.elementor-social-icon{-webkit-border-radius:50%;border-radius:50%}</style> <div class="elementor-social-icons-wrapper elementor-grid"> <span class="elementor-grid-item"> <a class="elementor-icon elementor-social-icon elementor-social-icon-linkedin elementor-repeater-item-5c0ce3c" href="https://www.linkedin.com/company/devx" target="_blank"> <span class="elementor-screen-only">Linkedin</span> <i class="fab fa-linkedin"></i> </a> </span> <span class="elementor-grid-item"> <a class="elementor-icon elementor-social-icon elementor-social-icon-twitter elementor-repeater-item-828f132" href="https://twitter.com/DevX_Com" target="_blank"> <span class="elementor-screen-only">Twitter</span> <i class="fab fa-twitter"></i> </a> </span> </div> </div> </div> </div> </div> <div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-47707c2" data-id="47707c2" data-element_type="column"> <div class="elementor-widget-wrap"> </div> </div> </div> </section> <footer class="elementor-section elementor-top-section elementor-element elementor-element-1588a538 elementor-section-height-min-height elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-items-middle" data-id="1588a538" data-element_type="section" data-settings="{"background_background":"classic"}"> <div class="elementor-container elementor-column-gap-no"> <div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-9d2a788" data-id="9d2a788" data-element_type="column"> <div class="elementor-widget-wrap"> </div> </div> <div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-2e0ce949" data-id="2e0ce949" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-4a914653 elementor-widget elementor-widget-heading" data-id="4a914653" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <p class="elementor-heading-title elementor-size-default">©2023 Copyright DevX - All Rights Reserved. Registration or use of this site constitutes acceptance of our Terms of Service and Privacy Policy.</p> </div> </div> <div class="elementor-element elementor-element-d2cf216 elementor-widget elementor-widget-text-editor" data-id="d2cf216" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <style>/*! elementor - v3.5.5 - 03-02-2022 */ .elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#818a91;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#818a91;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}</style> <p><strong><a href="https://www.devx.com/sitemap/">Sitemap</a></strong></p> </div> </div> </div> </div> <div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-5aef7f0" data-id="5aef7f0" data-element_type="column"> <div class="elementor-widget-wrap"> </div> </div> </div> </footer> <section class="elementor-section elementor-top-section elementor-element elementor-element-64311df elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="64311df" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1e7467d" data-id="1e7467d" data-element_type="column"> <div class="elementor-widget-wrap"> </div> </div> </div> </section> </footer> <link rel='stylesheet' id='elementor-icons-fa-regular-css' href='https://www.devx.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/regular.min.css?ver=5.15.3' type='text/css' media='all' /> <script type='text/javascript' src='https://www.devx.com/wp-content/themes/devxnew/assets/js/hello-frontend.min.js?ver=1.0.0' id='hello-theme-frontend-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-content/plugins/elementor-pro/assets/lib/smartmenus/jquery.smartmenus.min.js?ver=1.0.1' id='smartmenus-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-includes/js/imagesloaded.min.js?ver=4.1.4' id='imagesloaded-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-content/plugins/elementor-pro/assets/js/webpack-pro.runtime.min.js?ver=3.6.2' id='elementor-pro-webpack-runtime-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.5.5' id='elementor-webpack-runtime-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.5.5' id='elementor-frontend-modules-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-includes/js/dist/vendor/regenerator-runtime.min.js?ver=0.13.9' id='regenerator-runtime-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0' id='wp-polyfill-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-includes/js/dist/hooks.min.js?ver=4169d3cf8e8d95a3d6d5' id='wp-hooks-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-includes/js/dist/i18n.min.js?ver=9e794f35a71bb98672ae' id='wp-i18n-js'></script> <script type='text/javascript' id='wp-i18n-js-after'> wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); </script> <script type='text/javascript' id='elementor-pro-frontend-js-before'> var ElementorProFrontendConfig = {"ajaxurl":"https:\/\/www.devx.com\/wp-admin\/admin-ajax.php","nonce":"dc63b74aa6","urls":{"assets":"https:\/\/www.devx.com\/wp-content\/plugins\/elementor-pro\/assets\/","rest":"https:\/\/www.devx.com\/wp-json\/"},"shareButtonsNetworks":{"facebook":{"title":"Facebook","has_counter":true},"twitter":{"title":"Twitter"},"linkedin":{"title":"LinkedIn","has_counter":true},"pinterest":{"title":"Pinterest","has_counter":true},"reddit":{"title":"Reddit","has_counter":true},"vk":{"title":"VK","has_counter":true},"odnoklassniki":{"title":"OK","has_counter":true},"tumblr":{"title":"Tumblr"},"digg":{"title":"Digg"},"skype":{"title":"Skype"},"stumbleupon":{"title":"StumbleUpon","has_counter":true},"mix":{"title":"Mix"},"telegram":{"title":"Telegram"},"pocket":{"title":"Pocket","has_counter":true},"xing":{"title":"XING","has_counter":true},"whatsapp":{"title":"WhatsApp"},"email":{"title":"Email"},"print":{"title":"Print"}},"facebook_sdk":{"lang":"en_US","app_id":""},"lottie":{"defaultAnimationUrl":"https:\/\/www.devx.com\/wp-content\/plugins\/elementor-pro\/modules\/lottie\/assets\/animations\/default.json"}}; </script> <script type='text/javascript' src='https://www.devx.com/wp-content/plugins/elementor-pro/assets/js/frontend.min.js?ver=3.6.2' id='elementor-pro-frontend-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-content/plugins/elementor/assets/lib/waypoints/waypoints.min.js?ver=4.0.2' id='elementor-waypoints-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-includes/js/jquery/ui/core.min.js?ver=1.13.2' id='jquery-ui-core-js'></script> <script type='text/javascript' id='elementor-frontend-js-before'> var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Share on Facebook","shareOnTwitter":"Share on Twitter","pinIt":"Pin it","download":"Download","downloadImage":"Download image","fullscreen":"Fullscreen","zoom":"Zoom","share":"Share","playVideo":"Play Video","previous":"Previous","next":"Next","close":"Close"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Extra","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Extra","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":false}}},"version":"3.5.5","is_static":false,"experimentalFeatures":{"e_dom_optimization":true,"e_optimized_assets_loading":true,"e_optimized_css_loading":true,"a11y_improvements":true,"e_import_export":true,"additional_custom_breakpoints":true,"e_hidden_wordpress_widgets":true,"theme_builder_v2":true,"hello-theme-header-footer":true,"landing-pages":true,"elements-color-picker":true,"favorite-widgets":true,"admin-top-bar":true,"page-transitions":true,"form-submissions":true,"e_scroll_snap":true},"urls":{"assets":"https:\/\/www.devx.com\/wp-content\/plugins\/elementor\/assets\/"},"settings":{"page":[],"editorPreferences":[]},"kit":{"body_background_background":"classic","active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description","hello_header_logo_type":"logo","hello_header_menu_layout":"horizontal","hello_footer_logo_type":"logo"},"post":{"id":22490,"title":"The%20HTML%205%20Layout%20Elements%20Rundown%20-%20DevX","excerpt":"","featuredImage":"https:\/\/www.devx.com\/wp-content\/uploads\/2022\/02\/thumbnail.jpg"}}; </script> <script type='text/javascript' src='https://www.devx.com/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.5.5' id='elementor-frontend-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-content/plugins/elementor-pro/assets/js/elements-handlers.min.js?ver=3.6.2' id='pro-elements-handlers-js'></script> </body> </html> <!-- Dynamic page generated in 0.787 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2023-02-01 03:26:22 --> <!-- Compression = gzip -->