HTML Basics
Description here.HTML (HyperText Markup Language) is the standard markup language used for creating web pages and web applications. It provides the basic structure of a webpage, which is then enhanced and modified by other technologies like CSS and JavaScript. HTML uses a system of tags and attributes to define elements such as headings, paragraphs, links, images, and other types of content. These elements are structured in a hierarchical format to create the layout of the webpage. HTML is essential for building web content and serves as the foundation upon which modern websites are built.
Simple HTML Tags
Headings
Headings allow you to display titles and subtitles on your webpage.
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
Paragraphs
<p>
This paragraph
contains a lot of lines
but they are ignored.
</p>
Note that putting content on a new line is ignored by the web browser.
Line Breaks
As you’ve learned, line breaks in the paragraph tag line are ignored by HTML. Instead, they must be specified using the <br> tag. The <br> tag does not need a closing tag.
<p>
This paragraph<br>
contains a lot of lines<br>
and they are displayed.
</p>
Strong
Strong tags can be used to indicate that a range of text has importance.
<p>
No matter how much the dog barks: <strong>don't feed him chocolate</strong>.
</p>
Bold
Bold tags can be used to draw the reader’s attention to a range of text.
<p>
The primary colors are <b>red</b>, <b>yellow</b> and <b>blue</b>.
</p>
Bold tags should be used to draw attention but not to indicate that something is more important.
Emphasis
Emphasis tags can be used to add emphasis to text.
<p>
Wake up <em>now</em>!
</p>
Italics
Italics tags can be used to offset a range of text.
<p>
The term <i>HTML</i> stands for HyperText Markup Language.
</p>
Emphasis vs Italics
By default both tags will have the same visual effect in the web browser. The only difference is the meaning.
Emphasis tags stress the text contained in them.
I <em>really</em> want ice cream.
Italics represent off-set text and should be used for technical terms, titles, a thought or a phrase from another language, for example:
My favourite book is <i>Dracula</i>.
Lists
You can add lists to your web pages. There are two types of lists in HTML.
Lists can be unordered using the <ul> tag. List items are specified using the <li> tag,
<ul>
<li>Coffee</li>
<li>Sugar</li>
<li>Milk</li>
</ul>
<ol>
<li>Rocky</li>
<li>Rocky II</li>
<li>Rocky III</li>
</ol>
Div tags
A <div> tag defines a content division in a HTML document. It acts as a generic container and has no effect on the content unless it is styled by CSS.
It can be nested inside other elements.
The following example shows a <div> element that contains a paragraph element:
<div>
<div>
<p>This is a paragraph inside a div that’s inside another div</p>
</div>
</div>
Comments
If you want to leave a comment in the code for other developers, it can be added as:
<!-- This is a comment -->
The comment will not be displayed in the web browser.
HTML Tables
What is a table?
A table is a structured set of data made up of rows and columns (tabular data).
When should you NOT use HTML tables?
HTML tables should be used for tabular data — this is what they are designed for. HTML tables are not for layout. The main reasons are as follows:
- Layout tables reduce accessibility for visually impaired users: screen readers, used by blind people, interpret the tags that exist in an HTML page and read out the contents to the user. Because tables are not the right tool for layout, and the markup is more complex than with CSS layout techniques, the screen readers’ output will be confusing to their users.
- Tables produce tag soup: As mentioned above, table layouts generally involve more complex markup structures than proper layout techniques. This can result in the code being harder to write, maintain, and debug.
-
Tables are not automatically responsive: When you use proper layout containers (such as
<header>,<section>,<article>, or<div>), their width defaults to 100% of their parent element. Tables on the other hand are sized according to their content by default, so extra measures are needed to get table layout styling to effectively work across a variety of devices.
HTML Table Tags
<table>
<tr>
<th> </th>
<th>Knocky</th>
<th>Flor</th>
<th>Ella</th>
<th>Juan</th>
</tr>
<tr>
<td>Breed</td>
<td>Jack Russell</td>
<td>Poodle</td>
<td>Streetdog</td>
<td>Cocker Spaniel</td>
</tr>
<tr>
<td>Age</td>
<td>16</td>
<td>9</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>Owner</td>
<td>Mother-in-law</td>
<td>Me</td>
<td>Me</td>
<td>Sister-in-law</td>
</tr>
<tr>
<td>Eating Habits</td>
<td>Eats everyone's leftovers</td>
<td>Nibbles at food</td>
<td>Hearty eater</td>
<td>Will eat till he explodes</td>
</tr>
</table>
- The content of every table is enclosed by these two tags:
<table></table>. - The smallest container inside a table is a table cell, which is created by a
<td>. element (‘td’ stands for ‘table data’). - To stop this row from growing and start placing subsequent cells on a second row, we need to use the
<tr>element (‘tr’ stands for ‘table row’).
HTML Forms
The <form> Elements
<form action="/registration" method="POST">
<label for="username">Username:</label><br>
<input type="text" name="username">
<label for="password">Password:</label><br>
<input type="password" />
<input type="submit" />
</form>
Methods
GETPOST
<form>
.
_form elements_
.
</form>
The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
The <input> Elements
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
| Type | Description |
|---|---|
| Displays a single-line text input field | |
| Displays a radio button (for selecting one of many choices) | |
| Displays a checkbox (for selecting zero or more of many choices) | |
| Displays a submit button (for submitting the form) | |
| Displays a clickable button |
Text Fields
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
A form with input fields for text
The form itself is not visible. Also note that the default width of an input field is 20 characters.
The <label> Element
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.
The <label> element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.
Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
A form with radio buttons
Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
A form with radio buttons
The Submit Button
The <input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a file on the server with a script for processing input data.
The form-handler is specified in the form’s action attribute.
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
A form with a submit button
The Name Attribute for <input>
Each input field must have a name attribute to be submitted.
If the name attribute is omitted, the value of the input field will not be sent at all.
Additional resources
Here is a list of resources that may be helpful as you continue your learning journey.
HTML Elements Reference (Mozilla) The Form Element (Mozilla) What is the Document Object Model? (W3C) ARIA in HTML (W3C via Github) ARIA Authoring Practices (W3C)
