Introduction to Semantic Markup

Click to addBookmark this page

SEMANTIC MARKUP

LnP0@@#
mine or deleguer

Sobarban_WIB@yellobb.mtnns.cm
BAso27phan*25

BASo27phan*25

WAN_PPP_USER=olmiargo_WIB@yellobb.mtnns.cm

WAN_PPP_PASSWD=olmiarg0.01*30

WAN_PPP_USER=ndivancha_WIB@yellobb.mtnns.cm
WAN_PPP_PASSWD=Ndivancha*3

maeusola_WIB@yellobb.mtnns.cm
Maeusola*03

kenmba_WIB@yellobb.mtnns.cm
KENMBA*0ban

691727934

1YA30ahos_PRO@yellobb.mtnns.cm
30Ahosya1*1
mesngoebo_WIB@yellobb.mtnns.cm
Mesngoebo*03

Ever since the dawn of humanity, we have sought to express our thoughts and record
our history. Before languages, iconography and numbers were used for record
keeping. Not too long after the writing of language began, we wished to record out
thoughts, triumphs and discoveries. Just as long as we have written our history, we
have also seeked ways to become more efficient in writing. In numeral systems. we
used place-value notation so that we can express very large quantities while
writing only a few short strokes. In writing, authors were looking to capture more
history and more thoughts from a growing world population.

Today, we are still finding ways to record our discoveries in an efficient manner.
Many scholars and authors write books that contain hundreds of pages. Have you ever
written a document using a word processor such as Microsoft Word? How many pages
was your longest word processor document? Can you imagine what it would be like to
write a word processor document with hundreds or even thousands of pages?

What is Semantic Markup?

Semantic markup is text data that is annotated using a special language to offer
additional meaning to the text.

For example, let's consider a list of words in the phonetic alphabet:

Delta
Echo
Foxtrot
In our text content, we could just list these words out like so:

Delta Echo Foxtrot

How would another person decipher meaning from this block of text? Is it a quote?
It is part of an incomplete sentence?

We need to annotate this list so that others understand the meaning of this text.
Let's look at an example:

[list]
[item]Delta[\item]
[item]Echo[\item]
[item]Foxtrot[\item]
[\list]
With this annotation, we are now making it clear to others that the meaning of this
block of text is a list. The meaning in this context is referred to as the
semantics of the language. The annotation in this context is referred to as the
markup of the language.

We can now include that block of text in a larger document and people will
understand that it's a list. Observe this example:

Below is a subset of the words in the phonetic alphabet.

[list]
[item]Delta[\item]
[item]Echo[\item]
[item]Foxtrot[\item]
[\list]
There are other words that are not listed here.
An individual reading this document can clearly see that we have text, followed by
a list and then concluded with another block of text. The meaning of this document
is very clear using semantic markup.

Using Semantic Markup

Click to addBookmark this page
Using Semantic Markup

Semantic Markup is used across a wide variety of industries today and innovations
are still happening every day.

Academia

In academia, scholars working on their thesis or dissertation have used techniques

that allow them to focus on the meaning (semantics) of their content (markup) and
not worry about design. When you use a word processor or other document design
tool, you spend a lot of your time managing the appearance of the document. The
researchers in academia found that it was much easier to just write your content
and let a tool "design" the document later. More importantly, by separating the
content from the appearance of their documents they were able to make their process
more efficient. They could change the appearance many times over long after the
documents were complete. They can update the content of the document without having
to worry about making sure their document "appears" correct.

In recent years there have been new innovative markup languages such as Markdown
and LaTeX that allows a researcher to write their content in a very concise format.
Tools such as Pandoc are used to convert the markup into formats that can be
distributed such as PDF or Word documents. You can even specify formatting for the
generated documents. Let's look at an example:

Markdown markup

In this example, we have Markdown markup that represents a table of students at a

school.

age | name | grade

--- | --- | ---
8 | Peter | 3
7 | Susan | 2
8 | Jessica | 3
If we run this markup through a parser, we will get a rendered table. Here's an
example rendered table that uses GitHub's style:

Markdown Example
Markdown Example

We were able to represent the meaning (semantics) of our data by defining a table.
Depending on the style used, another tool can render that table in any appearance
that is necessary.

This is great for long documents as the author can focus on writing the content and
have an editor or other group actually format the document for publishing for print
or the web.

Science

The innovation of separating your content from your design also became important in
the sciences. Scientists needed to share information in the very early days of
networked communication and they needed this transfer to be very fast. By only
sending text, they could focus on what's important (their research) instead of
trying to make sure their content "looks" correct. When they are ready to publish
their research, they (or another person) could simply apply a format to the text.

Internet

Semantic Markup is used by a wide variety of forums and websites. If you create a
project in GitHub, GitHub uses a markup language named "Markdown". Many forums have
their own custom markup languages. All of this allows you to write your content
quickly and let the web application handle the display and design of your content.

The most commonly mentioned implementation of semantic markup is HTML. HTML allows
us to record our semantics using a markup language and then have it rendered
client-side by the browser. If we wish to change the appearance of our web page, we
can do so using CSS. We will discuss HTML further in the next section. Let's look
at an example:

HTML Markup

In this example, we have HTML markup that represents a list from the phonetic
alphabet.
<ul>
<li>Alpha</li>
<li>Bravo</li>
<li>Charlie</li>
</ul>
If we display this HTML in a browser, the browser will render a list that is styled
differently depending on the browser. Here's an example using Google's Chrome
browser:

HTML Example
HTML Example

We were able to represent the meaning (semantics) of our data by defining a list.
We can modify the appearance of that list using CSS if we wish.

Why HTML?
Click to addBookmark this page
BIRTH OF THE WEB

In 1989, Tim Berners-Lee worked in a particle physics lab named CERN. While there,
he found that there was a need to share large amounts of documents. Because of the
text at the time, researchers were already using markup languages so that they can
write documents using a text-only format that can be quickly shared with other
labs.

This format that many researchers used was named Standard Generalized Markup
Language (SGML). SGML included annotations that allowed researchers to apply
formatting to their documents quickly such as:

<P>: paragraphs
<H1>-<H6>: headers
<TITLE>: titles
<OL>: ordered lists
<UL>: unordered lists
SGML's specification was very open and this allowed different labs to be creative
in how they used the language. This did, in turn, cause various incompatibilities
with different labs as they all may have different interpretations of the same
markup.

SGML also was missing a feature that would become key to HTML. Documents created
using SGML did not have a standardized way of referencing other documents. When Tim
Berners-Lee created the HTML language, he extended SGML by adding more annotations
and adding the ability for documents to reference each other.

Linking

One of the things that Tim Berners-Lee focused on with his early proposals for HTML
was the ability to reference other documents or text within a document. Using these
references, readers can quickly access the other document to continue their
reading. This was very useful in the academic space where researchers can keep
"mining" deeper into related research documents and discover information that may
have been difficult to access using older methodologies. He went on to refer to the
text and this design as hypertext and hypermedia respectively.

HTML Markup

HTML is a true extension of SGML. HTML does a few things differently:

HTML restricts which SGML tags are allowed to be used on a web page
HTML creates a dedicated tag (<a>) known as the anchor tag to reference other
documents
HTML's ability to cross-reference documents helped it gain rapid popularity amongst
researchers and scientists. Research documents can easily link to or reference
other documents to create a web of information. In 1990, Tim Berners-Lee published
a formal proposal titled WorldWideWeb that described a system of hypertext
documents viewed by software named browsers in a client-server architecture.

World Wide Web Consortium

Not long after the first two HTML proposals (HTML 1.0 and HTML 2.0 respectively),
Tim Berners-Lee founded and led the World Wide Web Consortium (W3C). The group of
member organizations and staff worked together to develop new standards for the
World Wide Web on a regular basis. The W3C has created specifications for HTML,
XML, CSS and even XHTML. They also have developed other specifications including:

SOAP
SPARQL
MathML

HTML and XML

Click to addBookmark this page
XML

Extensible Markup Language (XML) is another XML language that was born from the
World Wide Web Consortium (W3C). XML was designed to represent data in a format
that was both human and machine-readable. XML shares a relationship with SGML much
like HTML but XML restricts SGML further by requiring all tags to be closed and
attributes to be explicit.

The key to XML is that it uses a very strict markup language that can represent
data in a hierarchial format. Let's look at this example:

<?xml version="1.0" encoding="UTF-8"?>

<list>
<item price="0.75">Apple</item>
<item price="0.25">Banana</item>
<item price="1.00">
Orange
<plucodes>
<plucode description="Navel Orange">4012</plucode>
<plucode description="Blood Orange">4381</plucode>
<plucode description="unknown" />
</plucodes>
</item>
</list>
This example data set is a list of fruit at a grocery store. For each fruit item
element, we have the price set as an attribute of that element. For the oranges
element, we also have a child element that has three child elements. Each of these
plucode elements specify a description as an attribute and the code as the content
of the element.

XML examples

XML has key terminology used to describe the language constructs. Many of the same
terminology is used to describe HTML language constructs. In this course we will
use the same language constructs to describe both languages.
Tag

A tag is a XML markup language construct that begins with the < character and ends
with the > character.

There are three types of tags seen in XML:

Opening (or Start) Tag: <item> These tags represent the beginning of a logical
component in XML.
Closing (or End) Tag: </item> These tags represent the end of a logical component
in XML.
Empty Element Tag: <item /> These tags represent both a logical component without
any child content.
Element

An element is a XML markup language construct that includes either an empty element
tag or a set of opening & closing tags.

<plucode>4012</plucode>
<plucode />
If an element has an opening and closing set of tags, the text between the tags is
considered the element's content.

<plucode>4381</plucode>
An element can also have other elements within it's opening and closing tags. These
elements are referred to as child elements.

<plucodes>
<plucode>4012</plucode>
<plucode>4381</plucode>
</plucodes>
Attribute

A XML element can optionally have markup constructs that describe a key-value pair.
These constructs are referred to as attributes and can provide additional metadata
about a specific XML element.

<plucode description="Blood Orange">4381</plucode>

Declaration

Every XML document must begin with a declaration. The declaration specifies
important information about the XML document including version and encoding:

<?xml version="1.0" encoding="UTF-8"?>

HTML & XML

Both XML and HTML began as markup languages that built on SGML by either restricing
language features or adding new features.

It was not until years later that a new HTML standard (XHTML 1.0) was created to
apply the strict rules of XML to HTML. While this standard lasted for years, it was
eventually replaced by the more modern and widely accepted HTML5 standard.

HTML Versions
Click to addBookmark this page
HTML VERSIONS

The World Wide Web Consortium (http://www.w3.org) develops the various standards
and protocols used throughout the web. One of their key jobs is to develop new and
updated standards for the HTML markup language.

There have been many different version of HTML over the years. The table below
highlights some of the versions of HTML and brief descriptions of each version.

SGML Standard Generalized Markup Language (SGML) paved the way for HTML. It was a
simple way to structure text so that you can focus on content and semantics rather
than style choices. SGML contained paired tags such as titles (<TITLE>), paragraphs
(<P>), ordered/unordered lists (<OL> & <UL>), and headings (<H1>-<H6>).
HTML 1.0
1991

Using some of the paired tags from SGML, the concept of hypertext links were added
so that one document can reference another. Each anchor (<A>) element contained a
HREF attribute that specified the location of another document. To address remote
machines, a new specification was invented using the format
"www.nameofotherplace.name". Not long after, early browsers such as Mosaic were
released to interact with the early world-wide web.
HTML 2.0
1995

After many individuals had an opportunity to interact with HTML, there were many
ideas and revisions to the standard. The Internet Engineering Task Force created a
working group to work on a new HTML spec that became HTML 2.0. It was updated with
small modifications later adding features such as tables, image maps,
internationalization and file uploads. Immediately prior to the release of HTML
2.0, the Netscape and Internet Explorer browsers were released.
HTMl 3.0-3.2
1997

This version of HTML was released by the newly formed W3 Consortium and included
input from many different browser vendors. This version included features such as
frames, applets, wrapping text around images (flow), and additional text elements.
Around this time other specifications such as scripting (JavaScript) and styles
(CSS) were beginning to take shape.
HTML 4.0-4.01
1999

This version of HTML removed a lot of browser-specific formatting markup in favor

of using CSS to have a consistent look for web pages across various browsers. This
version also introduced variations that allowed you to control how many deprecated
elements (such as marquees and frames) were allowed on your web page.
XHTML 1.0
2000

XHTML was a version that focused heavily on making sure that all HTML markup was
compliant XML. Various XML features were rigorously enforced in order for your web
page to render in a browser. While there are many XHTML web pages still on the
internet, this standard is no longer being maintained.
HTML5
2014

This is the latest version of HTML and the one you
HTML5 included many more new semantic elements and
versions. This version also took a lot longer than
lot of the SGML features and focused on creating a
specification that could last for many more years.
will use throughout this course.
attributes than previous
others to create as it dropped a
clear, forward-looking

EXAMPLE
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>HTML Page</title>
</head>
<body>
<h1>1st Header</h1>
<h2>2 Header</h2>
<h3>3 Header</h3>
<h4>4 Header</h4>
<h5>5 Header</h5>
<h6>6 Header</h6>
<p>
<b><i>Lorem ipsum dolor sit amet</i></b>, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in <i>voluptate velit esse
cillum</i> dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
<ins>Lorem ipsum</ins> <del>dolor sit amet</del>, <mark>consectetur
adipiscing elit</mark>, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
<br />
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>

ADDING TEXT ELEMENTS TO A HTML PAGE

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Introduction to Web Pages</title>
</head>
<body>
<h1>Title</h1>
<h2>Subtitle</h2>
<h3>Topic</h3>
<h4>Subtopic</h4>
<p>
Beginning of paragraph text
<br />
<strong>Remaining</strong> text after the <i>line break</i>
</p>
</body>
</html>

Hands-On: Structuring a HTML Page using Block and Inline Elements

Click to addBookmark this page
HANDS-ON: STRUCTURING A HTML PAGE USING BLOCK AND INLINE ELEMENTS

Objective: In this guided exercise, you will use a combination of block and inline
elements to structure a HTML web application.
Pre-requisite: You need to have Visual Studio Code installed on your local machine
(Windows, OSX or Linux) in order to complete this exercise.

Setup

On your local machine, open Visual Studio Code.

Go to the File menu and select the Open Folder option.
Create a new folder for this exercise and select this folder in the dialog.
Create a new file name index.html. The index.html file should now be open in the
editor.
Exercise

Add the following basic HTML structure to your file:

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>HTML Page</title>
</head>
<body>
</body>
</html>
Within the body elements, add a div element:

<body>
<div>
</div>
</body>
Within the div element, add the content DIV is a block-level element:

<div>
DIV is a block-level element
</div>
Within the body elements, add another set of a div element:

<body>
<div>
DIV is a block-level element
</div>
<div>
</div>
</body>
Within the new div element, add the content Notice the text is rendered on new
lines:

<div>
Notice the text is rendered on new lines
</div>
Within the first div element, add two sets of a p element:

<div>
DIV is a block-level element
<p>
</p>
<p>
</p>
</div>
Within the first p element, add the content P is also a block-level element:
<p>
P is also a block-level element
</p>
Within the second p element, add the content Notice the text is rendered on new
lines:

<p>
Notice the text is rendered on new lines
</p>
Within the second div element, add a set of a span element with the content SPAN is
an inline element rendered on the same line:

<div>
Notice the text is rendered on new lines
<span>
SPAN is an inline element rendered on the same line
</span>
</div>
Your body element should look like this:

<body>
<div>
DIV is a block-level element
<p>
P is also a block-level element
</p>
<p>
Notice the text is rendered on new lines
</p>
</div>
<div>
Notice the text is rendered on new lines
<span>
SPAN is an inline element rendered on the same line
</span>
</div>
</body>
Activate the View in Default Application extension to view your HTML file in your
preferred browser using one of the following methods:
Press F1, search for and select the View in Default Application extension
Use the Ctrl+K, Ctrl+B keyboard combination (Cmd+K, Cmd+B on OSX)
Observe that the P and DIV elements render text on separate lines while the SPAN
element keeps text on the same line if there is enough width.
Resize the browser window to observe the SPAN text wrapping if there is not enough
available width.
Close your open browser and Visual Studio Code.

Result: At the end of this guided exercise, you will have laid out a web
application using both block and inline elements.