HTML, the fundamental markup language of the web, enables content to be structured and presented on web pages using simple, semantic tags, essential for any novice developer.
- HTML (HyperText Markup Language) is a markup language that structures web pages, created by Tim Berners-Lee in 1989-1991.
- Markup language, no programming - uses tags to organize content with a precise syntax (opening/closing tags)
- Hierarchical structure HTML document organized as a tree with head (metadata) and body (visible content) elements
- Essential elements headings (h1-h6), paragraphs (p), links (a), images (img), forms for interactivity
- HTML5 provides semantic elements (nav, article, section) and native multimedia support
- Attributes customize elements (class, id, src, href) with accessibility attributes
- Integration with CSS/JavaScript HTML structures, CSS styles, JavaScript adds interactivity
- Best practices W3C validation, semantic code, file organization, cross-browser testing
HTML stands for HyperText Markup Language. It is the markup language designed to create and structure web pages. HTML is one of the three founding inventions of the World Wide Web, along with HTTP and URLs.
HTML is a markup language, not a programming language. This distinction is crucial to understanding its role. A programming language executes instructions and processes data. A markup language structures and describes content with tags.
The acronym HyperText Markup Language reveals its nature. HyperText refers to the hypertext links that connect web documents together. Markup Language indicates that it uses tags to organize content. These tags are used to define headings, paragraphs, lists and other structural elements.
The concept of hypertext represents a major innovation in HTML. Hypertext links make it possible to navigate from one web page to another at the click of a button. This interconnection creates the worldwide web we know today.
HTML structures text semantically and allows the inclusion of multimedia resources such as images and videos. It creates interoperable documents compatible with different computer equipment. This universality improves web accessibility for all users.
Visit official HTML specification defines the current standards. HTML5 remains the reference version, with HTML Living Standard as a continuous evolution since 2019.
Tim Berners-Lee created HTML between 1989 and 1991 at CERN. This language is one of the three founding inventions of the World Wide Web, along with HTTP and URLs. Based on SGML, HTML revolutionizes the way information is shared on the Internet.
The difference between HTML and HTML5 lies in their advanced functionalities. HTML5 introduces new semantic elements, native multimedia support and API powerful JavaScript. This modern version of html has been transforming web development since 2007.
The evolution of HTML follows a logical progression:
- HTML 2.0 (1995): First official standardization via RFC 1866
- HTML 3.2 (1997): Integration of tables and presentation elements
- HTML 4.0 (1997) : CSS and JavaScript support to separate content and style
- XHTML (2000-2010) : Strict XML reformulation of traditional HTML
- HTML5 (2007-2019): Revolution with semantic and multimedia elements
W3C and WHATWG lead HTML standardization. The WHATWG has been maintaining the HTML Living Standard since 2019. This evolving reference replaces fixed versions.
HTML revolutionizes the World Wide Web by enabling interoperability between different devices. Developers can create documents that are accessible on a variety of screens, text terminals and text-to-speech devices. This flexibility reduces development costs.
The addition of forms in 1994 made the Web interactive. The IMG element (1993) integrates images into pages. These innovations transformed the Internet into an interactive multimedia platform.
An HTML document follows a precise hierarchical structure that organizes content into a logical tree. This architecture enables browsers to interpret HTML code correctly and display web pages consistently.
The basic structure of an HTML file begins with the DOCTYPE HTML declaration, which tells the browser which version of the language is being used. This declaration precedes the root element html which contains all the other elements of the document.
The html is divided into two main sections:
- The head contains metadata invisible to the user
- The body contains the visible content of the web page
In the headelement, the title is mandatory and defines the title displayed in the browser tab. This section also includes links to CSS style sheets, JavaScript scripts and various metadata such as character encoding.
Hierarchical organization respects strict nesting rules. Each element can contain other child elements, creating a clear tree structure. This hierarchy facilitates code maintenance and improves accessibility.
Example of a complete HTML structure :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
<h1>Main content</h1>
<p>Text paragraph</p>
</body>
</html>
This fundamental structure guarantees compatibility with all modern browsers and optimizes the interpretation of the HTML document.
An HTML tag is an element of code that structures and organizes the content of a web page. Tags work in pairs, with an opening tag and a closing tag framing the content.
HTML tag syntax follows precise rules. An opening tag begins with the lower sign <followed by the element name, then ends with the plus sign >. The closing tag uses the same structure but adds a slash before the name : </nom>.
Example of correct syntax:
<p>This is a paragraph</p>
<h1>Main title</h1>
Some HTML tags are self-closing because they contain no textual content. These empty elements include <img>, <br>, <hr> and <input>. They end with /> in XHTML or simply > in HTML5.
Nesting rules require that tags close in the reverse order of their opening. An open tag inside another must close before the parent tag.
Example of correct nesting :
<div>
<p>Text with <strong>formatting</strong></p>
</div>
Modern browsers automatically correct minor syntax errors. However, poorly structured code can cause unpredictable displays. Best practices include consistent indentation, systematic tag closing and validation of HTML code to ensure compliance with standards.
The basic HTML elements are divided into several functional categories. Each HTML element fulfills a specific role in the structure of a web page.
Structure elements organize the main content. Headings h1 to h6 create a clear hierarchy of information. The p element delimits text paragraphs. Section, article and div elements structure content areas.
- Content elements include ul and ol lists to organize data
- The table element structures tabular data with tr, td and th
- The img element integrates images with a mandatory src attribute
- Strong and em elements add semantic meaning to the text
The various navigation elements facilitate user interaction. The a element creates hypertext links to other pages or sections. The href attribute specifies the link destination.
Multimedia elements enrich the web experience. The video element integrates videos with native controls. The audio element manages sound files. The canvas element lets you draw dynamic graphics.
HTML5 introduces specialized semantic elements. The nav element delimits navigation zones. The aside element contains additional information. The footer element marks the footer.
The generic div and span elements serve as multi-purpose containers. Div structures content blocks. Span targets portions of inline text for styling or scripting.
HTML attributes are used to specify the properties of elements in order to customize their behavior and appearance. Each attribute consists of a name and a value, separated by an equal sign and placed in the opening tag : <element attribut="valeur">.
Global attributes apply to all HTML elements. The class attribute is used to group elements for CSS or JavaScript styling. The id attribute uniquely identifies an element on the page. The style attribute adds CSS directly to the element. The title provides a hover tooltip.
Each HTML element has its own attributes. Links use href to specify the URL. Images require src for the source and alt for alternative text. Forms use action, method and name. These attributes define the specific functionality of each element.
Attributes data-* attributes store personalized information in HTML elements. These attributes allow data to be passed to JavaScript without affecting semantics. Example: <div data-user-id="123"> facilitates client-side data retrieval.
Attributes aria-* improve accessibility for assistive technologies. The alt describes images for screen readers. These attributes make web content accessible to disabled users.
HTML validation checks that attributes comply with standards. Use tools like the W3C validator to detect errors. Respect the correct syntax and expected values for each attribute.
HTML forms transform a static web page into an interactive interface. They can be used to collect user data and create dynamic web experiences. Since 1994, forms have been making the web interactive by enabling information to be entered and sent.
The basic structure of a form uses the <form> with essential attributes:
- The action specifies data destination URL
- The method defines the sending method (GET or POST)
- The enctype specifies data encoding type
The input fields offer different options depending on your needs:
- <input> with its various types (text, email, password, number, date)
-