SYST10049

Week 4
Page Structure& Sectioning/ Grouping
Content
 Agenda
 Block Elements vs. In-Line Elements
 Semantic vs. Non-Semantic Elements
 Sectioning Content
 Basic elements for textual markup
 Hyperlinks
 Absolute and relative URLs/paths
 Images
 Demo& Publishing
2
 Block Elements vs. In-Line Elements
 Block elements begin on a new line and end with a
line break. They take up the full width of the screen
(unless you've defined otherwise with CSS).
● paragraphs are block elements.
 In-Line elements don't start on a new line and don't
contain a line break at the end, and they follow the
regular flow of the document. They only take up as
much space as they need
● Links are in-line elements
3
 Examples
 Are these elements block or in-line elements?
● <h1>

● <address>

● <div>

4
 Semantic vs. Non-Semantic Elements
When HTML5 was released in 2014, it included a set of
new semantic elements, which add more meaning to a
web document.
● Semantic elements are HTML elements whose

element or tag name clearly defines what kind of

content the element contains
● Non-semantic elements have names that don't

clearly identify their contents.

5
 Semantic Elements
 It's important to use semantic elements where
appropriate, because it can optimize search engine
searches for the page's content
 They're more accessible to screen readers, and it
makes it much easier for other developers or
yourself to understand the page content and
structure and find specific blocks of code for editing.

6
 Semantic Elements
 Semantic elements are accessible according
to the WCAG and WAI-ARIA guidelines.
 It's important to always use the appropriate
semantic element that is most appropriate Accessibility
and not use generic elements that have no
meaning (unless the meaning isn't
important).
 You should never use a semantic element for
any purpose other than the one it's intended
for
7
 Examples of Semantic Elements
 Here are a few of the common semantic elements
● <header> - the document header, but can also

be used for an article/section header

● <footer> - the document footer, but can also be

used for an article/section footer

● <article> - to contain an article (news, blog,

tutorial, etc.

8
 Non-Semantic Elements
 We still use non-semantic elements for some parts
of a page or application.
 It's important that you don't use semantic elements
for any purpose other than the purpose for which
they were intended.

9
 Examples of Non-Semantic Elements
 <p> element is a general paragraph: it's not a paragraph of
a blog post, article, sidebar, etc.
 <div> element is a block element that can contain any
text, and it's often used as a container for other elements.
 We still use <div> and <span> elements to contain
content that we want to style a certain way or that doesn't
really fit with any of the semantic elements.
 It’s bad to use a <section> element for a document
footer or a <footer> element for anything that's NOT a
document footer.
10
 Example
 Can you guess what ● <details>
these elements are for,
● <nav>
● <summary>
just by the element ● <time>
name: ● <menu>
● <form> ● <abbr>
● <table> ● <audio>, <video>
● <figure>, <figcaption> ● <picture>, <img>
● <input> ● <address>
● <button>
11
 Sectioning Content
 Semantic containers:
● <header>
● <article>
● <main>
● <section>
● <nav>
● <footer>
● <aside>

12
 Basic elements for textual markup

 For textual markup:

● Use <strong> instead of <b> to add

importance to the content

● Use <em> instead of <i> to add

emphasis to the content

13
 Hyperlinks
 A hyperlink is a bit of text that is clickable with a
mouse. Clicking the link usually requests a different
document (the name and location of the document
is part of the link's information): your browser will
receive the requested document and load it in the
viewing area for you.
 If the requested document is not found on the
server, the server will send back the 404 NOT FOUND
error page
14
 Hyperlinks
 Links can do more than just request a new
document: they can also trigger scripts (such as
JavaScript).
 We can create links on a page with the <a> element.
 The name and location of the page/file is defined in
the anchor element's href attribute.
 <a href="https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/a">the Anchor
element</a>
15
 Example
 Choose three of your favourite web sites. Copy the
URLS and use them to create three links inside a
single paragraph element, one per line. Include a
description for each link.

16
 Absolute and Relative URLs/Paths
 An absolute path or URL will work from anywhere:
<a href="https://terminallearning.com/devHtml/index.html">Main HTML
Index</a>

 However, when you wish to refer to a resource in the

same project or even on the same server, you don't
necessarily need an absolute URL: you can use a
relative URL. A relative URL or relative path is a
URL/path in relation to your current location.
<a href="index.html">Main HTML Index</a>
17
 Absolute and Relative URLs/Paths
Here are a few other things to note about relative
URLS:
 The relative URL "/" will always lead back to the root
of your web server.
 Navigating to a directory will always load that
directory's main index file, if it exists. The file name
is usually index.html

18
 Images
 In HTML, we display images using the <img>
element.
 <img> is an in-line element, so it will flow with the
rest of the document, it will not show up on a line by
itself if you surround it with text or other in-line
elements
 Images are often placed inside the semantic element

19
 Images
 To identify which image you'd like to display, you use the <img>
element's src attribute (short form for "source", as in, the source
of this image). Assuming your image is in your project's /images
directory, you can use a relative path to your image, such as:
<img src="images/myImage.jpg">
 Define "alternative text“ through the alt attribute, this is useful
when:
● The image can't be loaded
● A user is using a screen reader:
<img src="images/myImage.jpg" alt="photo of a
thing with a thing">
20
 Images- Reminders!
 When you're hosting your own images on your server don't
forget to:

● Keep your images in the /Images directory.

● Upload the images in addition to your HTML source files
to the server.

21
 Images
 There are several places where you can find public
domain images that are free to use with no or very
few concessions:
● UnSplash
● Wikimedia Commons
● Flickr Commons
● Magdeline
● The Noun Project
● Pexels

22