{"id":21613,"date":"2024-03-15T22:20:54","date_gmt":"2024-03-15T22:20:54","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/"},"modified":"2024-03-21T20:54:19","modified_gmt":"2024-03-21T20:54:19","slug":"detailed-explanation-of-html-marquee-text-scrolling","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/","title":{"rendered":"Detailed explanation of HTML marquee (text scrolling)"},"content":{"rendered":"

The marquee tag in HTML is used to create scrolling text effects. It allows text to automatically scroll on a webpage, grabbing the user’s attention. Here is a detailed explanation of the marquee tag.<\/p>\n

    \n
  1. Tag attribute:<\/li>\n<\/ol>\n
      \n
    1. Behavior refers to the specified scrolling method. Options include “scroll” (default, text scrolls from one side to the other), “slide” (text slides in from one side and then slides out from the other), and “alternate” (text alternates between scrolling back and forth on both sides).<\/li>\n
    2. Specify the scrolling direction. Options include “left” (scrolling from right to left), “right” (scrolling from left to right), “up” (scrolling from bottom to top), and “down” (scrolling from top to bottom).<\/li>\n
    3. Loop: specifies the number of times to scroll. Options include numbers (indicating the number of scrolls) or “infinite” for endless scrolling.<\/li>\n
    4. Scrollamount: specifies the scrolling speed; the optional value is a positive integer (indicating the number of pixels scrolled per second).<\/li>\n
    5. The scroll delay is set to specify the time interval between two scrollings, measured in milliseconds and represented by a positive integer.<\/li>\n
    6. bgcolor: Specifies the background color.<\/li>\n
    7. Specify the width of the tag.<\/li>\n
    8. height: specifies the height of the tag.<\/li>\n<\/ol>\n
        \n
      1. Example of Usage:<\/li>\n<\/ol>\n
        <marquee<\/span> behavior<\/span>=\"scroll\"<\/span> direction<\/span>=\"left\"<\/span>><\/span>\u8fd9\u662f\u6eda\u52a8\u7684\u6587\u5b57<\/marquee<\/span>><\/span>\r\n<\/code><\/pre>\n
        In the example above, the text will scroll from right to left.<\/p>\n
          \n
        1. Notice:<\/li>\n<\/ol>\n
            \n
          1. The marquee tag has been deprecated in HTML5 and is not recommended for use in new projects. It is advised to use CSS animations or JavaScript to achieve scrolling effects.<\/li>\n
          2. The scrolling text should be short and lengthy scrolling may potentially annoy users.<\/li>\n
          3. The support for the marquee tag varies among different browsers, which may result in inconsistent display effects.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
            The marquee tag in HTML is used to create scrolling text effects. It allows text to automatically scroll on a webpage, grabbing the user’s attention. Here is a detailed explanation of the marquee tag. Tag attribute: Behavior refers to the specified scrolling method. Options include “scroll” (default, text scrolls from one side to the other), […]<\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-21613","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nDetailed explanation of HTML marquee (text scrolling) - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Detailed explanation of HTML marquee (text scrolling)\" \/>\n<meta property=\"og:description\" content=\"The marquee tag in HTML is used to create scrolling text effects. It allows text to automatically scroll on a webpage, grabbing the user’s attention. Here is a detailed explanation of the marquee tag. Tag attribute: Behavior refers to the specified scrolling method. Options include “scroll” (default, text scrolls from one side to the other), […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T22:20:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T20:54:19+00:00\" \/>\n<meta name=\"author\" content=\"Noah Thompson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Noah Thompson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/\"},\"author\":{\"name\":\"Noah Thompson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a\"},\"headline\":\"Detailed explanation of HTML marquee (text scrolling)\",\"datePublished\":\"2024-03-15T22:20:54+00:00\",\"dateModified\":\"2024-03-21T20:54:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/\"},\"wordCount\":277,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/\",\"name\":\"Detailed explanation of HTML marquee (text scrolling) - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T22:20:54+00:00\",\"dateModified\":\"2024-03-21T20:54:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Detailed explanation of HTML marquee (text scrolling)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a\",\"name\":\"Noah Thompson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g\",\"caption\":\"Noah Thompson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/noahthompson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Detailed explanation of HTML marquee (text scrolling) - Blog - Silicon Cloud","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:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/","og_locale":"en_US","og_type":"article","og_title":"Detailed explanation of HTML marquee (text scrolling)","og_description":"The marquee tag in HTML is used to create scrolling text effects. It allows text to automatically scroll on a webpage, grabbing the user’s attention. Here is a detailed explanation of the marquee tag. Tag attribute: Behavior refers to the specified scrolling method. Options include “scroll” (default, text scrolls from one side to the other), […]","og_url":"https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T22:20:54+00:00","article_modified_time":"2024-03-21T20:54:19+00:00","author":"Noah Thompson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Noah Thompson","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/"},"author":{"name":"Noah Thompson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a"},"headline":"Detailed explanation of HTML marquee (text scrolling)","datePublished":"2024-03-15T22:20:54+00:00","dateModified":"2024-03-21T20:54:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/"},"wordCount":277,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/","url":"https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/","name":"Detailed explanation of HTML marquee (text scrolling) - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T22:20:54+00:00","dateModified":"2024-03-21T20:54:19+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/detailed-explanation-of-html-marquee-text-scrolling\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Detailed explanation of HTML marquee (text scrolling)"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a","name":"Noah Thompson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g","caption":"Noah Thompson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/noahthompson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/21613","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=21613"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/21613\/revisions"}],"predecessor-version":[{"id":55484,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/21613\/revisions\/55484"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=21613"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=21613"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=21613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}