HTML Overview – FA Software Development

An HTML element is defined by a start tag, some content, and an end tag.

The HTML element is everything from the start tag to the end tag.

HTML elements can be nested (this means that elements can contain other elements), but nested elements must close before the higher level tags close.

All HTML documents consist of nested HTML elements.

HTML elements with no content are called empty elements.

The br tag defines a line break and is an empty element without a closing tag.

Closing Tag Examples

Valid

<p>Hello everyone</p>

<a href="index.html">click here</a>

<div>
  <h1>Heading</h1>
  <p class="largered">Paragraph 1</p>
</div>

Invalid

<p>Hello everyone

<a href="index.html">click here<a>

<div>
  <h1>Heading</h1>
  <p class="largered">Paragraph 1</div>
</p>

Types of tag

We will split that tags into the groups:

Special
Layout
Text
Multimedia
Forms
Advanced and rarely used

Special

Tags that don’t have a graphical aim or alter the layout. These are often mandatory for a valid HTML document.

<html>
<!DOCTYPE>
<head>
<link>
<meta>
<script>
<style>
<title>
<body>

Layout

Layout elements are used to position the elements of the webpage on the screen.

<header>
<nav>
<main>
<div>
<section>
<footer>

Text

Text elements control how text is either displayed or grouped.

<a>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<p>
<ul>, <ol>, <li>
<strong>
<em>
<i>
<span>
<table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>

Multimedia

Multimedia tags are used for all the content that isn’t simply text.

<source>
<audio>
<video>
<picture>
<img>
<embed>

Forms

If you need a user to send data from the website you need to use form elements.

<form>
<button>
<input>
<label>
<select>, <option>
<textarea>
<fieldset>

There are many more tags that can be used for special purposes. For more information on any tags, you can find details online at https://www.w3schools.com/html/default.asp

Attributes

HTML attributes provide additional information about HTML elements.

All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name=”value”

Common attributes are:

name
alt
width
height
title
src

ID

The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.

The id attribute is used to point to a specific style declaration in a style sheet which we will cover in more detail in the CSS part of the course. It is also used by JavaScript to access and manipulate the element with the specific id. You don’t need to assign an id to each element.

<div id="list_of_users">Content</div>

Class

The HTML class attribute is used to specify a class for an HTML element.

Multiple HTML elements can share the same class.

The class attribute can contain multiple classes, for example:

<div class="large left-aligned error collapsed">Content</div>

Block vs inline

Every HTML element has a default display value, depending on what type of element it is. There are two display values: block and inline.

Block

A block-level element always starts on a new line.

A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

A block level element has a top and a bottom margin, whereas an inline element does not. Here are the block-level elements in HTML:

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>

<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>

<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>

Inline

An inline element does not start on a new line.

An inline element only takes up as much width as necessary. Here are the inline elements in HTML:

<a>
<abbr>
<acronym>
<b>
<bdo>
<dig>
<br>
<button>
<cite>
<code>
<dfn>

<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>

<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>

Don’t Panic!

Most of these are rarely used. Over the rest of the course you will be shown the most useful and commonly used tags.

Next: Getting started