The HTML 5 Layout Elements Rundown

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> <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 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" role="button" tabindex="0" aria-label="Share on facebook" > <span class="elementor-share-btn__icon"> <i class="fab fa-facebook" aria-hidden="true"></i> </span> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_twitter" role="button" tabindex="0" aria-label="Share on twitter" > <span class="elementor-share-btn__icon"> <i class="fab fa-twitter" aria-hidden="true"></i> </span> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_linkedin" role="button" tabindex="0" aria-label="Share on linkedin" > <span class="elementor-share-btn__icon"> <i class="fab fa-linkedin" aria-hidden="true"></i> </span> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-39bd7056 elementor-grid-1 elementor-posts--thumbnail-right elementor-grid-tablet-2 elementor-grid-mobile-1 load-more-align-center elementor-widget elementor-widget-posts" data-id="39bd7056" data-element_type="widget" data-settings="{"classic_columns":"1","classic_row_gap":{"unit":"px","size":0,"sizes":[]},"pagination_type":"load_more_on_click","classic_columns_tablet":"2","classic_columns_mobile":"1","classic_row_gap_tablet":{"unit":"px","size":"","sizes":[]},"classic_row_gap_mobile":{"unit":"px","size":"","sizes":[]},"load_more_spinner":{"value":"fas fa-spinner","library":"fa-solid"}}" 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-25988 post type-post status-publish format-standard has-post-thumbnail hentry category-devx-daily-news category-uncategorized tag-gm tag-uprotocol"> <a class="elementor-post__thumbnail__link" href="https://www.devx.com/uncategorized/gm-creates-open-source-uprotocol-and-invites-automakers-to-adopt-it-revolutionizing-automotive-software-development/" > <div class="elementor-post__thumbnail"><img width="381" height="286" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="elementor-animation-grow attachment-full size-full wp-image-26032 ewww_webp" alt="GM Creates Open Source uProtocol and Invites Automakers to Adopt It: Revolutionizing Automotive Software Development." loading="lazy" data-src-img="https://www.devx.com/wp-content/uploads/Screenshot-2023-06-02-at-11.30.24-AM.png" data-src-webp="https://www.devx.com/wp-content/uploads/Screenshot-2023-06-02-at-11.30.24-AM.png.webp" data-eio="j" /><noscript><img width="381" height="286" src="https://www.devx.com/wp-content/uploads/Screenshot-2023-06-02-at-11.30.24-AM.png" class="elementor-animation-grow attachment-full size-full wp-image-26032" alt="GM Creates Open Source uProtocol and Invites Automakers to Adopt It: Revolutionizing Automotive Software Development." loading="lazy" /></noscript></div> </a> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://www.devx.com/uncategorized/gm-creates-open-source-uprotocol-and-invites-automakers-to-adopt-it-revolutionizing-automotive-software-development/" > GM Creates Open Source uProtocol and Invites Automakers to Adopt It: Revolutionizing Automotive Software Development. </a> </h3> <div class="elementor-post__meta-data"> <span class="elementor-post-date"> June 2, 2023 </span> </div> <div class="elementor-post__excerpt"> <p>General Motors (GM) recently announced its entry into the Eclipse Foundation. The Eclipse Foundation is a prominent open-source software foundation. In addition, GMC announced its contribution of “uProtocol” to facilitate</p> </div> </div> </article> <article class="elementor-post elementor-grid-item post-26024 post type-post status-publish format-standard has-post-thumbnail hentry category-data-access category-data-access-and-management category-devx category-tech-trends tag-ai tag-data-management tag-security tag-technology"> <a class="elementor-post__thumbnail__link" href="https://www.devx.com/data-access/what-is-metadata/" > <div class="elementor-post__thumbnail"><img width="1920" height="1280" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="elementor-animation-grow attachment-full size-full wp-image-26026 ewww_webp" alt="Heading photo, Metadata." loading="lazy" data-src-img="https://www.devx.com/wp-content/uploads/pexels-markus-spiske-2004161.jpg" data-src-webp="https://www.devx.com/wp-content/uploads/pexels-markus-spiske-2004161.jpg.webp" data-eio="j" /><noscript><img width="1920" height="1280" src="https://www.devx.com/wp-content/uploads/pexels-markus-spiske-2004161.jpg" class="elementor-animation-grow attachment-full size-full wp-image-26026" alt="Heading photo, Metadata." loading="lazy" /></noscript></div> </a> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://www.devx.com/data-access/what-is-metadata/" > What is Metadata? </a> </h3> <div class="elementor-post__meta-data"> <span class="elementor-post-date"> June 1, 2023 </span> </div> <div class="elementor-post__excerpt"> <p>What is metadata? Well, It’s an odd concept to wrap your head around. Metadata is essentially the secondary layer of data that tracks details about the “regular” data. The regular</p> </div> </div> </article> <article class="elementor-post elementor-grid-item post-26016 post type-post status-publish format-standard has-post-thumbnail hentry category-data-access-and-management"> <a class="elementor-post__thumbnail__link" href="https://www.devx.com/data-access-and-management/what-we-should-expect-from-cell-phone-tech-in-the-near-future/" > <div class="elementor-post__thumbnail"><img width="1707" height="2560" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="elementor-animation-grow attachment-full size-full wp-image-26017 ewww_webp" alt="cell phones" loading="lazy" data-src-img="https://www.devx.com/wp-content/uploads/pexels-rdne-stock-project-4921398-scaled.jpg" data-src-webp="https://www.devx.com/wp-content/uploads/pexels-rdne-stock-project-4921398-scaled.jpg.webp" data-eio="j" /><noscript><img width="1707" height="2560" src="https://www.devx.com/wp-content/uploads/pexels-rdne-stock-project-4921398-scaled.jpg" class="elementor-animation-grow attachment-full size-full wp-image-26017" alt="cell phones" 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/what-we-should-expect-from-cell-phone-tech-in-the-near-future/" > What We Should Expect from Cell Phone Tech in the Near Future </a> </h3> <div class="elementor-post__meta-data"> <span class="elementor-post-date"> May 31, 2023 </span> </div> <div class="elementor-post__excerpt"> <p>The earliest cell phones included boxy designs full of buttons and antennas, and they only made calls. Needless to say, we’ve come a long way from those classic brick phones</p> </div> </div> </article> <article class="elementor-post elementor-grid-item post-25678 post type-post status-publish format-standard has-post-thumbnail hentry category-tech-trends category-technology tag-keyboards tag-mechanical-keyboards"> <a class="elementor-post__thumbnail__link" href="https://www.devx.com/tech-trends/the-best-mechanical-keyboards-for-programmers-where-to-find-them/" > <div class="elementor-post__thumbnail"><img width="1920" height="1280" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="elementor-animation-grow attachment-full size-full wp-image-25998 ewww_webp" alt="Where to find the Best Mechanical Keyboards for Programmers" loading="lazy" data-src-img="https://www.devx.com/wp-content/uploads/pexels-karol-d-841228.jpg" data-src-webp="https://www.devx.com/wp-content/uploads/pexels-karol-d-841228.jpg.webp" data-eio="j" /><noscript><img width="1920" height="1280" src="https://www.devx.com/wp-content/uploads/pexels-karol-d-841228.jpg" class="elementor-animation-grow attachment-full size-full wp-image-25998" alt="Where to find the Best Mechanical Keyboards for Programmers" loading="lazy" /></noscript></div> </a> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://www.devx.com/tech-trends/the-best-mechanical-keyboards-for-programmers-where-to-find-them/" > The Best Mechanical Keyboards For Programmers: Where To Find Them </a> </h3> <div class="elementor-post__meta-data"> <span class="elementor-post-date"> May 29, 2023 </span> </div> <div class="elementor-post__excerpt"> <p>When it comes to programming, a good mechanical keyboard can make all the difference. Naturally, you would want one of the best mechanical keyboards for programmers. But with so many</p> </div> </div> </article> <article class="elementor-post elementor-grid-item post-26000 post type-post status-publish format-standard has-post-thumbnail hentry category-devx-daily-news tag-big-brother"> <a class="elementor-post__thumbnail__link" href="https://www.devx.com/devx-daily-news/the-digital-panopticon-is-big-brother-always-watching-us-online/" > <div class="elementor-post__thumbnail"><img width="1920" height="1280" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="elementor-animation-grow attachment-full size-full wp-image-26001 ewww_webp" alt="The Digital Panopticon: Is Big Brother Always Watching Us Online?" loading="lazy" data-src-img="https://www.devx.com/wp-content/uploads/marvin-meyer-SYTO3xs06fU-unsplash-1.jpg" data-src-webp="https://www.devx.com/wp-content/uploads/marvin-meyer-SYTO3xs06fU-unsplash-1.jpg.webp" data-eio="j" /><noscript><img width="1920" height="1280" src="https://www.devx.com/wp-content/uploads/marvin-meyer-SYTO3xs06fU-unsplash-1.jpg" class="elementor-animation-grow attachment-full size-full wp-image-26001" alt="The Digital Panopticon: Is Big Brother Always Watching Us Online?" loading="lazy" /></noscript></div> </a> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://www.devx.com/devx-daily-news/the-digital-panopticon-is-big-brother-always-watching-us-online/" > The Digital Panopticon: Is Big Brother Always Watching Us Online? </a> </h3> <div class="elementor-post__meta-data"> <span class="elementor-post-date"> May 26, 2023 </span> </div> <div class="elementor-post__excerpt"> <p>In the age of digital transformation, the internet has become a ubiquitous part of our lives. From socializing, shopping, and learning to more sensitive activities such as banking and healthcare,</p> </div> </div> </article> <article class="elementor-post elementor-grid-item post-25983 post type-post status-publish format-standard has-post-thumbnail hentry category-artificial-intelligence-ai"> <a class="elementor-post__thumbnail__link" href="https://www.devx.com/artificial-intelligence-ai/embracing-change-how-ai-is-revolutionizing-the-developers-role/" > <div class="elementor-post__thumbnail"><img width="1920" height="1440" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="elementor-animation-grow attachment-full size-full wp-image-25984 ewww_webp" alt="web developer" loading="lazy" data-src-img="https://www.devx.com/wp-content/uploads/web-developer.jpg" data-src-webp="https://www.devx.com/wp-content/uploads/web-developer.jpg.webp" data-eio="j" /><noscript><img width="1920" height="1440" src="https://www.devx.com/wp-content/uploads/web-developer.jpg" class="elementor-animation-grow attachment-full size-full wp-image-25984" alt="web developer" loading="lazy" /></noscript></div> </a> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://www.devx.com/artificial-intelligence-ai/embracing-change-how-ai-is-revolutionizing-the-developers-role/" > Embracing Change: How AI Is Revolutionizing the Developer’s Role </a> </h3> <div class="elementor-post__meta-data"> <span class="elementor-post-date"> May 25, 2023 </span> </div> <div class="elementor-post__excerpt"> <p>The world of software development is changing drastically with the introduction of Artificial Intelligence and Machine Learning technologies. In the past, software developers were in charge of the entire development</p> </div> </div> </article> <article class="elementor-post elementor-grid-item post-25978 post type-post status-publish format-standard has-post-thumbnail hentry category-security"> <a class="elementor-post__thumbnail__link" href="https://www.devx.com/security/the-benefits-of-using-xdr-solutions/" > <div class="elementor-post__thumbnail"><img width="512" height="342" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="elementor-animation-grow attachment-full size-full wp-image-25979 ewww_webp" alt="XDR solutions" loading="lazy" data-src-img="https://www.devx.com/wp-content/uploads/XDR-solutions.jpeg" data-src-webp="https://www.devx.com/wp-content/uploads/XDR-solutions.jpeg.webp" data-eio="j" /><noscript><img width="512" height="342" src="https://www.devx.com/wp-content/uploads/XDR-solutions.jpeg" class="elementor-animation-grow attachment-full size-full wp-image-25979" alt="XDR solutions" loading="lazy" /></noscript></div> </a> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://www.devx.com/security/the-benefits-of-using-xdr-solutions/" > The Benefits of Using XDR Solutions </a> </h3> <div class="elementor-post__meta-data"> <span class="elementor-post-date"> May 24, 2023 </span> </div> <div class="elementor-post__excerpt"> <p>Cybercriminals constantly adapt their strategies, developing newer, more powerful, and intelligent ways to attack your network. Since security professionals must innovate as well, more conventional endpoint detection solutions have evolved</p> </div> </div> </article> <article class="elementor-post elementor-grid-item post-25973 post type-post status-publish format-standard has-post-thumbnail hentry category-artificial-intelligence-ai category-security"> <a class="elementor-post__thumbnail__link" href="https://www.devx.com/artificial-intelligence-ai/how-ai-is-revolutionizing-fraud-detection/" > <div class="elementor-post__thumbnail"><img width="512" height="341" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="elementor-animation-grow attachment-full size-full wp-image-25975 ewww_webp" alt="AI is revolutionizing fraud detection" loading="lazy" data-src-img="https://www.devx.com/wp-content/uploads/AI-is-revolutionizing-fraud-detection.jpeg" data-src-webp="https://www.devx.com/wp-content/uploads/AI-is-revolutionizing-fraud-detection.jpeg.webp" data-eio="j" /><noscript><img width="512" height="341" src="https://www.devx.com/wp-content/uploads/AI-is-revolutionizing-fraud-detection.jpeg" class="elementor-animation-grow attachment-full size-full wp-image-25975" alt="AI is revolutionizing fraud detection" loading="lazy" /></noscript></div> </a> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://www.devx.com/artificial-intelligence-ai/how-ai-is-revolutionizing-fraud-detection/" > How AI is Revolutionizing Fraud Detection </a> </h3> <div class="elementor-post__meta-data"> <span class="elementor-post-date"> May 23, 2023 </span> </div> <div class="elementor-post__excerpt"> <p>Artificial intelligence – commonly known as AI – means a form of technology with multiple uses. As a result, it has become extremely valuable to a number of businesses across</p> </div> </div> </article> <article class="elementor-post elementor-grid-item post-25410 post type-post status-publish format-standard has-post-thumbnail hentry category-artificial-intelligence-ai"> <a class="elementor-post__thumbnail__link" href="https://www.devx.com/artificial-intelligence-ai/companies-leading-ai-innovation-in-2023/" > <div class="elementor-post__thumbnail"><img width="1920" height="1440" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="elementor-animation-grow attachment-full size-full wp-image-25968 ewww_webp" alt="AI innovation" loading="lazy" data-src-img="https://www.devx.com/wp-content/uploads/AI-innovation.jpg" data-src-webp="https://www.devx.com/wp-content/uploads/AI-innovation.jpg.webp" data-eio="j" /><noscript><img width="1920" height="1440" src="https://www.devx.com/wp-content/uploads/AI-innovation.jpg" class="elementor-animation-grow attachment-full size-full wp-image-25968" alt="AI innovation" loading="lazy" /></noscript></div> </a> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://www.devx.com/artificial-intelligence-ai/companies-leading-ai-innovation-in-2023/" > Companies Leading AI Innovation in 2023 </a> </h3> <div class="elementor-post__meta-data"> <span class="elementor-post-date"> May 22, 2023 </span> </div> <div class="elementor-post__excerpt"> <p>Artificial intelligence (AI) has been transforming industries and revolutionizing business operations. AI’s potential to enhance efficiency and productivity has become crucial to many businesses. As we move into 2023, several</p> </div> </div> </article> <article class="elementor-post elementor-grid-item post-25406 post type-post status-publish format-standard has-post-thumbnail hentry category-enterprise category-uncategorized category-small-business category-tools"> <a class="elementor-post__thumbnail__link" href="https://www.devx.com/small-business/step-by-step-guide-to-properly-copyright-your-website/" > <div class="elementor-post__thumbnail"><img width="1920" height="1277" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="elementor-animation-grow attachment-full size-full wp-image-25961 ewww_webp" alt="copyright your website" loading="lazy" data-src-img="https://www.devx.com/wp-content/uploads/copyright-your-website.jpg" data-src-webp="https://www.devx.com/wp-content/uploads/copyright-your-website.jpg.webp" data-eio="j" /><noscript><img width="1920" height="1277" src="https://www.devx.com/wp-content/uploads/copyright-your-website.jpg" class="elementor-animation-grow attachment-full size-full wp-image-25961" alt="copyright your website" loading="lazy" /></noscript></div> </a> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://www.devx.com/small-business/step-by-step-guide-to-properly-copyright-your-website/" > Step-by-Step Guide to Properly Copyright Your Website </a> </h3> <div class="elementor-post__meta-data"> <span class="elementor-post-date"> May 18, 2023 </span> </div> <div class="elementor-post__excerpt"> <p>Creating a website is not easy, but protecting your website is equally important. Implementing copyright laws ensures that the substance of your website remains secure and sheltered. Copyrighting your website</p> </div> </div> </article> <article class="elementor-post elementor-grid-item post-25417 post type-post status-publish format-standard has-post-thumbnail hentry category-data-access category-software"> <a class="elementor-post__thumbnail__link" href="https://www.devx.com/software/fivetran-pricing-explained/" > <div class="elementor-post__thumbnail"><img width="1920" height="1281" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="elementor-animation-grow attachment-full size-full wp-image-25942 ewww_webp" alt="data fivetran pricing" loading="lazy" data-src-img="https://www.devx.com/wp-content/uploads/data-fivetran-pricing.jpg" data-src-webp="https://www.devx.com/wp-content/uploads/data-fivetran-pricing.jpg.webp" data-eio="j" /><noscript><img width="1920" height="1281" src="https://www.devx.com/wp-content/uploads/data-fivetran-pricing.jpg" class="elementor-animation-grow attachment-full size-full wp-image-25942" alt="data fivetran pricing" loading="lazy" /></noscript></div> </a> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://www.devx.com/software/fivetran-pricing-explained/" > Fivetran Pricing Explained </a> </h3> <div class="elementor-post__meta-data"> <span class="elementor-post-date"> May 17, 2023 </span> </div> <div class="elementor-post__excerpt"> <p>One of the biggest trends of the 21st century is the massive surge in analytics. Analytics is the process of utilizing data to drive future decision-making. With so much of</p> </div> </div> </article> <article class="elementor-post elementor-grid-item post-25936 post type-post status-publish format-standard has-post-thumbnail hentry category-software"> <a class="elementor-post__thumbnail__link" href="https://www.devx.com/software/kubernetes-logging/" > <div class="elementor-post__thumbnail"><img width="512" height="341" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="elementor-animation-grow attachment-full size-full wp-image-25938 ewww_webp" alt="kubernetes logging" loading="lazy" data-src-img="https://www.devx.com/wp-content/uploads/kubernetes-logging.jpeg" data-src-webp="https://www.devx.com/wp-content/uploads/kubernetes-logging.jpeg.webp" data-eio="j" /><noscript><img width="512" height="341" src="https://www.devx.com/wp-content/uploads/kubernetes-logging.jpeg" class="elementor-animation-grow attachment-full size-full wp-image-25938" alt="kubernetes logging" loading="lazy" /></noscript></div> </a> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://www.devx.com/software/kubernetes-logging/" > Kubernetes Logging: What You Need to Know </a> </h3> <div class="elementor-post__meta-data"> <span class="elementor-post-date"> May 16, 2023 </span> </div> <div class="elementor-post__excerpt"> <p>Kubernetes from Google is one of the most popular open-source and free container management solutions made to make managing and deploying applications easier. It has a solid architecture that makes</p> </div> </div> </article> </div> <span class="e-load-more-spinner"> <i aria-hidden="true" class="fas fa-spinner"></i> </span> <div class="e-load-more-anchor" data-page="1" data-max-page="1499" data-next-page="https://www.devx.com/web-development-zone/42280/2/"></div> <div class="elementor-button-wrapper"> <a href="#" class="elementor-button-link elementor-button elementor-animation-grow" role="button"> <span class="elementor-button-content-wrapper"> <span class="elementor-button-text">Show More</span> </span> </a> </div> <div class="e-load-more-message"></div> </div> </div> </div> </div> </div> </section> </div> </div> <div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-270dc71" data-id="270dc71" data-element_type="column"> <div class="elementor-widget-wrap"> </div> </div> <div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-8905b95 elementor-hidden-tablet" 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-7c9513d elementor-widget elementor-widget-html" data-id="7c9513d" data-element_type="widget" data-settings="{"sticky_offset":10,"sticky_parent":"yes","sticky":"top","sticky_on":["desktop","tablet","mobile"],"sticky_effects_offset":0}" data-widget_type="html.default"> <div class="elementor-widget-container"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1183579825777021" crossorigin="anonymous"></script> <!-- devx top --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-1183579825777021" data-ad-slot="2250810506"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> </div> </section> <section class="elementor-section elementor-top-section elementor-element elementor-element-7ef94119 elementor-hidden-mobile elementor-hidden-tablet 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-cb0d3b5" data-id="cb0d3b5" data-element_type="column"> <div class="elementor-widget-wrap"> </div> </div> <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-dcd3813" data-id="dcd3813" 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"> <footer class="elementor-section elementor-top-section elementor-element elementor-element-1588a538 elementor-section-height-min-height elementor-section-content-middle elementor-section-full_width 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-50 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-50 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-4f9ec08 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="4f9ec08" data-element_type="widget" data-widget_type="divider.default"> <div class="elementor-widget-container"> <style>/*! elementor - v3.12.2 - 23-04-2023 */ .elementor-widget-divider{--divider-border-style:none;--divider-border-width:1px;--divider-color:#0c0d0e;--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: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);flex-shrink:0}.elementor-widget-divider .elementor-icon{font-size:var(--divider-icon-size)}.elementor-widget-divider .elementor-divider-separator{display:flex;margin:0;direction:ltr}.elementor-widget-divider--view-line_icon .elementor-divider-separator,.elementor-widget-divider--view-line_text .elementor-divider-separator{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;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{flex-grow:0;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{flex-grow:0;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}.e-con-inner>.elementor-widget-divider,.e-con>.elementor-widget-divider{width:var(--container-widget-width,100%);--flex-grow:var(--container-widget-flex-grow)}</style> <div class="elementor-divider"> <span class="elementor-divider-separator"> </span> </div> </div> </div> <section class="elementor-section elementor-inner-section elementor-element elementor-element-73a9986 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="73a9986" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-7f08930" data-id="7f08930" 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 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" 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-33 elementor-inner-column elementor-element elementor-element-21928d3" data-id="21928d3" data-element_type="column"> <div class="elementor-widget-wrap"> </div> </div> <div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-869862d" data-id="869862d" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-5d5f4dc5 e-grid-align-left elementor-shape-rounded elementor-grid-0 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.12.2 - 23-04-2023 */ .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);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:inline-flex;background-color:#69727d;align-items: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:#69727d}.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{border-radius:10%}.elementor-shape-circle .elementor-icon.elementor-social-icon{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> </section> <div class="elementor-element elementor-element-6963de5 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="6963de5" data-element_type="widget" data-widget_type="divider.default"> <div class="elementor-widget-container"> <div class="elementor-divider"> <span class="elementor-divider-separator"> </span> </div> </div> </div> </div> </div> </div> </footer> <section class="elementor-section elementor-top-section elementor-element elementor-element-a4f01a6 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="a4f01a6" 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-a1bc5b1" data-id="a1bc5b1" data-element_type="column"> <div class="elementor-widget-wrap"> </div> </div> <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-e4f110b" data-id="e4f110b" 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.12.2 - 23-04-2023 */ .elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;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> </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' /> <link rel='stylesheet' id='e-animations-css' href='https://www.devx.com/wp-content/plugins/elementor/assets/lib/animations/animations.min.css?ver=3.12.2' 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.12.3' 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.12.2' 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.12.2' id='elementor-frontend-modules-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-includes/js/dist/vendor/wp-polyfill-inert.min.js?ver=3.1.2' id='wp-polyfill-inert-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-includes/js/dist/vendor/regenerator-runtime.min.js?ver=0.13.11' 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":"5b059bb29a","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.12.3' 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 Portrait","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Landscape","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet Portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Landscape","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.12.2","is_static":false,"experimentalFeatures":{"e_dom_optimization":true,"e_optimized_assets_loading":true,"e_optimized_css_loading":true,"a11y_improvements":true,"additional_custom_breakpoints":true,"theme_builder_v2":true,"hello-theme-header-footer":true,"landing-pages":true,"page-transitions":true,"notes":true,"loop":true,"form-submissions":true,"e_scroll_snap":true},"urls":{"assets":"https:\/\/www.devx.com\/wp-content\/plugins\/elementor\/assets\/"},"swiperClass":"swiper-container","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.12.2' 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.12.3' id='pro-elements-handlers-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-content/plugins/elementor-pro/assets/lib/sticky/jquery.sticky.min.js?ver=3.12.3' id='e-sticky-js'></script> </body> </html> <!-- Dynamic page generated in 1.485 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2023-06-05 14:21:26 --> <!-- Compression = gzip -->