March 27, 202611 min read
HTML for Beginners: Build Your First Web Page in 30 Minutes
Learn HTML from scratch -- document structure, elements, forms, and semantic tags. Build a complete personal profile page step by step.
html beginners web-development tutorial
Ad 336x280
HTML is the foundation of every web page. Every website you've ever visited -- Google, YouTube, Wikipedia, your bank -- is built on HTML. It's not a programming language (you won't write loops or functions), it's a markup language that tells the browser what content to display and how to structure it.
If you want to build websites, HTML is where you start. And here's the encouraging part: you can learn enough HTML to build a real web page in about thirty minutes. The language is straightforward, the rules are simple, and your browser already knows how to render it.
Let's build something.
What HTML Actually Is
HTML stands for HyperText Markup Language. You write content inside tags that tell the browser what that content represents:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>Tags come in pairs: an opening tag and a closing tag . The content goes between them. Some tags are self-closing (they don't wrap content), like
The browser reads these tags and renders them as visual elements. You don't need to install anything -- just a text editor and a browser.
Setting Up
You need two things:
- A text editor. VS Code is the standard recommendation (free, from code.visualstudio.com). Notepad or TextEdit technically work but lack helpful features like syntax highlighting.
- A browser. Chrome, Firefox, Safari, Edge -- any modern browser.
index.html. That name is a convention -- web servers look for index.html as the default page.
The Document Structure
Every HTML page has the same skeleton:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
</body>
</html>Save this file and open it in your browser (double-click the file, or drag it into the browser window). You'll see a heading and a paragraph.
Let's break down each piece:
-- tells the browser this is an HTML5 document. Always include it on line one.-- the root element.lang="en"tells search engines and screen readers the page is in English.-- metadata about the page. Nothing in here is visible on the page itself.
</code></strong> -- the text that shows in the browser tab.
<ul>
<li><strong><code><body></code></strong> -- everything visible on the page goes here.</li>
</ul>
<h2 id="headings">Headings</h2>
<p>HTML has six levels of headings, <code><h1></code> through <code><h6></code>:</p>
<pre><code class="language-html"><h1>Main Page Title</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Sub-subsection</h4>
<h5>Getting small now</h5>
<h6>Smallest heading</h6></code></pre>
<p>Use <code><h1></code> once per page for the main title. Use <code><h2></code> for major sections, <code><h3></code> for subsections within those, and so on. This hierarchy matters for accessibility and SEO -- screen readers and search engines use heading levels to understand your page structure.</p>
<p>Don't pick heading levels based on how they look. Use them based on document structure, and use CSS (styling) to control appearance.</p>
<h2 id="paragraphs-and-text">Paragraphs and Text</h2>
<pre><code class="language-html"><p>This is a paragraph. Browsers automatically add spacing between paragraphs.</p>
<p><p>This is another paragraph. Notice how each one gets its own block of space.</p></code></pre></p>
<p>For emphasis and importance:</p>
<pre><code class="language-html"><p>You should <em>definitely</em> learn HTML. It's <strong>absolutely essential</strong> for web development.</p></code></pre>
<ul>
<li><strong><code><em></code></strong> -- emphasis (browsers render it as italic)</li>
<li><strong><code><strong></code></strong> -- strong importance (browsers render it as bold)</li>
</ul>
Line breaks and horizontal rules:
<pre><code class="language-html"><p>Line one.<br />Line two on the next line (same paragraph).</p>
<p><hr /> <!-- A horizontal line separator --></code></pre></p>
<h2 id="links">Links</h2>
<p>Links are what make the web a web. The <code><a></code> (anchor) tag creates them:</p>
<pre><code class="language-html"><a href="https://www.google.com">Go to Google</a></code></pre>
<ul>
<li><strong><code>href</code></strong> -- the URL to link to (hypertext reference)</li>
<li>The text between the tags is what the user clicks on</li>
</ul>
Open links in a new tab:
<pre><code class="language-html"><a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
Google (new tab)
</a></code></pre>
<code>rel="noopener noreferrer"</code> is a security best practice when using <code>target="_blank"</code>.
<p>Link to another page on your site:</p>
<pre><code class="language-html"><a href="about.html">About Me</a>
<a href="projects/portfolio.html">My Portfolio</a></code></pre>
<p>Link to a section on the same page:</p>
<pre><code class="language-html"><a href="#contact">Jump to Contact</a>
<p><!-- somewhere below --><br><h2 id="contact">Contact Me</h2></code></pre></p>
<h2 id="images">Images</h2>
<pre><code class="language-html"><img src="photo.jpg" alt="A description of the photo" /></code></pre>
<ul>
<li><strong><code>src</code></strong> -- the path to the image file</li>
<li><strong><code>alt</code></strong> -- alternative text. This is shown if the image fails to load and is read by screen readers. Never skip it.</li>
</ul>
You can link to external images too:
<pre><code class="language-html"><img src="https://example.com/cat.jpg" alt="A fluffy orange cat" /></code></pre>
<p>Control the size with <code>width</code> and <code>height</code>:</p>
<pre><code class="language-html"><img src="photo.jpg" alt="Profile photo" width="300" height="200" /></code></pre>
<p>Setting both <code>width</code> and <code>height</code> prevents layout shift as the page loads -- the browser reserves the right amount of space before the image downloads.</p>
<h2 id="lists">Lists</h2>
<h3 id="unordered-lists-bullet-points">Unordered Lists (Bullet Points)</h3>
<pre><code class="language-html"><ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul></code></pre>
<h3 id="ordered-lists-numbered">Ordered Lists (Numbered)</h3>
<pre><code class="language-html"><ol>
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Learn JavaScript</li>
</ol></code></pre>
<h3 id="nested-lists">Nested Lists</h3>
<pre><code class="language-html"><ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>Python</li>
<li>Node.js</li>
</ul>
</li>
</ul></code></pre>
<h2 id="tables">Tables</h2>
<p>Tables are for displaying tabular data (not for page layout -- use CSS for that):</p>
<pre><code class="language-html"><table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>Experience</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Developer</td>
<td>5 years</td>
</tr>
<tr>
<td>Bob</td>
<td>Designer</td>
<td>3 years</td>
</tr>
<tr>
<td>Carol</td>
<td>Manager</td>
<td>8 years</td>
</tr>
</tbody>
</table></code></pre>
<ul>
<li><strong><code><thead></code></strong> -- table header section</li>
<li><strong><code><tbody></code></strong> -- table body section</li>
<li><strong><code><tr></code></strong> -- table row</li>
<li><strong><code><th></code></strong> -- header cell (bold and centered by default)</li>
<li><strong><code><td></code></strong> -- regular data cell</li>
</ul>
<h2 id="divs-and-spans">Divs and Spans</h2>
<p>These are generic containers:</p>
<pre><code class="language-html"><div>
<h2>Section Title</h2>
<p>Section content goes here.</p>
</div></code></pre>
<ul>
<li><strong><code><div></code></strong> -- a block-level container (takes up the full width, starts on a new line). Used to group elements for styling or layout.</li>
<li><strong><code><span></code></strong> -- an inline container (flows within text). Used to style a portion of text.</li>
</ul>
<pre><code class="language-html"><p>The total is <span style="color: green; font-weight: bold;">$29.99</span></p></code></pre>
<p>Before semantic elements existed, developers built entire pages with <code><div></code> tags. Now there are better options.</p>
<h2 id="semantic-elements">Semantic Elements</h2>
<p>Semantic elements describe the <em>meaning</em> of their content, not just its appearance. They help screen readers, search engines, and other developers understand your page structure:</p>
<pre><code class="language-html"><header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<p><main><br> <article><br> <h1>My Blog Post</h1><br> <p>Content goes here...</p><br> </article></p>
<p><aside><br> <h2>Related Links</h2><br> <ul><br> <li><a href="#">Link 1</a></li><br> <li><a href="#">Link 2</a></li><br> </ul><br> </aside><br></main></p>
<p><footer><br> <p>Copyright 2026. All rights reserved.</p><br></footer></code></pre></p>
<ul>
<li><strong><code><header></code></strong> -- introductory content, usually containing navigation</li>
<li><strong><code><nav></code></strong> -- navigation links</li>
<li><strong><code><main></code></strong> -- the primary content of the page (only one per page)</li>
<li><strong><code><article></code></strong> -- self-contained content that could stand alone</li>
<li><strong><code><aside></code></strong> -- sidebar or tangentially related content</li>
<li><strong><code><section></code></strong> -- a thematic grouping of content</li>
<li><strong><code><footer></code></strong> -- footer content, copyright, contact info</li>
</ul>
Use semantic elements instead of <code><div></code> whenever a more specific element fits. A <code><div></code> says nothing about its content. A <code><nav></code> says "this is navigation." That difference matters for accessibility.
<h2 id="forms">Forms</h2>
<p>Forms collect user input. They're how login pages, search bars, and contact forms work:</p>
<pre><code class="language-html"><form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your name" required />
<p><label for="email">Email:</label><br> <input type="email" id="email" name="email" placeholder="you@example.com" required /></p>
<p><label for="message">Message:</label><br> <textarea id="message" name="message" rows="4" placeholder="Write something..."></textarea></p>
<p><button type="submit">Send</button><br></form></code></pre></p>
<p>Key elements:</p>
<ul>
<li><strong><code><form></code></strong> -- wraps all form elements</li>
<li><strong><code><label></code></strong> -- describes an input field. The <code>for</code> attribute links it to an input's <code>id</code>. Clicking the label focuses the input.</li>
<li><strong><code><input></code></strong> -- a text field. The <code>type</code> attribute changes its behavior:</li>
</ul> - <code>text</code> -- regular text
- <code>email</code> -- validates email format
- <code>password</code> -- hides characters
- <code>number</code> -- only accepts numbers
- <code>checkbox</code> -- a toggle
- <code>radio</code> -- pick one from a group
<ul>
<li><strong><code><textarea></code></strong> -- a multi-line text field</li>
<li><strong><code><button type="submit"></code></strong> -- submits the form</li>
</ul>
The <code>required</code> attribute prevents form submission if the field is empty. The browser handles validation automatically.
<p>Other input types worth knowing:</p>
<pre><code class="language-html"><input type="date" />
<input type="color" />
<input type="range" min="0" max="100" />
<input type="file" />
<p><select><br> <option value="html">HTML</option><br> <option value="css">CSS</option><br> <option value="js">JavaScript</option><br></select></code></pre></p>
<h2 id="build-a-personal-profile-page">Build: A Personal Profile Page</h2>
<p>Let's put everything together into a complete page. Create a file called <code>profile.html</code>:</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alex Chen - Web Developer</title>
</head>
<body>
<header>
<nav>
<a href="#about">About</a> |
<a href="#skills">Skills</a> |
<a href="#projects">Projects</a> |
<a href="#contact">Contact</a>
</nav>
</header>
<p><main><br> <section id="about"><br> <h1>Alex Chen</h1><br> <p><em>Junior Web Developer based in Austin, TX</em></p><br> <img src="https://via.placeholder.com/200x200" alt="Photo of Alex Chen" width="200" height="200" /><br> <p><br> Hi there! I'm a self-taught web developer transitioning from a career in graphic design.<br> I love building clean, accessible websites and I'm currently diving deep into JavaScript<br> and React.<br> </p><br> </section></p>
<p><hr /></p>
<p><section id="skills"><br> <h2>Skills</h2><br> <table><br> <thead><br> <tr><br> <th>Technology</th><br> <th>Level</th><br> <th>Years</th><br> </tr><br> </thead><br> <tbody><br> <tr><br> <td>HTML</td><br> <td>Confident</td><br> <td>2</td><br> </tr><br> <tr><br> <td>CSS</td><br> <td>Confident</td><br> <td>2</td><br> </tr><br> <tr><br> <td>JavaScript</td><br> <td>Learning</td><br> <td>1</td><br> </tr><br> <tr><br> <td>React</td><br> <td>Beginner</td><br> <td><1</td><br> </tr><br> </tbody><br> </table><br> </section></p>
<p><hr /></p>
<p><section id="projects"><br> <h2>Projects</h2></p>
<p><article><br> <h3>Personal Portfolio</h3><br> <p>A responsive portfolio site built with HTML, CSS, and a touch of JavaScript.</p><br> <a href="https://example.com" target="_blank" rel="noopener noreferrer">View Project</a><br> </article></p>
<p><article><br> <h3>Weather Dashboard</h3><br> <p>Fetches real-time weather data from an API and displays forecasts for any city.</p><br> <a href="https://example.com" target="_blank" rel="noopener noreferrer">View Project</a><br> </article></p>
<p><article><br> <h3>Task Tracker</h3><br> <p>A simple to-do app with local storage persistence. My first JavaScript project.</p><br> <a href="https://example.com" target="_blank" rel="noopener noreferrer">View Project</a><br> </article><br> </section></p>
<p><hr /></p>
<p><section id="contact"><br> <h2>Get in Touch</h2><br> <p>Interested in working together? Drop me a message.</p></p>
<p><form><br> <div><br> <label for="name">Name:</label><br /><br> <input type="text" id="name" name="name" placeholder="Your name" required /><br> </div><br> <br /><br> <div><br> <label for="email">Email:</label><br /><br> <input type="email" id="email" name="email" placeholder="you@example.com" required /><br> </div><br> <br /><br> <div><br> <label for="subject">Subject:</label><br /><br> <select id="subject" name="subject"><br> <option value="general">General Inquiry</option><br> <option value="project">Project Collaboration</option><br> <option value="job">Job Opportunity</option><br> </select><br> </div><br> <br /><br> <div><br> <label for="message">Message:</label><br /><br> <textarea id="message" name="message" rows="5" placeholder="Write your message..." required></textarea><br> </div><br> <br /><br> <button type="submit">Send Message</button><br> </form><br> </section><br> </main></p>
<p><footer><br> <hr /><br> <p><br> © 2026 Alex Chen |<br> <a href="https://github.com" target="_blank" rel="noopener noreferrer">GitHub</a> |<br> <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">LinkedIn</a><br> </p><br> </footer><br></body><br></html></code></pre></p>
<p>This page looks plain right now -- it's unstyled. That's by design. HTML provides the structure and content. CSS (which you should learn next) handles the visual styling. Keeping them separate is a core principle of web development.</p>
<h3 id="what-this-page-demonstrates">What This Page Demonstrates</h3>
<ul>
<li><strong>Document structure</strong> -- <code>DOCTYPE</code>, <code>html</code>, <code>head</code>, <code>body</code></li>
<li><strong>Headings</strong> -- <code>h1</code> for the name, <code>h2</code> for sections, <code>h3</code> for project titles</li>
<li><strong>Paragraphs and emphasis</strong> -- <code>p</code>, <code>em</code></li>
<li><strong>Links</strong> -- internal anchor links (<code>#about</code>) and external links</li>
<li><strong>Images</strong> -- with <code>alt</code> text, <code>width</code>, and <code>height</code></li>
<li><strong>Tables</strong> -- for the skills grid</li>
<li><strong>Semantic elements</strong> -- <code>header</code>, <code>nav</code>, <code>main</code>, <code>section</code>, <code>article</code>, <code>footer</code></li>
<li><strong>Forms</strong> -- text inputs, email input, select dropdown, textarea, submit button</li>
<li><strong>Labels</strong> -- properly linked with <code>for</code> and <code>id</code></li>
</ul>
<h2 id="common-mistakes-beginners-make">Common Mistakes Beginners Make</h2>
<strong>Skipping the <code>alt</code> attribute on images.</strong> Screen readers depend on it. Search engines use it. If the image fails to load, users see it. Always write descriptive alt text. If the image is purely decorative, use <code>alt=""</code> (empty string).
<strong>Using <code><br /></code> for spacing.</strong> If you want more space between elements, use CSS margins and padding. <code><br /></code> is for actual line breaks within text (like a poem or address), not for layout spacing.
<strong>Nesting elements incorrectly.</strong> Tags must be closed in the reverse order they were opened. <code><p><strong>text</p></strong></code> is wrong. <code><p><strong>text</strong></p></code> is right.
<strong>Using headings for styling.</strong> Don't use <code><h3></code> because it looks the right size. Use the heading level that matches the document hierarchy, then style it with CSS.
<strong>Putting block elements inside inline elements.</strong> A <code><div></code> inside a <code><span></code> is invalid. A <code><p></code> inside an <code><a></code> used to be invalid (HTML5 relaxed this for <code><a></code> specifically, but it's still not great practice). Generally, inline elements go inside block elements, not the other way around.
<h2 id="what-s-next">What's Next</h2>
<p>HTML alone builds structured content but won't win any design awards. The natural next step is:</p>
<ul>
<li><strong>CSS</strong> -- styling, colors, layout, responsive design. CSS makes your pages look professional.</li>
<li><strong>JavaScript</strong> -- interactivity. Make buttons do things, validate forms, fetch data from APIs.</li>
<li><strong>Accessibility</strong> -- ARIA attributes, semantic HTML best practices, keyboard navigation</li>
<li><strong>SEO basics</strong> -- meta tags, structured data, page titles, heading hierarchy</li>
</ul>
You now know enough HTML to build real pages. The best way to get comfortable is to practice: rebuild your favorite website's layout, create a recipe page, or make a fan site for something you like. You don't need permission or a tutorial for every new page -- just open a file and start typing tags.
<p>For more web development tutorials and guides, check out <a href="https://codeup.dev" target="_blank" rel="noopener noreferrer">CodeUp</a>.</p></div><div class="not-prose mt-10 pt-8 border-t border-gray-100"><div class="ad-slot flex items-center justify-center flex justify-center"><div class="flex items-center justify-center rounded-lg border border-dashed border-gray-200 bg-gray-50/50 text-xs text-gray-400" style="max-width:728px;width:100%;height:90px">Ad <!-- -->728x90</div></div></div></article><aside class="hidden lg:block"></aside></div></div><!--$--><!--/$--><!--$--><!--/$--></main><footer class="border-t border-gray-800 bg-gray-900 text-gray-400"><div class="mx-auto max-w-7xl px-4 py-12"><div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4"><div><div class="flex items-center gap-2"><div class="flex h-8 w-8 items-center justify-center rounded-lg" style="background:linear-gradient(to bottom right, #16a34a, #2563eb)"><span class="text-sm font-bold text-white">C</span></div><h3 class="font-bold text-white">CodeUp Blog</h3></div><p class="mt-3 text-sm leading-relaxed">Coding tutorials, DSA guides, and programming language deep-dives</p><a href="https://codeup.dev" target="_blank" rel="noopener noreferrer" class="mt-4 inline-flex items-center gap-1.5 text-sm font-medium transition-colors hover:brightness-125" style="color:#16a34a">Visit <!-- -->Codeup<!-- --> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-3 w-3"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div><div><h4 class="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-300">Content</h4><ul class="space-y-2.5"><li><a class="text-sm transition-colors hover:text-white" href="/tutorials">Tutorials</a></li><li><a class="text-sm transition-colors hover:text-white" href="/dsa">DSA</a></li><li><a class="text-sm transition-colors hover:text-white" href="/languages">Languages</a></li></ul></div><div><h4 class="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-300">Popular Tools</h4><ul class="space-y-2.5"><li><a href="https://codeup.dev/merge-pdf" target="_blank" rel="noopener noreferrer" class="text-sm transition-colors hover:text-white">Merge PDF</a></li><li><a href="https://codeup.dev/compress-pdf" target="_blank" rel="noopener noreferrer" class="text-sm transition-colors hover:text-white">Compress PDF</a></li><li><a href="https://codeup.dev/pdf-to-word" target="_blank" rel="noopener noreferrer" class="text-sm transition-colors hover:text-white">PDF to Word</a></li><li><a href="https://codeup.dev" target="_blank" rel="noopener noreferrer" class="text-sm font-medium transition-colors hover:brightness-125" style="color:#16a34a">All Tools →</a></li></ul></div><div><h4 class="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-300">Legal</h4><ul class="space-y-2.5"><li><a class="text-sm transition-colors hover:text-white" href="/about">About Us</a></li><li><a class="text-sm transition-colors hover:text-white" href="/contact">Contact Us</a></li><li><a class="text-sm transition-colors hover:text-white" href="/privacy">Privacy Policy</a></li><li><a class="text-sm transition-colors hover:text-white" href="/terms">Terms of Use</a></li><li><a class="text-sm transition-colors hover:text-white" href="/disclaimer">Disclaimer</a></li></ul></div></div><div class="mt-10 flex flex-col items-center justify-between gap-4 border-t border-gray-800 pt-6 sm:flex-row"><p class="text-xs">© <!-- -->2026<!-- --> <!-- -->CodeUp Blog<!-- -->. All rights reserved.</p><p class="text-xs">Powered by<!-- --> <a href="https://codeup.dev" target="_blank" rel="noopener noreferrer" class="hover:brightness-125" style="color:#16a34a">Codeup</a></p></div></div></footer></div></div><script src="/_next/static/chunks/webpack-2ebac01e599bb227.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[4990,[\"626\",\"static/chunks/626-d4c8fcb5be8db4a7.js\",\"177\",\"static/chunks/app/layout-a25adadb77184682.js\"],\"default\"]\n3:I[7555,[],\"\"]\n4:I[1295,[],\"\"]\n7:I[9665,[],\"MetadataBoundary\"]\n9:I[9665,[],\"OutletBoundary\"]\nc:I[4911,[],\"AsyncMetadataOutlet\"]\ne:I[9665,[],\"ViewportBoundary\"]\n10:I[6614,[],\"\"]\n:HL[\"/_next/static/css/f89dda98e13ec7b3.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"pvKsJU_LYljuE4Oecmo5B\",\"p\":\"\",\"c\":[\"\",\"CodeUp.Blog\",\"tutorials--html-complete-beginners-guide\"],\"i\":false,\"f\":[[[\"\",{\"children\":[[\"site\",\"CodeUp.Blog\",\"d\"],{\"children\":[[\"slug\",\"tutorials--html-complete-beginners-guide\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/f89dda98e13ec7b3.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.googleapis.com\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.gstatic.com\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"href\":\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900\u0026family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500\u0026family=JetBrains+Mono:wght@400;500;600\u0026display=swap\",\"rel\":\"stylesheet\"}]]}],[\"$\",\"body\",null,{\"className\":\"min-h-screen bg-white text-gray-900 antialiased\",\"children\":[\"$\",\"$L2\",null,{\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]]}]]}],{\"children\":[[\"site\",\"CodeUp.Blog\",\"d\"],[\"$\",\"$1\",\"c\",{\"children\":[null,\"$L5\"]}],{\"children\":[[\"slug\",\"tutorials--html-complete-beginners-guide\",\"d\"],[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[\"$L6\",[\"$\",\"$L7\",null,{\"children\":\"$L8\"}],null,[\"$\",\"$L9\",null,{\"children\":[\"$La\",\"$Lb\",[\"$\",\"$Lc\",null,{\"promise\":\"$@d\"}]]}]]}],{},null,false]},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"MhjMG-4sn8I-oAmMRsl2J\",{\"children\":[[\"$\",\"$Le\",null,{\"children\":\"$Lf\"}],null]}],null]}],false]],\"m\":\"$undefined\",\"G\":[\"$10\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"11:\"$Sreact.suspense\"\n12:I[4911,[],\"AsyncMetadata\"]\n14:I[7918,[\"874\",\"static/chunks/874-30f44afe6902a5af.js\",\"626\",\"static/chunks/626-d4c8fcb5be8db4a7.js\",\"581\",\"static/chunks/app/%5Bsite%5D/layout-7efc27f722c97bb5.js\"],\"default\"]\n15:I[1573,[\"874\",\"static/chunks/874-30f44afe6902a5af.js\",\"530\",\"static/chunks/app/%5Bsite%5D/%5Bslug%5D/page-775e7c93a760abdb.js\"],\"default\"]\n16:I[6874,[\"874\",\"static/chunks/874-30f44afe6902a5af.js\",\"530\",\"static/chunks/app/%5Bsite%5D/%5Bslug%5D/page-775e7c93a760abdb.js\"],\"\"]\n17:I[6063,[\"874\",\"static/chunks/874-30f44afe6902a5af.js\",\"530\",\"static/chunks/app/%5Bsite%5D/%5Bslug%5D/page-775e7c93a760abdb.js\"],\"default\"]\n19:I[8679,[\"874\",\"static/chunks/874-30f44afe6902a5af.js\",\"530\",\"static/chunks/app/%5Bsite%5D/%5Bslug%5D/page-775e7c93a760abdb.js\"],\"default\"]\n8:[\"$\",\"$11\",null,{\"fallback\":null,\"children\":[\"$\",\"$L12\",null,{\"promise\":\"$@13\"}]}]\n"])</script><script>self.__next_f.push([1,"5:[\"$\",\"div\",null,{\"style\":{\"--site-primary\":\"#16a34a\",\"--site-accent\":\"#2563eb\",\"--site-primary-rgb\":\"22, 163, 74\",\"--site-accent-rgb\":\"37, 99, 235\"},\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebSite\\\",\\\"name\\\":\\\"CodeUp Blog\\\",\\\"description\\\":\\\"Coding tutorials, DSA guides, and programming language deep-dives\\\",\\\"url\\\":\\\"https://blog.codeup.dev\\\",\\\"publisher\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"CodeUp\\\",\\\"url\\\":\\\"https://codeup.dev\\\"},\\\"potentialAction\\\":{\\\"@type\\\":\\\"SearchAction\\\",\\\"target\\\":\\\"https://blog.codeup.dev/search?q={search_term_string}\\\",\\\"query-input\\\":\\\"required name=search_term_string\\\"}}\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebApplication\\\",\\\"name\\\":\\\"CodeUp\\\",\\\"url\\\":\\\"https://codeup.dev\\\",\\\"applicationCategory\\\":\\\"UtilitiesApplication\\\",\\\"operatingSystem\\\":\\\"Any\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":\\\"0\\\",\\\"priceCurrency\\\":\\\"USD\\\"}}\"}}],[\"$\",\"$L14\",null,{\"site\":{\"category\":\"product\",\"id\":\"codeup\",\"name\":\"CodeUp Blog\",\"domain\":\"blog.codeup.dev\",\"parentSite\":\"https://codeup.dev\",\"description\":\"Coding tutorials, DSA guides, and programming language deep-dives\",\"theme\":{\"primary\":\"#16a34a\",\"accent\":\"#2563eb\"},\"social\":{\"github\":\"@codeup\"},\"contentDirs\":[\"tutorials\",\"dsa\",\"languages\"],\"legal\":{\"contactEmail\":\"contact@codeup.dev\",\"disclaimerType\":\"coding\",\"disclaimerExtra\":[\"Code examples and tutorials are provided for educational purposes. While we strive for accuracy, code snippets may need adaptation for your specific use case, framework version, or production environment.\",\"We are not responsible for any bugs, security vulnerabilities, or data loss resulting from the use of code examples from this website. Always review, test, and audit code before deploying to production.\"]}},\"navigation\":[{\"label\":\"Tutorials\",\"href\":\"/tutorials\"},{\"label\":\"DSA\",\"href\":\"/dsa\"},{\"label\":\"Languages\",\"href\":\"/languages\"}],\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]]}]\n"])</script><script>self.__next_f.push([1,"18:T5b6b,"])</script><script>self.__next_f.push([1,"\u003cp\u003eHTML is the foundation of every web page. Every website you've ever visited -- Google, YouTube, Wikipedia, your bank -- is built on HTML. It's not a programming language (you won't write loops or functions), it's a \u003cstrong\u003emarkup language\u003c/strong\u003e that tells the browser what content to display and how to structure it.\u003c/p\u003e\n\n\u003cp\u003eIf you want to build websites, HTML is where you start. And here's the encouraging part: you can learn enough HTML to build a real web page in about thirty minutes. The language is straightforward, the rules are simple, and your browser already knows how to render it.\u003c/p\u003e\n\n\u003cp\u003eLet's build something.\u003c/p\u003e\n\n\u003ch2 id=\"what-html-actually-is\"\u003eWhat HTML Actually Is\u003c/h2\u003e\n\n\u003cp\u003eHTML stands for HyperText Markup Language. You write content inside \u003cstrong\u003etags\u003c/strong\u003e that tell the browser what that content represents:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;h1\u0026gt;This is a heading\u0026lt;/h1\u0026gt;\n\u0026lt;p\u0026gt;This is a paragraph.\u0026lt;/p\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eTags come in pairs: an opening tag \u003ccode\u003e\u003ch1\u003e\u003c/code\u003e and a closing tag \u003ccode\u003e\u003c/h1\u003e\u003c/code\u003e. The content goes between them. Some tags are self-closing (they don't wrap content), like \u003ccode\u003e\u003cimg /\u003e\u003c/code\u003e and \u003ccode\u003e\u003cbr /\u003e\u003c/code\u003e.\u003c/p\u003e\n\n\u003cp\u003eThe browser reads these tags and renders them as visual elements. You don't need to install anything -- just a text editor and a browser.\u003c/p\u003e\n\n\u003ch2 id=\"setting-up\"\u003eSetting Up\u003c/h2\u003e\n\n\u003cp\u003eYou need two things:\u003c/p\u003e\n\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003eA text editor.\u003c/strong\u003e VS Code is the standard recommendation (free, from \u003ca href=\"https://code.visualstudio.com\" target=\"_blank\" rel=\"noopener noreferrer\"\u003ecode.visualstudio.com\u003c/a\u003e). Notepad or TextEdit technically work but lack helpful features like syntax highlighting.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eA browser.\u003c/strong\u003e Chrome, Firefox, Safari, Edge -- any modern browser.\u003c/li\u003e\n\u003c/ol\u003e\nCreate a new file called \u003ccode\u003eindex.html\u003c/code\u003e. That name is a convention -- web servers look for \u003ccode\u003eindex.html\u003c/code\u003e as the default page.\n\n\u003ch2 id=\"the-document-structure\"\u003eThe Document Structure\u003c/h2\u003e\n\n\u003cp\u003eEvery HTML page has the same skeleton:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\n\u0026lt;html lang=\"en\"\u0026gt;\n\u0026lt;head\u0026gt;\n \u0026lt;meta charset=\"UTF-8\"\u0026gt;\n \u0026lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u0026gt;\n \u0026lt;title\u0026gt;My First Web Page\u0026lt;/title\u0026gt;\n\u0026lt;/head\u0026gt;\n\u0026lt;body\u0026gt;\n \u0026lt;h1\u0026gt;Hello, world!\u0026lt;/h1\u0026gt;\n \u0026lt;p\u0026gt;This is my first web page.\u0026lt;/p\u0026gt;\n\u0026lt;/body\u0026gt;\n\u0026lt;/html\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eSave this file and open it in your browser (double-click the file, or drag it into the browser window). You'll see a heading and a paragraph.\u003c/p\u003e\n\n\u003cp\u003eLet's break down each piece:\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003c!DOCTYPE html\u003e\u003c/code\u003e\u003c/strong\u003e -- tells the browser this is an HTML5 document. Always include it on line one.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003chtml lang=\"en\"\u003e\u003c/code\u003e\u003c/strong\u003e -- the root element. \u003ccode\u003elang=\"en\"\u003c/code\u003e tells search engines and screen readers the page is in English.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003chead\u003e\u003c/code\u003e\u003c/strong\u003e -- metadata about the page. Nothing in here is visible on the page itself.\u003c/li\u003e\n\u003c/ul\u003e - \u003cstrong\u003e\u003ccode\u003e\u003cmeta charset=\"UTF-8\"\u003e\u003c/code\u003e\u003c/strong\u003e -- character encoding. UTF-8 supports all languages and special characters.\n - \u003cstrong\u003e\u003ccode\u003e\u003cmeta name=\"viewport\" ...\u003e\u003c/code\u003e\u003c/strong\u003e -- makes the page responsive on mobile devices.\n - \u003cstrong\u003e\u003ccode\u003e\u003ctitle\u003e\u003c/code\u003e\u003c/strong\u003e -- the text that shows in the browser tab.\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003cbody\u003e\u003c/code\u003e\u003c/strong\u003e -- everything visible on the page goes here.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"headings\"\u003eHeadings\u003c/h2\u003e\n\n\u003cp\u003eHTML has six levels of headings, \u003ccode\u003e\u003ch1\u003e\u003c/code\u003e through \u003ccode\u003e\u003ch6\u003e\u003c/code\u003e:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;h1\u0026gt;Main Page Title\u0026lt;/h1\u0026gt;\n\u0026lt;h2\u0026gt;Section Heading\u0026lt;/h2\u0026gt;\n\u0026lt;h3\u0026gt;Subsection Heading\u0026lt;/h3\u0026gt;\n\u0026lt;h4\u0026gt;Sub-subsection\u0026lt;/h4\u0026gt;\n\u0026lt;h5\u0026gt;Getting small now\u0026lt;/h5\u0026gt;\n\u0026lt;h6\u0026gt;Smallest heading\u0026lt;/h6\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eUse \u003ccode\u003e\u003ch1\u003e\u003c/code\u003e once per page for the main title. Use \u003ccode\u003e\u003ch2\u003e\u003c/code\u003e for major sections, \u003ccode\u003e\u003ch3\u003e\u003c/code\u003e for subsections within those, and so on. This hierarchy matters for accessibility and SEO -- screen readers and search engines use heading levels to understand your page structure.\u003c/p\u003e\n\n\u003cp\u003eDon't pick heading levels based on how they look. Use them based on document structure, and use CSS (styling) to control appearance.\u003c/p\u003e\n\n\u003ch2 id=\"paragraphs-and-text\"\u003eParagraphs and Text\u003c/h2\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;p\u0026gt;This is a paragraph. Browsers automatically add spacing between paragraphs.\u0026lt;/p\u0026gt;\n\n\u003cp\u003e\u0026lt;p\u0026gt;This is another paragraph. Notice how each one gets its own block of space.\u0026lt;/p\u0026gt;\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\n\n\u003cp\u003eFor emphasis and importance:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;p\u0026gt;You should \u0026lt;em\u0026gt;definitely\u0026lt;/em\u0026gt; learn HTML. It's \u0026lt;strong\u0026gt;absolutely essential\u0026lt;/strong\u0026gt; for web development.\u0026lt;/p\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003cem\u003e\u003c/code\u003e\u003c/strong\u003e -- emphasis (browsers render it as italic)\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003cstrong\u003e\u003c/code\u003e\u003c/strong\u003e -- strong importance (browsers render it as bold)\u003c/li\u003e\n\u003c/ul\u003e\nLine breaks and horizontal rules:\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;p\u0026gt;Line one.\u0026lt;br /\u0026gt;Line two on the next line (same paragraph).\u0026lt;/p\u0026gt;\n\n\u003cp\u003e\u0026lt;hr /\u0026gt; \u0026lt;!-- A horizontal line separator --\u0026gt;\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\n\n\u003ch2 id=\"links\"\u003eLinks\u003c/h2\u003e\n\n\u003cp\u003eLinks are what make the web a web. The \u003ccode\u003e\u003ca\u003e\u003c/code\u003e (anchor) tag creates them:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;a href=\"https://www.google.com\"\u0026gt;Go to Google\u0026lt;/a\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003ehref\u003c/code\u003e\u003c/strong\u003e -- the URL to link to (hypertext reference)\u003c/li\u003e\n\u003cli\u003eThe text between the tags is what the user clicks on\u003c/li\u003e\n\u003c/ul\u003e\nOpen links in a new tab:\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;a href=\"https://www.google.com\" target=\"_blank\" rel=\"noopener noreferrer\"\u0026gt;\n Google (new tab)\n\u0026lt;/a\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003ccode\u003erel=\"noopener noreferrer\"\u003c/code\u003e is a security best practice when using \u003ccode\u003etarget=\"_blank\"\u003c/code\u003e.\n\n\u003cp\u003eLink to another page on your site:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;a href=\"about.html\"\u0026gt;About Me\u0026lt;/a\u0026gt;\n\u0026lt;a href=\"projects/portfolio.html\"\u0026gt;My Portfolio\u0026lt;/a\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eLink to a section on the same page:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;a href=\"#contact\"\u0026gt;Jump to Contact\u0026lt;/a\u0026gt;\n\n\u003cp\u003e\u0026lt;!-- somewhere below --\u0026gt;\u003cbr\u003e\u0026lt;h2 id=\"contact\"\u0026gt;Contact Me\u0026lt;/h2\u0026gt;\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\n\n\u003ch2 id=\"images\"\u003eImages\u003c/h2\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;img src=\"photo.jpg\" alt=\"A description of the photo\" /\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003esrc\u003c/code\u003e\u003c/strong\u003e -- the path to the image file\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003ealt\u003c/code\u003e\u003c/strong\u003e -- alternative text. This is shown if the image fails to load and is read by screen readers. Never skip it.\u003c/li\u003e\n\u003c/ul\u003e\nYou can link to external images too:\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;img src=\"https://example.com/cat.jpg\" alt=\"A fluffy orange cat\" /\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eControl the size with \u003ccode\u003ewidth\u003c/code\u003e and \u003ccode\u003eheight\u003c/code\u003e:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;img src=\"photo.jpg\" alt=\"Profile photo\" width=\"300\" height=\"200\" /\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eSetting both \u003ccode\u003ewidth\u003c/code\u003e and \u003ccode\u003eheight\u003c/code\u003e prevents layout shift as the page loads -- the browser reserves the right amount of space before the image downloads.\u003c/p\u003e\n\n\u003ch2 id=\"lists\"\u003eLists\u003c/h2\u003e\n\n\u003ch3 id=\"unordered-lists-bullet-points\"\u003eUnordered Lists (Bullet Points)\u003c/h3\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;ul\u0026gt;\n \u0026lt;li\u0026gt;HTML\u0026lt;/li\u0026gt;\n \u0026lt;li\u0026gt;CSS\u0026lt;/li\u0026gt;\n \u0026lt;li\u0026gt;JavaScript\u0026lt;/li\u0026gt;\n\u0026lt;/ul\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch3 id=\"ordered-lists-numbered\"\u003eOrdered Lists (Numbered)\u003c/h3\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;ol\u0026gt;\n \u0026lt;li\u0026gt;Learn HTML\u0026lt;/li\u0026gt;\n \u0026lt;li\u0026gt;Learn CSS\u0026lt;/li\u0026gt;\n \u0026lt;li\u0026gt;Learn JavaScript\u0026lt;/li\u0026gt;\n\u0026lt;/ol\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch3 id=\"nested-lists\"\u003eNested Lists\u003c/h3\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;ul\u0026gt;\n \u0026lt;li\u0026gt;Frontend\n \u0026lt;ul\u0026gt;\n \u0026lt;li\u0026gt;HTML\u0026lt;/li\u0026gt;\n \u0026lt;li\u0026gt;CSS\u0026lt;/li\u0026gt;\n \u0026lt;li\u0026gt;JavaScript\u0026lt;/li\u0026gt;\n \u0026lt;/ul\u0026gt;\n \u0026lt;/li\u0026gt;\n \u0026lt;li\u0026gt;Backend\n \u0026lt;ul\u0026gt;\n \u0026lt;li\u0026gt;Python\u0026lt;/li\u0026gt;\n \u0026lt;li\u0026gt;Node.js\u0026lt;/li\u0026gt;\n \u0026lt;/ul\u0026gt;\n \u0026lt;/li\u0026gt;\n\u0026lt;/ul\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch2 id=\"tables\"\u003eTables\u003c/h2\u003e\n\n\u003cp\u003eTables are for displaying tabular data (not for page layout -- use CSS for that):\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;table\u0026gt;\n \u0026lt;thead\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;th\u0026gt;Name\u0026lt;/th\u0026gt;\n \u0026lt;th\u0026gt;Role\u0026lt;/th\u0026gt;\n \u0026lt;th\u0026gt;Experience\u0026lt;/th\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;/thead\u0026gt;\n \u0026lt;tbody\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;Alice\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;Developer\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;5 years\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;Bob\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;Designer\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;3 years\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;tr\u0026gt;\n \u0026lt;td\u0026gt;Carol\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;Manager\u0026lt;/td\u0026gt;\n \u0026lt;td\u0026gt;8 years\u0026lt;/td\u0026gt;\n \u0026lt;/tr\u0026gt;\n \u0026lt;/tbody\u0026gt;\n\u0026lt;/table\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003cthead\u003e\u003c/code\u003e\u003c/strong\u003e -- table header section\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003ctbody\u003e\u003c/code\u003e\u003c/strong\u003e -- table body section\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003ctr\u003e\u003c/code\u003e\u003c/strong\u003e -- table row\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003cth\u003e\u003c/code\u003e\u003c/strong\u003e -- header cell (bold and centered by default)\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003ctd\u003e\u003c/code\u003e\u003c/strong\u003e -- regular data cell\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"divs-and-spans\"\u003eDivs and Spans\u003c/h2\u003e\n\n\u003cp\u003eThese are generic containers:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;div\u0026gt;\n \u0026lt;h2\u0026gt;Section Title\u0026lt;/h2\u0026gt;\n \u0026lt;p\u0026gt;Section content goes here.\u0026lt;/p\u0026gt;\n\u0026lt;/div\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003cdiv\u003e\u003c/code\u003e\u003c/strong\u003e -- a block-level container (takes up the full width, starts on a new line). Used to group elements for styling or layout.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003cspan\u003e\u003c/code\u003e\u003c/strong\u003e -- an inline container (flows within text). Used to style a portion of text.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;p\u0026gt;The total is \u0026lt;span style=\"color: green; font-weight: bold;\"\u0026gt;$29.99\u0026lt;/span\u0026gt;\u0026lt;/p\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eBefore semantic elements existed, developers built entire pages with \u003ccode\u003e\u003cdiv\u003e\u003c/code\u003e tags. Now there are better options.\u003c/p\u003e\n\n\u003ch2 id=\"semantic-elements\"\u003eSemantic Elements\u003c/h2\u003e\n\n\u003cp\u003eSemantic elements describe the \u003cem\u003emeaning\u003c/em\u003e of their content, not just its appearance. They help screen readers, search engines, and other developers understand your page structure:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;header\u0026gt;\n \u0026lt;nav\u0026gt;\n \u0026lt;a href=\"/\"\u0026gt;Home\u0026lt;/a\u0026gt;\n \u0026lt;a href=\"/about\"\u0026gt;About\u0026lt;/a\u0026gt;\n \u0026lt;a href=\"/contact\"\u0026gt;Contact\u0026lt;/a\u0026gt;\n \u0026lt;/nav\u0026gt;\n\u0026lt;/header\u0026gt;\n\n\u003cp\u003e\u0026lt;main\u0026gt;\u003cbr\u003e \u0026lt;article\u0026gt;\u003cbr\u003e \u0026lt;h1\u0026gt;My Blog Post\u0026lt;/h1\u0026gt;\u003cbr\u003e \u0026lt;p\u0026gt;Content goes here...\u0026lt;/p\u0026gt;\u003cbr\u003e \u0026lt;/article\u0026gt;\u003c/p\u003e\n\n\u003cp\u003e\u0026lt;aside\u0026gt;\u003cbr\u003e \u0026lt;h2\u0026gt;Related Links\u0026lt;/h2\u0026gt;\u003cbr\u003e \u0026lt;ul\u0026gt;\u003cbr\u003e \u0026lt;li\u0026gt;\u0026lt;a href=\"#\"\u0026gt;Link 1\u0026lt;/a\u0026gt;\u0026lt;/li\u0026gt;\u003cbr\u003e \u0026lt;li\u0026gt;\u0026lt;a href=\"#\"\u0026gt;Link 2\u0026lt;/a\u0026gt;\u0026lt;/li\u0026gt;\u003cbr\u003e \u0026lt;/ul\u0026gt;\u003cbr\u003e \u0026lt;/aside\u0026gt;\u003cbr\u003e\u0026lt;/main\u0026gt;\u003c/p\u003e\n\n\u003cp\u003e\u0026lt;footer\u0026gt;\u003cbr\u003e \u0026lt;p\u0026gt;Copyright 2026. All rights reserved.\u0026lt;/p\u0026gt;\u003cbr\u003e\u0026lt;/footer\u0026gt;\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003cheader\u003e\u003c/code\u003e\u003c/strong\u003e -- introductory content, usually containing navigation\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003cnav\u003e\u003c/code\u003e\u003c/strong\u003e -- navigation links\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003cmain\u003e\u003c/code\u003e\u003c/strong\u003e -- the primary content of the page (only one per page)\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003carticle\u003e\u003c/code\u003e\u003c/strong\u003e -- self-contained content that could stand alone\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003caside\u003e\u003c/code\u003e\u003c/strong\u003e -- sidebar or tangentially related content\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003csection\u003e\u003c/code\u003e\u003c/strong\u003e -- a thematic grouping of content\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003cfooter\u003e\u003c/code\u003e\u003c/strong\u003e -- footer content, copyright, contact info\u003c/li\u003e\n\u003c/ul\u003e\nUse semantic elements instead of \u003ccode\u003e\u003cdiv\u003e\u003c/code\u003e whenever a more specific element fits. A \u003ccode\u003e\u003cdiv\u003e\u003c/code\u003e says nothing about its content. A \u003ccode\u003e\u003cnav\u003e\u003c/code\u003e says \"this is navigation.\" That difference matters for accessibility.\n\n\u003ch2 id=\"forms\"\u003eForms\u003c/h2\u003e\n\n\u003cp\u003eForms collect user input. They're how login pages, search bars, and contact forms work:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;form\u0026gt;\n \u0026lt;label for=\"name\"\u0026gt;Name:\u0026lt;/label\u0026gt;\n \u0026lt;input type=\"text\" id=\"name\" name=\"name\" placeholder=\"Your name\" required /\u0026gt;\n\n\u003cp\u003e\u0026lt;label for=\"email\"\u0026gt;Email:\u0026lt;/label\u0026gt;\u003cbr\u003e \u0026lt;input type=\"email\" id=\"email\" name=\"email\" placeholder=\"you@example.com\" required /\u0026gt;\u003c/p\u003e\n\n\u003cp\u003e\u0026lt;label for=\"message\"\u0026gt;Message:\u0026lt;/label\u0026gt;\u003cbr\u003e \u0026lt;textarea id=\"message\" name=\"message\" rows=\"4\" placeholder=\"Write something...\"\u0026gt;\u0026lt;/textarea\u0026gt;\u003c/p\u003e\n\n\u003cp\u003e\u0026lt;button type=\"submit\"\u0026gt;Send\u0026lt;/button\u0026gt;\u003cbr\u003e\u0026lt;/form\u0026gt;\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\n\n\u003cp\u003eKey elements:\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003cform\u003e\u003c/code\u003e\u003c/strong\u003e -- wraps all form elements\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003clabel\u003e\u003c/code\u003e\u003c/strong\u003e -- describes an input field. The \u003ccode\u003efor\u003c/code\u003e attribute links it to an input's \u003ccode\u003eid\u003c/code\u003e. Clicking the label focuses the input.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003cinput\u003e\u003c/code\u003e\u003c/strong\u003e -- a text field. The \u003ccode\u003etype\u003c/code\u003e attribute changes its behavior:\u003c/li\u003e\n\u003c/ul\u003e - \u003ccode\u003etext\u003c/code\u003e -- regular text\n - \u003ccode\u003eemail\u003c/code\u003e -- validates email format\n - \u003ccode\u003epassword\u003c/code\u003e -- hides characters\n - \u003ccode\u003enumber\u003c/code\u003e -- only accepts numbers\n - \u003ccode\u003echeckbox\u003c/code\u003e -- a toggle\n - \u003ccode\u003eradio\u003c/code\u003e -- pick one from a group\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003ctextarea\u003e\u003c/code\u003e\u003c/strong\u003e -- a multi-line text field\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ccode\u003e\u003cbutton type=\"submit\"\u003e\u003c/code\u003e\u003c/strong\u003e -- submits the form\u003c/li\u003e\n\u003c/ul\u003e\nThe \u003ccode\u003erequired\u003c/code\u003e attribute prevents form submission if the field is empty. The browser handles validation automatically.\n\n\u003cp\u003eOther input types worth knowing:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;input type=\"date\" /\u0026gt;\n\u0026lt;input type=\"color\" /\u0026gt;\n\u0026lt;input type=\"range\" min=\"0\" max=\"100\" /\u0026gt;\n\u0026lt;input type=\"file\" /\u0026gt;\n\n\u003cp\u003e\u0026lt;select\u0026gt;\u003cbr\u003e \u0026lt;option value=\"html\"\u0026gt;HTML\u0026lt;/option\u0026gt;\u003cbr\u003e \u0026lt;option value=\"css\"\u0026gt;CSS\u0026lt;/option\u0026gt;\u003cbr\u003e \u0026lt;option value=\"js\"\u0026gt;JavaScript\u0026lt;/option\u0026gt;\u003cbr\u003e\u0026lt;/select\u0026gt;\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\n\n\u003ch2 id=\"build-a-personal-profile-page\"\u003eBuild: A Personal Profile Page\u003c/h2\u003e\n\n\u003cp\u003eLet's put everything together into a complete page. Create a file called \u003ccode\u003eprofile.html\u003c/code\u003e:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\n\u0026lt;html lang=\"en\"\u0026gt;\n\u0026lt;head\u0026gt;\n \u0026lt;meta charset=\"UTF-8\"\u0026gt;\n \u0026lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u0026gt;\n \u0026lt;title\u0026gt;Alex Chen - Web Developer\u0026lt;/title\u0026gt;\n\u0026lt;/head\u0026gt;\n\u0026lt;body\u0026gt;\n \u0026lt;header\u0026gt;\n \u0026lt;nav\u0026gt;\n \u0026lt;a href=\"#about\"\u0026gt;About\u0026lt;/a\u0026gt; |\n \u0026lt;a href=\"#skills\"\u0026gt;Skills\u0026lt;/a\u0026gt; |\n \u0026lt;a href=\"#projects\"\u0026gt;Projects\u0026lt;/a\u0026gt; |\n \u0026lt;a href=\"#contact\"\u0026gt;Contact\u0026lt;/a\u0026gt;\n \u0026lt;/nav\u0026gt;\n \u0026lt;/header\u0026gt;\n\n\u003cp\u003e\u0026lt;main\u0026gt;\u003cbr\u003e \u0026lt;section id=\"about\"\u0026gt;\u003cbr\u003e \u0026lt;h1\u0026gt;Alex Chen\u0026lt;/h1\u0026gt;\u003cbr\u003e \u0026lt;p\u0026gt;\u0026lt;em\u0026gt;Junior Web Developer based in Austin, TX\u0026lt;/em\u0026gt;\u0026lt;/p\u0026gt;\u003cbr\u003e \u0026lt;img src=\"https://via.placeholder.com/200x200\" alt=\"Photo of Alex Chen\" width=\"200\" height=\"200\" /\u0026gt;\u003cbr\u003e \u0026lt;p\u0026gt;\u003cbr\u003e Hi there! I'm a self-taught web developer transitioning from a career in graphic design.\u003cbr\u003e I love building clean, accessible websites and I'm currently diving deep into JavaScript\u003cbr\u003e and React.\u003cbr\u003e \u0026lt;/p\u0026gt;\u003cbr\u003e \u0026lt;/section\u0026gt;\u003c/p\u003e\n\n\u003cp\u003e\u0026lt;hr /\u0026gt;\u003c/p\u003e\n\n\u003cp\u003e\u0026lt;section id=\"skills\"\u0026gt;\u003cbr\u003e \u0026lt;h2\u0026gt;Skills\u0026lt;/h2\u0026gt;\u003cbr\u003e \u0026lt;table\u0026gt;\u003cbr\u003e \u0026lt;thead\u0026gt;\u003cbr\u003e \u0026lt;tr\u0026gt;\u003cbr\u003e \u0026lt;th\u0026gt;Technology\u0026lt;/th\u0026gt;\u003cbr\u003e \u0026lt;th\u0026gt;Level\u0026lt;/th\u0026gt;\u003cbr\u003e \u0026lt;th\u0026gt;Years\u0026lt;/th\u0026gt;\u003cbr\u003e \u0026lt;/tr\u0026gt;\u003cbr\u003e \u0026lt;/thead\u0026gt;\u003cbr\u003e \u0026lt;tbody\u0026gt;\u003cbr\u003e \u0026lt;tr\u0026gt;\u003cbr\u003e \u0026lt;td\u0026gt;HTML\u0026lt;/td\u0026gt;\u003cbr\u003e \u0026lt;td\u0026gt;Confident\u0026lt;/td\u0026gt;\u003cbr\u003e \u0026lt;td\u0026gt;2\u0026lt;/td\u0026gt;\u003cbr\u003e \u0026lt;/tr\u0026gt;\u003cbr\u003e \u0026lt;tr\u0026gt;\u003cbr\u003e \u0026lt;td\u0026gt;CSS\u0026lt;/td\u0026gt;\u003cbr\u003e \u0026lt;td\u0026gt;Confident\u0026lt;/td\u0026gt;\u003cbr\u003e \u0026lt;td\u0026gt;2\u0026lt;/td\u0026gt;\u003cbr\u003e \u0026lt;/tr\u0026gt;\u003cbr\u003e \u0026lt;tr\u0026gt;\u003cbr\u003e \u0026lt;td\u0026gt;JavaScript\u0026lt;/td\u0026gt;\u003cbr\u003e \u0026lt;td\u0026gt;Learning\u0026lt;/td\u0026gt;\u003cbr\u003e \u0026lt;td\u0026gt;1\u0026lt;/td\u0026gt;\u003cbr\u003e \u0026lt;/tr\u0026gt;\u003cbr\u003e \u0026lt;tr\u0026gt;\u003cbr\u003e \u0026lt;td\u0026gt;React\u0026lt;/td\u0026gt;\u003cbr\u003e \u0026lt;td\u0026gt;Beginner\u0026lt;/td\u0026gt;\u003cbr\u003e \u0026lt;td\u0026gt;\u0026amp;lt;1\u0026lt;/td\u0026gt;\u003cbr\u003e \u0026lt;/tr\u0026gt;\u003cbr\u003e \u0026lt;/tbody\u0026gt;\u003cbr\u003e \u0026lt;/table\u0026gt;\u003cbr\u003e \u0026lt;/section\u0026gt;\u003c/p\u003e\n\n\u003cp\u003e\u0026lt;hr /\u0026gt;\u003c/p\u003e\n\n\u003cp\u003e\u0026lt;section id=\"projects\"\u0026gt;\u003cbr\u003e \u0026lt;h2\u0026gt;Projects\u0026lt;/h2\u0026gt;\u003c/p\u003e\n\n\u003cp\u003e\u0026lt;article\u0026gt;\u003cbr\u003e \u0026lt;h3\u0026gt;Personal Portfolio\u0026lt;/h3\u0026gt;\u003cbr\u003e \u0026lt;p\u0026gt;A responsive portfolio site built with HTML, CSS, and a touch of JavaScript.\u0026lt;/p\u0026gt;\u003cbr\u003e \u0026lt;a href=\"https://example.com\" target=\"_blank\" rel=\"noopener noreferrer\"\u0026gt;View Project\u0026lt;/a\u0026gt;\u003cbr\u003e \u0026lt;/article\u0026gt;\u003c/p\u003e\n\n\u003cp\u003e\u0026lt;article\u0026gt;\u003cbr\u003e \u0026lt;h3\u0026gt;Weather Dashboard\u0026lt;/h3\u0026gt;\u003cbr\u003e \u0026lt;p\u0026gt;Fetches real-time weather data from an API and displays forecasts for any city.\u0026lt;/p\u0026gt;\u003cbr\u003e \u0026lt;a href=\"https://example.com\" target=\"_blank\" rel=\"noopener noreferrer\"\u0026gt;View Project\u0026lt;/a\u0026gt;\u003cbr\u003e \u0026lt;/article\u0026gt;\u003c/p\u003e\n\n\u003cp\u003e\u0026lt;article\u0026gt;\u003cbr\u003e \u0026lt;h3\u0026gt;Task Tracker\u0026lt;/h3\u0026gt;\u003cbr\u003e \u0026lt;p\u0026gt;A simple to-do app with local storage persistence. My first JavaScript project.\u0026lt;/p\u0026gt;\u003cbr\u003e \u0026lt;a href=\"https://example.com\" target=\"_blank\" rel=\"noopener noreferrer\"\u0026gt;View Project\u0026lt;/a\u0026gt;\u003cbr\u003e \u0026lt;/article\u0026gt;\u003cbr\u003e \u0026lt;/section\u0026gt;\u003c/p\u003e\n\n\u003cp\u003e\u0026lt;hr /\u0026gt;\u003c/p\u003e\n\n\u003cp\u003e\u0026lt;section id=\"contact\"\u0026gt;\u003cbr\u003e \u0026lt;h2\u0026gt;Get in Touch\u0026lt;/h2\u0026gt;\u003cbr\u003e \u0026lt;p\u0026gt;Interested in working together? Drop me a message.\u0026lt;/p\u0026gt;\u003c/p\u003e\n\n\u003cp\u003e\u0026lt;form\u0026gt;\u003cbr\u003e \u0026lt;div\u0026gt;\u003cbr\u003e \u0026lt;label for=\"name\"\u0026gt;Name:\u0026lt;/label\u0026gt;\u0026lt;br /\u0026gt;\u003cbr\u003e \u0026lt;input type=\"text\" id=\"name\" name=\"name\" placeholder=\"Your name\" required /\u0026gt;\u003cbr\u003e \u0026lt;/div\u0026gt;\u003cbr\u003e \u0026lt;br /\u0026gt;\u003cbr\u003e \u0026lt;div\u0026gt;\u003cbr\u003e \u0026lt;label for=\"email\"\u0026gt;Email:\u0026lt;/label\u0026gt;\u0026lt;br /\u0026gt;\u003cbr\u003e \u0026lt;input type=\"email\" id=\"email\" name=\"email\" placeholder=\"you@example.com\" required /\u0026gt;\u003cbr\u003e \u0026lt;/div\u0026gt;\u003cbr\u003e \u0026lt;br /\u0026gt;\u003cbr\u003e \u0026lt;div\u0026gt;\u003cbr\u003e \u0026lt;label for=\"subject\"\u0026gt;Subject:\u0026lt;/label\u0026gt;\u0026lt;br /\u0026gt;\u003cbr\u003e \u0026lt;select id=\"subject\" name=\"subject\"\u0026gt;\u003cbr\u003e \u0026lt;option value=\"general\"\u0026gt;General Inquiry\u0026lt;/option\u0026gt;\u003cbr\u003e \u0026lt;option value=\"project\"\u0026gt;Project Collaboration\u0026lt;/option\u0026gt;\u003cbr\u003e \u0026lt;option value=\"job\"\u0026gt;Job Opportunity\u0026lt;/option\u0026gt;\u003cbr\u003e \u0026lt;/select\u0026gt;\u003cbr\u003e \u0026lt;/div\u0026gt;\u003cbr\u003e \u0026lt;br /\u0026gt;\u003cbr\u003e \u0026lt;div\u0026gt;\u003cbr\u003e \u0026lt;label for=\"message\"\u0026gt;Message:\u0026lt;/label\u0026gt;\u0026lt;br /\u0026gt;\u003cbr\u003e \u0026lt;textarea id=\"message\" name=\"message\" rows=\"5\" placeholder=\"Write your message...\" required\u0026gt;\u0026lt;/textarea\u0026gt;\u003cbr\u003e \u0026lt;/div\u0026gt;\u003cbr\u003e \u0026lt;br /\u0026gt;\u003cbr\u003e \u0026lt;button type=\"submit\"\u0026gt;Send Message\u0026lt;/button\u0026gt;\u003cbr\u003e \u0026lt;/form\u0026gt;\u003cbr\u003e \u0026lt;/section\u0026gt;\u003cbr\u003e \u0026lt;/main\u0026gt;\u003c/p\u003e\n\n\u003cp\u003e\u0026lt;footer\u0026gt;\u003cbr\u003e \u0026lt;hr /\u0026gt;\u003cbr\u003e \u0026lt;p\u0026gt;\u003cbr\u003e \u0026amp;copy; 2026 Alex Chen |\u003cbr\u003e \u0026lt;a href=\"https://github.com\" target=\"_blank\" rel=\"noopener noreferrer\"\u0026gt;GitHub\u0026lt;/a\u0026gt; |\u003cbr\u003e \u0026lt;a href=\"https://linkedin.com\" target=\"_blank\" rel=\"noopener noreferrer\"\u0026gt;LinkedIn\u0026lt;/a\u0026gt;\u003cbr\u003e \u0026lt;/p\u0026gt;\u003cbr\u003e \u0026lt;/footer\u0026gt;\u003cbr\u003e\u0026lt;/body\u0026gt;\u003cbr\u003e\u0026lt;/html\u0026gt;\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\n\n\u003cp\u003eThis page looks plain right now -- it's unstyled. That's by design. HTML provides the structure and content. CSS (which you should learn next) handles the visual styling. Keeping them separate is a core principle of web development.\u003c/p\u003e\n\n\u003ch3 id=\"what-this-page-demonstrates\"\u003eWhat This Page Demonstrates\u003c/h3\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eDocument structure\u003c/strong\u003e -- \u003ccode\u003eDOCTYPE\u003c/code\u003e, \u003ccode\u003ehtml\u003c/code\u003e, \u003ccode\u003ehead\u003c/code\u003e, \u003ccode\u003ebody\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eHeadings\u003c/strong\u003e -- \u003ccode\u003eh1\u003c/code\u003e for the name, \u003ccode\u003eh2\u003c/code\u003e for sections, \u003ccode\u003eh3\u003c/code\u003e for project titles\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eParagraphs and emphasis\u003c/strong\u003e -- \u003ccode\u003ep\u003c/code\u003e, \u003ccode\u003eem\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eLinks\u003c/strong\u003e -- internal anchor links (\u003ccode\u003e#about\u003c/code\u003e) and external links\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eImages\u003c/strong\u003e -- with \u003ccode\u003ealt\u003c/code\u003e text, \u003ccode\u003ewidth\u003c/code\u003e, and \u003ccode\u003eheight\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eTables\u003c/strong\u003e -- for the skills grid\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSemantic elements\u003c/strong\u003e -- \u003ccode\u003eheader\u003c/code\u003e, \u003ccode\u003enav\u003c/code\u003e, \u003ccode\u003emain\u003c/code\u003e, \u003ccode\u003esection\u003c/code\u003e, \u003ccode\u003earticle\u003c/code\u003e, \u003ccode\u003efooter\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eForms\u003c/strong\u003e -- text inputs, email input, select dropdown, textarea, submit button\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eLabels\u003c/strong\u003e -- properly linked with \u003ccode\u003efor\u003c/code\u003e and \u003ccode\u003eid\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"common-mistakes-beginners-make\"\u003eCommon Mistakes Beginners Make\u003c/h2\u003e\n\n\u003cstrong\u003eSkipping the \u003ccode\u003ealt\u003c/code\u003e attribute on images.\u003c/strong\u003e Screen readers depend on it. Search engines use it. If the image fails to load, users see it. Always write descriptive alt text. If the image is purely decorative, use \u003ccode\u003ealt=\"\"\u003c/code\u003e (empty string).\n\n\u003cstrong\u003eUsing \u003ccode\u003e\u003cbr /\u003e\u003c/code\u003e for spacing.\u003c/strong\u003e If you want more space between elements, use CSS margins and padding. \u003ccode\u003e\u003cbr /\u003e\u003c/code\u003e is for actual line breaks within text (like a poem or address), not for layout spacing.\n\n\u003cstrong\u003eNesting elements incorrectly.\u003c/strong\u003e Tags must be closed in the reverse order they were opened. \u003ccode\u003e\u003cp\u003e\u003cstrong\u003etext\u003c/p\u003e\u003c/strong\u003e\u003c/code\u003e is wrong. \u003ccode\u003e\u003cp\u003e\u003cstrong\u003etext\u003c/strong\u003e\u003c/p\u003e\u003c/code\u003e is right.\n\n\u003cstrong\u003eUsing headings for styling.\u003c/strong\u003e Don't use \u003ccode\u003e\u003ch3\u003e\u003c/code\u003e because it looks the right size. Use the heading level that matches the document hierarchy, then style it with CSS.\n\n\u003cstrong\u003ePutting block elements inside inline elements.\u003c/strong\u003e A \u003ccode\u003e\u003cdiv\u003e\u003c/code\u003e inside a \u003ccode\u003e\u003cspan\u003e\u003c/code\u003e is invalid. A \u003ccode\u003e\u003cp\u003e\u003c/code\u003e inside an \u003ccode\u003e\u003ca\u003e\u003c/code\u003e used to be invalid (HTML5 relaxed this for \u003ccode\u003e\u003ca\u003e\u003c/code\u003e specifically, but it's still not great practice). Generally, inline elements go inside block elements, not the other way around.\n\n\u003ch2 id=\"what-s-next\"\u003eWhat's Next\u003c/h2\u003e\n\n\u003cp\u003eHTML alone builds structured content but won't win any design awards. The natural next step is:\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eCSS\u003c/strong\u003e -- styling, colors, layout, responsive design. CSS makes your pages look professional.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eJavaScript\u003c/strong\u003e -- interactivity. Make buttons do things, validate forms, fetch data from APIs.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eAccessibility\u003c/strong\u003e -- ARIA attributes, semantic HTML best practices, keyboard navigation\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSEO basics\u003c/strong\u003e -- meta tags, structured data, page titles, heading hierarchy\u003c/li\u003e\n\u003c/ul\u003e\nYou now know enough HTML to build real pages. The best way to get comfortable is to practice: rebuild your favorite website's layout, create a recipe page, or make a fan site for something you like. You don't need permission or a tutorial for every new page -- just open a file and start typing tags.\n\n\u003cp\u003eFor more web development tutorials and guides, check out \u003ca href=\"https://codeup.dev\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eCodeUp\u003c/a\u003e.\u003c/p\u003e"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L15\",null,{\"size\":\"leaderboard\",\"className\":\"hidden sm:flex py-3 bg-gray-50 border-b border-gray-100\"}],[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-7xl px-4 py-8\",\"children\":[[\"$\",\"nav\",null,{\"aria-label\":\"Breadcrumb\",\"className\":\"mb-6\",\"children\":[\"$\",\"ol\",null,{\"className\":\"flex items-center gap-1.5 text-sm text-gray-500\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L16\",null,{\"href\":\"/\",\"className\":\"flex items-center gap-1 hover:text-gray-900 transition-colors\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house h-3.5 w-3.5\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":\"Home\"}]]}]}],[[\"$\",\"li\",\"0\",{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],[\"$\",\"$L16\",null,{\"href\":\"/tutorials\",\"className\":\"hover:text-gray-900 transition-colors\",\"children\":\"tutorials\"}]]}],[\"$\",\"li\",\"1\",{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3.5 w-3.5 text-gray-400\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"text-gray-900 font-medium\",\"children\":\"HTML for Beginners: Build Your First Web Page in 30 Minutes\"}]]}]]]}]}],[\"$\",\"div\",null,{\"className\":\"grid gap-10 lg:grid-cols-[1fr_280px]\",\"children\":[[\"$\",\"article\",null,{\"className\":\"prose prose-lg max-w-none\",\"children\":[[\"$\",\"header\",null,{\"className\":\"not-prose mb-10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-3 text-sm text-gray-500\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-4 w-4\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],\"March 27, 2026\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clock h-4 w-4\",\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"polyline\",\"68esgv\",{\"points\":\"12 6 12 12 16 14\"}],\"$undefined\"]}],\"11 min read\"]}]]}],[\"$\",\"h1\",null,{\"className\":\"mt-5 text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl leading-[1.15]\",\"children\":\"HTML for Beginners: Build Your First Web Page in 30 Minutes\"}],[\"$\",\"p\",null,{\"className\":\"mt-4 text-xl leading-relaxed text-gray-500\",\"style\":{\"fontFamily\":\"var(--font-serif)\"},\"children\":\"Learn HTML from scratch -- document structure, elements, forms, and semantic tags. Build a complete personal profile page step by step.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex flex-wrap gap-2\",\"children\":[[\"$\",\"span\",\"html\",{\"className\":\"flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold\",\"style\":{\"border\":\"1px solid #16a34a33\",\"background\":\"#16a34a0d\",\"color\":\"#16a34a\"},\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-tag h-3 w-3\",\"children\":[[\"$\",\"path\",\"vktsd0\",{\"d\":\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\"}],[\"$\",\"circle\",\"kqv944\",{\"cx\":\"7.5\",\"cy\":\"7.5\",\"r\":\".5\",\"fill\":\"currentColor\"}],\"$undefined\"]}],\" \",\"html\"]}],[\"$\",\"span\",\"beginners\",{\"className\":\"flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold\",\"style\":{\"border\":\"1px solid #16a34a33\",\"background\":\"#16a34a0d\",\"color\":\"#16a34a\"},\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-tag h-3 w-3\",\"children\":[[\"$\",\"path\",\"vktsd0\",{\"d\":\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\"}],[\"$\",\"circle\",\"kqv944\",{\"cx\":\"7.5\",\"cy\":\"7.5\",\"r\":\".5\",\"fill\":\"currentColor\"}],\"$undefined\"]}],\" \",\"beginners\"]}],[\"$\",\"span\",\"web-development\",{\"className\":\"flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold\",\"style\":{\"border\":\"1px solid #16a34a33\",\"background\":\"#16a34a0d\",\"color\":\"#16a34a\"},\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-tag h-3 w-3\",\"children\":[[\"$\",\"path\",\"vktsd0\",{\"d\":\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\"}],[\"$\",\"circle\",\"kqv944\",{\"cx\":\"7.5\",\"cy\":\"7.5\",\"r\":\".5\",\"fill\":\"currentColor\"}],\"$undefined\"]}],\" \",\"web-development\"]}],[\"$\",\"span\",\"tutorial\",{\"className\":\"flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold\",\"style\":{\"border\":\"1px solid #16a34a33\",\"background\":\"#16a34a0d\",\"color\":\"#16a34a\"},\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-tag h-3 w-3\",\"children\":[[\"$\",\"path\",\"vktsd0\",{\"d\":\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\"}],[\"$\",\"circle\",\"kqv944\",{\"cx\":\"7.5\",\"cy\":\"7.5\",\"r\":\".5\",\"fill\":\"currentColor\"}],\"$undefined\"]}],\" \",\"tutorial\"]}]]}],[\"$\",\"div\",null,{\"className\":\"mt-6 flex items-center gap-4 border-t border-gray-100 pt-5\",\"children\":[\"$\",\"$L17\",null,{\"url\":\"https://blog.codeup.dev/tutorials--html-complete-beginners-guide\",\"title\":\"HTML for Beginners: Build Your First Web Page in 30 Minutes\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"not-prose mb-8\",\"children\":[\"$\",\"$L15\",null,{\"size\":\"rectangle\",\"className\":\"flex justify-center sm:justify-start\"}]}],[\"$\",\"div\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"$18\"}}],[\"$\",\"div\",null,{\"className\":\"not-prose mt-10 pt-8 border-t border-gray-100\",\"children\":[\"$\",\"$L15\",null,{\"size\":\"banner\",\"className\":\"flex justify-center\"}]}]]}],[\"$\",\"aside\",null,{\"className\":\"hidden lg:block\",\"children\":[\"$\",\"$L19\",null,{}]}]]}]]}],[\"$\",\"$L15\",null,{\"size\":\"mobile-sticky\"}]]\n"])</script><script>self.__next_f.push([1,"b:null\n"])</script><script>self.__next_f.push([1,"f:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes\"}]]\na:null\n"])</script><script>self.__next_f.push([1,"13:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"CodeUp Blog\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Coding tutorials, DSA guides, and programming language deep-dives\"}],[\"$\",\"meta\",\"2\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"3\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"4\",{\"rel\":\"canonical\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"5\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"6\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"7\",{\"rel\":\"alternate\",\"hrefLang\":\"de\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"8\",{\"rel\":\"alternate\",\"hrefLang\":\"fr\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"9\",{\"rel\":\"alternate\",\"hrefLang\":\"ja\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"10\",{\"rel\":\"alternate\",\"hrefLang\":\"ko\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"11\",{\"rel\":\"alternate\",\"hrefLang\":\"it\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"12\",{\"rel\":\"alternate\",\"hrefLang\":\"es\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"13\",{\"rel\":\"alternate\",\"hrefLang\":\"pt\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"14\",{\"rel\":\"alternate\",\"hrefLang\":\"nl\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"15\",{\"rel\":\"alternate\",\"hrefLang\":\"sv\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"16\",{\"rel\":\"alternate\",\"hrefLang\":\"no\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"17\",{\"rel\":\"alternate\",\"hrefLang\":\"da\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"18\",{\"rel\":\"alternate\",\"hrefLang\":\"fi\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"19\",{\"rel\":\"alternate\",\"hrefLang\":\"he\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"20\",{\"rel\":\"alternate\",\"hrefLang\":\"zh-CN\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"21\",{\"rel\":\"alternate\",\"hrefLang\":\"zh-TW\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"22\",{\"rel\":\"alternate\",\"hrefLang\":\"ar\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"23\",{\"rel\":\"alternate\",\"hrefLang\":\"hi\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"24\",{\"rel\":\"alternate\",\"hrefLang\":\"ru\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"25\",{\"rel\":\"alternate\",\"hrefLang\":\"tr\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"26\",{\"rel\":\"alternate\",\"hrefLang\":\"pl\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"27\",{\"rel\":\"alternate\",\"hrefLang\":\"cs\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"28\",{\"rel\":\"alternate\",\"hrefLang\":\"id\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"29\",{\"rel\":\"alternate\",\"hrefLang\":\"th\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"30\",{\"rel\":\"alternate\",\"hrefLang\":\"vi\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"31\",{\"rel\":\"alternate\",\"hrefLang\":\"ms\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"32\",{\"rel\":\"alternate\",\"hrefLang\":\"bn\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"link\",\"33\",{\"rel\":\"alternate\",\"hrefLang\":\"uk\",\"href\":\"https://blog.codeup.dev\"}],[\"$\",\"meta\",\"34\",{\"property\":\"og:title\",\"content\":\"CodeUp Blog\"}],[\"$\",\"meta\",\"35\",{\"property\":\"og:description\",\"content\":\"Coding tutorials, DSA guides, and programming language deep-dives\"}],[\"$\",\"meta\",\"36\",{\"property\":\"og:site_name\",\"content\":\"CodeUp Blog\"}],[\"$\",\"meta\",\"37\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"38\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"39\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"40\",{\"name\":\"twitter:title\",\"content\":\"CodeUp Blog\"}],[\"$\",\"meta\",\"41\",{\"name\":\"twitter:description\",\"content\":\"Coding tutorials, DSA guides, and programming language deep-dives\"}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script><script>self.__next_f.push([1,"d:{\"metadata\":\"$13:metadata\",\"error\":null,\"digest\":\"$undefined\"}\n"])</script></body></html>