Sign upSign InSign upSign InHéla Ben KhalfallahFollowITNEXT--ListenShareParamount Patterns for Modern Web DevelopmentToday I will share my way of seeing and doing today’s web development. I call my pattern: “SAGE” or “SAGE Driven Design”.SAGE consists in putting at the center (heart) of our developments: Semantics, Accessibility, Green (Sustainability) and Easy (simple and intuitive UI/UX).We are moving away from the classic and purely technical way of design to introduce these essential concepts into our designs, our architectures, our choices and our codes.“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” — Tim Berners-Lee, W3C Director and inventor of the World Wide Web. World Wide Web Consortium Launches International Program Office for Web Accessibility Initiative | 1997 | Press releases | W3CThe web today must be inclusive whatever: the disability, the machine used (computer, smartphone, tablet, iPad, …), its characteristics (Operating system, CPU, memory, GPU, …), the network (WIFI, 3G, 4G, 5G, …) and the location (at home, at the train, at the supermarket, …).At the same time, focusing and optimizing for the end user is not enough. Our code will run in servers and will exploit resources that are always limited. Therefore, we must always think about the carbon footprint that our code will generate and the resources that it will exploit.By focusing on the user of today, we must not forget the user of tomorrow.With the “SAGE” approach I tried to cover all these aspects!I invite you in this article to share about each pillar: its importance, the tools available to analyze and monitor and some tips.We will travel to the four planets: Semantic, Accessibility, Green and Easy. We are going to walk on the surface of each to discover its characteristics up close.We start with the “Semantic” planet, the basis of HTML, here we go!🌍I think our misunderstanding of html semantics is due to the permissive nature of html, i.e. whatever we write is always rendered by the browser. And it’s also this characteristic that sometimes leads us developers to think that html is not a programming language, it’s just a text that we write or a wrapper and it’s CSS and JavaScript that do all the work. As a developer, when we say programming language, we think of compilation, of having errors and that everything we write must conform to standards.So let me tell you that HTML is a programming language: it’s parsed and turned into machine-readable layouts and pixels like any other programming language (Critical Rendering Path). HTML also follows standards and guidelines defined by the W3C.As in an ordinary programming language (C, C++, Java, …), there is a defined way to write an “if/else” or a statement. HTML also has specific instructions called tags. And these tags should not be arranged randomly but according to efficiently defined rules. These rules are “semantics”!The definition of “semantics” in the dictionary is:Semantics is the study of meaning in language. It can be applied to entire texts or to single words. Semantics — Definition, Meaning & Synonyms | Vocabulary.comBy analogy, HTML “semantics” consists of using HTML elements (tags) to structure the content according to the meaning of each element (tag), and not its appearance.Don’t use HTML tags for styling or appearance, that’s what CSS does!Here is a simple example highlighting the difference between semantic and non-semantic HTML, let’s have a look:Do you know the rule of clean code which says: instead of putting a comment explaining the role of the function or the role of a variable, it is rather necessary to choose good names (self-documenting code). I apply the same rule for HTML: instead of having a comment or a “div” with an “id”, you have to use the right tags !Well, the question you are going to ask me now is: why do I need to use semantic HTML tags? Thus, a “semantic” HTML is by default an accessible HTML (we will see more details later), aha! ✨Another argument also, the “Semantic Driven Design” approach avoids the duplication and nesting of tags thus improving performance, Oh yes!📌Similarly, semantics facilitates the understanding of the structure of an HTML page and the different constituent parts, which will help during maintenance, debugging and evolution, and yes all these benefits for free!Now you will ask me: what are Semantic HTML Tags? and how to use them well? It’s time to move on to the next section, follow me!Below is a correct structure of an HTML document (page):This small HTML content contains several important (even mandatory) keywords.🔴 All HTML documents must start with a declaration. It is an “information” to the browser about what document type to expect:🔸In HTML 5:🔸In older documents (HTML 4 or XHTML):🔴 The tells the browser to use standard mode. If omitted, browsers will use a different rendering mode called Quirks mode.🔴 Set content language:Did you know that browsers, screen readers and other user agents use the lang attribute to determine the language in which content should be interpreted, aha! A small code that has a great added value!🔴 element is a container for metadata and is placed between the tag and the tag. These tags can be inside :🔴 Specifying character encoding:The character encoding instructs browsers and validators (w3c and a11y) what set of characters to use when rendering web pages. So what happen if the encoding is omitted?🔸Browsers first try to determine the character set from the server’s HTTP response headers (specifically, the Content-Type header).🔸If a charset is declared neither in the document nor in the response headers, the browser may choose one for us, and it might not be the right one for our site’s needs, OMG ! This can not only cause rendering issues, but also pose a security risk!🔴 Setting the viewport gives the browser instructions on how to control the page’s dimensions and scaling:🔸 width=device-width : sets the width of the page to follow the screen-width of the device (which will vary depending on the device).🔸initial-scale=1.0 : sets the initial zoom level when the page is first loaded by the browser.💡 By the way, don’t confuse with : the tag is used for holding meta information, title, links, … and is not displayed on the page. The tag is used within the of the website and can be used multiple times if needed.Now let’s take a closer look at the layout of the !Let’s look at this page and try to understand why I chose these tags:🔹The is used to contain the headline(s) for a page and/or section. It can also contain supplemental information such as logos and navigational aids.🔹The