Scribd
Upload
4 views7 pages

Use semantic elements

The document discusses the use of semantic HTML elements to enhance accessibility and SEO, such as using 'nav' for navigation links and various other tags like 'section', 'article', and 'footer'. It also covers CSS properties for styling, including font families, pseudo-classes, and creating responsive navigation bars and carousels. Additionally, it highlights best practices for structuring HTML elements and troubleshooting common issues in web design.

Uploaded by

Steven
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views7 pages

Use semantic elements

The document discusses the use of semantic HTML elements to enhance accessibility and SEO, such as using 'nav' for navigation links and various other tags like 'section', 'article', and 'footer'. It also covers CSS properties for styling, including font families, pseudo-classes, and creating responsive navigation bars and carousels. Additionally, it highlights best practices for structuring HTML elements and troubleshooting common issues in web design.

Uploaded by

Steven
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Use semantic elements: Instead of using the div element to wrap the navigation links, you can use

the nav element. This helps to improve the accessibility and SEO of your website, Example of
Semantic tags with HTML5 are
 Section
 Nav
 Heading
Site logo, Site title, main navigation
 Main
 Footer
 Article
This is a self-contain piece of content. It can be read and still make meaning without
adjoining information to the rest of the web content

 Figure
Images, videos etc
 Aside
Side bar content, related article or advertisement
These tags portray meaning as the names imply. These tags helps search engines & assistive
technologies such screen reader understand the structure and content of the web page.

Images if not specified takes up the size of the whole DIV object by repeating itself

Background-size: contain:
This property will stretch the image to occupy the entire DIV. This will stretch in proportion to the
DIV size.
The more padding you have on a DIV, the allowance you have for the background-image
While margin pushes things away

1. Font Family and Font Stacks


This allows you to create a fall-back font, if the required font family is not present on the current
working PC

For example, styling the h1 tag will be as follows

The following CDN is used to make available fonts which are not available as system fonts
http://www.cssfontstack.com/ Always remember that attributes are inherited

Since the font family for the hi-tag is not specified, it inherit the font family attribute from the
body-tag, which is Calibri.
Considering figure above, the font family for hi-tag is specified. Hence this takes priority over
inheritance.
All h-tag and p-tag have by default, margins at top and bottom. By default, the size of each margin
is corresponding to the font-size of the text
Also, the spacings between lines or text are called lettings

Spacing
between text

These spacings can be adjusted with the attribute Line-height. Preferably, the value of the Line
height should be unitless and not pixels

Text decoration, Text transform are also CSS attributes that can aftect the appearance of text or
lines

The Anchor-Tag does not inherit attributes because it has its own default attribute (e.g text color =
blue)
2. Pseudo-Class

This is a keyword added to a selector that specifies a special state (action) of the selected element
e.g hover effect, active state of a button

It is pseudo i.e false state because by default it is not active. This is only active when the class is
active. This action or active state is dependent on the verb of the pseudo class
The pseudo-class have to be in the following order
 Default link
 Visited
 Hover
 Active

This is because of the top-down approach of executing CSS code. They might over ride an existing
action
We also have the focus pseudo-class. This can be visualized by pressing the tab button. This will
allow it navigate through the links and physically displaced by a rectangular boarder around the
current link which is active
This is particular for website accessibility. Fir readers that cannot navigate by moving the mouse

1.1 Pseudo Element


::before & ::after donot work for self closing tags like img-tag

Responsive Outline

The h1 – h6 tags should be structured like the headers in Microsoft word document.
So therefore h1 1
h2 1.1
h3 1.1.1

ID-tags are best used for linking forms in a web page and also

GLOBAL ATTRIBUTES
3. CREATING A RESPONSIVE NAVBAR
1.2 Pusing objects to left and right
This can be done by uain the float attribute as shown below

1.1.1 Issue Encountered:


After performing float:left & Float:right, The header shrunk to having a height = 0px (Seemed like
it disappeared)

1.1.2 Solution:
The following code resolved the issue

1.3 A MODERN APPROACH TO A RESPONSIVE NAV BAR WITH HTML & JS


This involved the use of the following design concepts
 CSS Variables: a variable, also known as a "CSS variable" or a "custom
property," is a way to store a value that can be reused throughout a
stylesheet. CSS variables are defined using the ‘- -’. It is used/called in any
CSS property value by using the var() function. These are illustrated below

4. BUILDING A CAROUSEL
Best practices include the follow
Use ul-tags for grouping your slides instead of a div-tag

1.1.3 Issue Encountered:


For left and right arrow objects (i.e., < & >) , we add the image within a button using the html script
below

However, the svg object did not allow the lifeserver to be active. The error is shown below

1.1.4 Solution:
The following code resolved the issue

5. ShortCut Keys and functions

6. Using UL for Navigation bar or Carousel Slides


The following are styling codes used for adjusting the List items
Removing the bullets
List-style: none;
We have the following strata

Grand-parent DIV-class for the entire


Carousel.
It will be with the carousel
section
Main-parent DIV-class for the buttons and
slides only
Parent Class for all unordered list-
items
Child Class for individual list items

To stack the slides or images on top of each other, the child must have a Postion: absolute; This
will make it go out of the work flow but must be relative to something
Hence we make it relative to major container (not the section) which is the Grand-parent by giving
the property of Position: relative

1.1.5 Issue Encoutered: Objects of the carousel side go out of the flow when given a
position of absolute: (this did not affect the images:

1.1.6 Solution:

7. JAVASCRIPT FOR CAROUSEL


The less event listeners you have the merrier

You might also like