{"id":15975,"date":"2020-12-13T23:18:59","date_gmt":"2020-12-14T07:18:59","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=15975"},"modified":"2023-12-01T04:05:52","modified_gmt":"2023-12-01T12:05:52","slug":"html-span","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/html-span\/","title":{"rendered":"HTML Span: A Guide for Beginners"},"content":{"rendered":"\n<p><em>The HTML &lt;span&gt; tag lets you apply styles to a part of a web page or a paragraph. It is often used to stylize the text in a paragraph, such as by changing the color of a word. The &lt;span&gt; tag by default has no styles.<\/em><\/p>\n\n\n\n<p>When you\u2019re programming in HTML, you may decide you want to style something specific on your web page. For instance, you may want to emphasize a certain word in a sentence or a specific link in a list of links.<\/p>\n\n\n\n<p>That\u2019s where the HTML <em>&lt;span&gt;<\/em> tag comes in. <em>&lt;span&gt;<\/em> is a generic inline container that allows you to phrase content on a web document. The <em>&lt;span&gt;<\/em> tag is commonly used for styling purposes\u2014especially for styling text.<\/p>\n\n\n\n<p>This tutorial will discuss, with examples, how to use HTML <em>&lt;span&gt;<\/em> to style elements on a web page. By the end of reading this tutorial, you\u2019ll be an expert at using the HTML <em>&lt;span&gt;<\/em> tag.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML &lt;span&gt; Tag<\/h2>\n\n\n\n<p>The HTML &lt;span&gt; tag manipulates part of a web page. It is often used inside a &lt;p&gt; element to apply styles to a specific part of a paragraph. For instance, you could use &lt;span&gt; to change the color of a word in a paragraph.<\/p>\n\n\n\n<p>By itself, the <em>&lt;span&gt;<\/em> tag has no default rendering or values. This means that if you use the tag without any attributes, it will have no effect on how your web page is rendered.<\/p>\n\n\n\n<p>The <em>&lt;span&gt;<\/em> tag is often used with CSS to apply a certain style to a specific element or elements on a web page. <em>&lt;span&gt;<\/em> makes it easy for you to apply a certain style to multiple elements on a web page all at once.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML &lt;span&gt; Syntax<\/h2>\n\n\n\n<p>The HTML <em>Span<\/em> tag has both an opening (&lt;span&gt;) and a closing (&lt;\/span&gt;) element. We can use the following syntax to use the &lt;span&gt; tag:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;span&gt;&lt;\/span&gt;<\/pre><\/div>\n\n\n\n<p>The HTML <em>&lt;span&gt;<\/em> tag has no tag-specific attributes. For instance, the &lt;img&gt; tag has &#8220;height&#8221; and &#8220;width&#8221; as tag-specific attributes. &lt;span&gt; has none of these types of attributes because it relies on CSS for styling. The <em>&lt;span&gt;<\/em> tag supports all <a href=\"https:\/\/careerkarma.com\/blog\/html-attributes\">global HTML attributes<\/a>. <\/p>\n\n\n\n<p>You can think of the &lt;span&gt; tag as similar to &lt;div&gt; in that &lt;span&gt; does not have any specific styles itself. But, &lt;div&gt; tags are used to define sections and blocks of a text because &lt;div&gt; is a block element. &lt;span&gt; is used to apply styles to specific parts of a document, such as a paragraph.<\/p>\n\n\n\n<p>In the following section, we will walk through a few examples that illustrate how the <em>&lt;span&gt;<\/em> tag works in HTML.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">&lt;span&gt; Tag HTML Examples<\/h2>\n\n\n\n<p>Let\u2019s walk through a few examples of code that uses the <em>&lt;span&gt;<\/em> tag to style inline elements in HTML. Our first example will use the <em>&lt;span&gt;<\/em> tag in a paragraph; our second example will use it in a list.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">&lt;span&gt; HTML in a paragraph<\/h3>\n\n\n\n<p>Suppose we are designing a web page for a local bakery\u2014Pringle and Sons Bakery. This web page will outline the history of the bakery. The owner of the bakery, Mr. Pringle, asked us to emphasize certain key facts with red text.<\/p>\n\n\n\n<p>We could use the following code to accomplish this task:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>index.html\n\n&lt;p&gt;Pringle and Sons Bakery is a staple of the Oakbridge, Indiana community. The Bakery, founded by James Pringle in 1975, serves &lt;span class=&quot;redText&quot;&gt;delicious baked goods&lt;\/span&gt; and coffee to the Oakbridge area. It has served &lt;span class=&quot;redText&quot;&gt;thousands&lt;\/span&gt; of customers since its foundation.&lt;\/p&gt;\n\nstyles.css\n\n.redText {\ncolor: red;\n}<\/pre><\/div>\n\n\n\n<p>Our code returns:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/cUGWBke6se0LycGtvETw0WW5kh5Ee31Eoidp0iwX-v2iN3kbHMl6AEOdquEsQyDBR-9B2s_xBsBe7RGSyo7IAVB_5w8BPTDEOPcw4gR603v9pQwpHpovyRBJtTM7iqLA5dJLM_Wr\" alt=\"\"\/><\/figure>\n\n\n\n<p>In our example, we emphasized the terms \u201cdelicious baked goods\u201d and \u201cthousands\u201d. Mr. Pringle told us these terms are important, so we directed the program to display them in red.<\/p>\n\n\n\n<p>We defined a string of text enclosed within <a href=\"https:\/\/careerkarma.com\/blog\/basic-html-tags\/\"><em>&lt;p&gt;<\/em> HTML<\/a> tags. This text outlines the history of the Pringle and Sons Bakery. Then, we enclosed the terms we want to appear in red in <em>&lt;span&gt;<\/em> tags.<\/p>\n\n\n\n<p>In our CSS file, we specified that the color of any element assigned the redText class should be red. This allows us to change the color of our text to red when we use the <em>&lt;span class=\u201credText\u201d&gt;<\/em> tag.<\/p>\n\n\n\n<p>The <em>&lt;span&gt;<\/em> tag is useful in this case because we only wanted to emphasize particular words in our text. We could have applied the red text styling to the <em>&lt;p&gt;<\/em> tag itself. But, that would have resulted in an entire paragraph of red text.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">&lt;span&gt; HTML in a list<\/h3>\n\n\n\n<p>Suppose Pringle and Sons Bakery asked us to add a list to their website with links to their social media pages.<\/p>\n\n\n\n<p>The Bakery noted that the links to their Twitter and Facebook pages are especially important because the team is most active on those platforms. So, they want us to highlight those links in light blue text.<\/p>\n\n\n\n<p>We could use the following code to accomplish this task:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>index.html\n\n&lt;ul&gt;\n\t&lt;li&gt;&lt;span class=&quot;blue&quot;&gt;&lt;a href=&quot;twitter.com&quot;&gt;Twitter&lt;\/a&gt;&lt;\/span&gt;&lt;\/li&gt;\n\t&lt;li&gt;&lt;span class=&quot;blue&quot;&gt;&lt;a href=&quot;facebook.com&quot;&gt;Facebook&lt;\/a&gt;&lt;\/span&gt;&lt;\/li&gt;\n\t&lt;li&gt;&lt;a href=&quot;instagram.com&quot;&gt;Instagram&lt;\/a&gt;&lt;\/li&gt;\n&lt;\/ul&gt;\n\nstyles.css\n\n.blue {\n\tbackground: lightblue;\n}<\/pre><\/div>\n\n\n\n<p>Our code returns:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/HfpJCIX4ycBUcStlx4EzsAWQzvWNJ_2CLshhieSA-btyOWUe420vh_0KC45uZlVS-SsXrpfIP0XBg7turyR5LmnqyarvOug2yL6bfrpS7-KERmAAONXuh5Za9I6x4uL8r_FjvWz3\" alt=\"\"\/><\/figure>\n\n\n\n<p>In our HTML code, we created an unordered list using the <em>&lt;ul&gt;<\/em> tag. This list has three items, each of which is contained within <em>&lt;li&gt;<\/em> tags.<\/p>\n\n\n\n<p>The list items for Twitter and Facebook are enclosed within HTML Span tags (&lt;span class=\u201cblue\u201d&gt; and &lt;\/span&gt;). The opening span tag for each list item specifies a class attribute. The value of the class attribute is \u201cblue\u201d.<\/p>\n\n\n\n<p>We defined a style called .blue that changes the background color of any element to which it is applied to light blue. This caused the background color of all links with the <a href=\"https:\/\/careerkarma.com\/blog\/html-css-class-id\/\">CSS class<\/a> .blue in our HTML code to change to light blue.<\/p>\n\n\n\n<p>The background color associated with our Instagram link did not change because we did not enclose the text for that link within <em>&lt;span&gt;<\/em> tags.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The HTML <em>&lt;span&gt;<\/em> tag is a generic container used to apply styles to specific elements on an HTML page. By default, the <em>&lt;span&gt;<\/em> tag does nothing, but it can be used in combination with CSS to apply styles to elements.<\/p>\n\n\n\n<p>As a challenge, define a &lt;span&gt; tag which makes a word in a sentence appear in all capital letters. You&#8217;ll need to use a CSS rule to transform the text into uppercase with your &lt;span&gt; tag.<\/p>\n\n\n\n<p>This tutorial discussed, with examples, how to use the HTML &lt;<em>span&gt;<\/em> tag in your code. You\u2019re now ready to start using the <em>&lt;span&gt;<\/em> tag like a professional web developer!<\/p>\n\n\n\n<p>For guidance and support on how to learn HTML, read our full <a href=\"https:\/\/careerkarma.com\/blog\/learn-html\/\">How to Learn HTML guide<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"The HTML &lt;span&gt; tag lets you apply styles to a part of a web page or a paragraph. It is often used to stylize the text in a paragraph, such as by changing the color of a word. The &lt;span&gt; tag by default has no styles. When you\u2019re programming in HTML, you may decide you&hellip;","protected":false},"author":240,"featured_media":15976,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17281],"tags":[],"class_list":{"0":"post-15975","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"HTML","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>HTML Span: A Guide for Beginners | Career Karma<\/title>\n<meta name=\"description\" content=\"Web developers use the HTML tag to style specific text on a web page. On Career Karma, learn how to use the tag.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/html-span\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Span: A Guide for Beginners\" \/>\n<meta property=\"og:description\" content=\"Web developers use the HTML tag to style specific text on a web page. On Career Karma, learn how to use the tag.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/html-span\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-14T07:18:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T12:05:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/turned-on-black-flat-screen-computer-monitor-and-keyboard-2585916-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-span\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-span\\\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"HTML Span: A Guide for Beginners\",\"datePublished\":\"2020-12-14T07:18:59+00:00\",\"dateModified\":\"2023-12-01T12:05:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-span\\\/\"},\"wordCount\":1124,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-span\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/turned-on-black-flat-screen-computer-monitor-and-keyboard-2585916-1.jpg\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-span\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-span\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-span\\\/\",\"name\":\"HTML Span: A Guide for Beginners | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-span\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-span\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/turned-on-black-flat-screen-computer-monitor-and-keyboard-2585916-1.jpg\",\"datePublished\":\"2020-12-14T07:18:59+00:00\",\"dateModified\":\"2023-12-01T12:05:52+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"Web developers use the HTML tag to style specific text on a web page. On Career Karma, learn how to use the tag.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-span\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-span\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-span\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/turned-on-black-flat-screen-computer-monitor-and-keyboard-2585916-1.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/turned-on-black-flat-screen-computer-monitor-and-keyboard-2585916-1.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-span\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML Span: A Guide for Beginners\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/jamesgallagher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HTML Span: A Guide for Beginners | Career Karma","description":"Web developers use the HTML tag to style specific text on a web page. On Career Karma, learn how to use the tag.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/html-span\/","og_locale":"en_US","og_type":"article","og_title":"HTML Span: A Guide for Beginners","og_description":"Web developers use the HTML tag to style specific text on a web page. On Career Karma, learn how to use the tag.","og_url":"https:\/\/careerkarma.com\/blog\/html-span\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-12-14T07:18:59+00:00","article_modified_time":"2023-12-01T12:05:52+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/turned-on-black-flat-screen-computer-monitor-and-keyboard-2585916-1.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/html-span\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/html-span\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"HTML Span: A Guide for Beginners","datePublished":"2020-12-14T07:18:59+00:00","dateModified":"2023-12-01T12:05:52+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-span\/"},"wordCount":1124,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-span\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/turned-on-black-flat-screen-computer-monitor-and-keyboard-2585916-1.jpg","articleSection":["HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/html-span\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/html-span\/","url":"https:\/\/careerkarma.com\/blog\/html-span\/","name":"HTML Span: A Guide for Beginners | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-span\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-span\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/turned-on-black-flat-screen-computer-monitor-and-keyboard-2585916-1.jpg","datePublished":"2020-12-14T07:18:59+00:00","dateModified":"2023-12-01T12:05:52+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"Web developers use the HTML tag to style specific text on a web page. On Career Karma, learn how to use the tag.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/html-span\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/html-span\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/html-span\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/turned-on-black-flat-screen-computer-monitor-and-keyboard-2585916-1.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/turned-on-black-flat-screen-computer-monitor-and-keyboard-2585916-1.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/html-span\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/careerkarma.com\/blog\/html\/"},{"@type":"ListItem","position":3,"name":"HTML Span: A Guide for Beginners"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/15975","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=15975"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/15975\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/15976"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=15975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=15975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=15975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}