liveBook · Manning

HTML

As explained in Tiny CSS Projects

HTML is a markup language for structuring content in documents displayed by web browsers.

HTML provides a web page’s structure and content. CSS controls its presentation, while JavaScript can add functionality. Keeping these jobs separate makes a page easier to maintain and extend. section 1.1.1

Start with an article

A single-column article begins with a heading, paragraphs, a dated byline, lists, and images. Its head links to styles.css; CSS can then select the HTML elements and change their appearance without replacing the content. section 1.2

Choose elements that describe the content before styling the layout:

  • A summary card uses a section containing a heading, description, and link. section 5.1
  • A checkout page uses sections for the cart and summary, with a table for items and a description list for totals. section 8.1

The same HTML can serve different screen sizes: media queries change the styling rather than requiring separate markup. If styles are written in SCSS, link the resulting CSS file in HTML—the browser uses the compiled CSS. section 8.1 section 12.1.4

Listing 1.1 Starting HTML
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Chapter 1 - CSS introduction</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <img src="sample-image.svg" width="100" height="75" alt="">
  <article>
    <header>
      <h1>Title of our article (heading 1)</h1>
      <p>
        Posted on
        <time datetime="2015-05-16 19:00">May 16</time>
        by Lisa.
      </p>
    </header>
    <p>Lorem ipsum dolor sit amet, ...</p>
    <ol class="ordered-list">
      <li>List item 1
        <ul>
          <li>Nested item 1</li>
          <li>Nested item 2</li>
        </ul>
      </li>
      <li>List item 2</li>
      <li>List item 3</li>
      <li>List item 4</li>
    </ol>
    <img src="sample-image.svg" width="200" height="150" alt="">
    <p>Curabitur id augue nulla ...</p>
    <blockquote id="quote-by-author">
     Nunc eleifend nulla lobortis ...
    </blockquote>
    <p>Etiam tempor vulputate varius ...</p>
    <h2>Heading 2</h2>
    <p>
       In ac euismod tortor ...
       <a target="_blank" href="#">In eleifend in dolor id aliquet</a>
       ...
    </p>
    <p>In id lobortis leo ...</p>
    <img src="sample-image.svg" width="200" height="150" alt="">
    <h3>Heading 3</h3>
    <p>
      Mauris sit amet tempor ex ...
      <a href="#">Sed vulputate eget ante vel vehicula</a>.
      Curabitur ac velit sed ...
    </p>
    <p>Quisque vel erat et ...</p>
    <h4 class="small-heading">Heading 4</h4>
    <p>Aliquam porttitor, ex ...
      <a href="#">Cras sed finibus libero</a>
      Duis lobortis, ipsum ut consectetur ...
    </p>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <svg xmlns="http:/ /www.w3.org/2000/svg" width="300" height="150">
      <circle cx="70" cy="70" r="50"></circle>
      <rect y="80" x="200" width="50" height="50" />
    </svg>
    <h4>Heading 4</h4>
    <h5 class="small-heading">Heading 5</h5>
    <p>In finibus ultrices nulla ut rhoncus ...</p>
    <h6 class="small-heading">Heading 6</h6>
    <p lang="it">Questo paragrafo è definito in italiano.</p>
    <ul class="list">
      <li>List item 1
        <ul>
          <li>Nested item 1</li>
          <li>Nested item 2</li>
        </ul>
      </li>
      <li>List item 2</li>
      <li>List item 3</li>
      <li>List item 4</li>
    </ul>
    <footer>
      <p>Footer text</p>
    </footer>
  </article>
  <p>Nam rutrum nunc at lectus ...</p>
</body>
</html>

See a complete article scaffold, including document metadata, a stylesheet link, and the content elements that CSS will style. section 1.2

How Tiny CSS Projects covers it

How deep it goes
Explains HTML’s structural role through starter markup, but does not develop HTML syntax as a standalone subject.
Examples
Uses an article scaffold, summary cards, and a checkout cart with a table and description list.
What it assumes
Starts from supplied HTML and introduces linking CSS and selecting elements, without requiring prior CSS knowledge.
What you can do after
Evaluate/understand how existing HTML structures support CSS styling across screen sizes.
How it connects
Connects HTML to separation of concerns, CSS selectors, responsive design, and JavaScript.
Cover of Tiny CSS Projects
liveBookmanning.com
Read Tiny CSS Projects on liveBook Get the book at manning.com

Also explained in

Compare how 12 books explain HTML →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.