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>

How to link to other pages?

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.

external page links must start with http:// or https://
internal page links use relative path from root directory

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="">

images don't have a separate closing tag
alt attribute is required for the html to be valid. It is used for screen reader to correctly for accessibility.
for decorative images (like website logo), use alt=""