Using Heading Levels and Grouping Content by Topic

The content below is simple, but not how items are grouped in the main and which heading levels are used. Remember, sections, asides, and articles are semantic containers, and semantic containers require headings. Each section below has a border added to help you see the grouping on the page. Outer section borders are maroon, nested section borders are gray.

HTML

HTML defines a webpage's structure and content.

HTML Tags

Some HTML tags use an opening and closing pair of tags to surround content. These wrap around that content and help to define what it is. Others only require a single tag for markup. Those are called void tags.

HTML Attributes

In HTML, attributes are always added to the opening HTML tag in the pair. If there is no closing tag, the attribute will be placed in the void tag itself. All attributes should be added with lowercase letters and double quotation marks where needed.

CSS

CSS specifies a webpage's layout and visible appearance.

CSS Selectors

In CSS, you can change the appearance of elements on your pages to make them more pleasing to look at and use. CSS selectors allow you to target the elements on your page by tag name, attribute, relationship, class, ID, and more.

JavaScript

JavaScript describes a webpage's dynamic behaviors and actions.

When to Use JavaScript

Generally, you want to use JavaScript only when necessary, to improve user experience. Many companies and IT teams will disable JavaScript on their websites, so your sites should be functional without it.

JavaScript Libraries and Frameworks

Today, many job postings will list a desire for experience with specific JavaScript frameworks or libraries rather than asking for experience with JavaScript itself. This doesn't mean that you don't need to learn it! Understanding the language these libraries and frameworks are built on, makes it easier to learn them as needed.