Skip to main content
March 23, 2026Dan Rodney/9 min read

Coding Basics: Intro to HTML Syntax

Master the fundamental building blocks of web development

Essential HTML Components

Document Structure

Learn the HTML, head, title, and body tags that form the foundation of every webpage. These elements create the basic document structure.

Content Elements

Master headings, paragraphs, lists, and text formatting tags. These elements organize and present your content effectively.

Document Metadata

Understand doctype declarations, language attributes, and meta tags. These enhance SEO and accessibility for your pages.

Topics Covered in This HTML & CSS Tutorial:

The HTML, Head, Title, & Body Tags, Headings, Paragraphs, & Lists, the Strong & Em Tags, the Doctype, the Lang Attribute, the Meta Tag & the Unicode Character Set

Exercise Preview

Microsoft patent

Exercise Overview

This hands-on exercise introduces you to HTML's fundamental syntax and the essential tags that form the backbone of every webpage. You'll learn to structure content semantically while building a complete, standards-compliant HTML document from the ground up.

Getting Started

  1. Launch your code editor (Visual Studio Code, Sublime Text, or similar). If you're in a Noble Desktop class, we'll be using Visual Studio Code for this exercise.

  2. Web development follows a project-based approach where all website files live within organized folders. For this exercise, we'll work with files in a folder named News website. Open this project folder using your editor's file management system:

    • Navigate to File > Open (Mac) or File > Open Folder (Windows).
    • Browse to Class Files > Web Dev Class > News website and click Open (Mac) or Select Folder (Windows).
    • If prompted about trusting the author, select Trust the authors of all files in the parent folder and click Yes, I trust the authors.
  3. Your editor's sidebar should now display the project files. Click on Microsoft.html to open the starter file.

  4. The file currently contains raw text without any HTML structure. We'll transform this content into properly formatted HTML by adding the foundational tags shown below. Throughout this tutorial, new code you need to add appears in bold.

    NOTE: Modern code editors offer intelligent autocomplete suggestions as you type. While these features can accelerate development, we recommend typing the tags manually during this learning phase to build muscle memory. When you begin typing a closing tag (</), your editor may complete it automatically—a helpful feature, but always verify the output matches your intentions.

    <html>
<head>
   <title>Microsoft Patents Ones and Zeroes—The Onion</title>
</head>
<body>
   Microsoft Patents Ones and Zeroes

  5. Scroll to the document's end and add these essential closing tags:

    Wall Street reacts to MS Patent News. Read more…
   This report was written by The Onion
</body>
</html>

    Understanding HTML's structure is crucial for professional web development:

    • HTML elements use angle brackets (< and >) to distinguish markup from content.
    • Most elements follow a container pattern with opening and closing tags that wrap content.
    • Closing tags include a forward slash (/) before the element name.

    The <html> element serves as the document's root container. Within it, two distinct sections handle different responsibilities: the <head> contains metadata and resources that browsers and search engines need but users don't directly interact with, while the <body> holds all visible content that users see and engage with.

    The <title> element deserves special attention as it significantly impacts your site's discoverability and user experience. Search engines heavily weight title content when ranking pages, and this text appears in search results, browser tabs, and bookmark lists. Crafting descriptive, concise titles is fundamental to effective Search Engine Optimization (SEO). Notice how the title is indented within the head section—this visual hierarchy makes your code's structure immediately apparent to other developers.

  6. Before previewing our work, save the file using Cmd–S (Mac) or Ctrl–S (Windows). The current content will appear as an unformatted text block since we haven't added structural markup yet.
  7. Keep the file open in your editor, then switch to your system's file manager (the Finder on Mac or File Explorer on Windows).
  8. Navigate through Class Files > Web Dev Class > News website.
  9. Ctrl–click (Mac) or Right–click (Windows) on Microsoft.html, select Open with, and choose your preferred browser.
  10. Observe how your title text appears in the browser tab—this is how users will identify your page when they have multiple tabs open. (Safari users may need to enable the tab bar in View preferences.)

  11. Examine the page content itself. The body text appears as one continuous paragraph because browsers ignore line breaks and whitespace in HTML source code—this is why proper markup is essential for content structure.

    TIP: Keep Microsoft.html open in your browser throughout this exercise. You can refresh the page after each change to see your progress in real-time, mimicking professional development workflows.

  12. Return to Microsoft.html in your code editor to continue building the page structure.

Setting Up Your Development Environment

1

Launch Code Editor

Open Visual Studio Code, Sublime Text, or your preferred code editor to begin writing HTML code.

2

Open Project Folder

Navigate to File > Open Folder and select the News website folder to access all project files.

3

Trust Author Settings

When prompted about trusting the author, check the trust option and click Yes to proceed with file editing.

4

Open HTML File

Click on Microsoft.html in the file panel to begin adding HTML tags to the existing text content.

Headings

Proper heading hierarchy serves multiple critical functions in modern web development. Beyond visual organization, headings create an accessible navigation structure for screen readers, helping visually impaired users jump between sections efficiently. Search engines also rely on heading tags to understand content hierarchy and topic relevance, making them vital for SEO success. HTML provides six heading levels (h1 through h6), allowing you to create detailed content outlines that both users and search algorithms can parse effectively.

  1. Our article has a clear primary topic with no complex subsections, making it perfect for a single h1 heading. In the body section, wrap the main heading with h1 tags:

    <body>
   <h1> Microsoft Patents Ones and Zeroes</h1>
  2. Save the file and return to your browser.
  3. Click the Reload button to see the updated page structure.

  4. Notice how the h1 element automatically receives bold formatting and increased font size. These default styles reflect the heading's semantic importance and can be customized extensively using Cascading Style Sheets (CSS). For this foundational exercise, we're focusing purely on HTML structure and semantic meaning.

HTML Heading Hierarchy

h1 - Main Topic
6
h2 - Major Section
5
h3 - Subsection
4
h4 - Minor Heading
3
h5 - Sub-minor
2
h6 - Smallest
1
Accessibility and SEO Benefits

Headings help organize content for quick skimming, make pages more accessible for screen readers, and help search engines understand your content structure for better ranking.

Paragraphs

While the raw text suggests paragraph breaks through line spacing, browsers can't interpret these visual cues. Professional web development requires explicit markup to communicate content structure. The paragraph tag transforms plain text into structured content that browsers, search engines, and assistive technologies can properly interpret and present.

  1. Return to Microsoft.html in your code editor.

  2. Structure the opening paragraph by adding the appropriate paragraph tags:

    <h1>Microsoft Patents Ones and Zeroes</h1>

<p> REDMOND, WA: In what CEO Bill Gates called an unfortunate but necessary step to protect our intellectual property from theft and exploitation by competitors, the Microsoft Corporation patented the numbers one and zero Monday.</p>

  3. Continue marking up the remaining paragraphs with proper semantic structure:

    <p> With the patent, Microsoft's rivals are prohibited from manufacturing or selling products containing zeroes and ones unless a royalty fee of 10 cents per digit used is paid to the software giant.</p>

<p> Some other patents that Microsoft owns:</p>

   Windows
   Microsoft Office
   Xbox

<p> Wall Street reacts to MS Patent News. Read more…</p>
<p> This report was written by The Onion</p>
  4. Save your work and refresh the browser.

  5. The content now displays as distinct paragraphs with proper vertical spacing, dramatically improving readability and visual hierarchy.

Browser Text Rendering

Line breaks in HTML code are ignored by web browsers. You must use paragraph tags to properly separate content into readable blocks with appropriate spacing.

Lists

HTML lists provide semantic meaning that goes far beyond visual formatting. They help screen readers announce the number of items and current position to users, while search engines can better understand grouped information. The combination of container and item elements creates flexible, accessible content structures that adapt well to different devices and presentation contexts.

Creating bulleted lists requires two complementary tags working together:

  • The <ul> tag creates an unordered list (bulleted), while <ol> creates an ordered list (numbered or alphabetical).
  • Individual <li> tags wrap each list item's content within the container.

  1. Return to Microsoft.html and transform the Microsoft patents into a properly structured bulleted list:

    <p>Some other patents that Microsoft owns:</p>
<ul>
   <li> Windows</li>
   <li> Microsoft Office</li>
   <li> Xbox</li>
</ul>

<p>Wall Street reacts to MS Patent News. Read more…</p>
  2. Save the file and refresh your browser.

  3. The browser now renders a clean bulleted list with proper indentation and list markers, making the related information visually grouped and easier to scan.

Unordered vs Ordered Lists

FeatureUnordered Lists (ul)Ordered Lists (ol)
Visual StyleBullet pointsNumbers or letters
Use CaseNon-sequential itemsStep-by-step processes
HTML Tag<ul><ol>
List Items<li> for each item<li> for each item
Recommended: Choose unordered lists for general item collections and ordered lists for sequential or ranked content.

Strong & Em (Bold & Italic)

The <strong> and <em> elements represent semantic emphasis rather than mere visual styling. While they typically render as bold and italic respectively, their true value lies in conveying meaning to screen readers and other assistive technologies. Screen readers often change vocal emphasis when encountering these elements, helping convey the author's intended tone and importance to users who can't see visual formatting.

  1. In Microsoft.html, add semantic emphasis to the dateline for improved visual hierarchy:

    <p><strong> REDMOND, WA:</strong> In what CEO Bill Gates called an unfortunate but necessary step to protect our intellectual property from theft and exploitation by competitors, the Microsoft Corporation patented the numbers one and zero Monday.</p>

  2. Add subtle emphasis to the "read more" link text:

    <p>Wall Street reacts to MS Patent News. <em> Read more…</em></p>
<p>This report was written by The Onion</p>

  3. Save and refresh to see how semantic emphasis enhances content hierarchy without requiring custom CSS.

Text Emphasis Tags

Strong Tag

Renders as bold text in browsers and indicates important content. Also affects screen reader pronunciation for accessibility.

Em Tag

Renders as italic text and represents emphasized content. Changes speaking style in screen readers for visually impaired users.

Adding the Doctype, Lang Attribute, & Meta Tags

Professional web development requires additional markup that ensures cross-browser compatibility, accessibility compliance, and proper internationalization support. These seemingly technical additions have significant real-world impact on how your content performs across different platforms, devices, and user needs.

  1. Return to Microsoft.html in your code editor.

  2. Position your cursor at the very beginning of the document, before the html tag. Press Return (Mac) or Enter (Windows) to create a new top line.

  3. Add the HTML5 doctype declaration:

    <!DOCTYPE html>
<html>

    The doctype declaration instructs browsers to render your page using modern HTML5 standards rather than legacy compatibility modes. This ensures consistent behavior across different browsers and takes advantage of the latest web platform features. Omitting the doctype or using outdated versions can trigger "quirks mode," where browsers emulate historical rendering bugs for backward compatibility.

  4. Enhance the html element with language information for improved accessibility and SEO:

    <!DOCTYPE html>
<html lang="en">

    The lang attribute uses standardized language codes to identify content language. This information helps search engines serve content to appropriate regional audiences and enables screen readers to select correct pronunciation rules. For international websites, proper language declaration is essential for both technical functionality and user experience.

    Doctype Importance

    The HTML5 doctype tells browsers to render pages in standards mode. Using older doctypes or omitting it can cause quirks mode, emulating nonstandard behavior of old browsers.

    Essential Document Setup

    0/4

Attributes

HTML attributes extend element functionality by providing additional configuration options. They follow a consistent name="value" syntax and always appear within opening tags. Attributes control everything from accessibility features to interactive behavior, making them essential tools for professional web development.

  • Add character encoding specification to ensure proper text rendering across all platforms:

    <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Microsoft Patents Ones and Zeroes—The Onion</title>
</head>

    The charset meta tag specifies UTF-8 encoding, enabling your page to display international characters, symbols, and emoji correctly across all devices and operating systems. This meta element must appear within the first 512 bytes of your HTML file, which is why it's positioned as the head section's first child—a best practice that prevents encoding issues in any browser.

  • Notice that the doctype and meta elements don't require closing tags because they're self-contained declarations rather than content containers. This distinction becomes important as you work with different HTML element types.
  • Save your completed file.

  • Excellent work! You've created a complete, standards-compliant webpage that demonstrates fundamental HTML structure and semantic markup. Keep this file open—we'll build upon this foundation in the next exercise where you'll learn to enhance the visual presentation with CSS.

    • “
    Attributes are modifiers of HTML elements. Most attributes have a name and a value. Attributes are only added to a start tag.
    Understanding the proper syntax and placement of HTML attributes is crucial for creating functional and accessible web pages.
    Webpage Complete

    Congratulations! You have successfully created a complete webpage with proper HTML structure, semantic tags, and essential metadata for SEO and accessibility.

    Key Takeaways

    1HTML documents require a specific structure with html, head, and body tags to organize content and metadata properly
    2The doctype declaration ensures browsers render pages in standards mode rather than quirks mode for consistent display
    3Heading tags (h1-h6) create content hierarchy that improves accessibility, user experience, and search engine optimization
    4Paragraph tags are essential since browsers ignore line breaks in code and need explicit markup to separate content blocks
    5List tags (ul for unordered, ol for ordered) with li elements create properly structured bulleted or numbered lists
    6Strong and em tags provide semantic meaning for emphasis while rendering as bold and italic text respectively
    7The lang attribute on the html tag and UTF-8 meta charset enhance SEO and ensure proper character display across platforms
    8HTML attributes modify element behavior and must be placed in start tags with proper name-value syntax for functionality

    RELATED ARTICLES