{"id":6448,"date":"2024-04-14T18:46:12","date_gmt":"2024-04-14T10:46:12","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6448"},"modified":"2024-04-14T18:46:12","modified_gmt":"2024-04-14T10:46:12","slug":"html-markup","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/html-markup\/","title":{"rendered":"HTML markup"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>HTML elements enable you to commence your design process by specifying default styles for a particular element type and customizing large groups of elements simultaneously. These default styles can then be replaced with classes and\/or combined classes as you progress with designing your site.<\/p>\n<h6><strong>Handy hint:<\/strong> Utilizing HTML elements is vital for customizing elements within rich text fields in Webflow. To discover more, refer to our tutorial on rich text fields.<\/h6>\n<p>Throughout this tutorial, you\u2019ll understand:<\/p>\n<ol role=\"list\">\n<li>Which elements can be styled<\/li>\n<li>How to personalize the Body (All pages) element<\/li>\n<li>How to customize heading elements<\/li>\n<li>How to style paragraph elements<\/li>\n<li>How to style link elements<\/li>\n<li>How to establish a tag-oriented style guide<\/li>\n<\/ol>\n<h2>Which elements can be styled<\/h2>\n<p>Elements are denoted in pink, distinguishing them from blue classes and green states. Here is a compilation of element types with stylable elements:<\/p>\n<ul role=\"list\">\n<li>Body (all pages)<\/li>\n<li>H1 Heading<\/li>\n<li>H2 Heading<\/li>\n<li>H3 Heading<\/li>\n<li>H4 Heading<\/li>\n<li>H5 Heading<\/li>\n<li>H6 Heading<\/li>\n<li>Paragraph<\/li>\n<li>Link (text links, buttons, link blocks)<\/li>\n<li>Image<\/li>\n<li>Unordered list<\/li>\n<li>Ordered list<\/li>\n<li>List item<\/li>\n<li>Label<\/li>\n<li>Strong (inline bold text)<\/li>\n<li>Ems (inline italic text)<\/li>\n<li>Block quote<\/li>\n<li>Figure (in rich text)<\/li>\n<li>Figure Caption (in rich text)<\/li>\n<li>All code<\/li>\n<\/ul>\n<p>All other elements necessitate styling using <a href=\"http:\/\/help.webflow.com\/article\/classes\">classes<\/a> and\/or <a href=\"http:\/\/help.webflow.com\/article\/combo-classes\">combined classes<\/a>.<\/p>\n<h2>How to personalize the Body (All pages) element<\/h2>\n<p>Configuring typography styles on the <strong>Body (All pages)<\/strong><strong>element<\/strong> will flow down to all typography across the entire site. Here, \u201cBody\u201d signifies an entire site page, housing all other page elements. It\u2019s good practice to define the default font family, font size, and line height on the <strong>Body (All pages)<\/strong> element and substitute those styles on H1-H6 heading elements.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a360d7daab0f3c34956_5f64d690636210d6459eca48_yc5wysz-7p_zhvw2y_ctokyzdwwquus0erkyxltntpe3ssdy8qxne95kuno1n6nq_kik4guffov2akbmhc8lhd71g97si7zbyx2etxfoq2dt22p3skg8cvezcz0ikgefnubwlx3t.jpeg\" alt=\"The Body element is selected in the Navigator panel.\" title=\"64b94a360d7daab0f3c34956_5f64d690636210d6459eca48_yc5wysz-7p_zhvw2y_ctokyzdwwquus0erkyxltntpe3ssdy8qxne95kuno1n6nq_kik4guffov2akbmhc8lhd71g97si7zbyx2etxfoq2dt22p3skg8cvezcz0ikgefnubwlx3t\"><\/div>\n<\/figure>\n<p>You have two ways to style the <strong>Body (All pages)<\/strong> element:<\/p>\n<ul role=\"list\">\n<li>Select the <strong>Body<\/strong> element and opt for the <strong>Body (All pages)<\/strong><strong>element<\/strong> from the <strong>Selector field<\/strong> dropdown in the <strong>Style panel<\/strong><\/li>\n<li>Select any element and pick the <strong>Body (All pages)<\/strong><strong>element<\/strong> from the inheritance menu in the <strong>Style panel<\/strong> \u2014 all elements inherit styles from the <strong>Body (All pages)<\/strong><strong>element<\/strong><\/li>\n<\/ul>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a360d7daab0f3c3495a_5f64d69f192a2a8690292b41_ayxl0nsivrjg3hpwonin0p71gzw8y17vmmvlofpjsz6j0tsfrvdwfvkj8f2u2gt5enohm5fvkumnzuzgrzmp-bnwcreo4xjbqa73srbzvl0upfqae955-h20xqlql6vq_l1uzevp.jpeg\" alt=\"The Body (All pages) element highlighted within the inheritance menu.\" title=\"64b94a360d7daab0f3c3495a_5f64d69f192a2a8690292b41_ayxl0nsivrjg3hpwonin0p71gzw8y17vmmvlofpjsz6j0tsfrvdwfvkj8f2u2gt5enohm5fvkumnzuzgrzmp-bnwcreo4xjbqa73srbzvl0upfqae955-h20xqlql6vq_l1uzevp\"><\/div>\n<\/figure>\n<p>To reach the <strong>Body (All pages)<\/strong> element:<\/p>\n<ol role=\"list\">\n<li>Select the <strong>Body<\/strong> element on any page<\/li>\n<li>Enter the <strong>Selector field<\/strong> in the <strong>Style panel<\/strong><\/li>\n<li>Pick the <strong>Body (All pages)<\/strong> element from the dropdown<\/li>\n<\/ol>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a360d7daab0f3c3495e_5f64d6ebe3141c8c06cd00d2_fpw5irbchjhe3cnduyqizvbacvvfssy7y6tazj7k_dilllvsv8hz_mxpqernnbl4dk5dp6jqxnbdv_mp_x2dxxgwe6yqh5fgnjkaerrig6fe0r4j-gwmtbfcdt8zvmsesrousv3a.jpeg\" alt=\"The Selector field is expanded to display the available Body (All pages) element.\" title=\"64b94a360d7daab0f3c3495e_5f64d6ebe3141c8c06cd00d2_fpw5irbchjhe3cnduyqizvbacvvfssy7y6tazj7k_dilllvsv8hz_mxpqernnbl4dk5dp6jqxnbdv_mp_x2dxxgwe6yqh5fgnjkaerrig6fe0r4j-gwmtbfcdt8zvmsesrousv3a\"><\/div>\n<\/figure>\n<p>To observe and pick a tag on an element with a class applied using the inheritance menu:<\/p>\n<ol role=\"list\">\n<li>Select an element with a class<\/li>\n<li>Tap the inheritance menu link above the <strong>Selector field<\/strong> in the <strong>Style panel <\/strong>\u00a0<\/li>\n<li>Choose the tag (e.g., All paragraphs)<\/li>\n<li>Apply styles<\/li>\n<\/ol>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a360d7daab0f3c34962_6311050ed284d76cf4001821__rg4cnpdhmqs0t-4lqlywpi4eiqxqjzg_1p57rscavgs0c34zvgrbqbhyklbrseg-ulwyooebhleotxscwywyxsx9xubrmjs_vzpbe5dbyn5yz6eezxnhoyxikxkn5dpeat-kiqlwchawy2g-hy2vd.png\" alt=\"The inheritance menu link is highlighted above the Selector field in the Style panel. The link reads \u201cInheriting 2 selectors.\u201d\u00a0\" title=\"64b94a360d7daab0f3c34962_6311050ed284d76cf4001821__rg4cnpdhmqs0t-4lqlywpi4eiqxqjzg_1p57rscavgs0c34zvgrbqbhyklbrseg-ulwyooebhleotxscwywyxsx9xubrmjs_vzpbe5dbyn5yz6eezxnhoyxikxkn5dpeat-kiqlwchawy2g-hy2vd\"><\/div>\n<\/figure>\n<p>Modifications made in <strong>Body (All pages)<\/strong> serve as a starting point, marking a notable contrast between tags and classes \u2014 tags enable you to determine the default styling for groupings of elements.\u00a0<\/p>\n<p>Selecting the <strong>Body (All pages)<\/strong> for style changes implies that all new and existing elements will inherit styles from the <strong>Body (All pages)<\/strong> element. The <strong>Body (All pages)<\/strong> allows you to define default styles such as font, font size, font color, line height, and default background color.\u00a0<\/p>\n<p>You can utilize classes to supersede any default styles on your site.<\/p>\n<h2>How to customize heading elements<\/h2>\n<p>When you insert a <strong>Heading<\/strong> to your site, it adopts any styles established on the <strong>Body (All pages)<\/strong> element. (Don\u2019t overlook \u2014 you can verify style inheritance using the inheritance menu above the <strong>Selector field<\/strong> in the <strong>Style panel<\/strong>.)<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a360d7daab0f3c34971_6311050dd22f24c9b27fd59b_0zuiuczszrfxnb7mm6brvnci8hwemknnczjxotcfb5ijuzrjvofff2wujeisb0wzjw9zgvo4fn3y51njyywrcce-pxkm6jtkbs2lsmm40qcoeibbnbtwcnqj0y0bbzrtpujmul4yi_arzsb2i8qsdh.png\" alt=\"The inheritance menu is expanded under the Selector field in the Style panel. It shows that the selected H1 element is inheriting styles from the Body (All pages) tag, the All H1 headings tag, and the Heading class applied to the element.\" title=\"64b94a360d7daab0f3c34971_6311050dd22f24c9b27fd59b_0zuiuczszrfxnb7mm6brvnci8hwemknnczjxotcfb5ijuzrjvofff2wujeisb0wzjw9zgvo4fn3y51njyywrcce-pxkm6jtkbs2lsmm40qcoeibbnbtwcnqj0y0bbzrtpujmul4yi_arzsb2i8qsdh\"><\/div>\n<\/figure>\n<p>If you wish to overwrite a style without adding that class to each heading, enter the <strong>Selector field<\/strong> and opt for <strong>All H1 Headings<\/strong>. This will demonstrate that the font is still being inherited from Body (All pages), which is anticipated. Consequently, on changing the font, all your H1s will be updated.\u00a0<\/p>\n<p>For instance, if your default font is configuredChanging the font style to Tahoma on the <strong>Body (All pages) tag<\/strong> will automatically apply Tahoma to all new H1 headings. If you adjust the font for the <strong>All H1 Headings tag<\/strong> to Playfair, then all H1 headings will display in Playfair. Adding a class to a specific H1 heading and setting the font to Raleway will change that particular H1 (along with others using the same class) to Raleway.<\/p>\n<h6><strong>Keep in mind: <\/strong>Elements seek the closest styling information in the hierarchy.<\/h6>\n<p>An element, like an H1, may have a class that dictates its styling. If the class lacks certain styling details, the H1 will refer to the next level up and adopt styling cues from the <strong>All H1 Headings tag<\/strong>, which, in turn, follows the styling from the <strong>Body (All pages) tag<\/strong>.<\/p>\n<blockquote><p><strong>Remember: <\/strong>Tags help in defining default styles, while classes enable overriding those defaults.<\/p><\/blockquote>\n<h6><strong>Helpful hint: <\/strong>Typography styles for headings are typically distinct from paragraph styles. It&#8217;s a common practice to use the same font family across all heading tags (H1-H6).<\/h6>\n<h2>How to customize paragraph tags<\/h2>\n<p>Select any paragraph (without a specific class) and access the <strong>All Paragraphs tag<\/strong> in the <strong>Style panel<\/strong> to make style adjustments.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a360d7daab0f3c34969_5f64d7342b75455e5f838651_oglhoonqich_xoyzbdkofx2sderncshxrffihw1p-8-lwv0hfsebjv7z4vo1xqdytcgf8fdhioxn9xzqjwrctdtr9qppfq5m38-ymxvjffmfd-rk44ihvrpg1we_kvo9hlfil7e.jpeg\" alt=\"The Selector field is expanded to show the available All paragraphs tag.\" title=\"64b94a360d7daab0f3c34969_5f64d7342b75455e5f838651_oglhoonqich_xoyzbdkofx2sderncshxrffihw1p-8-lwv0hfsebjv7z4vo1xqdytcgf8fdhioxn9xzqjwrctdtr9qppfq5m38-ymxvjffmfd-rk44ihvrpg1we_kvo9hlfil7e\"><\/div>\n<\/figure>\n<p>For instance, you can modify the line height by:<\/p>\n<ol role=\"list\">\n<li>Accessing the <strong>height<\/strong> field under <strong>Typography<\/strong><\/li>\n<li>Adjusting the value (e.g., to 1.6)<\/li>\n<li>Converting it to a unitless value by typing a hyphen or selecting one from the unit dropdown<\/li>\n<\/ol>\n<h6><strong>Pro tip: <\/strong>Unitless ensures the line height adjusts proportionally with the font size.<\/h6>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a360d7daab0f3c34952_5f64d748c4bfa8a50f7b38e2_gpyfsfrerhwk3fqnkrmcwmn4mahwvcnbdst-mteo3bxfriqqcvd5qi2rz5oziy5s14lgtnqpr1lxjcn3rf-md3pmifnnkrg0xbfcnukrvkqvxibeu6ycprk4peyau2ecx5p48ixp.jpeg\" alt=\"The Typography section of the Style panel shows that the text line height is set to a value of 1.6 unitless.\" title=\"64b94a360d7daab0f3c34952_5f64d748c4bfa8a50f7b38e2_gpyfsfrerhwk3fqnkrmcwmn4mahwvcnbdst-mteo3bxfriqqcvd5qi2rz5oziy5s14lgtnqpr1lxjcn3rf-md3pmifnnkrg0xbfcnukrvkqvxibeu6ycprk4peyau2ecx5p48ixp\"><\/div>\n<\/figure>\n<p>You can use the <strong>All Paragraphs tag<\/strong> to insert space between paragraphs, similar to the effect of hitting &#8220;Return&#8221; or &#8220;Enter&#8221; on a keyboard. Line height prevents text merging from line to line, while bottom margin allows for vertical spacing between paragraphs.<\/p>\n<h2>How to personalize link tags<\/h2>\n<p>To add a <strong>Link<\/strong> to your website, you can:<\/p>\n<ul role=\"list\">\n<li>Select it from the <strong>Add Elements panel<\/strong><\/li>\n<li>Double-click on existing text on the canvas<\/li>\n<li>Highlight the desired text for linking and create a nested text link<\/li>\n<\/ul>\n<p>To make default style alterations to your links:<\/p>\n<ol role=\"list\">\n<li>Access the <strong>Selector field<\/strong><\/li>\n<li>Choose the <strong>All links<\/strong> <strong>tag<\/strong><\/li>\n<li>Modify text decoration or font color<\/li>\n<\/ol>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a360d7daab0f3c34966_5f64d75d63621067799fa62a_lgjzyuqiuo84b6zyqdldgfiqh4b9umrywdfj1pny810xtm3gab4ylfxriknaser3lg36z3ofdg2i5s87grhckqoovsh5txm65gtf7bzrumchxdya3ppku8fxtsqn1_9c-bkkv_6b.jpeg\" alt=\"The Selector field is expanded to show the available All links tag.\" title=\"64b94a360d7daab0f3c34966_5f64d75d63621067799fa62a_lgjzyuqiuo84b6zyqdldgfiqh4b9umrywdfj1pny810xtm3gab4ylfxriknaser3lg36z3ofdg2i5s87grhckqoovsh5txm65gtf7bzrumchxdya3ppku8fxtsqn1_9c-bkkv_6b\"><\/div>\n<\/figure>\n<p>Any new links added will inherit the default styles defined on the <strong>All links tag<\/strong>.<\/p>\n<blockquote><p><strong>Critical: <\/strong>The styles applied to the <strong>All links tag<\/strong> impact various link types beyond text links. For example, changes made to the font color on the <strong>All links tag<\/strong> with the <a href=\"http:\/\/help.webflow.com\/article\/states\">hover state<\/a> activated will affect all linked elements, like buttons. If needed, you may need to override these hover state styles on your button class.<\/p><\/blockquote>\n<p>Tags are beneficial for setting global defaults but can have wide-reaching effects if not managed carefully. Remember to visually review the elements impacted by tag-based style adjustments.<\/p>\n<h2>How to devise a tag-based style guide<\/h2>\n<p>A style guide allows you to establish default site styles early in the design process. Webflow has produced a <a href=\"https:\/\/webflow.com\/website\/style-guide-edu?s=style-guide-edu\">tag-based style guide<\/a> that you can duplicate to jumpstart your new website with a polished style guide.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a360d7daab0f3c3496d_6311050e186fb2bbc9915348_p_d6nfkf_v0zlka-jgmbysk9qtbyf6urbvkzsl3mewykxn1_h9cnzphw3yfnh_twtp2scgsnzc_b3rrndqx3jqito12pz5umzwmwgxpemsyfrnph0ckggjiuhk1na77y0fj6iaqq7ogw_de9mepuig.png\" alt=\"Webflow\u2019s example tag-based style guide contains a heading hierarchy, paragraph elements, block quotes, and ordered and bulleted lists styled with HTML tags.\" title=\"64b94a360d7daab0f3c3496d_6311050e186fb2bbc9915348_p_d6nfkf_v0zlka-jgmbysk9qtbyf6urbvkzsl3mewykxn1_h9cnzphw3yfnh_twtp2scgsnzc_b3rrndqx3jqito12pz5umzwmwgxpemsyfrnph0ckggjiuhk1na77y0fj6iaqq7ogw_de9mepuig\"><\/div>\n<\/figure>\n<h6><strong>Note: <\/strong>Remember to secure the style guide\u2019s content or prevent search engines from indexing it if you prefer to keep it private and not searchable online.<\/h6>\n<h3>How to craft your simplistic style guide template<\/h3>\n<p>Style guides act as dedicated pages where common elements are structured and styled for easy previewing of default styles. You can create a style guide template to expedite the creation of style guides for each new website you make.<\/p>\n<p>To create a style guide template:<\/p>\n<ol role=\"list\">\n<li>Establish a single-page site<\/li>\n<li>Include a section on the page<\/li>\n<li>Add at least one instance of each element with an HTML tag for styling<\/li>\n<li>Avoid applying classes to these elements<\/li>\n<\/ol>\n<p>To utilize this template on a new site:<\/p>\n<ol role=\"list\">\n<li>Develop a new page on your new site<\/li>\n<li>Name the page (e.g., &#8220;Style guide&#8221;)<\/li>\n<li>Save the page as a draft<\/li>\n<li>Go to the template site<\/li>\n<li>Select and copy the section<\/li>\n<li>Paste it onto the &#8220;Style guide&#8221; page of your new site<\/li>\n<li>Select each element and style its HTML tag accordingly<\/li>\n<\/ol>\n<blockquote><p><strong>Vital: <\/strong>Do not overlook styling the <strong>Body (All pages) tag<\/strong> \u2014 as you can&#8217;t duplicate\/paste a page&#8217;s body, you need to set its style on the &#8220;Style guide&#8221; page of your new site by styling the <strong>Body (All Pages) tag<\/strong>. Refer to additional details about the Body element.<\/p><\/blockquote>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use HTML element tags to control the default styling for a particular element type.","protected":false},"author":2,"featured_media":6449,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-6448","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6448","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6448"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6448\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6449"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}