{"id":414,"date":"2025-09-25T13:26:21","date_gmt":"2025-09-25T11:26:21","guid":{"rendered":"https:\/\/wp.bertrand-kaernel.fr\/skol-lp\/?p=414"},"modified":"2025-09-25T13:28:03","modified_gmt":"2025-09-25T11:28:03","slug":"typographie-rendues-des-elements-html","status":"publish","type":"post","link":"https:\/\/wp.bertrand-kaernel.fr\/skol-lp\/documentation\/typographie-rendues-des-elements-html\/","title":{"rendered":"Typographie &#8211; Rendues des \u00e9lements html"},"content":{"rendered":"<div class=\"content__body content__body--aligned content__entry\" style=\"transform: none; opacity: 1;\">\n<h2>This is a Heading 2<\/h2>\n<p>Pellentesque et aliquet ipsum, vitae luctus urna. Sed mollis massa a porttitor iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p>\n<h3>This is a Heading 3<\/h3>\n<p>Pellentesque et aliquet ipsum, vitae luctus urna. Sed mollis massa a porttitor iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p>\n<h4>This is a Heading 4<\/h4>\n<p>Pellentesque et aliquet ipsum, vitae luctus urna. Sed mollis massa a porttitor iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p>\n<h5>This is a Heading 5<\/h5>\n<p>Pellentesque et aliquet ipsum, vitae luctus urna. Sed mollis massa a porttitor iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p>\n<h6>This is a Heading 6<\/h6>\n<p>Pellentesque et aliquet ipsum, vitae luctus urna. Sed mollis massa a porttitor iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p>\n<p><strong>Paragraph One<\/strong> \u2013 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus gravida neque, quis convallis libero sollicitudin vitae. Morbi et lacus metus. Maecenas tincidunt suscipit nulla, ac egestas ligula luctus vitae. In hac habitasse platea dictumst.<\/p>\n<p><strong>Paragraph Two<\/strong> \u2013 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus gravida neque, quis convallis libero sollicitudin vitae. Morbi et lacus metus. Maecenas tincidunt suscipit nulla, ac egestas ligula luctus vitae. In hac habitasse platea dictumst.<\/p>\n<ul>\n<li><strong>Unordered Lists.<\/strong><\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/li>\n<\/ul>\n<ol>\n<li><strong>Numeric List.<\/strong><\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/li>\n<\/ol>\n<dl>\n<dt>DL list<\/dt>\n<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit<\/dd>\n<dt>DL list<\/dt>\n<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit<\/dd>\n<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit<\/dd>\n<\/dl>\n<blockquote><p>Proin ultricies diam in malesuada ultrices. Vivamus porta metus, ac pulvinar lacus cursus ut. Pellentesque vel interdum felis, sed mauris. Maecenas imperdiet orci ut felis.<\/p><\/blockquote>\n<pre><code>pre {  \r\n  background-color: $dark;\r\n  white-space: pre-wrap; \r\n}\r\n<\/code><\/pre>\n<p>Highlight <mark>text<\/mark> by using the mark tag<\/p>\n<p><del>This text type should be treated as deleted<\/del><\/p>\n<p><s>This text type should be treated as inaccurate or updated<\/s><\/p>\n<p><ins>This text type should be considered an addition to the document<\/ins><\/p>\n<p><u>This text will be displayed as underlined<\/u><\/p>\n<p><small>This text type should be treated as fine print for contracts<\/small><\/p>\n<p><strong>This text will be displayed as bold<\/strong><\/p>\n<p><em>This text will be displayed in italics<\/em><\/p>\n<p><a class=\"btn\" href=\"#\">Button<\/a><a class=\"btn btn--dark\" href=\"#\">Button<\/a><a class=\"btn btn--light\" href=\"#\">Button<\/a><a class=\"btn btn--clean\" href=\"#\">Button<\/a><\/p>\n<hr \/>\n<p>Below you will find some extra tips and tricks you\u2019ll love to be \u201cin the know\u201d about.<\/p>\n<p>You can easily add extra styling elements to your content by selecting the right element from the <strong>Formats menu<\/strong> of the WYSIWYG editor toolbar:<\/p>\n<h2>Numeric List<\/h2>\n<p>Create a numeric <strong>&lt;ol&gt;<\/strong> list, then highlight it and, in the <strong>Formats menu<\/strong>, select <strong>Ordered List<\/strong>. This will restyle the list to look like:<\/p>\n<ol class=\"ordered-list\">\n<li>Duis placerat magna nec metus pellentesque vulputate.\u00a0Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus pulvinar ante ut congue.<\/li>\n<li>Praesent eu nibh non massa auctor vehicula vitae vitae dolor.\u00a0Quisque est urna, vehicula a eros ut, pretium pharetra est. Duis vitae ex facilisis, cursus dui quis, ultrices nibh.<\/li>\n<li>Pellentesque ut libero eu augue feugiat finibus non sit amet odio.\u00a0Cras fringilla tortor consectetur, tincidunt nibh quis, molestie risus. Integer viverra dui elit, ac auctor sem consequat semper.<\/li>\n<\/ol>\n<h2>Dropcaps<\/h2>\n<p>You can easily add\u00a0dropcaps\u00a0(dropped capital) to your content by selecting the right element from the <strong>Formats menu<\/strong> of the WYSIWYG editor toolbar.<\/p>\n<p class=\"dropcap\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia varius suscipit. Vestibulum varius dui metus, vel porttitor dui ullamcorper at. Vestibulum ac tortor vestibulum neque gravida euismod. Mauris eu convallis sem. Pellentesque id odio dictum, hendrerit ligula quis, sollicitudin ante. In consequat lorem at lacus elementum, mollis aliquet tortor sagittis. Maecenas et nulla mi. Vivamus ligula tortor, porttitor et enim non, feugiat porta elit.<\/p>\n<h2>Messages<\/h2>\n<p>Convert your paragraphs to Tips, Info, Success or Warning messages by selecting or highlighting them and clicking on the Info, Tips, Success or Warning options in the <strong>Formats menu<\/strong>:<\/p>\n<p class=\"msg msg--highlight\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique quam augue. (paragraph with the <code>.msg .msg--highlight<\/code> classes)<\/p>\n<p class=\"msg msg--info\">Sodales maximus lacus venenatis quis. Etiam in ipsum et sem placerat semper et in magna. (paragraph with the <code>.msg .msg--info<\/code> classes)<\/p>\n<p class=\"msg msg--success\">Suspendisse vel odio felis. Nullam facilisis aliquet ex at fringilla. Quisque imperdiet elit vitae mi eleifend semper. Nulla mattis, est id accumsan placerat, nunc urna lacinia ex, (paragraph with the <code>.msg .msg--success<\/code> classes)<\/p>\n<p class=\"msg msg--warning\">Eu venenatis nunc lacus quis felis. Etiam et rhoncus dui. Quisque vestibulum sed eros quis rutrum. (paragraph with the <code>.msg .msg--warning<\/code> classes)<\/p>\n<h2>Tables<\/h2>\n<p>You can easily add extra styling table to your content by selecting the right element from the <strong>Formats menu<\/strong> of the WYSIWYG editor toolbar.<\/p>\n<p>By default all tables look like:<\/p>\n<table>\n<tbody>\n<tr>\n<th>#<\/th>\n<th>Date<\/th>\n<th>City<\/th>\n<th>Country<\/th>\n<\/tr>\n<tr>\n<td>1<\/td>\n<td>October 29th, 2017<\/td>\n<td>Ramillies<\/td>\n<td>France<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>September 20th, 2018<\/td>\n<td>Dufftown<\/td>\n<td>Japan<\/td>\n<\/tr>\n<tr>\n<td>3<\/td>\n<td>October 15th, 2018<\/td>\n<td>Kircudbright<\/td>\n<td>Antarctica<\/td>\n<\/tr>\n<tr>\n<td>4<\/td>\n<td>March 1st, 2019<\/td>\n<td>South Burlington<\/td>\n<td>Virgin Islands<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This is a Heading 2 Pellentesque et aliquet ipsum, vitae luctus urna. Sed mollis massa a porttitor iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is a Heading 3 Pellentesque et aliquet ipsum, vitae luctus urna. Sed mollis massa a porttitor iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-414","post","type-post","status-publish","format-standard","hentry","category-documentation"],"_links":{"self":[{"href":"https:\/\/wp.bertrand-kaernel.fr\/skol-lp\/wp-json\/wp\/v2\/posts\/414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.bertrand-kaernel.fr\/skol-lp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.bertrand-kaernel.fr\/skol-lp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.bertrand-kaernel.fr\/skol-lp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.bertrand-kaernel.fr\/skol-lp\/wp-json\/wp\/v2\/comments?post=414"}],"version-history":[{"count":2,"href":"https:\/\/wp.bertrand-kaernel.fr\/skol-lp\/wp-json\/wp\/v2\/posts\/414\/revisions"}],"predecessor-version":[{"id":416,"href":"https:\/\/wp.bertrand-kaernel.fr\/skol-lp\/wp-json\/wp\/v2\/posts\/414\/revisions\/416"}],"wp:attachment":[{"href":"https:\/\/wp.bertrand-kaernel.fr\/skol-lp\/wp-json\/wp\/v2\/media?parent=414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.bertrand-kaernel.fr\/skol-lp\/wp-json\/wp\/v2\/categories?post=414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.bertrand-kaernel.fr\/skol-lp\/wp-json\/wp\/v2\/tags?post=414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}