Course :-
Effective Period : -
HTML - Basic
Proclaim & Group Headings
• HTML heading elements are created using <h1>,
<h2>, <h3>, <h4>, <h5>, and <h6> tags. These are
ranked in importance by their numeric value – where
<h1> has the greatest importance, and <h6> has the
least importance.
• The <h1> element is by far the most important
heading, and should ideally appear only once to
proclaim the document heading. Often, this can be a
succinct version of the document title. Below that, a
number of <h2> headings can proclaim topical
headings for long documents.
• Each topic might contain individual article headings
within <h3> elements, followed by paragraph <p>
elements containing the actual article content.
Proclaim & Group Headings
• Create an HTML document, Within the body
section, insert code as follows :
Fig 1. Example of Heading
Proclaim & Group Headings
Fig 2. Result of Heading view
Complete Framework
• Just as a typical HTML document may contain a
document heading or header group it may also contain
a footer, or footer group, at the bottom of the page.
The content of each footer is contained between
<footer> </footer> tags and provides information
about that part of the document.
• Typically, a <footer> element might contain the
author’s name, the author’s contact details within an
<address> element, or copyright and legal disclaimers
within a <small> element. Like a <header> element, a
<footer> element can also contain hyperlinks for page
and site navigation within a nested <nav> element.
Complete Framework
1. Create an HTML document (as Session 1.
Fig 3.2)
2. Within the body, insert a document
heading
<h1 id=”top”>Interesting Articles</h1>
3. Next, add a main content container
<main>
<!-- Page content to be inserted here. -->
</main>
Complete Framework
4. In the main content container, insert two
articles that are the main page content
<article>
<h2 id=”art-1”>Sally’s Article</h2>
<p>Article content...</p>
</article>
<article>
<h2 id=”art-2”>Terry’s Article</h2>
<p>Article content...</p>
</article>
Complete Framework
5. Finally, within the body, insert a document footer
containing page navigation hyperlinks, copyright
details, and a URL address
<footer>
<nav> <h3>Information</h3>
<a href=”#art-1”>Sally’s Article</a> -
<a href=”#art-2”>Terry’s Article</a> -
<a href=”#top”>Top of Page</a>
</nav>
<small>Copyright © Example Corporation</small>
<address>www.example.com</address>
</footer>
Complete Framework
6. Save the HTML document, then open the web page in your
browser to see that the document structure comprises a
heading, page content, and footer area
Fig 4. Result of HTML Document with Complete Framework
Section & Asides
Create Section
• In HTML all content within the <body> element is
considered to be part of a “section”. Section limits
are defined implicitly by correctly sequenced
headings in the document outline. Section limits
are defined explicitly by placing content within the
<header>, <main>, and <footer> framework
elements demonstrated on before this pages.
• Page content within the document body or
<main> element can also be arranged in sections
between <section> </section> tags.
Section & Asides
Create Section
• Create an HTML document (as Session 1. Fig 3.2)
• Within the body, insert code like Fig 5.
• Save the HTML document then open it in your
browser to see the article content displayed in
sections. See Fig 6
Section & Asides
Fig 5. Example HTML Document with Section
Section & Asides
Fig 6. Result of HTML Document with Section
Section & Asides
Provide Asides
• HTML usefully provides <aside> </aside> tags that
can be nested within an <article> element in order to
incorporate content that is somewhat related to the
main content of that article. These allow for
supplemental yet separate content to be included –
typically displayed as a sidebar or footnote.
• Content within an <aside> element should be stand-
alone information that is related to the article, such as
pull-quotes extracted from an affiliated article, a
glossary of terms used within the article, or even
hyperlinks to pages providing further reading
associated with the article.
Section & Asides
Provide Asides
• Examples of using Aside:
Fig 7. Result of HTML Document with Asides
References
• Mike McGrath. (2020). HTML, CSS & Javascript. In Easy
Steps. Warwickshire. ISBN: 9781840788785. Chapter 2-3
• https://www.youtube.com/watch?v=MDLn5-zSQQI
• https://www.w3schools.com/html/
Thank You
