Hello HTML5!

Friday, Jul 10, 2020
Frontend

HTML tells the browser about the content structure. For example, is it a heading or a paragraph just like the structure of a book or newspaper. Or is it a section or an article. Is some content a part of header or footer. We tell the browser about the structure of our webpage using tags which is simply text enclosed in angle bracket, like <header>. Most tags come in pairs - opening tag and closing tag, with content inside. The opening tag, closing tag and content inside these tags makes up an element.

Where do we start?

<!DOCTYPE html>             tells the browser it's an HTML5 document
<html>                      root of the document
  <head>                    meta data about the page
    <title>...</title>      title meta data, text shown in browser's tab
    ...
  </head>                   head tag is closed
  
  <body>                    stuff that gets displayed on the page
    <h1>...</h1>            main heading (usually one per page)
    <p>...</p>              paragraph, chunk of text
    ...                     more elements
  </body>                   close the body
</html>                     close the html document
  

Which text is important?

Use <strong> and <em> tags inside paragraph element:

<p><strong>Attention:</strong> Watch out for falling code blocks!</p>
<p>This is <em>really</em> important.</p>

Use <a> tag with href attribute pointing to the page:

Visit <a href="https://google.com">google</a> to search for stuff.
Here is my <a href="books/book-collection.html">book collection.

Create lists with <ul> and <ol> tags

Ordered lists are created with <ol> tag and unordered lists with <ul> tag. Each list element go inside <li> tag:

<ol>
 <li>Make a list</li>
 <li>Go shopping</li>
</ol>

<ul>
 <li>Buttermilk</li>
 <li>Eggs</li>
</ul>

How do I add images?

Images are added using <img> tag with src attribute pointing to image and alt attribute describing the image:

<img src="images/moon.jpg" alt="full moon">
<img src="images/logo.jpg" alt="">