HTML Basic
1-2 weeks BeginnerHeadings, paragraphs, lists, links. Learn tags one by one.
Overview
HTML is the language that structures a web page. It uses tags (like <h1>) to tell the browser 'this is a heading' or 'this is a paragraph'.
You can't build web pages without HTML. It is the foundation of all websites. Let's master the basic tags.
- How to use headings (h1-h6)
- Writing paragraphs (p)
- List structures (ul, ol, li)
- Links (a) and images (img)
- When to use strong, em, div, span
Detailed Explanation
HTML Tag Basics
HTML wraps elements in 'tags'. Write text between an opening tag <h1> and closing tag </h1>. Example: <h1>Title</h1>. Lowercase is recommended.
- <h1>Heading</h1>
- <p>Paragraph text</p>
- Error: <h1>Heading (forgot closing tag)
- Always pair open and close tags
- Close inner tags before outer tags when nesting
- Forgetting </h1>
- Using uppercase tag names (it works but is discouraged)
Headings (h1-h6)
Headings represent document structure. h1 is largest, h6 smallest. h1 is the main title (use only one per page). h2 is a major section, h3 a subsection.
- <h1>My Page</h1>
- <h2>About Me</h2>
- <h3>Hobbies</h3>
- Don't skip hierarchy (avoid going from h1 to h3 directly)
- Prioritize meaning over appearance
- Using multiple h1s → bad for SEO
- Using headings just to make text bold
Paragraphs (p)
The p tag stands for paragraph. It defines a block of text. Example: <p>This is a paragraph.</p>. Use multiple p tags for multiple paragraphs.
- <p>My first web page.</p>
- <p>Paragraph 1</p><p>Paragraph 2</p>
- Placing paragraphs under headings makes it readable
- Use multiple p tags instead of <br> for spacing
- Putting a p inside another p → Invalid HTML
- Forgetting the p tag and just typing text
Lists (ul, ol, li)
ul is an unordered list (bullet points), ol is an ordered list (numbered). li represents a list item. li must be placed directly inside ul or ol.
- <ul><li>Apple</li><li>Orange</li></ul>
- <ol><li>Step 1</li><li>Step 2</li></ol>
- Never put anything except li directly inside ul/ol
- Use ol for steps and rankings
- Putting other tags directly inside ul
- Using li outside of ul/ol
Links (a)
The a tag creates a link. The href attribute specifies the destination URL. Example: <a href="https://example.com">Site</a>. href is mandatory.
- <a href="/about">About Us</a>
- <a href="https://google.com">Google</a>
- Add target="_blank" rel="noopener" for external links to open in a new tab
- Forgetting the href attribute
- Forgetting quotes around the URL
Images (img)
The img tag displays an image. src sets the image URL, alt provides an alternative description (required for accessibility). It's a self-closing tag.
- <img src="https://example.com/img.png" alt="Sample Image">
- alt is read by screen readers and displayed if the image fails to load
- Skipping the alt attribute
- Wrong src URL path
strong, em, div, span
strong indicates strong importance (bold), em implies emphasis (italic). div is a block element, span is inline. div and span carry no semantic meaning; they are for group/styling.
- <p>This is <strong>important</strong>.</p>
- <div>Block 1</div><div>Block 2</div>
- <p>This is <span style="color:red">red</span>.</p>
- strong/em add meaning. Avoid b/i (presentation only)
- Confusing the use case for div vs span
Tables (table)
Tags for creating tabular data. Wrap everything in table, and use tr (row), th (header cell), and td (data cell).
- <table>\n <tr>\n <th>Header</th>\n </tr>\n <tr>\n <td>Data</td>\n </tr>\n</table>
- Do not use tables for page layout
- Writing text directly inside tr → must be inside th or td
Semantic Tags
Tags that carry meaning about their content: header, main, footer, nav, article (independent content), section (thematic grouping). Useful for SEO and accessibility.
- <article>\n <section>Chapter 1</section>\n</article>
- Think if there's a better semantic tag before using div
- Using div for everything (div soup)
Form Basics
Forms gather data from users. Wrap everything in a form, and place input (single line), textarea (multi-line), select (dropdowns), etc., inside.
- <form>\n <input type="text" name="username">\n <button type="submit">Submit</button>\n</form>
- Data won't be sent properly without a name attribute
- Forgetting the form tag and just writing inputs
Labels and Checkboxes
Connecting a label tag to an input makes the text clickable to toggle the input. Match the 'for' attribute to the input's 'id'.
- <label for="agree">I agree</label>\n<input type="checkbox" id="agree" name="agree">
- Wrapping the input inside the label also works (<label><input> Agree</label>)
- Forgetting 'for' and 'id' attributes
Custom Data Attributes
Attributes starting with data- allow you to store custom information on an element. Easily retrievable via JavaScript.
- <div data-id="123" data-status="active">User</div>
- Useful for storing state that doesn't affect appearance
- Trying to force custom data into standard attributes like class or id
Practical Steps
- 1 Write an h1 tag 2 mins
Let's write a heading.
- Type <h1>Hello</h1>
- Run to check the preview
<h1>Hello</h1> - 2 Add paragraph with p tag 2 mins
Add a paragraph below the heading.
- Below <h1>Title</h1>, add <p>Paragraph.</p>
- Run and verify
<h1>Title</h1> <p>Paragraph.</p> - 3 Create a list with ul and li 3 mins
Make a bulleted list.
- Wrap with <ul> and </ul>
- Put <li>Item</li> inside
<ul> <li>Apple</li> <li>Orange</li> </ul>
Career & real-world context
HTML basics appear in portfolios, WordPress tweaks, and email HTML—daily junior work.
Industry examples
- Landing pages: h1/p/a/img
- Blogs: article/section structure
- A11y audits: heading hierarchy + alt
Recommended study plan
Week 1: headings & paragraphs → Week 2: lists & links → Week 3: tables & semantics → 10+ exercises.
Prerequisites
Environment step done, or you can render HTML in a browser.
Common interview topics
- Why one h1 per page?
- Benefits of semantic HTML?
- When is alt required?
Completion checklist
- Solved 3+ exercises on headings/lists/links
- No major HTML validate errors
- Ready for CSS basics
Frequently Asked Questions
- Writing <article> and <section> is annoying. Can't I just use <div> for everything?
- You *could* (it's called 'div soup'), and visually it'll look the same. But screen readers for visually impaired users, and Google's search bots will be incredibly confused about what the actual main content is. If you care about SEO and accessibility, eat your semantic vegetables.
- <button> and <a> (links) look identical when styled. Which one do I use?
- Golden rule: If it navigates to a new URL, use <a>. If it triggers an action on the *current* screen (like opening a modal or submitting a form), use <button>. Mixing them up is how you create UI that drives keyboard-navigating users absolutely insane.
- Should I add a slash at the end of empty elements? (like <img />)
- In HTML5, both <img> and <img /> are perfectly valid. However, if you ever plan on learning React (JSX) or writing super strict XML, the self-closing slash is required. Many devs just add the slash out of habit to avoid crying later.
- Can I use multiple <h1> tags per page now?
- We used to think 'HTML5 will let us use an h1 inside every <section>!'. Turns out, browsers never really supported that outline algorithm. The current reality is: stick to one <h1> per page for the main title, and use h2, h3, etc. strictly in order.
- Only one h1?
- Best practice: one h1 per page for clear topic signals.
- div-only markup?
- Works but hurts maintainability—prefer semantic tags.
① Read the explanation. Next: ② Do exercises.
You've mastered HTML basics.
Next, let's style it with CSS. We'll learn colors, spacing, and fonts.