# 1.1: HTML ## Learning Objectives 1. HTML is a set of tags that defines elements on all web pages 2. Understand basic HTML document structure 3. Understand how to use common tags ## Introduction ```markup My First Page

My First Header

My first paragraph

``` HTML (HyperText Markup Language) defines elements on web pages. All web pages, even the most complex ones rely on HTML to represent their elements. In upcoming modules we will learn how to use CSS and JS to apply styling and interactivity to HTML elements. HTML comprises tags and content between them. Web browsers read HTML and render content between tags based on tag specifications. For example, browsers will render content between "Header 1" (`h1`) opening (`

`) and closing (`

`) tags as large headers, and content between opening and closing "Paragraph" tags (`p`) in paragraph format. ```html

My First Heading

My first paragraph.

``` ## Basic HTML Structure All HTML documents generally start with the following declaration to use the latest version of HTML. ```html ``` After the `DOCTYPE` declaration is typically a set of `html` opening and closing tags surrounding all page content. ```html Page content ``` The first set of tags within the outermost `html` tags is usually the `head` tags. `head` tags contain important site metadata such as title (what's displayed in the browser tab bar), SEO metadata and links to stylesheets for styling and JavaScript for interactivity. ```html My First Page ``` `body` tags typically follow `head` tags. `body` tags contain the content of the page. The following example includes `body` tags with `h1` and `p` tags within them, specifying content to render on the page. ```html My First Page

My First Header

My first paragraph

``` That is the basic structure of all HTML pages. Feel free to play around with live examples on [W3Schools](https://www.w3schools.com/html/html_examples.asp). ## Common HTML Tags ### Summary The following are common HTML tags we are most likely to use and encounter. Block elements occupy full page width and inline elements only occupy width of their content. | Tag name | Description | Block vs inline | | --------------------- | ------------------------------------------------------- | --------------- | | `div` | Divider tag. Serves as group for other tags. | Block | | `span` | Span tag. Apply styles to inline content. | Inline | | `h1`, `h2`, ..., `h6` | Header tags. `h1` is largest and `h6` is smallest. | Block | | `p` | Paragraph tag. Used to separate paragraphs of text. | Block | | `strong`, `em` | Bold and italicise tags. | Inline | | `a` | Anchor tag. Link to another page with a URL. | Inline | | `img` | Image tag. Render an image. | Inline | | `ol`, `ul`, `li` | Ordered list, unordered list, list item. Render a list. | Block | | `table`, `tr`, `td` | Table, table row, table data. Render a table. | Block | ### Anchor Tags (`a`) Anchor tags link to other webpages and require an `href` parameter that contains a URL. ```html Best Coding Bootcamp ``` To make the link open in a new tab, include the parameter `target="_blank"`. ```markup Best Coding Bootcamp ``` ### Image Tags (`img`) Image tags are self-closing and do not have separate opening and closing tags. They require `src` and `alt` parameters representing the source of the image and alternate text describing the image for accessibility, SEO and to display if the image is not available. `src` can be either a file path or a URL. ```html Rocket rocks!

``` We can wrap tags in each other to combine their functionality. For example, we can make an image a link by wrapping an `img` tag with an `a` tag. ```markup

``` ### List Tags (`ol`, `ul`, `li`) Wrap lists with `ol` (ordered) or `ul` (unordered) and wrap each list item with `li`. {% code title="Ordered List" %} ```html

Study
Practise
Success

``` {% endcode %} {% code title="Unordered List" %} ```html

Great students
Great teachers
Great school

``` {% endcode %} ### Table Tags (`table`, `tr`, `th`, `td`) Wrap tables with `table`, table rows with `tr`, table headers in the 1st row with `th` and table data in subsequent rows with `td`. ```markup

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico

``` ### Basic HTML Document

<!DOCTYPE html>
<html>
  <head>
    <title>Rocket Academy</title>
  </head>
  <body>
    <h1>Welcome to Coding Bootcamp!</h1>
    <a href="rocketacademy.co" target="_blank">
      <img src="images/rocketrocks.png" alt="Rocket rocks!" />
    </a>
    <ol>
      <li>Study</li>
      <li>Practise</li>
      <li>Success</li>
    </ol>
    <h2>What are we going to learn? </h2>
    <table>
      <tr>
        <th>Topic</th>
        <th>Module</th>
        <th>Difficulty</th>
      </tr>
      <tr>
        <td>React</td>
        <td>One</td>
        <td>Easy</td>
      </tr>
      <tr>
        <td>Firebase</td>
        <td>Two</td>
        <td>Intermediate</td>
      </tr>
      <tr>
        <td>ExpressJs</td>
        <td>Three</td>
        <td>Advanced</td>
      </tr>
    </table>
  </body>
</html>

Notice how this html document is composed of a single `html` tag, which contains the `head` and `body` tags. The as stated above, the head tag contains the required meta data for SEO, but it also provides the browser with key information concerning what it should display. Above we have used a title tag such that the tab in the browser would read 'Rocket Academy'. With this in mind the `head` allows us to insert stylesheets which would inform the browser of how to display and render out html content. In the next section will cover how you can style and how you amend the `head` tag to link required CSS. Note that there is also only one body tag, this is where all of the html markup should be placed. Think of html as the structure of your website, developers use html elements to render information onto the browser, choosing the specific tag for the information type.