Diploma in
Coding and Technology
Lesson: HTML elements
Working with HTML elements
Navigating web pages
Web development practical session
Objectives
Loading…
Text level elements
Appear inline with the surrounding
content and are known as inline
elements. Text level elements change
the appearance of inline content.
Text level elements
Element/Tag Details
<a> Marks content that acts as a hyperlink
<strong> Formats text to appear in bold
<code> Marks content that represents computer code
<br> Represents a line break within grouping elements
<em> Formats text to appear in italics
<u> Underlines text
<span> Used to add hooks to inline text
<q> Adds quotation marks to text
<sub> Marks text that should be treated as subscript
Grouping elements
Grouping elements are used to
organise similar content in a distinct
manner in which content is made
uniform. The content generally shares
similar characteristics.
Grouping elements
Element/Tag Details
<blockquote> Adds quotation marks and indentation to content
<div> Contains a generic grouping of elements within the document
<hr> Adds a line break by adding horizontal line between content
<ol> Contains ordered list of items
<ul> Contains unordered list of items
<li> Contains a single item from a list
<nav> Marks a list of hypertext or navigation links
Loading…
Hypertext in HTML
Hypertext is created using the <a> tag
in combination with the href=“url”
attribute, where URL is the address or
location users are redirected to,
usually to another web page.
Navigation and
hyperlinking
A navigation system is a section of a
graphical user interface intended to aid
visitors in accessing information.
Navigation uses hyperlinking to allow
users to navigate between web pages.
Navigation and
hyperlinking
• The <nav> tag defines a set of
navigation links.
• Often used with an
unordered list <ul> and href
attribute
• When developing a website
locally, is file path sensitive
Adding
comments in
HTML
A comment is a descriptive text
added to the HTML document that
does not render in the browser.
• Used to insert comments in
source code.
• Enables developer to explain
code.
• To include comments in source
code use the following notation.
<!--- comment here -->
Loading…
Let’s code!
