Understanding

URL Grammar with

BNF and EBNF
Presented by: CS121 Team Web Dev
Acquiat, Dela Serna, Dones, Fuego, Hao,
Jardin, Operario, Sisbreño
 01
BNF Grammar
Basic Grammar for a URL using BNF
BNF Grammar
<url> ::= <mailto_url> | <generic_url>

<mailto_url> ::= "mailto:" <recipient>

<generic_url> ::= <scheme> "://" <host> [ ":" <port> ] <path> [ "/” ] [ "?" <query> ]

<scheme> ::= "http" | "https" | "ftp" | ...

<host> ::= <hostname> | <ipv4address> | <ipv6address>

<hostname> ::= <label> { "." <label> }

<label> ::= <letter> | <letter> { <alphanum> } <alphanum>

<letter> ::= "a" | "b" | ... | "z" | "A" | "B" | ... | "Z"
BNF Grammar
<alphanum> ::= <letter> | <digit>

<ipv4address> ::= <digit> "." <digit> "." <digit> "." <digit>

<ipv6address> ::= <h16> ":" <h16> ":" <h16> ":" <h16> ":" <h16> ":" <h16> ":" <h16> ":" <h16>

::= <hexdigit> | <hexdigit> <hexdigit> | <hexdigit> <hexdigit> <hexdigit> |

<h16>
<hexdigit> <hexdigit> <hexdigit> <hexdigit>

<hexdigit> ::= <digit> | "A" | "B" | "C" | "D" | "E" | "F"

<path> ::= {"/" <segment>}

<segment> ::= <pchar>*

BNF Grammar
<pchar> ::= <unreserved> | <percent_encoded> | <sub_delims> | ":" | "@"

<unreserved> ::= <letter> | <digit> | "-" | "." | "_" | "~"

<percent_encoded> ::= "%" <hexdigit> <hexdigit>

<sub_delims> ::= "!" | "$" | "&" | "'" | "(" | ")" | "*" | "+" | "," | ";" | "="

<query> ::= <pchar>*

<recipient> ::= <pchar>*

<port> ::= <digit>+

<digit> ::= "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
URL Grammar Explanation
URL Mailto URL Generic URL
Can either be "mailto" or Used to create links that It tells the browser where to
generic URL open an email client find resource on the internet

Scheme Host Hostname

Describes the protocol Represents the Consists of label, forming
or type of URL destination host the domain name

Label IPv4 Address IPv6 Address

A part of a hostname Comprised of four groups A more complex form of
of digits separated by dots an IP address
URL Grammar Explanation
Path
Indicates the location of
a resource on the server
Unreserved
Characters that can appear
in URL's without encoding
Query
Additional parameters or
information added to the URL
Segment
Formed by a combination of
characters defined by pchar
Percent-encoded
Characters are represented
by a percent sign (%)
Recipient
Characters allowed in a
recipient email address
Pchar
Represents the set of
characters allowed in
different parts of a URL path
Sub-delimiters
These are characters with
special meaning within a URL
Port
Represents the port
number
 02
EBNF Rules
Rules/Semantics followed for EBNF
EBNF Rules
v The extensions to BNF do not enhance its descriptive power, only its
readability.

Operations (can also apply to BNF)

Alternative = |
Optional = [ ]
Repetitions = { }
Grouping = ( )
EBNF Rules
Ø Terminals are enclosed with ("..." or '...')
Ø For Non-Terminals, ("<...>") can be omitted
Ø For EBNF, ::= becomes just =
Ø In EBNF, semicolon ";" marks the end of a rule
Ø Include mechanisms for enhancements, defining the number of
repetitions, excluding alternatives, comments, etc.

Sources:
1. https://en.wikipedia.org/wiki/Extended_Backus–Naur_form
2. https://www.freecodecamp.org/news/what-are-bnf-and-ebnf/
 03
BNF to EBNF
Conversion
BNF to EBNF Conversion
url = mailto_url | generic_url;

mailto_url = "mailto:" recipient;

generic_url = scheme "://" host [ “:” port] path [“/”] ["?" query];

scheme = "http" | "https" | "ftp" | ... ;

host = hostname | ipv4address | ipv6address;

hostname = label { "." label }*;

port = digit+;
BNF to EBNF Conversion
path = {"/" <segment>};

label = letter | letter { alphanum } alphanum;

alphanum = letter | digit;

ipv4address = digit "." digit "." digit "." digit;

ipv6address = h16 ":" h16 ":" h16 ":" h16 ":" h16 ":" h16 ":" h16 ":" h16;

letter = "a" | "b" | ... | "z" | "A" | "B" | ... | "Z";

digit = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";

h16 = hexdigit{1,4};
BNF to EBNF Conversion
hexdigit = <digit> | "A" | "B" | "C" | "D" | "E" | "F"

segment = pchar*;

query = pchar*;

recipient = pchar*;

pchar = unreserved | percent_encoded | sub_delims | ":" | "@";

unreserved = letter | digit | "-" | "." | "_" | "~";

percent-encoded = "%" hexdigit hexdigit;

sub_delims = "!" | "$" | "&" | "'" | "(" | ")" | "*" | "+" | "," | ";" | "=";
 04
Examples
URL Examples with Parse Trees
 Example 1:
mailto:cjldellosa@mcm.edu.ph
<url>

<mailto_url>
<recipient>
“mailto:”

<pchar> <pchar> <pchar> <pchar> <pchar> <pchar> <pchar>

<unreserved> <unreserved> <unreserved> <unreserved> <unreserved> <unreserved>

<letter> “@” <letter> “.” <letter> “.” <letter>

cjdellosa mcm edu ph

Example 2:
https://music.youtube.com/search?q=sitti+tattooed+on+my+mind
<url>
<generic_url>

<scheme> <query>
<path>
“://” <host> “?”
“https” <pchar>
"/" <segment>
<hostname>
<pchar> q=sitti+tattooed+on+my+mind
<label> <label> <label>

<letter> “.” <letter>

“.” <letter> <unreserved>

<letter>
music youtube com
search
 Example 3: <pchar>
https://www.facebook.com/photo/?fbid=65109
<url> <unreserved>

<generic_url> <digit>
“https” <scheme>
<query>
<path> “?" 65109
"://" <host> <pchar>
<pchar>
<hostname> "/" <segment> "/"
<unreserved>
<label> <pchar> <sub_delims>
<label>
<label> <letter>
<letter> <unreserved>
"." "." <letter> "="
<letter>
<letter>
www com fbid
facebook
photo
Example 4:
https://mcm.codechum.com/student/classes
<url>

<generic_url>

<scheme> <path>
“://” <host>

“https” <hostname>
"/" <segment> “/” <segment>

<pchar> <pchar>
<label> “.” <label> “.” <label>

<unreserved> <unreserved>
<letter> <letter> <letter>

<letter> <letter>
mcm codechum com
student classes
 Example 5:
https://127.0.0.1:8080/seb/to/resource
<url>

<generic_url>

<path>
<scheme> <port>
”://” <host>
":" "/" <segment>
<segment> <segment>
“https” <ipv4address> <digit> "/" "/" <pchar>
<pchar> <pchar>
<digit> <digit>
<unreserved> <unreserved> <unreserved>
"." <digit> <digit> “.” 8080
“.”
127 1 <letter> <letter> <letter>
0 0
seb to resource
Thanks for
listening!
Do you have any questions?

CREDITS: This presentation template was

created by Slidesgo, and includes icons by
Flaticon, and infographics & images by Freepik