5593 sujets

Sémantique web et HTML

Bonjour,

Pour avoir deux DIVs côte à côte, j'ai mis les codes suivants dans la balise "body".
Apparemment, cela fonctionne avec mes navigateurs du PC.
Mais, je ne sais pas si ces codes sont corrects et s'ils sont adaptés pour les petits écrans des smartphones.
Merci de me renseigner.

Bien cordialement,

Je suis parti du principe suivant:

<div>
   <div></div>
   <div></div>
</div>


Et voici mes codes:

<div>
   <div style="float:right">
	   <table>
		   <tr>
			   <td class="style250">&nbsp;</td>
			   <td class="style259">&nbsp;</td>
			   <td class="style259">&nbsp;</td>
			   <td class="style259">&nbsp;</td>
			   <td>
			   <img src="mg/mg1/b100x140.jpg" style="float: right" alt="image100" class="style259"></td>
			   <td></td>
			   <td class="style259">&nbsp;</td>
		   </tr>
	   </table>
	</div>
   <div>
				<table>
					<tr>
						<td><span class="style259">C'est un exemple</span><br class="style259"/>
						<span class="style259">2 juin 2025</span></td>
					</tr>
				</table>
	</div>
   <div style="float:left;">
</div>
</div>


Modifié par AM250 (04 Jun 2025 - 22:01)
Bonjour, ce sont d'ancienne technique qui n'ont plus lieu d'être actuellement vu les possibilités de CSS.
On n'utilise plus les tableaux pour de la mise en page et float sert uniquement à faire couler du texte autour d'un élément. Renseignez vous sur Flexbox et Grid en CSS.
Pour Flexbox :
https://la-cascade.io/articles/flexbox-guide-complet
https://developer.mozilla.org/fr/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
https://www.alsacreations.com/tuto/lire/1493-CSS3FlexboxLayoutmodule.html
https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html
Et un jeu pour apprendre https://flexboxfroggy.com/#fr

Pour avoir deux parties l'une à coté de l'autre :

    <div class="flex">
        <div class="item">1</div>
        <div class="item">2</div>
    </div>

Avec ce CSS :

        .flex {
            display: flex;
        }
@casper2

Bonjour,
Je vous remercie pour votre aide. Je vais consulter les liens.
Bien cordialement,
Modifié par AM250 (05 Jun 2025 - 16:30)
Dans la balise <img>, pense à toujours ajouter un attribut alt, même s'il est vide, pour l'accessibilité.
Dans ton formulaire, il serait bon de spécifier un type="submit" pour le bouton, même si ce n’est pas strictement nécessaire.
Si tu veux aller plus loin, tu peux ajouter des labels liés aux inputs via for et id pour une meilleure accessibilité.