HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Text Content

HTML offers various tags to structure textual content properly.

Headings: <h1> through <h6>. H1 is the most important (usually the page title), H6 is the least. Never skip heading levels.
Paragraphs: <p> for blocks of text.
Formatting: <strong> for bold/important text, <em> for italic/emphasized text.
Quotations: <blockquote> for long quotes, <q> for short inline quotes.
Line Breaks: <br> forces a line break (use sparingly).
Horizontal Rule: <hr> inserts a thematic break (a horizontal line).

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Georgia, serif; line-height: 1.8; color: #333; padding: 20px; background: #fdfdfd; }
    h1 { border-bottom: 2px solid #3498db; padding-bottom: 10px; }
    h2 { color: #2c3e50; }
    blockquote { border-left: 5px solid #3498db; padding-left: 15px; margin-left: 0; font-style: italic; color: #555; background: #f4f8fa; padding: 15px; }
    hr { border: 0; height: 1px; background: #ddd; margin: 30px 0; }
    mark { background-color: #ffeaa7; padding: 2px 5px; }
  </style>
</head>
<body>

<h1>&lt;h1&gt; Main Article Title</h1>
  
  <p>This is a standard <code>&lt;p&gt;</code> paragraph. Inside this paragraph, we can have <strong>strongly emphasized &lt;strong&gt; text</strong> and <em>mildly emphasized &lt;em&gt; text</em>. We can also use the &lt;mark&gt; tag to <mark>highlight important words</mark>.</p>
  
  <hr>
  
  <h2>&lt;h2&gt; A Sub-section</h2>
  
  <blockquote>
    "This is a blockquote. It is used to present a quotation from another source. CSS can be used to add the left border and background color."
  </blockquote>
  
  <p>Here is a sentence with a forced <br> line break using the &lt;br&gt; tag.</p>

</body>
</html>

Result

Topics

Introduction Environment Setup First Web Page Workflow & Tools Essentials Document Structure Text Content Lists & Tables Links & Navigation Images & Media Forms & Validation Reusable Components Styling Essentials Selectors & Specificity Cascade & Inheritance Typography Colors & Backgrounds Box Model Layout Fundamentals Positioning & Z-Index Flexbox CSS Grid Layout Patterns Responsive Design Responsive Components Custom Properties Calc & Functions Transitions Transforms Animations Effects & Filters Accessibility Design Systems Performance Debugging & Testing Tooling & Automation Landing Page Project Exercises Quiz

HTML & CSS Masterclass Tutorial

Course Topics

Text Content

Text Content

Try It Yourself

Topics