M1D4: HTML

Posted on December 21, 2022 by Rose

Text Elements

An HTML element is a unit of content in an HTML document that is formed using HTML tags.

The basic structure of an element is composed of 4 key items, one of which is optional.

<p class="dog-breed">This is my paragraph tag in HTML.</p>
  1. The opening tag is the first HTML tag used to start an element.
  2. The content is the info contained between the opening and closing tags. Only this content inside the opening and closing body tags is displayed to the screen.
  3. The closing tag is the second tag used to define the end of a single element. Closings tags have a forward slash / inside of them, always after the left angle bracket.
  4. (Optional) The attribute name and value.

2 Types of HTML Elements

Block elements – meant to structure the main parts of your page, by dividing your content in coherent blocks.

  • paragraphs <p>
  • lists:
    • unordered (with bullet points) <ul>, or
    • ordered – lists (with numbers) <ol>
  • headings: from 1st level <h1> to 6th level headings – <h6>
  • articles <article>
  • sections <section>
  • long quotes <blockquote>

Inline elements – differentiate part of a text, to give it a particular function or meaning. Inline elements usually comprise a single or few words.

  • links <a>
  • emphasized words <em>
  • important words <strong>

HTML Lists

<li> list item

<ul> unordered list

<ol> ordered list

Attributes

All HTML elements can have attributes. Attributes provide additional information about an element, and are always specified in the start tag. Attributes usually come in name/value pairs like name="value".

Images

  • The “source” (URL or file location) from where an image is taken through the src attribute
  • The image’s alternative text (often a description for those with accessibility needs) is provided through the alt attribute
  • The image size can be adjusted through the width and height attributes
  • Images are self-closing – you add a slash at the end, instead of another </img> tag as we have seen before
<img
  src="images/nefertiti.jpg"
  alt="A smiling Labrador Retriever"
  width="480"
  height="320"
/>

Links

  • inline elements written with the <a> tag. The href attribute (hypertext reference) is used to define the destination of the link (where you navigate to when you click).

There are 3 types of destinations you can define:

  • anchor targets, to navigate within the same page
  • relative URLs, usually to navigate within the same website
  • absolute URLs, usually to navigate to another website

You can also use additional attributes besides a and href:

  • specify the relationship between the current and linked document with the rel attribute
  • specify where to open the linked document with the target attribute

About rel=noopener

<a href="https://thelabradorclub.com" rel="noopener" target="_blank"
  >Join The Labrador Retriever Club</a>

Comments

A comment starts with <!-- and ends with -->.

<!-- line-break -->
<br />
<!-- image -->
<img src="https://dog.com/image.png" alt="Description" />
<!-- text input -->
<input type="text" />

HTML Elements Reference

DOM – Document Object Model

The branches and nodes of the web.

Branching out elements, hierarchal

Creating HTML File

Start with a declaration: 

<!DOCTYPE html>
<html>
  <head>
    <!-- We put Metadata in the head tag -->
    <title>This is the title that shows on the browser's tab.</title>
  </head>
  <body>
    <!-- This is the body, where everything will be displayed on the website. -->
  </body>
</html>

Metadata

Metadata is information about the page that isn’t displayed directly on the web page.

Unlike the information inside of the <body> tag, the metadata in the head is information about the page itself.

Hierarchy

Since there can be multiple levels of nesting, this analogy can be extended to grandchildren, great-grandchildren, and beyond. The relationship between elements and their ancestor and descendent elements is known as hierarchy.

Semantic Elements

Structure elements allow you to organize the main parts of your page. They usually contain other HTML elements.

  • <header> as the first element of the page, that can include the logo and the tagline.
  • <nav> as a list of links that go to the different pages of the website.
  • <h1> as the title of the page.
  • <article> as the main content of the page, like a blog post.
  • <footer> as the last element of the page, located at the bottom.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My First Template</title>
    <meta name="description" content="A webpage with my first HTML template." />
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

Forms

<form></form>

<!-- A text input -->
<input type="text" />
<!-- A checkbox -->
<input type="checkbox" />
<!-- A radio button -->
<input type="radio" />
<label for="color-select">Choose a color:</label>

<select id="color-select">
  <option value="">--Please choose an option--</option>
  <option value="blue">Blue</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="yellow">Yellow</option>
  <option value="orange">Orange</option>
  <option value="pink">Pink</option>
</select>

Text Area – creates a more free-form text field for the user to enter information.

<label for="learn">What do you hope to learn today?</label>

<textarea id="learn" name="learn" rows="5" cols="30">
I hope to learn about...
</textarea>

Debugging HTML

Debugging HTML is great practice for writing quick and optimized HTML, and requires practice as much as any information you can learn.

This entry was posted in Study Notes and tagged , . Bookmark the permalink.

Leave a Reply