Further Into Semantics
In the HTML5 Basic Tutorials - Lesson 6 - Inline Semantics lesson we took an initial look at inline semantic tags.
The Editorial Deletion Element
The Inflection Element
The Editorial Insertion Element
The Marker Element
The Strikethrough Element
Creating A Webpage
Lets create a webpage for our semantics tags to see what they do!
- Open up your HTML editor or text editor, which in my case is Notepad++.
- Open a document if required.
- Copy and paste the following code into the document.
<!DOCTYPE html> <!-- Using the del, i, ins, mark and s HTML tags --> <html lang="en"> <head> <title> Further Into Semantics </title> <meta charset="utf-8"> </head> <body> <h3>The Editorial Deletion Tag</h3> <p>Today is <del>Monday</del>Tuesday.</p> <h3>The Inflection Tag</h3> <p>The best known magic word is <i>abracadabra</i> and is used by magicians of all ages.</p> <h3>The Editorial Insertion Tag</h3> <p>Today is <del>Sunday</del><ins>Monday</ins>.</p> <h3>The Marker Tag</h3> <p>Today is <mark>Super Monday</mark>.</p> <h3>The Strikethrough Tag</h3> <p>Mens jeans now only <s>5.99</s>4.99</p> </body> </html>
Saving the document
Save the file as
View Page in Web Browser
Either navigate to the location you saved the
moresemantictags.htmlfile to and double click the file. This will take you to the page in your default web browser, or from your web browser click File --> Open File and navigate to the file and open it.
After doing either of these you should see a similar webpage in your browser to the following screenshot:
As you can see from the screenshot the image shows the various semantic features of each HTML tag.
The <del> tag strikes through the content being deleted.
The <i> tag should not be used for italics from HTML5 onwards as was the case in earlier versions of HTML, even though it will generally be rendered in italics in browsers as is the case in the screenshot.
The <ins> tag underlines the content.
The <mark> tag highlights the content.
The <s> tag strikes through the content.
Lesson 5 Complete
In this lesson we took our final look at the HTML inline semantic tags available.
We finish off our discussions about lists by looking at definition lists.
The <del> editorial deletion tag
The <i> inflection tag
The <ins> editorial insertion tag
The <mark> marker tag
The <s> strikethrough tag