[HTML] Exploiter les microformats pour baliser une zone de contact (h-card) de la manière la plus sémantique possible

29/09/2020 / admin

Ressources officielles sur les Microformats et outils de test en ligne

Page Wiki d’accueil des microformats 2 (documentation officielle) – mise à jour le 18 juillet 2020
h-card is a simple, open format for publishing people and organisations on the web. et h-card examples in the wild – mise à jour le 20 août 2020
Outil de test des données structurées de Google
Microformats Parser (PHP) 0.4.6 – Pour tester la pertinence de votre code balisé avec les Microformats (retourne un objet JSON)

Demo

La démo comprend la sématique HTML et les microformats pour une société qui possède plusieurs agences réparties dans plusieurs villes.

Demo CodePen.io

[HTML] Le positionnement d’un contenu ancré est décalé à l’écran par rapport à l’emplacement où est placé l’ancre dans le code source de la page.

08/04/2019 / admin

Source: Anchor link landing in wrong position.

Code qui pose problème:

<a name="sponsors"></a>
    <div class="sponsors">
        <div class="sponsors-left">
            <h2>Sponsors</h2>
                <p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
            </div>

<h2>Sponsors</h2>

<p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>

</div>

Suggestion de correction:

I think the problem is resulting from the anchors with no contents that you are using.

Also, it appears that name= has been deprecated in favor of id= as a fragment identifier in certain elements (including A) which makes a kind of sense as ID attributes are unique whereas NAME attributes are not so guaranteed.

I’d try sticking the fragment identifier in the actual renderable entity such as:

<h2 id="sponsors">Sponsors</h2>

1

<h2 id="sponsors">Sponsors</h2>

and see where that gets you. Incidentally, it looks like a good conference, I hope you get a comp admission.

Réponse de l’OP:

Aha! Got it, worked a charm, thanks mate. Incidentally – I’m one of the conference organiser, no web dev! So not only will I be at the conference, but also drinking whiskey with the speakers 🙂

[HTML] Les commentaires conditionnels sous IE

29/07/2015 / admin

Source : How To Create an IE-Only Stylesheet, Conditional comments.

En complément : Browserhacks – An extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.

Ajouter une classe à l’élément `body` pour IE uniquement

<!--[if IE ]>
   <body class="ie">
<![endif]-->
<!--[if !IE]>-->
   <body>
<!--<![endif]-->

<!--[if IE ]>

<![endif]-->

<body>

<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]>    <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]>    <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->

<!DOCTYPE html>

<html dir="ltr" lang="en-US" class="no-js">

[HTML][CSS] Supprimer les marges gauche et droite ajoutées par certains navigateurs entre les éléments d’une liste horizontale lorsqu’on utilise display: inline-block;

02/12/2014 / admin

Il peut arriver que, d’une manière totalement illogique, des marges gauche et droite viennent se glisser entre les éléments d’une même liste horizontale.

Ces marges sont dues à la présence d’espaces, de sauts de ligne ou de retours chariots dans votre code source entre les balises frères qui constituent la liste.

Pour remédier à cela, il existe 2 solutions consistant à supprimer tout espace entre ces balises :

1. Placer un commentaire HTML vide entre chaque élément de liste :

<ul class="mobile-menu">
    <li>
        <button type="button" class="collapsed mobile-menu-item" data-toggle="collapse" data-target="#mobile-account">Account</button>
    </li><!--
    --><li>
        <button type="button" class="collapsed mobile-menu-item" data-toggle="collapse" data-target="#mobile-cart">Cart</button>
    </li><!--
    --><li>
        <button type="button" class="collapsed mobile-menu-item" data-toggle="collapse" data-target="#mobile-topsearch">Search</button>
    </li><!--
    --><li class="nav">
        <button type="button" class="collapsed mobile-menu-item" data-toggle="collapse" data-target="#mobile-nav">Nav</button>
    </li>
</ul>

<li>

<button type="button" class="collapsed mobile-menu-item" data-toggle="collapse" data-target="#mobile-account">Account</button>

</li><!--

--><li>

</li><!--

--><li>

<button type="button" class="collapsed mobile-menu-item" data-toggle="collapse" data-target="#mobile-topsearch">Search</button>

</li><!--

--><li class="nav">

</li>

</ul>

2. Coller les balises frères :

<ul class="mobile-menu">
    <li>
        <button type="button" class="collapsed mobile-menu-item" data-toggle="collapse" data-target="#mobile-account">Account</button>
    </li><li>
        <button type="button" class="collapsed mobile-menu-item" data-toggle="collapse" data-target="#mobile-cart">Cart</button>
    </li><li>
        <button type="button" class="collapsed mobile-menu-item" data-toggle="collapse" data-target="#mobile-topsearch">Search</button>
    </li><li class="nav">
        <button type="button" class="collapsed mobile-menu-item" data-toggle="collapse" data-target="#mobile-nav">Nav</button>
    </li>
</ul>

<li>

<button type="button" class="collapsed mobile-menu-item" data-toggle="collapse" data-target="#mobile-account">Account</button>

</li><li>

</li><li>

<button type="button" class="collapsed mobile-menu-item" data-toggle="collapse" data-target="#mobile-topsearch">Search</button>

</li><li class="nav">

</li>

</ul>

[jQuery] Détecter la présence d’une classe .current sur un élément LI et ajouter des classes .before et .after aux éléments LI précédents et suivants avec prevAll et nextAll

29/10/2013 / admin

<ul class="steps">
<li>first step</li>
<li>second step</li>
<li class="current">third step</li>
<li>fourth step</li>
<li>fifth step</li>
</ul>

<li>first step</li>

<li>second step</li>

<li class="current">third step</li>

<li>fourth step</li>

<li>fifth step</li>

</ul>

	jQuery(document).ready(function(){
		jQuery('.steps li.current').prevAll('li').addClass('before');
		jQuery('.steps li.current').nextAll('li').addClass('after');
	});

jQuery(document).ready(function(){

jQuery('.steps li.current').prevAll('li').addClass('before');

jQuery('.steps li.current').nextAll('li').addClass('after');

});

[HTML] [CSS] Liste complète des entités HTML

07/05/2013 / admin

Source : http://www.freeformatter.com/html-entities.html, http://dev.w3.org/html5/html-author/charref et http://mcdlr.com/8/
Convertisseur d’entités HTML/CSS/JS en ligne : http://www.evotech.net/articles/testjsentities.html

HTML Entity List

Complete list of HTML entities with their numbers and names. Also included is a full list of ASCII characters that can be represented in HTML (i.e. printable characters).

ASCII Characters
ISO 8859-1 Characters
ISO 8859-1 Symbols
Math Symbols
Greek Letters
Miscellaneous HTML entities

ASCII Characters (Printable)

Only printable characters are displayed as control characters (0-31) shouldn’t be present in HTML pages since they have no visual representations.

Character	Entity Name	Entity Number	Description
			Space
!		!	Exclamation mark
«		"	Quotation mark
#		#	Number sign
$		$	Dollar sign
%		%	Percent sign
&	&	&	Ampersand
‘		'	Apostrophe
(		(	Opening/Left Parenthesis
)		)	Closing/Right Parenthesis
*		*	Asterisk
+		+	Plus sign
,		,	Comma
–		-	Hyphen
.		.	Period
/		/	Slash
0		0	Digit 0
1		1	Digit 1
2		2	Digit 2
3		3	Digit 3
4		4	Digit 4
5		5	Digit 5
6		6	Digit 6
7		7	Digit 7
8		8	Digit 8
9		9	Digit 9
:		:	Colon
;		;	Semicolon
<	<	<	Less-than
=		=	Equals sign
>	>	>	Greater than
?		?	Question mark
@		@	At sign
A		A	Uppercase A
B		B	Uppercase B
C		C	Uppercase C
D		D	Uppercase D
E		E	Uppercase E
F		F	Uppercase F
G		G	Uppercase G
H		H	Uppercase H
I		I	Uppercase I
J		J	Uppercase J
K		K	Uppercase K
L		L	Uppercase L
M		M	Uppercase M
N		N	Uppercase N
O		O	Uppercase O
P		P	Uppercase P
Q		Q	Uppercase Q
R		R	Uppercase R
S		S	Uppercase S
T		T	Uppercase T
U		U	Uppercase U
V		V	Uppercase V
W		W	Uppercase W
X		X	Uppercase X
Y		Y	Uppercase Y
Z		Z	Uppercase Z
[		[	Opening/Left square bracket
\		\	Backslash
]		]	Closing/Right square bracket
^		^	Caret
_		_	Underscore
`		`	Grave accent
a		a	Lowercase a
b		b	Lowercase b
c		c	Lowercase c
d		d	Lowercase d
e		e	Lowercase e
f		f	Lowercase f
g		g	Lowercase g
h		h	Lowercase h
i		i	Lowercase i
j		j	Lowercase j
k		k	Lowercase k
l		l	Lowercase l
m		m	Lowercase m
n		n	Lowercase n
o		o	Lowercase o
p		p	Lowercase p
q		q	Lowercase q
r		r	Lowercase r
s		s	Lowercase s
t		t	Lowercase t
u		u	Lowercase u
v		v	Lowercase v
w		w	Lowercase w
x		x	Lowercase x
y		y	Lowercase y
z		z	Lowercase z
{		{	Opening/Left curly brace
\|		\|	Vertical bar
}		}	Closing/Right curly brace
~		~	Tilde

ISO-8859-1 Characters

Full list of supported ISO-8859-1 characters. Notice that the names are case sensitive, hence if you want an uppercase letter, the name should also start with an uppercase letter.

Character	Entity Name	Entity Number	Description
À	À	À	Capital a with grave accent
Á	Á	Á	Capital a with acute accent
Â	Â	Â	Capital a with circumflex accent
Ã	Ã	Ã	Capital a with tilde
Ä	Ä	Ä	Capital a with umlaut
Å	Å	Å	Capital a with ring
Æ	Æ	Æ	Capital ae
Ç	Ç	Ç	Capital c with cedilla
È	È	È	Capital e with grave accent
É	É	É	Capital e with acute accent
Ê	Ê	Ê	Capital e with circumflex accent
Ë	Ë	Ë	Capital e with umlaut
Ì	Ì	Ì	Capital i with grave accent
Í	Í	Í	Capital i with accute accent
Î	Î	Î	Capital i with circumflex accent
Ï	Ï	Ï	Capital i with umlaut
Ð	Ð	Ð	Capital eth (Icelandic)
Ñ	Ñ	Ñ	Capital n with tilde
Ò	Ò	Ò	Capital o with grave accent
Ó	Ó	Ó	Capital o with accute accent
Ô	Ô	Ô	Capital o with circumflex accent
Õ	Õ	Õ	Capital o with tilde
Ö	Ö	Ö	Capital o with umlaut
Ø	Ø	Ø	Capital o with slash
Ù	Ù	Ù	Capital u with grave accent
Ú	Ú	Ú	Capital u with acute accent
Û	Û	Û	Capital u with circumflex accent
Ü	Ü	Ü	Capital u with umlaut
Ý	Ý	Ý	Capital y with acute accent
Þ	Þ	Þ	Capital thorn (Icelandic)
ß	ß	ß	Lowercase sharp s (German)
à	à	à	Lowercase a with grave accent
á	á	á	Lowercase a with acute accent
â	â	â	Lowercase a with circumflex accent
ã	ã	ã	Lowercase a with tilde
ä	ä	ä	Lowercase a with umlaut
å	å	å	Lowercase a with ring
æ	æ	æ	Lowercase ae
ç	ç	ç	Lowercase c with cedilla
è	è	è	Lowercase e with grave accent
é	é	é	Lowercase e with acute accent
ê	ê	ê	Lowercase e with circumflex accent
ë	ë	ë	Lowercase e with umlaut
ì	ì	ì	Lowercase i with grave accent
í	í	í	Lowercase i with acute accent
î	î	î	Lowercase i with circumflex accent
ï	ï	ï	Lowercase i with umlaut
ð	ð	ð	Lowercase eth (Icelandic)
ñ	ñ	ñ	Lowercase n with tilde
ò	ò	ò	Lowercase o with grave accent
ó	ó	ó	Lowercase o with acute accent
ô	ô	ô	Lowercase o with circumflex accent
õ	õ	õ	Lowercase o with tilde
ö	ö	ö	Lowercase o with umlaut
ø	ø	ø	Lowercase o with slash
ù	ù	ù	Lowercase u with grave accent
ú	ú	ú	Lowercase u with acute accent
û	û	û	Lowercase u with circumflex accent
ü	ü	ü	Lowercase u with umlaut
ý	ý	ý	Lowercase y with acute accent
þ	þ	þ	Lowercase thorn (Icelandic)
ÿ	ÿ	ÿ	Lowercase y with umlaut

ISO-8859-1 Symbols

Full list of supported ISO-8859-1 symbols in HTML.

Symbol	Entity Name	Entity Number	Description
			Non-breaking space
¡	¡	¡	Inverted exclamation mark
¢	¢	¢	Cent
£	£	£	Pound
¤	¤	¤	Currency
¥	¥	¥	Yen
¦	¦	¦	Broken vertical bar
§	§	§	Section
¨	¨	¨	Spacing diaeresis
©	©	©	Copyright
ª	ª	ª	Feminine ordinal indicator
«	«	«	Opening/Left angle quotation mark
¬	¬	¬	Negation
			Soft hyphen
®	®	®	Registered trademark
¯	¯	¯	Spacing macron
°	°	°	Degree
±	±	±	Plus or minus
²	²	²	Superscript 2
³	³	³	Superscript 3
´	´	´	Spacing acute
µ	µ	µ	Micro
¶	¶	¶	Paragraph
¸	¸	¸	Spacing cedilla
¹	¸	¹	Superscript 1
º	º	º	Masculine ordinal indicator
»	»	»	Closing/Right angle quotation mark
¼	¼	¼	Fraction 1/4
½	½	½	Fraction 1/2
¾	¾	¾	Fraction 3/4
¿	¿	¿	Inverted question mark
×	×	×	Multiplication
÷	÷	÷	Divide

Math Symbols

Full list of all supported math symbols in HTML.

Symbol	Entity Name	Entity Number	Description
∀	∀	∀	For all
∂	∂	∂	Part
∃	∃	∃	Exist
∅	∅	∅	Empty
∇	∇	∇	Nabla
∈	∈	∈	Is in
∉	∉	∉	Not in
∋	&ni;	∋	Ni
∏	∏	∏	Product
∑	∑	∑	Sum
−	−	−	Minus
∗	&lowast;	∗	Asterisk (Lowast)
√	√	√	Square root
∝	&prop;	∝	Proportional to
∞	∞	∞	Infinity
∠	&ang;	∠	Angle
∧	&and;	∧	And
∨	&or;	∨	Or
∩	∩	∩	Cap
∪	∪	∪	Cup
∫	∫	∫	Integral
∴	&there4;	∴	Therefore
∼	&sim;	∼	Similar to
≅	&cong;	≅	Congurent to
≈	≈	≈	Almost equal
≠	≠	≠	Not equal
≡	&equiv;	≡	Equivalent
≤	≤	≤	Less or equal
≥	≥	≥	Greater or equal
⊂	⊂	⊂	Subset of
⊃	⊃	⊃	Superset of
⊄	&nsub;	⊄	Not subset of
⊆	&sube;	⊆	Subset or equal
⊇	&supe;	⊇	Superset or equal
⊕	&oplus;	⊕	Circled plus
⊗	&otimes;	⊗	Circled times
⊥	&perp;	⊥	Perpendicular
⋅	⋅	⋅	Dot operator

Greek Letters

Full list of all supported greek letters in HTML.

Letter	Entity Name	Entity Number	Description
Α	Α	Α	Alpha
Β	Β	Β	Beta
Γ	Γ	Γ	Gamma
Δ	Δ	Δ	Delta
Ε	Ε	Ε	Epsilon
Ζ	Ζ	Ζ	Zeta
Η	Η	Η	Eta
Θ	Θ	Θ	Theta
Ι	Ι	Ι	Iota
Κ	Κ	Κ	Kappa
Λ	Λ	Λ	Lambda
Μ	Μ	Μ	Mu
Ν	Ν	Ν	Nu
Ξ	Ξ	Ξ	Xi
Ο	Ο	Ο	Omicron
Π	Π	Π	Pi
Ρ	Ρ	Ρ	Rho
Σ	Σ	Σ	Sigma
Τ	Τ	Τ	Tau
Υ	Υ	Υ	Upsilon
Φ	Φ	Φ	Phi
Χ	Χ	Χ	Chi
Ψ	Ψ	Ψ	Psi
Ω	Ω	Ω	Omega
α	α	α	alpha
β	β	β	beta
γ	γ	γ	gamma
δ	δ	δ	delta
ε	ε	ε	epsilon
ζ	ζ	ζ	zeta
η	η	η	eta
θ	θ	θ	theta
ι	ι	ι	iota
κ	κ	κ	kappa
λ	λ	λ	lambda
μ	μ	μ	mu
ν	ν	ν	nu
ξ	ξ	ξ	xi
ο	ο	ο	omicron
π	π	π	pi
ρ	ρ	ρ	rho
ς	&sigmaf;	ς	sigmaf
σ	σ	σ	sigma
σ	σ	σ	sigma
τ	τ	τ	tau
υ	υ	υ	upsilon
φ	φ	φ	phi
χ	χ	χ	chi
ψ	ψ	ψ	psi
ω	ω	ω	omega
ϑ	&thetasym;	ϑ	Theta symbol
ϒ	&upsih;	ϒ	Upsilon symbol
ϖ	ϖ	ϖ	Pi symbol

Miscellaneous HTML entities

List of miscellaneous HTML entities.

Symbol	Entity Name	Entity Number	Description
Œ	&OElig;	Œ	Uppercase ligature OE
œ	&oelig;	œ	Lowercase ligature OE
Š	&Scaron;	Š	Uppercase S with caron
š	&scaron;	š	Lowercase S with caron
Ÿ	&Yuml;	Ÿ	Capital Y with diaeres
ƒ	&fnof;	ƒ	Lowercase with hook
ˆ	&circ;	ˆ	Circumflex accent
˜	&tilde;	˜	Tilde
	&ensp;		En space
	&emsp;		Em space
			Thin space
‌	&zwnj;	‌	Zero width non-joiner
‍	&zwj;	‍	Zero width joiner
‎	&lrm;	‎	Left-to-right mark
‏	&rlm;	‏	Right-to-left mark
–	–	–	En dash
—	—	—	Em dash
‘	‘	‘	Left single quotation mark
’	’	’	Right single quotation mark
‚	&sbquo;	‚	Single low-9 quotation mark
“	“	“	Left double quotation mark
”	”	”	Right double quotation mark
„	&bdquo;	„	Double low-9 quotation mark
†	&dagger;	†	Dagger
‡	&Dagger;	‡	Double dagger
•	•	•	Bullet
…	…	…	Horizontal ellipsis
‰	&permil;	‰	Per mille
′	′	′	Minutes (Degrees)
″	″	″	Seconds (Degrees)
‹	&lsaquo;	‹	Single left angle quotation
›	&rsaquo;	‹	Single right angle quotation
‾	&oline;	‾	Overline
€	€	€	Euro
™	™	™	Trademark
←	←	←	Left arrow
↑	↑	↑	Up arrow
→	→	→	Right arrow
↓	↓	↓	Down arrow
↔	↔	↔	Left right arrow
↵	&crarr;	↵	Carriage return arrow
⌈	&lceil;	⌈	Left ceiling
⌉	&rceil;	⌉	Right ceiling
⌊	&lfloor;	⌊	Left floor
⌋	&rfloor;	⌋	Right floor
◊	&loz;	◊	Lozenge
♠	&spades;	♠	Spade
♣	&clubs;	♣	Club
♥	&hearts;	♥	Heart
♦	&diams;	♦	Diamond

[HTML] Viewport : utiliser la balise meta Viewport adéquate suivant le type de site (optimisé mobile ou non).

21/03/2013 / admin

Viewport pour un site optimisé mobile/smartphone :
(Ressource : Using the viewport meta tag to control layout on mobile browsers)

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

1	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Viewport pour un site non-optimisé mobile/smartphone :
(Ressource : Viewport meta tag for non-responsive design)

<meta name="viewport" content="width=1024">

1	<meta name="viewport" content="width=1024">

Utiliser le second Viewport si l’affichage de votre site se comporte de manière bizarre sur mobile (votre site n’a pas été prévu pour s’afficher sur mobile, la page est zoomée au chargement).

Articles récents

Catégories

Archives

Méta

Catégorie : HTML

[HTML] Exploiter les microformats pour baliser une zone de contact (h-card) de la manière la plus sémantique possible

Ressources officielles sur les Microformats et outils de test en ligne

Demo

[HTML] Le positionnement d’un contenu ancré est décalé à l’écran par rapport à l’emplacement où est placé l’ancre dans le code source de la page.

[HTML] Les commentaires conditionnels sous IE

Ajouter une classe à l’élément `body` pour IE uniquement

[HTML][CSS] Supprimer les marges gauche et droite ajoutées par certains navigateurs entre les éléments d’une liste horizontale lorsqu’on utilise display: inline-block;

1. Placer un commentaire HTML vide entre chaque élément de liste :

2. Coller les balises frères :

[jQuery] Détecter la présence d’une classe .current sur un élément LI et ajouter des classes .before et .after aux éléments LI précédents et suivants avec prevAll et nextAll

[HTML] [CSS] Liste complète des entités HTML

HTML Entity List

ASCII Characters (Printable)

ISO-8859-1 Characters

ISO-8859-1 Symbols

Math Symbols

Greek Letters

Miscellaneous HTML entities

[HTML] Viewport : utiliser la balise meta Viewport adéquate suivant le type de site (optimisé mobile ou non).

Ressources officielles sur les Microformats et outils de test en ligne

Demo

Ajouter une classe à l’élément body pour IE uniquement

1. Placer un commentaire HTML vide entre chaque élément de liste :

2. Coller les balises frères :

HTML Entity List

ASCII Characters (Printable)

ISO-8859-1 Characters

ISO-8859-1 Symbols

Math Symbols

Greek Letters

Miscellaneous HTML entities

Ajouter une classe à l’élément `body` pour IE uniquement