[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fintroduction-to-html":671,"blog-author-\u002Fblog\u002Fintroduction-to-html":1593,"i-material-symbols:arrow-back-rounded":1605},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,303,307,311,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":676,"buttonUrl":676,"category":1579,"date":1580,"description":1581,"draft":1582,"editorsPick":1582,"extension":1583,"featured":1582,"image":1584,"imageAlt":1585,"meta":1586,"navigation":32,"ogImage":676,"ogImageAlt":676,"path":1587,"seo":1588,"stem":1589,"tags":1590,"__hash__":1592},"blog\u002Fblog\u002Fintroduction-to-html.md","Introduction to HTML","Godwin Chinda","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fauthor.jpeg",null,"godwin-chinda",{"type":679,"value":680,"toc":1568},"minimark",[681,685,688,705,710,713,726,729,736,739,750,755,758,764,767,778,784,788,791,797,800,803,806,809,812,820,834,837,845,849,857,861,871,929,933,940,943,947,960,963,971,975,978,998,1002,1011,1014,1020,1032],[682,683,684],"p",{},"Web pages are created using a markup language called HTML. The acronym HTML stands for Hypertext Markup Language. A hypertext link is a link between two web pages. The text document within the tag that defines the structure of web pages is defined using a markup language. This language is used to annotate (add notes to) material so that a computer can comprehend it and modify the content as necessary.",[682,686,687],{},"Most markup languages, like HTML, can be read by people. The foundation of HTML pages are HTML components. Images and other objects, like interactive forms, may be embedded within the produced page using HTML techniques. By indicating structural semantics for text elements like headings, paragraphs, lists, links, quotations, and other objects, HTML offers a way to generate structured texts.",[682,689,690,691,698,699,704],{},"By the end of this article, you’ll be familiar with the ",[692,693,697],"a",{"href":694,"rel":695},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FLearn\u002FGetting_started_with_the_web\u002FHTML_basics",[696],"nofollow","fundamentals"," of HTML, the structure of an HTML element, and a few HTML ",[692,700,703],{"href":701,"rel":702},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FTag",[696],"tags",".",[706,707,709],"h2",{"id":708},"the-basics-of-html","The Basics of HTML",[682,711,712],{},"Among other options, HTML content may be organized using paragraphs, bulleted lists, graphics, and data tables.",[682,714,715,716,721,722,725],{},"HTML is a markup language that specifies how your material is organized. HTML is made up of a number of ",[692,717,720],{"href":718,"rel":719},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FElement",[696],"elements"," that you can employ to enclose or wrap certain parts of the content to alter how it appears or behaves. The enclosing ",[692,723,703],{"href":701,"rel":724},[696]," can italicize words, make the font bigger or smaller, hyperlink a word or image to another location, and more.",[682,727,728],{},"Consider the following line of material as an illustration:",[730,731,732],"ul",{},[733,734,735],"li",{},"“I am very smart”",[682,737,738],{},"The line might be written inside of paragraph tags if we want it to stand alone:",[740,741,746],"pre",{"className":742,"code":744,"language":745},[743],"language-text","\u003Cp>I am very smart\u003C\u002Fp>\n","text",[747,748,744],"code",{"__ignoreMap":749},"",[751,752,754],"h3",{"id":753},"properties-of-attribute-html-tags","Properties of Attribute-HTML Tags",[682,756,757],{},"HTML elements have attributes, which are extra values that customize the components or modify their behavior in different ways to enhance the user experience.",[682,759,760],{},[761,762],"img",{"alt":754,"src":763},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-001.png",[682,765,766],{},"The following should always be present in an attribute:",[730,768,769,772,775],{},[733,770,771],{},"A space before the element name (or the previous attribute, if the element already has one or more attributes).",[733,773,774],{},"The name of the characteristic, followed by an equal sign.",[733,776,777],{},"The attribute value enclosed in quotation marks, both first and last.",[682,779,780],{},[781,782,783],"em",{},"Please note that the \"id\" attribute is a unique identifier in this case, whereas the class attribute, for example, is not.",[751,785,787],{"id":786},"anatomy-of-an-html-element","Anatomy of an HTML Element",[682,789,790],{},"All web pages are constructed using the fundamental building blocks of HTML, which include the doctype declaration, HTML, head, title, and body elements.",[682,792,793],{},[761,794],{"alt":795,"src":796},"image showing the general HTML structure","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-002.png",[798,799],"h4",{"id":749},[682,801,802],{},"The document type declaration appears here (and is not technically a tag). This document is identified as an HTML document. There is no case distinction in the doctype statement.",[798,804],{"id":805},"_1",[682,807,808],{},"Sometimes referred to as the root element, the  element encloses all of the page's content.",[798,810],{"id":811},"_2",[682,813,814,815,819],{},"The ",[692,816],{"href":817,"rel":818},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fhead",[696]," element serves as a container for whatever you wish to include on the HTML page, but don’t want to be visible to users. This comprises elements like character set declarations, keywords, and a page description that you want to show up in search results.",[798,821,823,826],{"id":822},"the-title-element-determines-the-title-of-your-page-which-is-displayed-in-the-browser-tab-when-the-page-is-loaded-it-also-describes-a-page-when-you-bookmark-or-favorite-it",[824,825],"title",{},[682,827,814,828,833],{},[692,829,832],{"href":830,"rel":831},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Ftitle",[696],"\u003Ctitle>"," element determines the title of your page, which is displayed in the browser tab when the page is loaded. It also describes a page when you bookmark or favorite it.",[798,835],{"id":836},"_3",[682,838,839,840,704],{},"As shown above, the  tag includes all of the material that you wish to display to website visitors when they visit your page. This includes text, images, videos, games, playable audio tracks, and other media. To understand this better, click ",[692,841,844],{"href":842,"rel":843},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FLearn\u002FGetting_started_with_the_web\u002FHTML_basics#anatomy_of_an_html_document",[696],"here",[751,846,848],{"id":847},"html-tags","HTML Tags",[682,850,851,852,856],{},"A ",[692,853,855],{"href":701,"rel":854},[696],"tag"," is used to create an element in HTML. Browsers employ the HTML tags to decipher the page's content rather than displaying the tags.",[798,858,860],{"id":859},"html-headings","HTML Headings",[682,862,863,864],{},"These tags help us to give headings to the content of a webpage. These tags are mainly written inside the body tag. HTML provides us with six heading tags from ",[692,865,868],{"href":866,"rel":867},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002FHeading_Elements",[696],[869,870],"strong",{},[872,873,875,881,903,907,914,917,918,924],"h1",{"id":874},"to-every-tag-displays-the-heading-in-a-different-style-and-font-sizeh1godwin-chindah1-h2descriptionh2-h3skin-colourh3html-paragraphswe-can-write-paragraphs-on-a-webpage-with-the-aid-of-these-tags-they-begin-with-a-tag-and-terminate-with-a-tagpgodwin-chinda-is-a-frontend-developerp-pfrom-march-he-started-developingp",[692,876,878,879],{"href":866,"rel":877},[696]," to ",[869,880],{},[882,883,885,890,891,897],"h6",{"id":884},"every-tag-displays-the-heading-in-a-different-style-and-font-sizeh1godwin-chindah1-h2descriptionh2-h3skin-colourh3",[692,886,888],{"href":866,"rel":887},[696],[869,889],{},". Every tag displays the heading in a different style and font size:",[740,892,895],{"className":893,"code":894,"language":745},[743],"\u003Ch1>Godwin Chinda\u003C\u002Fh1>\n  \u003Ch2>Description\u003C\u002Fh2>\n  \u003Ch3>Skin Colour\u003C\u002Fh3>\n",[747,896,894],{"__ignoreMap":749},[682,898,899],{},[761,900],{"alt":901,"src":902},"image showing the result of some HTML code, it shows black serif text on a white background","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-003.png",[798,904,906],{"id":905},"html-paragraphs","HTML Paragraphs",[682,908,909,910],{},"We can write paragraphs on a webpage with the aid of these tags. They begin with a ",[692,911],{"href":912,"rel":913},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fp",[696],[682,915,916],{}," tag and terminate with a "," tag:",[740,919,922],{"className":920,"code":921,"language":745},[743],"\u003Cp>Godwin Chinda is a Frontend developer.\u003C\u002Fp>\n  \u003Cp>From March, he started developing.\u003C\u002Fp>\n",[747,923,921],{"__ignoreMap":749},[682,925,926],{},[761,927],{"alt":901,"src":928},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-004.png",[798,930,932],{"id":931},"html-horizontal-line","HTML Horizontal Line",[682,934,935,936],{},"A horizontal line extending from the left to right side of the page is used to create horizontal margins by using the ",[692,937],{"href":938,"rel":939},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fhr",[696],[941,942],"hr",{},[798,944,946],{"id":945},"html-images","HTML Images",[682,948,949,950,956,957,959],{},"An image can be added to our website using the ",[692,951,954],{"href":952,"rel":953},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fimg",[696],[761,955],{}," tag. The ",[761,958],{"src":749,"alt":749}," tag contains the source of the image that is to be inserted.",[682,961,962],{},"There are two formats for inserting an image into the image tag:",[730,964,965,968],{},[733,966,967],{},"If the image is in the same folder, the path only has to include the image's name and format.",[733,969,970],{},"The path, name, and format of the image must all be specified if the image is located in another folder.",[751,972,974],{"id":973},"limitations-of-html","Limitations of HTML",[682,976,977],{},"HTML's main drawback is that HTML tags don't explain the significance of the material contained in an HTML text. The layout and instructions for how a browser should render the data contained in these tags are specified by a fixed, preset tag set used by HTML. However, the tags do not transmit the semantics or meaning of the material they contain.",[730,979,980,983,986,989,992,995],{},[733,981,982],{},"Dynamic content creation is not possible.",[733,984,985],{},"Its capacity for design is constrained.",[733,987,988],{},"It does not detect or show syntax mistakes.",[733,990,991],{},"No calculations of any kind may be made in it.",[733,993,994],{},"It cannot be used to construct interactive websites.",[733,996,997],{},"The complexity of its code makes it challenging to read and comprehend.",[751,999,1001],{"id":1000},"semantic-elements","Semantic Elements",[682,1003,1004,1005,1010],{},"When discussing a piece of code in programming, the term \"",[692,1006,1009],{"href":1007,"rel":1008},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FSemantics",[696],"semantics","\" is used to describe its meaning. For instance, \"What effect does running that line of JavaScript have?\" or \"What purpose or role does that HTML element have?\"",[682,1012,1013],{},"Let's take a look at some semantic elements below:",[798,1015,1017],{"id":1016},"_4",[1018,1019],"article",{},[682,1021,814,1022,1027,1028],{},[692,1023,1026],{"href":1024,"rel":1025},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML",[696],"HTML"," element known as ",[692,1029],{"href":1030,"rel":1031},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Farticle",[696],[1018,1033,1034,1035,1041,1046,1052,1063],{}," denotes a self-contained composition that is meant to be independently distributable or reusable within a document, page, application, or website (e.g., in syndication). Examples include an interactive widget or gadget, a blog entry, a product card, a user-submitted comment, a forum post, a magazine or newspaper story, or any other independent piece of content:",[740,1036,1039],{"className":1037,"code":1038,"language":745},[743],"\u003Carticle class=\"Weather forecast\">\u003Ch1>Weather forecast for New York\u003C\u002Fh1>\u003Ch2>14 July 2022\u003C\u002Fh2>\u003Cp>Rain.\u003C\u002Fp>\u003C\u002Farticle>\n",[747,1040,1038],{"__ignoreMap":749},[682,1042,1043],{},[761,1044],{"alt":901,"src":1045},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-005.png",[798,1047,1049],{"id":1048},"_5",[1050,1051],"aside",{},[682,1053,1054,1055,1058,1059],{},"A section of a document whose content is only loosely related to the page's main content is represented by the ",[692,1056,1026],{"href":1024,"rel":1057},[696]," element ",[692,1060],{"href":1061,"rel":1062},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Faside",[696],[1050,1064,1065,1066,1072,1077,1083,1090],{},". Sidebars or call-out boxes are common ways to present asides.",[740,1067,1070],{"className":1068,"code":1069,"language":745},[743],"\u003Caside>\u003Cp>Godwin Chinda is into Online Streaming.\u003C\u002Fp>\u003C\u002Faside>\n",[747,1071,1069],{"__ignoreMap":749},[682,1073,1074],{},[761,1075],{"alt":901,"src":1076},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-006.png",[798,1078,1080],{"id":1079},"_6",[1081,1082],"main",{},[682,1084,1085,1086],{},"The primary material of a document's  is represented by the HTML element ",[692,1087],{"href":1088,"rel":1089},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fmain",[696],[1081,1091,1092,1093,1099,1104,1110,1117],{},". The key subject of a document or the primary function of an application is expanded upon or directly related in the main content area.",[740,1094,1097],{"className":1095,"code":1096,"language":745},[743],"\u003Cmain>\u003Cp>Godwin Chinda is a front end developer based in Nigeria.\u003C\u002Fp>\u003C\u002Fmain>\n",[747,1098,1096],{"__ignoreMap":749},[682,1100,1101],{},[761,1102],{"alt":901,"src":1103},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-007.png",[798,1105,1107],{"id":1106},"_7",[1108,1109],"nav",{},[682,1111,1112,1113],{},"An area of a page designated as ",[692,1114],{"href":1115,"rel":1116},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fnav",[696],[1108,1118,1119,1120,1126,1132,1137,1139,1157,1170,1188,1201,1207,1213,1325,1328,1335,1341,1347,1350,1356,1362,1368,1371,1378,1384,1390,1393,1399,1405,1411,1414,1422,1428,1434,1437,1444,1450,1456,1460,1463,1469,1473,1480],{}," in HTML is a section whose function is to offer navigation links, either within the current document or to other documents. Menus, tables of contents, and indexes are typical navigation sections.",[740,1121,1124],{"className":1122,"code":1123,"language":745},[743],"\u003Cnav>\u003Ca href=\"main.html\">MAIN\u003C\u002Fa> |\u003Ca href=\"about.html\">ABOUT\u003C\u002Fa> |\u003C\u002Fnav>\n",[747,1125,1123],{"__ignoreMap":749},[682,1127,1128],{},[761,1129],{"alt":1130,"src":1131},"Gif showing the result of some HTML code, it shows a main and an about button","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-008.gif",[798,1133,1135],{"id":1134},"_8",[692,1136],{},[692,1138],{},[682,1140,1141,1144,1149,1150,1154,1156],{},[692,1142,1143],{},"With its ",[692,1145,1148],{"href":1146,"rel":1147},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement#attr-href",[696],"href element",", the HTML element ",[692,1151],{"href":1152,"rel":1153},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fa",[696],[692,1155],{}," (or anchor element) generates a hyperlink to web pages, files, email addresses, locations on the same page, or anything else that may be addressed by a URL.",[682,1158,1159,1160,1163],{},"Each ",[692,1161,1162],{}," should contain text that describes the link's final destination. When focused on the ",[692,1164,1165,1166,1169],{}," element, pressing the enter key will activate the ",[747,1167,1168],{},"href"," property if it is present:",[692,1171,1172,1178,1184],{},[740,1173,1176],{"className":1174,"code":1175,"language":745},[743],"\u003Ca href=\"https:\u002F\u002Fwww.goog.com\">Google\u003C\u002Fa>\n",[747,1177,1175],{"__ignoreMap":749},[682,1179,1180],{},[761,1181],{"alt":1182,"src":1183},"HTML google","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-009.gif",[798,1185,1187],{"id":1186},"input-form-elements","Input Form Elements",[682,1189,1190,1193,1200],{},[692,1191,1192],{},"In order to construct interactive controls for web-based forms and receive user input, the HTML element ",[692,1194,1197],{"href":1195,"rel":1196},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput",[696],[1198,1199],"input",{}," is used:",[740,1202,1205],{"className":1203,"code":1204,"language":745},[743],"\u003Cform action=\"\">\u003Clabel for=\"message\">Enter Message: \u003C\u002Flabel>\u003Cinput type=\"text\">\u003C\u002Fform>\n",[747,1206,1204],{"__ignoreMap":749},[682,1208,1209],{},[761,1210],{"alt":1211,"src":1212},"text input in the HTML message input","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-010.png",[682,1214,1215,1216,1218,1219,1224,1225,1224,1230,1224,1235,1224,1240,1224,1245,1224,1250,1224,1255,1224,1260,1224,1265,1224,1270,1224,1275,1224,1280,1224,1285,1224,1290,1224,1295,1224,1300,1224,1305,1224,1309,1224,1314,1319,1320,704],{},"Due to the enormous variety of possible combinations of input types and properties, the ",[1198,1217],{}," element is one of the most potent and complicated of all HTML elements. Input elements include these types: ",[692,1220,1223],{"href":1221,"rel":1222},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Fbutton",[696],"button",", ",[692,1226,1229],{"href":1227,"rel":1228},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Fcheckbox",[696],"checkbox",[692,1231,1234],{"href":1232,"rel":1233},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Fcolor",[696],"color",[692,1236,1239],{"href":1237,"rel":1238},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Fdate",[696],"date",[692,1241,1244],{"href":1242,"rel":1243},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Femail",[696],"email",[692,1246,1249],{"href":1247,"rel":1248},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Ffile",[696],"file",[692,1251,1254],{"href":1252,"rel":1253},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Fhidden",[696],"hidden",[692,1256,1259],{"href":1257,"rel":1258},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Fimage",[696],"image",[692,1261,1264],{"href":1262,"rel":1263},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Fmonth",[696],"month",[692,1266,1269],{"href":1267,"rel":1268},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Fnumber",[696],"number",[692,1271,1274],{"href":1272,"rel":1273},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Fpassword",[696],"password",[692,1276,1279],{"href":1277,"rel":1278},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Fradio",[696],"radio",[692,1281,1284],{"href":1282,"rel":1283},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Frange",[696],"range",[692,1286,1289],{"href":1287,"rel":1288},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Freset",[696],"reset",[692,1291,1294],{"href":1292,"rel":1293},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Fsearch",[696],"search",[692,1296,1299],{"href":1297,"rel":1298},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Fsubmit",[696],"submit",[692,1301,1304],{"href":1302,"rel":1303},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Ftel",[696],"tel",[692,1306,745],{"href":1307,"rel":1308},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Ftext",[696],[692,1310,1313],{"href":1311,"rel":1312},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Ftime",[696],"time",[692,1315,1318],{"href":1316,"rel":1317},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Furl",[696],"url",", and ",[692,1321,1324],{"href":1322,"rel":1323},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Finput\u002Fweek",[696],"week",[798,1326,1327],{"id":1223},"Button",[682,1329,1330,1331,1334],{},"A push ",[692,1332,1223],{"href":1221,"rel":1333},[696]," displays the value of the value attribute, which is empty by default and has no default behavior:",[740,1336,1339],{"className":1337,"code":1338,"language":745},[743],"\u003Cinput type=\"button\" value=\"Button\">\n",[747,1340,1338],{"__ignoreMap":749},[682,1342,1343],{},[761,1344],{"alt":1345,"src":1346},"image showing the result of some HTML code, it shows a gray button with the word 'button' on it in black text","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-011.png",[798,1348,1349],{"id":1229},"Checkbox",[682,1351,851,1352,1355],{},[692,1353,1229],{"href":1227,"rel":1354},[696]," enables the selection and deselection of single values:",[740,1357,1360],{"className":1358,"code":1359,"language":745},[743],"\u003Cinput type=\"checkbox\">\u003Cinput type=\"checkbox\">\n",[747,1361,1359],{"__ignoreMap":749},[682,1363,1364],{},[761,1365],{"alt":1366,"src":1367},"image showing the result of some HTML code, it shows a blue checked and a white unchecked checkbox","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-012.png",[798,1369,1370],{"id":1244},"Email",[682,1372,1373,1374,1377],{},"This is a space where an ",[692,1375,1244],{"href":1242,"rel":1376},[696]," address can be changed. Although it provides validation settings and an appropriate keyboard in supporting browsers and devices with dynamic keyboards, it seems to be a text input:",[740,1379,1382],{"className":1380,"code":1381,"language":745},[743],"\u003Clabel for=\"email\">Enter your email:\u003C\u002Flabel>\u003Cinput type=\"email\">\n",[747,1383,1381],{"__ignoreMap":749},[682,1385,1386],{},[761,1387],{"alt":1388,"src":1389},"image showing the result of some HTML code, it shows a form input with the words 'enter your email' to the left","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-013.png",[798,1391,1392],{"id":1274},"Password",[682,1394,851,1395,1398],{},[692,1396,1274],{"href":1272,"rel":1397},[696]," is a single-line text field with an illegible value. Users will be warned if a site is not secure:",[740,1400,1403],{"className":1401,"code":1402,"language":745},[743],"\u003Clabel for=\"pwd\">Password:\u003C\u002Flabel>\u003Cinput type=\"password\">\n",[747,1404,1402],{"__ignoreMap":749},[682,1406,1407],{},[761,1408],{"alt":1409,"src":1410},"image showing the result of some HTML code, it shows a password input box","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-014.png",[798,1412,1413],{"id":1299},"Submit",[682,1415,1416,1417,1421],{},"This creates a button for form ",[692,1418,1420],{"href":1297,"rel":1419},[696],"submission",":",[740,1423,1426],{"className":1424,"code":1425,"language":745},[743],"\u003Cinput type=\"submit\">\n",[747,1427,1425],{"__ignoreMap":749},[682,1429,1430],{},[761,1431],{"alt":1432,"src":1433},"image showing the result of some HTML code, it shows a gray button with the word 'submit' on it in black text","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-015.png",[798,1435,1436],{"id":1294},"Search",[682,1438,1439,1440,1443],{},"This element gives a text box with one line for inputting ",[692,1441,1294],{"href":1292,"rel":1442},[696]," terms. Line breaks in the input value are automatically eliminated:",[740,1445,1448],{"className":1446,"code":1447,"language":745},[743],"\u003Clabel for=\"gsearch\">Search Google:\u003C\u002Flabel>\u003Cinput type=\"search\">\n",[747,1449,1447],{"__ignoreMap":749},[682,1451,1452],{},[761,1453],{"alt":1454,"src":1455},"image showing the result of some HTML code, it shows a search input box","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-016.png",[751,1457,1459],{"id":1458},"html-layout","HTML Layout",[682,1461,1462],{},"The area of graphic design known as page layout deals with how visual components are arranged on a page. The site pages look better thanks to page layout. For optimal efficacy or impact, it establishes the overall appearance, relative importance, and relationships between the visual elements to create a seamless flow of information and eye movement.",[682,1464,1465],{},[761,1466],{"alt":1467,"src":1468},"HTML page layout design","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-017.png",[798,1470,1472],{"id":1471},"header","Header",[682,1474,1475,1476],{},"The HTML element ",[692,1477],{"href":1478,"rel":1479},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fheader",[696],[1471,1481,1482,1483,1489,1494,1498,1505,1511,1516,1520,1523],{}," designates introductory information, which is often a collection of introductions or navigational tools. It might also have a logo, a search form, the author's name, and other features in addition to some heading components:",[740,1484,1487],{"className":1485,"code":1486,"language":745},[743],"\u003Cheader>\u003Ch1>Main Heading\u003C\u002Fh1>\u003Cp>Brought to you by Godwin\u003C\u002Fp>\u003C\u002Fheader>\n",[747,1488,1486],{"__ignoreMap":749},[682,1490,1491],{},[761,1492],{"alt":901,"src":1493},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-018.png",[798,1495,1497],{"id":1496},"indexsidebar","Index\u002FSidebar",[682,1499,1500,1501,1504],{},"The index\u002Fsidebar element is also known as the ",[747,1502,1503],{},"\u003Caside>"," tag. It is not necessary on a page, and it contains extra information or adverts.",[740,1506,1509],{"className":1507,"code":1508,"language":745},[743],"\u003Caside>\u003Cp>The Epcot center.\u003C\u002Fp>\u003C\u002Faside>\n",[747,1510,1508],{"__ignoreMap":749},[682,1512,1513],{},[761,1514],{"alt":901,"src":1515},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-019.png",[798,1517,1519],{"id":1518},"content-section","Content Section",[682,1521,1522],{},"The core area where content is presented is known as the content section. The ",[1081,1524,1525,1526,1532,1537,1541,1548],{}," element is used to add the webpages' primary content:",[740,1527,1530],{"className":1528,"code":1529,"language":745},[743],"\u003Csection>\u003Cp>The area where content is presented is known as the content section.The main element is used to add the webpages' primary content.\u003C\u002Fp>\u003C\u002Fsection>\n",[747,1531,1529],{"__ignoreMap":749},[682,1533,1534],{},[761,1535],{"alt":901,"src":1536},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-020.png",[798,1538,1540],{"id":1539},"footer","Footer",[682,1542,1543,1544],{},"The footer part of web pages contains the contact details and other pertinent information. The footer is always at the bottom of web pages, and is set by the ",[692,1545],{"href":1546,"rel":1547},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Ffooter",[696],[1539,1549,917,1550,1556,1561,1565],{},[740,1551,1554],{"className":1552,"code":1553,"language":745},[743],"\u003Cfooter>\u003Cp>Author: Godwin Chinda\u003C\u002Fp>\u003Cp>\u003Ca href=\"mailto:godwin@gmail.com\">godwin@gmail.com\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Ffooter>\n",[747,1555,1553],{"__ignoreMap":749},[682,1557,1558],{},[761,1559],{"alt":901,"src":1560},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fimg-021.png",[706,1562,1564],{"id":1563},"conclusion","Conclusion",[682,1566,1567],{},"In the above article, you’ve learned the fundamentals and anatomy of HTML, as well as the various HTML tags and elements. Gaining knowledge of such ideas can boost your confidence as a developer and make it simpler for you to understand more basic ideas.",{"title":749,"searchDepth":1569,"depth":1569,"links":1570},2,[1571],{"id":708,"depth":1569,"text":709,"children":1572},[1573,1575,1576,1577,1578],{"id":753,"depth":1574,"text":754},3,{"id":786,"depth":1574,"text":787},{"id":847,"depth":1574,"text":848},{"id":973,"depth":1574,"text":974},{"id":1000,"depth":1574,"text":1001},"Software Development","2022-11-15T00:00:00.000Z","HTML is used to annotate material so that a computer can comprehend it and modify the content as necessary. Learn how to properly implement it!",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fhero.jpeg","decorative cover image of some HTML code",{},"\u002Fblog\u002Fintroduction-to-html",{"title":673,"description":1581},"blog\u002Fintroduction-to-html",[1591],"html","WoB5zyid5O9cNEhyR4TLHlTP4C0s1BMZS5LMjfS2Pbs",{"id":1594,"title":674,"body":1595,"description":749,"draft":1582,"extension":1583,"meta":1599,"navigation":32,"path":1600,"photo":1601,"photoAlt":676,"seo":1602,"stem":1603,"__hash__":1604},"authors\u002Fauthors\u002Fgodwin-chinda.md",{"type":679,"value":1596,"toc":1597},[],{"title":749,"searchDepth":1569,"depth":1569,"links":1598},[],{},"\u002Fauthors\u002Fgodwin-chinda","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fgodwin-chinda.jpg",{"title":674,"description":749},"authors\u002Fgodwin-chinda","MLGervMSg1a-zbqP0OSIpAqhsP93KGpwZqVnAcbivOM",{"left":1606,"top":1606,"width":1607,"height":1607,"rotate":1606,"vFlip":1582,"hFlip":1582,"body":1608},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]