Categories
HTML Web development

HTML Text Formatting And Styles

HTML provides the ability for formatting text just like you can do in MS Word, or any other text editing software.

HTML Text Formatting

Formatting elements were designed to display special types of text:

bold <b>

italic <i>

underline <ins>

marked <mark>

superscript <sup>

subscript <sub>

small <small>

deleted <del>

Example:

<!DOCTYPE html>
<html>

<head>
<title>HTML Text Formatting</title>
</head>

<body>

<p><b>The text can be bold.</b></p>
<p><i>The text can be italic.</i></p>
<p><ins>The text can  be underlined.</ins></p>
<p><mark>The text can be highlighted.</mark></p>

<p>The normal text
<sup>This text will be super scripted</sup>
The normal again.</p>

<p>The normal text
<sub> The text can be subscripted.</sub></p>
<p>Normal Text <small> Smal Text. </small></p>
<p><del> The text can be deleted.</del></p>

</body>

</html> 

Output:

HTML Text Formatting

The text can be bold.

The text can be italic.

The text can be underlined.

The text can be highlighted.

The normal text This text will be super scripted The normal again.

The normal text The text can be subscripted.

Normal Text Smal Text.

The text can be deleted.


What else you can do with the text?

HTML Styles

Setting the style of the HTML elements can be done with the style attribute (more about the style attribute you can find in my previous post). 

a) Changing colour (to see more about HTML colours click here and here.) 

b) Changing the font family (the CSS font-family property defines the font for an element.

Note: The HTML <font> tag is not supported in HTML5. You should use CSS instead.)

c) Changing the text size.

d) Changing the text position.

Example:

<!DOCTYPE html>
<html>

<head>
<title>HTML Text Formatting</title>
</head>

<body>

<p style="color:blue">The text can be blue. </p>

<p style="font-family:Arial"> The text can be in Arial. </p>

<p style="font-size: 55"> The size can be changed by style tag. </p>

<p style="text-align:center">

This position is changed by style tag.</p>

</body>
</html> 

Output:

HTML Text Formatting

The text can be blue.

The text can be in Arial.

The size can be changed by style tag.

This position is changed by style tag.


Enjoy coding!

Read also:

How to add custom fonts to HTML?

CSS Fonts

CSS Styling Links

Categories
HTML Web development

HTML Colours

The colours are applied to an HTML tag/ element using CSS. You can pick which part of the element to apply colour to (background color, text color, border color, and more). 

HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

HTML Colors

1. Colour names

In HTML, a color can be specified by using a color name (to see more HTML colour names click here.) 

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Coral;">Coral</h1>
<h1 style="background-color:Crimson;">Crimson</h1>
<h1 style="background-color:Cyan;">Cyan</h1>
<h1 style="background-color:Skyblue;">Skyblue</h1>
<h1 style="background-color:Indigo;">Indigo</h1>
<h1 style="background-color:LawnGreen;">LawnGreen</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
<h1 style="background-color:DarkCyan;">DarkCyan</h1>

</body>
</html>

Output:

HTML Colors

2. Background colour

You can also set the background colour for HTML elements. 

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:mistyrose;">Hi, how are you ?</h1>

<p style="background-color:lightgreen;">
Hope is everything good and you'll learn a lot :D

</p>

</body>
</html>

Output:

HTML Colors

3. Text colour 

You can set the colour of the text as well. 

Example:

<!DOCTYPE html>
<html>
<body>

<h3 style="color:salmon;">Hi, how are you?</h3>

<p style="color:sienna;">Hope is everything good and you'll learn a lot :D.</p>

<p style="color:plum;">Did you try to change a text colour? Try :) </p>

</body>
</html>

Output:

HTML Colors

4. Border colors 

You can set the color of the borders.

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid salmon;">Hi, how are you?</h1>

<h1 style="border: 2px solid palegreen;">Hi, how are you?</h1>

<h1 style="border: 2px solid powderblue;">Hi, how are you?</h1>

</body>
</html>

Output:

HTML Colors

5. Colour Values

In HTML, colours can be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values as well:

Same as color name “Olive”:

<!DOCTYPE html>
<html>
<body>

<p>Same as color name "Olive":</p>

<h1 style="background-color:rgb(128, 128, 0);">rgb(128, 128, 0)</h1>
<h1 style="background-color:#808000;">#808000</h1>
<h1 style="background-color:hsl(60, 100%, 25.1%);">hsl(60, 100%, 25.1%)</h1>

<p>Same as color name "Olive", but 50% transparent:</p>
<h1 style="background-color:rgba(128, 128, 0, 0.5);">rgba(128, 128, 0, 0.5)</h1>
<h1 style="background-color:hsla(60, 100%, 25.1%, 0.5);">hsla(60, 100%, 25.1%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>

</body>
</html>

Output:

HTML Colors

Enjoy coding!

Read also:

Understanding the HTML Layout

HTML Quotations

HTML Scroll Box

Categories
Web development

How to put an image into HTML code?

The HTML Image tag is the last HTML element which I would like to have a look deeper before we will go further to CSS. The image <img> tag is used to insert an image into the document. 

HTML Image

The HTML image element mustn’t contain any content and doesn’t need a closing tag. The HTML <img> tag has two required attributes: src (source) and alt (text). 

Example:

<!DOCTYPE html>
<html>
<body>

<h4>HTML Image</h4>
<img src="avatar.jpg" alt="avatar" width="640" height="480">

</body>
</html>

Output:

avatar

To link an image to another website/ HTML document, nest the <img> tag inside <a> tags. 

Attributes: 

alt (text) defines alternative text for the image. Shows when the image can not be displayed. 


height (pixels) defines the height of the image. 


src (URL) defines the source of the image. 


width (pixels) defines the width of the image. 

Enjoy coding!

Read also:

HTML Attributes

HTML Radio Buttons

Categories
Web development

HTML Table

Today I would like to take a closer look at the <table> HTML element. Tables are used to represent tabular data (tables shouldn’t be used for page layouts, you can read more here). 

A table allows you to look up values that indicate some kind of connection between different types of data, like days of the week, or a person and their age. 

HTML Table

An HTML table is defined with the <table> tag. Each table row is defined with <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag. The HTML <td> element can contain text, images, lists or other tables. 

Example:

<!DOCTYPE html>
<html>
<body>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Last name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Brown</td>
    <td>47</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>White</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Johny</td>
    <td>Deep</td>
    <td>34</td>
  </tr>
</table>

</body>

Output:

HTML Table

If you do not specify a border the table will be displayed without borders. HTML table borders are specified using CSS. To set the border of an HTML table, use CSS border property

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<h3> This is the HTML Bordered Table</h3>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Last name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Brown</td>
    <td>47</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>White</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Johny</td>
    <td>Deep</td>
    <td>34</td>
  </tr>
</table>

</body>
</html>

Output:

HTML Table

HTML Collapsed Border, this property is used to separate off a cell. It is used to collapse adjacent cells and make a common border. If you want the borders to collapse into one border, add the CSS border-collapse property.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>

<h3> This is the HTML Bordered Table</h3>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Last name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Brown</td>
    <td>47</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>White</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Johny</td>
    <td>Deep</td>
    <td>34</td>
  </tr>
</table>

</body>
</html>

Output:

HTML Table

HTML Table Cellpadding is used to add padding to the contents of each table cell and the border or edge of the cell. To set the padding, use the CSS padding property.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td{
padding: 20px;
}
</style>
</head>
<body>

<h3> This is the HTML Bordered Table</h3>
<p>Try to change the padding to 10px. </p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Last name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Brown</td>
    <td>47</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>White</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Johny</td>
    <td>Deep</td>
    <td>34</td>
  </tr>
</table>

</body>
</html>

Output:

HTML Table

Now you can define style to your table.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td{
padding: 15px;
}
table#t01 {
width: 100%;
background-color: #E9967A;
}
</style>
</head>
<body>

<h3> This is the HTML Bordered Table</h3>
<p>Styling Tables</p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Last name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Brown</td>
    <td>47</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>White</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Johny</td>
    <td>Deep</td>
    <td>34</td>
  </tr>
</table>
<br>
<table id="t01">
  <tr>
    <th>Name</th>
    <th>Last name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Brown</td>
    <td>47</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>White</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Johny</td>
    <td>Deep</td>
    <td>34</td>
  </tr>
</table>

</body>
</html>

Output:

HTML Table

and add more styles 🙂

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td{
padding: 15px;
}
table#t01 tr:nth-child(even) {
background-color: #E9967A;
}
table#t01 tr:nth-child(odd) {
background-color: #FFEFD5;
}
table#t01 th {
background-color: black;
color: white;
}
</style>
</head>
<body>

<h3> This is the HTML Bordered Table</h3>
<p>Styling Tables</p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Last name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Brown</td>
    <td>47</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>White</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Johny</td>
    <td>Deep</td>
    <td>34</td>
  </tr>
</table>
<br>
<table id="t01">
  <tr>
    <th>Name</th>
    <th>Last name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Brown</td>
    <td>47</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>White</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Johny</td>
    <td>Deep</td>
    <td>34</td>
  </tr>
</table>

</body>
</html>

Output:

HTML Table

Enjoy coding!

Read also:

HTML Basic Elements part.1

HTML Text Formatting And Styles

Categories
Web development

HTML Basic Elements part. 2

Continuing my previous post, today I prepared another 5 HTML elements which are frequently used in HTML documents. Se let’s take a look, how to use them in practice:

1. HTML <div> tag

2. HTML <span> tag

3. HTML <button> tag

4. HTML <br> tag

5. HTML comment tag

HTML Basic Elements

1. HTML <div> tag

The HTML <div> tag is an empty container, which defines section or division in an HTML document. The <div> element is often used to group together HTML elements and apply CSS styles to many elements at once. 

Example:

<!DOCTYPE html>
<html>
<body>

<p>You can write some text here.</p>

<div style="background-color:lightgreen">
  <h3>Heading in a div element</h3>
  <p>Text in a div element.</p>
</div>

<p>You can write some text here.</p>

</body>
</html>

Output:

HTML Basic

2. HTML <span> tag

The HTML <span> tag is used to group and applying styles to inline elements in an HTML document. 


Example:

<!DOCTYPE html>
<html>
<body>

<p>My sister has <span style="color:brown;font-weight:bold">brown</span> hair and my brother has <span style="color:red;font-weight:bold"> red</span> hair.</p>

</body>
</html>

Output:

HTML Basic Elements

3. HTML <button> tag

The HTML <button> tag defines a clickable button and can be used in forms or anywhere in an HTML document that needs simple button functionality. Inside a <button> tag you can put content (text or images). Different browsers use different default types for the <button> element, but you can change the button’s appearance with CSS. 

Example 1:

<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="alert('Hello :D')">Click Me!</button>

</body>
</html>

Output:

Example 2:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #2a9d8f;
  border: none;
  color: black;
  padding: 20px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  cursor: pointer;
}
</style>
</head>
<body>

<button>DEFAULT BUTTON</button>
<button class="button">STYLED BUTTON</button>
</body>
</html>

Output:


4. HTML <br> tag

The HTML <br> tag inserts a single line break. The <br> element is an empty tag which means it has no end tag. 


You can use the <br> tag to enter line breaks, not to separate paragraphs. 


Example:

<!DOCTYPE html>
<html>
<body>

<p>
You can use br <br> tag to enter line breaks, <br> not to separate paragraphs.
</p>

</body>
</html>

Output:

HTML elements

5. HTML <!–…–> comment tag

The HTML comment tag is used to insert comments in the source code. Comments are not displayed in the browsers. Adding comments into HTML code can help you or someone looking at the code to indicate sections of a document (especially in complex documents). 

The HTML comments are placed in between <!–…–> tags, so any content placed within <!–…–> tags will be treated as a comment. 

Example:

<!DOCTYPE html>
<html>
<body>

<!-- This is a comment -->
<p>You can put some text here.</p>
<!-- Comments are not displayed in the browser -->

</body>
</html>

Output:

HTML Elements

That’s all for now 🙂 
Enjoy coding!

Read also:

HTML Media

HTML Basics

HTML Attributes

Categories
Web development

HTML Basic Elements part.1

To complement a previous post today we will get to know in detail HTML basic elements, that will make it easier to plan your own website. As we know now, all HTML documents consist of nested HTML elements and, the most common used by beginners elements of an HTML page are:

1) Headings <h1>,<h2>,<h3>,<h4>,<h5>,<h6>

2) Paragraph <p>

3) Horizontal rule <hr>

4) HTML Links <a>

5) HTML List <ul>,<ol>,<dl>

HTML Elements

1) Headings

There are six different types of text headers. It’s important to use headings to show the website structure. <h1> should be used as a main heading, followed by <h2> headings, and then the less important <h3>,<h4>,<h5>,<h6>

Example:

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

Once you inserted this code in your HTML editor, you will see in the browser this:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

Importance of Headings: Search engines use headings for indexing the structure and content of the website.

2) Paragraph

The HTML <p> element defines a paragraph. So, anything mentioned within <p> and </p> is treated as a paragraph. 

Example:

<!DOCTYPE html>
<html>
<body>

<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p>Paragraph 3.</p>

</body>
</html>

You can see these paragraphs in your browser as:

HTML Basic Elements

3) Horizontal rule

HTML tag <hr> is used to declare a thematic break for content. The <hr> tag is empty, so it does not require an and tag.

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>HR Tag in HTML</title>
    </head>
    <body>
        <p>The horizontal rule tag below.</p>
        <hr>
        <p>The horizontal rule tag above.</p>
    </body>
</html>  

You can see it the browser as:

HTML Elements

4) HTML Links

The tag <a> (anchor element), is used to create a hyperlink to another website, or another location within the same website. The hyperlink created by the tag <a> can be applied to the text, image, or other HTML content nested between the opening and closing <a> tags. 

The link’s destination is specified in the href attribute. 

Example:

<!DOCTYPE html>
<html>
<body>

<a href="https://www.lenastanley.com">This is a link.Click here!</a>

</body>
</html>

Output:

5) HTML Lists 

Lists are used to group related pieces of information (people’s names, a shopping list, or things to do). There are three lists types in HTML:

a) An unordered (bulleted) list <ul> is used to group related pieces of information in no particular order. 

b) An ordered list <ol> is used to group related pieces of information in a particular order. 

c) A definition list <dl> is used to represents the description list. This tag is used with <dt> tag and <dd> tag. 

Example of an unordered list and an ordered list:

<!DOCTYPE html>
<html>
<body>

<h2>This is an Unordered HTML List</h2>

<ul>
  <li>Bread</li>
  <li>Butter</li>
  <li>Cheese</li>
</ul>

<h2>This is an Ordered HTML List</h2>

<ol>
  <li>Bread</li>
  <li>Butter</li>
  <li>Cheese</li>
</ol>

</body>
</html>

Output:

HTML Basic Elements

a) An unordered HTML list starts with the <ul> tag, and each list item starts with the <li> tag. In case of an unordered HTML list, you can change the bullet (small black circles) to one of several default styles, use an image, or display the list without bullets.

The CSS list-style-type property is used to define the style of the list item marker: disc, circle, square, or none

Example – Circle bullets:

<!DOCTYPE html>
<html>
<body>

<h2>This is an Unordered HTML List with Circle Bullets</h2>

<ul style="list-style-type:circle">
  <li>Bread</li>
  <li>Butter</li>
  <li>Cheese</li>
</ul>
</body>
</html>

Output:

HTML Basics

b) An ordered HTML list starts with <ol> tag, and each list item starts with the <li> tag. An ordered HTML list can be displayed with several sequencing options. The default in most browsers is decimal numbers, but also you can use:

* Letters 
type=”a” lowercase letters (a,b,c…)
type=”A” uppercase letters (A,B,C…)

* Numbers
type=”1″ numbers (1,2,3…)
type=”i” lowercase Roman numerals (i,ii,iii…)
type=”I” uppercase Roman numerals (I,II,III…)

Example – Uppercase letters:

<!DOCTYPE html>
<html>
<body>

<h2>This is an Ordered HTML List with Uppercase letters</h2>

<ol type="A">
  <li>Bread</li>
  <li>Butter</li>
  <li>Cheese</li>
</ol>

</body>
</html>

Output:

HTML Basic Elements

c) Thy <dl> tag is used to represents the definition list (in HTML4.1) or the description list (in HTML5). This tag is used with <dt> (a term name) tag and <dd> (a description of each term) tag.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>This is A Description HTML List</h2>

<dl>
  <dt>Sugar</dt>
  <dd>- 500 gr</dd>
  <dt>Milk</dt>
  <dd>- 1 litre </dd>
</dl>

</body>
</html> 

Output:

HTML Basic Elements

In the next post, I will try to add a description of the rest basic HTML elements (like element div, span, images, and button). 


As a bonus, I am posting an example of a horizontal list styled with CSS, which you can use in your layout to create a navigation section:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #e76f51;
}

li {
  float: left;
}

li a {
  display: block;
  color: #333;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #264653;
  color: white;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Landing page</a></li>
  <li><a href="#news">About author</a></li>
  <li><a href="#contact">Informations</a></li>
  <li><a href="#about">Contact</a></li>
</ul>

</body>
</html>

Output:

Menu

You can create your own a navigation menu with CSS:


Enjoy coding!

Read also:

HTML tags

HTML Attributes

HTML Form Elements

Categories
CSS HTML Web development

HTML Colors

White Colors

HTML Colors. White

Yellow Colors

HTML Colors

Orange Colors

HTML Colors

Red Colors

HTML Colors

Green Colors

HTML Colors. Green.

Cyan Colors

HTML Colors

Blue Colors

HTML Colors. Blue

Purple Colors

HTML Colors.

Pink Colors

HTML Colors. Pink.

Brown Colors

HTML Colors. Brown.

Gray Colors

HTML Colors.

Hey, here’s something that might interest you:

HTML List Tags

HTML Table

HTML Basic

Categories
Web development

HTML List Tags

BLOCK ELEMENTS

addressinformation on the author
articleself-contained content
asidecontent aside from the content it is placed in
blockquotelong quotation
canvasis used to draw graphics, on the fly, via scripting
dddefinition description
divgeneric container (block)
dldefinition list
dtdefinition term
fieldsetform control group
figcaptionspecifies a caption for a <figure> element
figuredefines self-contained content, like illustrations, diagrams, photos…
footerspecifies a footer for a document
formcreate an HTML form for user input
h1-h6six levels of headings
headerrepresents a container for introductory content or a set of navigational links
hrhorizontal rule
maindefines the main content of a document
navspecifies a set of navigation links
noframesalternate content for non-frame-based rendering/ Not Supported in HTML5 / Use the <iframe> tag instead.
noscriptcontent when scripts disabled
olordered list
pparagraph
prepre-formatted text
sectionspecifies a section in a document
ulunordered list
videois used to embed video content in a document

INLINE ELEMENTS

a      anchor (or link)
abbrabbreviation
acronymacronym (UNO, NATO,…)
bbold text
bdoI18N BiDi over-ride
biglarge font
brforced line break
buttonpush button
citecitation or reference
codecomputer code
dfndefinition
ememphasis 
iitalic text
iframeinline subwindow
imgembedded image
inputform control
kbdtext to be entered by the user
labelform field label text
mapclient-side image map
objectgeneric embedded object
outputis used to represent the result of a calculation
qshort inline quotation
sampsample output from scripts
scriptscript statements
selectoption selector
smallsmall font
spangeneric container (inline)
strongindicates stronger emphasis
subsubscript
supsuperscript
textareamulti-line text field
timespecifies a specific time
ttteletype or monospaced text
varan instance of a variable or program argument

TABLE ELEMENTS

captiontable caption
coltable column
colgrouptable column group
table table element (block)                              
tbodytable body
tdtable data cell
tfoottable footer
thtable header cell
theadtable header
trtable row

OTHER ELEMENTS

<!–…–>comment tag
areaimage map area      
audioembeds sound content in a document
basedocument base URI                                
bodydocument body
datalistdefines a list of pre-defined options for an <input> element
deldeleted text
detailsdefines additional information that the user can open and close on demand.
framesubwindow/ Not Supported in HTML5 / Use the <iframe> tag instead.
framesetwindow subdivision/ Not Supported in HTML5 / Use the <iframe> tag instead.
headdocument head
htmlroot element
insinserted text
legendfieldset legend 
lilist item
linkmedia-independent link
metageneric metainformation
optgroupoption group
optionselectable choice
paramnamed property value
picturedefines image resources
stylestyle info
sourcedefines multiple media resources
summaryspecifies a visible heading for the <details> tag.
titledocument title

Hey, here’s something that might interest you:

HTML Attributes

HTML Form Elements

HTML Canvas