01 Technical Functioning of the Web + Advanced HTML
Discover the inner workings of the modern web! From client-server architecture to semantic HTML structures, this training will give you the keys to understanding and mastering the technical fundamentals that make the Internet work.
Educational objectives
- Understanding the technical architecture of the web (hosting, domains, servers, browsers)
- Mastering the request/response cycle and identifying the components of a website
- Structuring a semantic and accessible HTML5 document
- Apply best practices for accessibility and performance
- Analyze and diagnose the technical structure of an existing site
The client-server model
The web operates on a client-server model where your browser (client) communicates with remote servers to retrieve resources. When you type a URL, the browser sends an HTTP request to the server hosting the website. This server processes the request and returns a response containing the HTML, CSS, JavaScript, and media necessary to display the page.
DNS and address resolution
The Domain Name System (DNS) acts as the internet's directory. When you type "example.com", the DNS translates this domain name into an IP address (like 192.168.1.1) that machines can understand. This resolution process involves several DNS servers relaying information until they find the corresponding IP address. Web hosting involves renting space on servers that are permanently connected to the internet, guaranteeing your website's availability 24/7.
Key point The HTTP request/response cycle is the basis of all web interaction. Every click, every form submission generates a new request to a server.
Key points to remember
The web is a distributed system where browsers and servers communicate via HTTP, with DNS as the universal addressing system.
File organization
A typical web project is organized into several folders: HTML for the structure, CSS for the styling (often in a "css" or "styles" folder), JavaScript for interactivity (in a "js" or "scripts" folder), and media (images, videos) in an "assets" or "media" folder. This organization facilitates maintenance and collaborative work. The HTML files reference other resources using relative or absolute paths.
Role of each technology
HTML (HyperText Markup Language) defines the semantic structure of the content with tags that describe the meaning of each element. CSS (Cascading Style Sheets) handles the visual presentation: colors, fonts, layout, and animations. JavaScript adds interactivity: responding to clicks, validating forms, and dynamically updating content. These three languages work together according to the principle of separation of concerns.
Performance optimization Minifying CSS/JS files and compressing images reduces loading times. Content Delivery Networks (CDNs) distribute resources geographically to speed up access.
Key point Separating HTML, CSS, and JS allows for easier maintenance and better performance. Each technology has a specific and complementary role.
Key points to remember
A modern website separates structure (HTML), presentation (CSS) and behavior (JavaScript) for a maintainable and efficient architecture.
HTML5 semantic tags
HTML5 introduces semantic tags that clearly describe the role of each section: <header> for the header, <nav> for navigation, <main> for the main content, <article> for standalone content, <section> to group thematic content, <aside> for additional content, and <footer> for the footer. These tags replace the <div> generic and give meaning to the document.
Logical structure and hierarchy
A well-structured HTML page follows a logical hierarchy with a single <h1> per page, followed by <h2>, <h3>, etc. without skipping levels. The lists (<ul>, <ol>, <dl>) structure the information, while the tags <figure> And <figcaption> They combine images and captions. This structure helps search engines understand the content and facilitates keyboard navigation.
Key point HTML semantics improves SEO, accessibility, and code maintainability. It gives meaning to content beyond its appearance.
W3C Validation The W3C HTML validator checks your code's compliance with web standards. Valid HTML ensures better compatibility between browsers.
Key points to remember
HTML5 semantic tags structure content logically, improving accessibility, SEO, and code maintainability.
WCAG standards and ARIA attributes
The Web Content Accessibility Guidelines (WCAG) define web accessibility standards. ARIA (Accessible Rich Internet Applications) attributes enrich the semantics for assistive technologies: `aria-label` provides an alternative description, `aria-describedby` associates explanatory elements, and `role` specifies the role of an element. These attributes are essential for dynamic interfaces and non-standard custom components.
Keyboard navigation and screen readers
An accessible interface must be fully navigable using the keyboard and the Tab key. The tab order (tabindex) must be logical, and focused elements must be clearly visible. Images require a descriptive alt attribute, forms must have explicit associated labels, and links must have meaningful text. Color should not be the sole means of conveying information, and contrast must adhere to WCAG ratios.
Key point Accessibility benefits all users, not just people with disabilities. It improves the overall user experience.
Testing tools Tools like Lighthouse, axe-core or WAVE automatically detect many accessibility issues and guide you towards corrections.
Key points to remember
Web accessibility follows WCAG standards and uses ARIA attributes to create interfaces usable by everyone, regardless of assistive abilities or technologies.
Browser Inspector
The browser inspector (F12) is an indispensable tool for web developers. The Elements tab allows you to examine and modify the HTML/CSS in real time, revealing the actual page structure after JavaScript processing. The Network tab shows all HTTP requests: load time, file size, and response codes. This analysis helps identify bottlenecks and optimize performance.
Audit and performance
The Lighthouse tab generates automated audits of performance, accessibility, SEO, and best practices. It provides scores and concrete recommendations for improvement. The Performance tab records browser activity to identify costly operations. These tools allow you to objectively measure a website's technical quality and track improvements.
Responsive Design : The inspector's mobile device mode simulates different screen sizes and network speeds to test site responsiveness.
Key point The inspector reveals the inner workings of websites and guides optimization through its integrated analysis tools.
Key points to remember
Browser developer tools allow you to analyze, debug, and optimize websites in real time with objective metrics.
Practical exercise
🎯 Instructions
Create a stylized profile card using HTML/CSS, with a round avatar, a name, a title, a description, and stylized links/buttons. The design should be modern, responsive, with drop shadows, rounded corners, and harmonious colors. Use explicit classes.
Reference code:
<div class="carte">
<div class="carte-photo">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Photo de profil de Sophie Martin">
</div>
<div class="carte-contenu">
<h3 class="carte-nom">Sophie Martin</h3>
<p class="carte-titre">Front-end Developer</p>
<p class="carte-description">Passionate about modern web technologies and user experience. Specializing in React and design systems.</p>
<div class="carte-liens">
<a href="#" class="carte-lien carte-lien-primaire">Portfolio</a>
<a href="#" class="carte-lien carte-lien-secondaire">LinkedIn</a>
<a href="#" class="carte-lien carte-lien-secondaire">Contact</a>
</div>
</div>
</div>
.map { max-width: 400px; background: #ffffff; border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); padding: 32px; text-align: center; margin: 20px auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .photocard { margin-bottom: 24px; } .img photocard { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid #f8f9fa; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .namecard { font-size: 28px; font-weight: 700; color: #2d3748; margin: 0 0 8px 0; } .title-card { font-size: 16px; color: #667eea; font-weight: 500; margin: 0 0 16px 0; } .card-description { font-size: 15px; color: #4a5568; line-height: 1.6; margin: 0 0 24px 0; } .map-links { display: flex; gap: 12px; justify-content: center; flex-wrap:wrap; } .card-link { text-decoration: none; font-weight: 500; font-size: 14px; padding: 10px 20px; border-radius: 8px; transition: all 0.2s ease; border:none; cursor: pointer; } .primary-link-map { background: #667eea; color:white; } .primary-link-map:hover { background: #5a67d8; transform: translateY(-1px); } .secondary-link-card { background: #f7fafc; color: #4a5568; border: 1px solid #e2e8f0; } .secondary-link-map:hover { background: #edf2f7; border-color: #cbd5e0; transform: translateY(-1px); } @media (max-width: 480px) { .map { margin: 20px; padding: 24px; } .map-links { flex-direction: column; } }
Monaco Editor v0.45
Summary
Key points to remember
- Web architecture The web operates on a client-server model with DNS as its universal addressing system.
- Separation of technologies HTML provides the structure, CSS styles it, and JavaScript adds interactivity according to the principle of separation of concerns.
- Semantic HTML Semantic HTML5 tags give meaning to content and improve accessibility and SEO
- Accessibility WCAG standards and ARIA attributes ensure usability for everyone, with keyboard navigation and screen readers.
- Development tools The browser inspector allows you to analyze, debug, and optimize performance in real time.
Sources
To deepen your knowledge:
Validate your knowledge
Test your understanding with this 10-question quiz:
