Skip to main content

HTML

#HTML

The first principle in HTML is to use tags to structure and organize the content of a web page. These tags are keywords encircled by angle brackets, such as <html>, <head>, <body>, <h1>, <p>, etc. These tags tell the browser how to interpret and display the content of a web page.

Fundamentals​

  • The use of tags to structure and organize the content of a web page,
  • Adding metadata and links to inform search engines and other websites
  • Use of classes and attributes to identify and customize HTML elements and modify it in CSS.
  • understanding the different types of content and media that can be included in a web page, such as text, images, videos, tables, etc.

HTML5 semantics​

  • <nav>: to define a navigation bar.
  • <header>: to define the header of a page or section.
  • <main>: to define the main content of a page.
  • <article>: to define standalone content, such as an article or blog.
  • <section>: to define a separate section of content.
  • <aside>: to define secondary content, such as a sidebar or information box.
  • <figure>
  • <footer>: to define the footer of a page or section.
  • <time>: to define a date or time.
  • <mark>: to highlight text. - <details>: to set details that can be shown or hidden by the user.

Accessibility​

Accessibility in HTML5 concerns how web pages created using HTML5 are accessible to people with disabilities or special needs. HTML5 is a newer version of HTML, which was designed to offer new possibilities in terms of presentation and interaction.

To ensure accessibility in HTML5, it is important to respect web design accessibility standards and rules, such as those defined in the WCAG (Web Content Accessibility Guidelines). This involves taking user needs into account and designing pages that are easily usable by everyone.

To do this, it is important to:

  • Use appropriate tags and attributes to structure page content and make it understandable for assistive technologies, such as screen readers.
  • Provide alternatives for multimedia elements, such as images and videos, so that users who cannot see them can understand the content.
  • Provide alternative navigation and interaction mechanisms, such as content links or keyboard controls, to allow users who cannot use the mouse to navigate and interact with the site.
  • Regularly test the site to check that it meets the accessibility criteria and correct any problems identified.

Tags / attributes​

Tags and attributes in HTML5 are elements of the HTML language that allow you to structure and present the content of a web page. Tags are keywords surrounded by brackets that tell the web browser how to display content, while attributes are properties associated with tags that provide additional information about how the content should be presented.

Here are some examples of tags and attributes in HTML5:

  • The <h1> a h6 tag is used to define a main title, which is usually displayed in large, bold letters.

  • The <p> tag is used to define a paragraph of text.

  • The <img> tag is used to insert an image into the page. The src attribute allows you to specify the URL of the image to display.

  • The <a> tag is used to link to another page or location within the same page. The href attribute allows you to specify the target URL of the link.

  • The <html> tag is the root tag of an HTML5 web page. The lang attribute allows you to specify the language in which the page content is written.

  • The <head> tag contains information about the page, such as title, metadata, and links to CSS and JavaScript files.

  • The <title> tag is used to define the page title, which is displayed in the browser tab and used by search engines.

  • The <meta> tag is used to set metadata about the page, such as author, description, or keywords. The name attribute allows you to specify the type of metadata, while the content attribute allows you to specify its value.

  • The <body> tag contains the content of the page, which is displayed in the browser window.

  • The <header> tag is used to define a header section of the page, which usually contains the title, logo and main navigation links.

  • The <nav> tag is used to define a navigation section, which contains links to the different sections of the site.

  • The <main> tag is used to define the main section of the page, which contains the main content of the page.

  • The <footer> tag is used to define a footer section, which typically contains contact information, social media links, and legal notices.

Recurring accessibility issues​

  • Important information placed in an image or infographic: a person using a screen reader will not have access to it;
  • Videos or audio tracks without subtitles or transcription;
  • Unmenu de navigation trop long et complexe: a person browsing your site with a keyboard will have to go through all the pages before accessing the desired one;
  • Buttons that are too small or too close to each other;
  • Texts that are too small or blend into the background because the colors are not sufficiently contrasted;
  • Instructions based entirely on colors or other visual elements: for example, “press the red button” will be problematic for colorblind people (4% of the population);
  • A telephone number as the only means of contact: if someone cannot speak or use a traditional telephone, they will need another means of contacting you.