Skip to main content
March 22, 2026Noble Desktop/10 min read

Coding Basics: Intro to HTML Syntax

Master HTML fundamentals through hands-on coding practice

Prerequisites Check

Before starting this tutorial, ensure you have downloaded the class files and have a text/code editor like Sublime Text, Dreamweaver, or Atom installed on your system.

Getting Started

Before diving into this hands-on coding exercise, you'll need to download the class files. This practical approach ensures you're working with the same file structure and content as outlined in this tutorial.

1. Launch your preferred text or code editor (Sublime Text, Visual Studio Code, Atom, or Dreamweaver) and press Cmd–O (Mac) or Ctrl–O (Windows) to open a file.

2. Navigate to your Desktop, then into the Class Files folder → yourname-Web Dev Class folder → News Website directory.

3. Double-click microsoft.html to open the file in your editor.

Note: If you're using Dreamweaver, ensure you're viewing the code editor rather than the design view for this exercise.

4. You'll notice the file contains raw text without any HTML structure. We'll transform this plain text into properly formatted HTML by adding the essential tags shown in bold below. Modern code editors will suggest tags as you type—feel free to ignore these autocomplete suggestions for now as we focus on understanding the fundamentals.

  <html>
  <head>
        <title>Latest News from The Onion</title>
  </head>
  <body>
  Microsoft Patents Ones and Zeroes
  Unexpected development shakes up computer industry

5. Most modern code editors automatically generate closing tags when you type < and /—a significant time-saver. However, always verify that your tags are properly nested and closed to avoid rendering issues.

6. Scroll to the bottom of your document and add these closing tags highlighted in bold:

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

Understanding HTML structure is fundamental to web development. All HTML elements are enclosed within angle brackets (< and >), and most tags function as containers that "wrap" content between opening and closing tags. The closing tag includes a forward slash (/) before the element name, signaling where that element ends.

The <html> element serves as the root container for your entire document. Within this wrapper, content is organized into two distinct sections: the <head> contains metadata and document information invisible to users, while the <body> houses all visible content that users interact with—text, images, links, and multimedia elements.

The <title> element deserves special attention as it serves multiple critical functions. Positioned within the <head> section, it provides a concise, accurate description of your page's content. Notice how it's indented to reflect the document's hierarchical structure—a best practice for readable code. An effective title typically combines your brand or company name with specific page content. This seemingly simple element is crucial for Search Engine Optimization (SEO), significantly influencing how search engines rank and display your content in results. The title appears in browser tabs, search engine results, and when users bookmark your page, making it your content's first impression.

7. Now let's preview our work in a browser. First, save your file using Cmd–S (Mac) or Ctrl–S (Windows).

8. Navigate to your Desktop → Class Files folder → yourname-Web Dev Class folder → News Website directory.

9. Ctrl–click (Mac) or right-click (Windows) on microsoft.html, select Open with, and choose your preferred browser.

10. Observe how the title appears in your browser's title bar or tab—this demonstrates the title element in action.

11. Examine the page content itself. Notice how everything wrapped within the <body> tags appears as a single, unformatted paragraph. This occurs because browsers ignore line breaks and whitespace in your code unless explicitly instructed otherwise through HTML markup.

Pro tip: Keep microsoft.html open in your browser throughout this exercise. Simply refresh the page after each code change to see your modifications instantly—this live preview approach accelerates the learning process.

12. Return to your code editor to continue structuring the page with proper HTML formatting.

Setting Up Your First HTML File

1

Open Your Editor

Launch your text/code editor and use Cmd-O (Mac) or Ctrl-O (Windows) to open the file browser

2

Navigate to Project Files

Go to Desktop > Class Files > yourname-Web Dev Class > News Website folder

3

Open HTML File

Double-click microsoft.html to open it in your editor and view the raw text content

HTML Document Structure

HTML Tag

The root element that wraps around the entire document. Everything else goes inside this container.

Head Section

Contains metadata about the document like title and other information visitors won't directly interact with.

Body Section

Houses the actual content that visitors will see and interact with on your webpage.

Headings

Headings are the backbone of web content organization, serving multiple essential purposes simultaneously. They create a logical content hierarchy that helps visitors quickly scan and navigate your page, significantly improving user experience. For accessibility, headings enable screen reader users to jump between sections using keyboard shortcuts—a critical feature for inclusive web design. Search engines also rely heavily on heading structure to understand and index your content effectively, making proper heading usage a cornerstone of SEO strategy.

HTML provides six heading levels, from H1 (most important, typically used once per page) through H6 (least important). Think of headings as an outline structure—H1 for main topics, H2 for major sections, H3 for subsections, and so on.

1. In your code editor, locate the body section and add the following heading tags highlighted in bold:

   <body>
   <h1>Microsoft Patents Ones and Zeroes</h1>
   <h2>Unexpected development shakes up computer industry</h2>

   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.

2. Save your file and return to the browser.

3. Click the Reload button to refresh the page with your new code changes.

4. Notice how browsers apply default styling to headings—bold text weight, varying font sizes based on importance level, and automatic spacing. While these defaults provide a foundation, you'll later customize the appearance using Cascading Style Sheets (CSS) to match your design vision. For now, we're focusing purely on semantic markup and content structure.

HTML Heading Hierarchy

H1 - Most Important
6
H2 - Section Headers
5
H3 - Subsections
4
H4 - Sub-subsections
3
H5 - Minor Headings
2
H6 - Least Important
1
SEO and Accessibility Benefits

Headings help search engines understand your content structure and enable screen readers to navigate documents efficiently. Use them semantically, not just for styling.

Paragraphs

While your text may appear to have natural paragraph breaks when reading the code, browsers require explicit markup to understand where paragraphs begin and end. Without proper paragraph tags, all text flows together as a continuous block, regardless of how it's formatted in your source code.

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

2. Wrap the first paragraph in opening and closing paragraph tags as highlighted in bold:

  <h1>Microsoft Patents Ones and Zeroes</h1>
  <h2>Unexpected development shakes up computer industry</h2>

  <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 wrapping the remaining paragraphs as shown below:

  <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 Vista
     Microsoft Office
     Xbox 360

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

4. Save the file and refresh your browser to observe how proper paragraph markup creates clear content separation and improved readability.

Browser Behavior with Line Breaks

Web browsers ignore line breaks in your code. Without proper paragraph tags, all your text will appear as one continuous block regardless of how you format it in your editor.

Lists

Lists are essential for presenting related items in an organized, scannable format. HTML offers two primary list types: unordered lists (bulleted) using <ul> and ordered lists (numbered) using <ol>. Both require <li> (list item) tags to wrap individual entries. This semantic approach helps screen readers announce list content appropriately and provides styling hooks for CSS customization.

1. In your code editor, locate the Microsoft patents section and transform the plain text into a proper bulleted list using the markup highlighted in bold:

  <p>Some other patents that Microsoft owns:</p>
  <ul>
     <li>Windows Vista</li>
     <li>Microsoft Office</li>
     <li>Xbox 360</li>
  </ul>
  <p>Wall Street reacts to MS Patent News. Read more...</p>

2. Save your file and refresh the browser to see how the browser automatically adds bullet points and proper indentation to create a visually distinct list format.

HTML List Types

FeatureUnordered Lists (ul)Ordered Lists (ol)
Display StyleBullet pointsNumbered items
Use CaseNon-sequential itemsSequential steps
List Item Taglili
Recommended: Both list types use the same li tag for individual items

Strong & Em Formatting

The <strong> and <em> elements represent semantic emphasis rather than mere visual styling. This distinction is crucial for accessibility and SEO. <strong> indicates strong importance and typically renders as bold text, while <em> (emphasis) conveys stress emphasis and usually appears italicized. Screen readers interpret these tags differently than visual formatting tags, using vocal emphasis to convey meaning to users with visual impairments.

1. Add strong emphasis to the location identifier by wrapping it in <strong> tags (around line 9):

  <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 emphasis to the "Read more" link text using <em> tags (around line 23):

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

3. Save the file and refresh your browser to observe the bold and italic rendering of your semantic emphasis tags.

Semantic Text Formatting

Strong Element

Indicates strong importance and renders as bold text in visual browsers. Screen readers may emphasize this differently.

Em Element

Provides emphasis and typically renders as italic text. The emphasis is conveyed through different speaking styles in screen readers.

Adding the Doctype, Lang Attribute, & Meta Tags

Modern web development requires several foundational elements that ensure your page renders consistently across browsers and provides essential information about your document. These elements form the technical foundation that browsers, search engines, and assistive technologies rely on.

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

2. Position your cursor at the very beginning of the document—before the opening <html> tag—and press Return (Mac) or Enter (Windows) to create a new line.

3. Add the HTML5 document type declaration highlighted in bold:

  <!DOCTYPE html>
  <html>

The DOCTYPE declaration instructs browsers to render your page in "standards mode," ensuring consistent behavior according to modern HTML and CSS specifications. Without this declaration, browsers may fall back to "quirks mode," attempting to emulate outdated browser behaviors that can cause unpredictable rendering issues.

4. Add the language attribute to the HTML element as highlighted in bold:

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

5. The lang attribute uses the international standard language code "en" for English. This attribute serves multiple purposes: it helps search engines understand your content's language for better indexing, enables proper pronunciation in screen readers, and can trigger browser features like translation offerings.

Understanding Attributes:

  • HTML attributes provide additional information about elements and modify their behavior. They appear within the opening tag, after the element name but before the closing bracket.
  • Attributes follow a name="value" syntax, where the attribute name precedes an equal sign, and the value is enclosed in double quotes. Proper attribute formatting is essential for valid HTML.

6. Add the character encoding meta tag within the head section as highlighted in bold:

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <meta charset="UTF-8">
     <title>Latest News from The Onion</title>
  </head>

The <meta charset="UTF-8"> declaration specifies Unicode (UTF-8) character encoding, enabling your page to display special characters, symbols, and international text correctly across all platforms and devices. UTF-8 has become the standard encoding for modern web development due to its comprehensive character support.

7. Notice that both the DOCTYPE declaration and meta tag are self-closing elements—they don't require closing tags because they don't contain content. Instead, they provide instructions or metadata about the document itself.

8. Save your file and take a moment to appreciate your accomplishment—you've successfully created a complete, standards-compliant webpage from scratch!

Modern HTML Document Requirements

0/3
“
In standards mode pages are rendered according to the HTML and CSS specifications, while in quirks mode attempts are made to emulate the behavior of older browsers.
Understanding the importance of DOCTYPE declaration for consistent rendering

Learn Web Development: Start Coding HTML, CSS, and JavaScript

Ready to advance your web development skills beyond this foundational exercise? The modern web development landscape offers numerous pathways for professional growth, whether you're starting from scratch or expanding existing technical skills. Our comprehensive program offerings are designed to meet the demands of today's technology-driven marketplace:

Congratulations on Your First Webpage

You've successfully created a complete HTML document with proper structure, semantic elements, and modern standards. This foundation prepares you for more advanced web development topics.

Key Takeaways

1HTML uses opening and closing tags wrapped in angle brackets to structure content semantically
2Every HTML document requires html, head, and body elements with proper nesting and indentation
3The DOCTYPE declaration ensures browsers render pages according to modern HTML and CSS specifications
4Semantic elements like headings, paragraphs, and emphasis tags improve both SEO and accessibility
5Headings create a hierarchical structure from H1 to H6, helping users and search engines understand content organization
6List elements require both container tags (ul/ol) and individual item tags (li) to display properly
7The lang attribute and charset meta tag are essential for international compatibility and special character support
8Modern HTML development requires understanding the distinction between content structure and visual presentation

RELATED ARTICLES