Home » Sciences et technologies » Aujourd’hui @ wwdc25: Jour 5 – Guides – WWDC25

Aujourd’hui @ wwdc25: Jour 5 – Guides – WWDC25

by Louis Girard

Here’s a breakdown of the HTML code, along with some potential improvements and explanations:

Understanding the Code

This HTML snippet is designed to create a two-column layout within an email. Let’s break down the major parts and their purpose:

Tags (Core Structure):

The primary structure uses

tags to define the layout for the email. This is common in HTML email design as it’s reliable for rendering in different email clients.

align="center": Centers the table within its parent element.

border="0": Removes the table border (critically important to avoid unwanted borders).

cellspacing="0": Controls the space between cells (set to zero to prevent spacing).

cellpadding="0": Controls the space within cells.

role="presentation": This is an accessibility attribute and is good practice for structural tables in emails. It tells screen readers to treat the table as a layout element, not a data table.

width="600": Sets the overall width of the table (and likely, the email content) to 600 pixels.

class="col": this is a class used for styling,likely to apply consistent padding and other styles across the columns.

Tags (Rows): define the rows of the table.

Tags (cells): Define the individual cells within the rows. These cells contain the actual content (text, images, links, etc.).

align="center" (in

): Centers the content horizontally within the cell.

valign="top" and valign="middle": Controls the vertical alignment of the content within the cells (top or middle).

width="33%" and width="66%": Specifies the width of the columns, creating a two-column layout (approximately).

Tag (Image):

src="...: The URL of the image.

alt="...: Choice text for the image (crucial for accessibility). provide a clear description of the image’s content for users who can’t see the image. Consider improving: alt="La couverture de la playlist de jazz WWDC25, montrant l'icône d'un piano dont les clés ont des reflets verts et jaunes. L'icône est dans la nouvelle conception Apple. Les mots WWDC25 sont dans le coin supérieur gauche. " . This is good.

width="200" and height="200": Sets the size of the image.

border="0": Removes the image border.

class="align-left": Likely used for styling to align to the left.

style="display: block; border-radius: 18px;": Apply styling directly to the image. display: block; helps prevent extra spacing issues in emails. border-radius adds rounded corners.

Tag (Paragraphs): Used for the text content within the cells.

Tag (Hyperlink):

href="...: The URL the link points to.

class="cta t-body": Class for styling the “call to action” link.

style="font-size: 17px; font-weight: 400; line-height: 25px; colour: #0066cc;": Inline styles for the link. Font size, weight, line height, and color are defined here.

and tags (for responsive images)

media="(max-device-width: 568px)": This media attribute tells the browser to use the image specified by srcset when the viewport width is 568 pixels or less.

srcset="...: Specifies the image that is to be displayed.

Potential Improvements and Best Practices

  1. Accessibility (Important!):

alt Attributes: Ensure all tags have descriptive alt attributes. This is critically important for users with visual impairments. The example is good.

Semantic HTML (Less Critical in Emails, but can help): While table-based layouts are common in emails, consider using semantic HTML elements like

,
,

, and