CategoryHTML

Astuces HTML pour développeurs front-end / intégrateurs html.

[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.

Source: Anchor link landing in wrong position.

Code qui pose problème:

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:

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

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

[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;

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.

ecarts

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.

espaces

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 :

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

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 (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
; &#59; Semicolon
< &lt; &#60; Less-than
= &#61; Equals sign
> &gt; &#62; Greater than
? &#63; Question mark
@ &#64; At sign
A &#65; Uppercase A
B &#66; Uppercase B
C &#67; Uppercase C
D &#68; Uppercase D
E &#69; Uppercase E
F &#70; Uppercase F
G &#71; Uppercase G
H &#72; Uppercase H
I &#73; Uppercase I
J &#74; Uppercase J
K &#75; Uppercase K
L &#76; Uppercase L
M &#77; Uppercase M
N &#78; Uppercase N
O &#79; Uppercase O
P &#80; Uppercase P
Q &#81; Uppercase Q
R &#82; Uppercase R
S &#83; Uppercase S
T &#84; Uppercase T
U &#85; Uppercase U
V &#86; Uppercase V
W &#87; Uppercase W
X &#88; Uppercase X
Y &#89; Uppercase Y
Z &#90; Uppercase Z
[ &#91; Opening/Left square bracket
\ &#92; Backslash
] &#93; Closing/Right square bracket
^ &#94; Caret
_ &#95; Underscore
` &#96; Grave accent
a &#97; Lowercase a
b &#98; Lowercase b
c &#99; Lowercase c
d &#100; Lowercase d
e &#101; Lowercase e
f &#102; Lowercase f
g &#103; Lowercase g
h &#104; Lowercase h
i &#105; Lowercase i
j &#106; Lowercase j
k &#107; Lowercase k
l &#108; Lowercase l
m &#109; Lowercase m
n &#110; Lowercase n
o &#111; Lowercase o
p &#112; Lowercase p
q &#113; Lowercase q
r &#114; Lowercase r
s &#115; Lowercase s
t &#116; Lowercase t
u &#117; Lowercase u
v &#118; Lowercase v
w &#119; Lowercase w
x &#120; Lowercase x
y &#121; Lowercase y
z &#122; Lowercase z
{ &#123; Opening/Left curly brace
| &#124; Vertical bar
} &#125; Closing/Right curly brace
~ &#126; 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
À &Agrave; &#192; Capital a with grave accent
Á &Aacute; &#193; Capital a with acute accent
 &Acirc; &#194; Capital a with circumflex accent
à &Atilde; &#195; Capital a with tilde
Ä &Auml; &#196; Capital a with umlaut
Å &Aring; &#197; Capital a with ring
Æ &AElig; &#198; Capital ae
Ç &Ccedil; &#199; Capital c with cedilla
È &Egrave; &#200; Capital e with grave accent
É &Eacute; &#201; Capital e with acute accent
Ê &Ecirc; &#202; Capital e with circumflex accent
Ë &Euml; &#203; Capital e with umlaut
Ì &Igrave; &#204; Capital i with grave accent
Í &Iacute; &#205; Capital i with accute accent
Î &Icirc; &#206; Capital i with circumflex accent
Ï &Iuml; &#207; Capital i with umlaut
Ð &ETH; &#208; Capital eth (Icelandic)
Ñ &Ntilde; &#209; Capital n with tilde
Ò &Ograve; &#210; Capital o with grave accent
Ó &Oacute; &#211; Capital o with accute accent
Ô &Ocirc; &#212; Capital o with circumflex accent
Õ &Otilde; &#213; Capital o with tilde
Ö &Ouml; &#214; Capital o with umlaut
Ø &Oslash; &#216; Capital o with slash
Ù &Ugrave; &#217; Capital u with grave accent
Ú &Uacute; &#218; Capital u with acute accent
Û &Ucirc; &#219; Capital u with circumflex accent
Ü &Uuml; &#220; Capital u with umlaut
Ý &Yacute; &#221; Capital y with acute accent
Þ &THORN; &#222; Capital thorn (Icelandic)
ß &szlig; &#223; Lowercase sharp s (German)
à &agrave; &#224; Lowercase a with grave accent
á &aacute; &#225; Lowercase a with acute accent
â &acirc; &#226; Lowercase a with circumflex accent
ã &atilde; &#227; Lowercase a with tilde
ä &auml; &#228; Lowercase a with umlaut
å &aring; &#229; Lowercase a with ring
æ &aelig; &#230; Lowercase ae
ç &ccedil; &#231; Lowercase c with cedilla
è &egrave; &#232; Lowercase e with grave accent
é &eacute; &#233; Lowercase e with acute accent
ê &ecirc; &#234; Lowercase e with circumflex accent
ë &euml; &#235; Lowercase e with umlaut
ì &igrave; &#236; Lowercase i with grave accent
í &iacute; &#237; Lowercase i with acute accent
î &icirc; &#238; Lowercase i with circumflex accent
ï &iuml; &#239; Lowercase i with umlaut
ð &eth; &#240; Lowercase eth (Icelandic)
ñ &ntilde; &#241; Lowercase n with tilde
ò &ograve; &#242; Lowercase o with grave accent
ó &oacute; &#243; Lowercase o with acute accent
ô &ocirc; &#244; Lowercase o with circumflex accent
õ &otilde; &#245; Lowercase o with tilde
ö &ouml; &#246; Lowercase o with umlaut
ø &oslash; &#248; Lowercase o with slash
ù &ugrave; &#249; Lowercase u with grave accent
ú &uacute; &#250; Lowercase u with acute accent
û &ucirc; &#251; Lowercase u with circumflex accent
ü &uuml; &#252; Lowercase u with umlaut
ý &yacute; &#253; Lowercase y with acute accent
þ &thorn; &#254; Lowercase thorn (Icelandic)
ÿ &yuml; &#255; Lowercase y with umlaut

ISO-8859-1 Symbols

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

Symbol Entity Name Entity Number Description
&nbsp; &#160; Non-breaking space
¡ &iexcl; &#161; Inverted exclamation mark
¢ &cent; &#162; Cent
£ &pound; &#163; Pound
¤ &curren; &#164; Currency
¥ &yen; &#165; Yen
¦ &brvbar; &#166; Broken vertical bar
§ &sect; &#167; Section
¨ &uml; &#168; Spacing diaeresis
© &copy; &#169; Copyright
ª &ordf; &#170; Feminine ordinal indicator
« &laquo; &#171; Opening/Left angle quotation mark
¬ &not; &#172; Negation
­ &shy; &#173; Soft hyphen
® &reg; &#174; Registered trademark
¯ &macr; &#175; Spacing macron
° &deg; &#176; Degree
± &plusmn; &#177; Plus or minus
² &sup2; &#178; Superscript 2
³ &sup3; &#179; Superscript 3
´ &acute; &#180; Spacing acute
µ &micro; &#181; Micro
&para; &#182; Paragraph
¸ &cedil; &#184; Spacing cedilla
¹ &cedil; &#185; Superscript 1
º &ordm; &#186; Masculine ordinal indicator
» &raquo; &#187; Closing/Right angle quotation mark
¼ &frac14; &#188; Fraction 1/4
½ &frac12; &#189; Fraction 1/2
¾ &frac34; &#190; Fraction 3/4
¿ &iquest; &#191; Inverted question mark
× &times; &#215; Multiplication
÷ &divide; &#247; Divide

Math Symbols

Full list of all supported math symbols in HTML.

Symbol Entity Name Entity Number Description
&forall; &#8704; For all
&part; &#8706; Part
&exist; &#8707; Exist
&empty; &#8709; Empty
&nabla; &#8711; Nabla
&isin; &#8712; Is in
&notin; &#8713; Not in
&ni; &#8715; Ni
&prod; &#8719; Product
&sum; &#8721; Sum
&minus; &#8722; Minus
&lowast; &#8727; Asterisk (Lowast)
&radic; &#8730; Square root
&prop; &#8733; Proportional to
&infin; &#8734; Infinity
&ang; &#8736; Angle
&and; &#8743; And
&or; &#8744; Or
&cap; &#8745; Cap
&cup; &#8746; Cup
&int; &#8747; Integral
&there4; &#8756; Therefore
&sim; &#8764; Similar to
&cong; &#8773; Congurent to
&asymp; &#8776; Almost equal
&ne; &#8800; Not equal
&equiv; &#8801; Equivalent
&le; &#8804; Less or equal
&ge; &#8805; Greater or equal
&sub; &#8834; Subset of
&sup; &#8835; Superset of
&nsub; &#8836; Not subset of
&sube; &#8838; Subset or equal
&supe; &#8839; Superset or equal
&oplus; &#8853; Circled plus
&otimes; &#8855; Circled times
&perp; &#8869; Perpendicular
&sdot; &#8901; Dot operator

Greek Letters

Full list of all supported greek letters in HTML.

Letter Entity Name Entity Number Description
Α &Alpha; &#913; Alpha
Β &Beta; &#914; Beta
Γ &Gamma; &#915; Gamma
Δ &Delta; &#916; Delta
Ε &Epsilon; &#917; Epsilon
Ζ &Zeta; &#918; Zeta
Η &Eta; &#919; Eta
Θ &Theta; &#920; Theta
Ι &Iota; &#921; Iota
Κ &Kappa; &#922; Kappa
Λ &Lambda; &#923; Lambda
Μ &Mu; &#924; Mu
Ν &Nu; &#925; Nu
Ξ &Xi; &#926; Xi
Ο &Omicron; &#927; Omicron
Π &Pi; &#928; Pi
Ρ &Rho; &#929; Rho
Σ &Sigma; &#931; Sigma
Τ &Tau; &#932; Tau
Υ &Upsilon; &#933; Upsilon
Φ &Phi; &#934; Phi
Χ &Chi; &#935; Chi
Ψ &Psi; &#936; Psi
Ω &Omega; &#937; Omega
α &alpha; &#945; alpha
β &beta; &#946; beta
γ &gamma; &#947; gamma
δ &delta; &#948; delta
ε &epsilon; &#949; epsilon
ζ &zeta; &#950; zeta
η &eta; &#951; eta
θ &theta; &#952; theta
ι &iota; &#953; iota
κ &kappa; &#954; kappa
λ &lambda; &#955; lambda
μ &mu; &#956; mu
ν &nu; &#957; nu
ξ &xi; &#958; xi
ο &omicron; &#959; omicron
π &pi; &#960; pi
ρ &rho; &#961; rho
ς &sigmaf; &#962; sigmaf
σ &sigma; &#963; sigma
σ &sigma; &#963; sigma
τ &tau; &#964; tau
υ &upsilon; &#965; upsilon
φ &phi; &#966; phi
χ &chi; &#967; chi
ψ &psi; &#968; psi
ω &omega; &#969; omega
ϑ &thetasym; &#977; Theta symbol
ϒ &upsih; &#978; Upsilon symbol
ϖ &piv; &#982; Pi symbol

Miscellaneous HTML entities

List of miscellaneous HTML entities.

€Œ €Œ Œ €Œ €Œ €Œ €Œ Œ €Œ Œ €Œ €Œ Œ Œ €Œ Œ €Œ €Œ €Œ €Œ €Œ €Œ Œ €Œ €Œ €Œ €Œ

Symbol Entity Name Entity Number Description
Π&OElig; &#338; Uppercase ligature OE
œ &oelig; &#339; Lowercase ligature OE
Š &Scaron; &#352; Uppercase S with caron
š &scaron; &#353; Lowercase S with caron
Ÿ &Yuml; &#376; Capital Y with diaeres
ƒ &fnof; &#402; Lowercase with hook
ˆ &circ; &#710; Circumflex accent
˜ &tilde; &#732; Tilde
&ensp; &#8194; En space
&emsp; &#8195; Em space
&thinsp; &#8201; Thin space
&zwnj; &#8204; Zero width non-joiner
&zwj; &#8205; Zero width joiner
&lrm; &#8206; Left-to-right mark
&rlm; &#8207; Right-to-left mark
&ndash; &#8211; En dash
&mdash; &#8212; Em dash
&lsquo; &#8216; Left single quotation mark
&rsquo; &#8217; Right single quotation mark
&sbquo; &#8218; Single low-9 quotation mark
&ldquo; &#8220; Left double quotation mark
&rdquo; &#8221; Right double quotation mark
&bdquo; &#8222; Double low-9 quotation mark
&dagger; &#8224; Dagger
&Dagger; &#8225; Double dagger
&bull; &#8226; Bullet
&hellip; &#8230; Horizontal ellipsis
&permil; &#8240; Per mille
&prime; &#8242; Minutes (Degrees)
&Prime; &#8243; Seconds (Degrees)
&lsaquo; &#8249; Single left angle quotation
&rsaquo; &#8249; Single right angle quotation
&oline; &#8254; Overline
&euro; &#8364; Euro
&trade; &#8482; Trademark
&larr; &#8592; Left arrow
&uarr; &#8593; Up arrow
&rarr; &#8594; Right arrow
&darr; &#8595; Down arrow
&harr; &#8596; Left right arrow
&crarr; &#8629; Carriage return arrow
&lceil; &#8968; Left ceiling
&rceil; &#8969; Right ceiling
&lfloor; &#8970; Left floor
&rfloor; &#8971; Right floor
&loz; &#9674; Lozenge
&spades; &#9824; Spade
&clubs; &#9827; Club
&hearts; &#9829; Heart
&diams; &#9830; Diamond

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

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

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

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).

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑