HTML · Viking Code School

HTML5 with Viking Code School

My first introduction to HTML was over 15 years ago and I have had intermittent experience with it since then, so this portion of the Viking Code School advanced prep work was more a review and refresher exercise for me. The course went over the basic concepts of HTML and the semantic and functional tags that were added with HTML5. Elements, such as lists, forms, tables, and several of their many attributes and types were covered as well. The structuring of an HTML page using semantics and div and span tags was discussed. CodePen, Github Pages, and Surge.sh were introduced as services to upload static sites. I plan to use CodePen and Surge.sh in uploading some static HTML and CSS pages to showcase front-end projects I build.

One of the external resources provided in the course that I found very thorough and helpful in reviewing HTML tags and their attributes was Shay Howe’s set of tutorials. I have bookmarked these and will likely be returning to them for future reference when working with HTML and CSS.

The following are a series of questions that cover some of the topics of the HTML section of the course that I answered to review the material and test my knowledge.

Introduction to HTML5

What are “semantics”?

Semantic tags help to organize the HTML page in a logical way. They include tags such as header, main, nav, article, footer, section, and aside.

What is HTML5 (in a definitional sense)?

HTML5 is the most recent version of HyperText Markup Language, which is one of the foundational languages to create webpages.

How has HTML5 evolved from HTML4?

HTML5 added tags to give users more ways to structure the semantics of pages. Other new features add functionality, such as canvas (for JavaScript), video, and audio. HTML5 also added several input type attributes.

How can you find out which HTML5 features are supported by which browsers?

If you want to know which browsers support a specific tag, they can be checked at caniuse.com

What is a MIME type and why is this important to your browser?

The MIME type tells the browser that the page will be using HTML. CSS and JavaScript have their own MIME types.

Do you need to “close” all tags in HTML5 (e.g. <br />)?

No, in HTML5, it is no longer necessary to close unpaired tags such as a br or img.

How do you declare a new HTML5 document?

You declare an HTML5 document by placing the <!DOCTYPE html> code at the start of the page.

HTML Basics

How is an HTML5 document structured?

HTML5 is structured using semantic tags and sections as well as traditional div classes and IDs. Tags include header, footer, nav, main, article, section, etc.

What are opening and closing tags? How are they different and similar?

The opening and closing tags indicate the beginning and end of an element or semantic section. For example, an ordered list begins with <ol> and is closed with </ol> Everything between those opening and closing tags fall within the ordered list.

What are elements/tags?

HTML elements are tags are encompassed by an opening and closing tag and either make up a functional part of the page, such as a table, form, or list, or act as an organizational, semantic tag, that can be referenced and manipulated using CSS or JavaScript.

What are element attributes?

Attributes help to define or modify an element and are included within the opening tag. For instance an input tag is accompanied by the attribute type to indicate what type of input element it will be. For example, a search input would have an opening tag of <input type="search">

Where should your CSS live?

CSS should either be included within a separate .css file that can be linked to in the HTML <head> or be included with the <style> tag within the <head> of the HTML.

What is a “container <div>“?

A <div> is a generic divider used to contain a set of elements that can then be styled together using CSS or manipulated together using JavaScript.

When should you use <span> vs <div>?

<span> is used for a small, inline, piece of an element that can then be styled or manipulated separately, while a <div> usually encompasses multiple elements.

Headings

Where are headings commonly used?

HTML headings usually are used to indicate the main subject or topic of page, section, or article. They are good ways to indicate to search engines what the main ideas of your page include.

How many sizes of headings are there?

There are six heading sizes in HTML, <h1> through <h6>

What is a h1 usually reserved for?

The <h1> heading is almost always used as the main heading of the entire page.

Links

What’s the difference between internal links (/somepage) and external links (http://www.somesite.com/somepage)? When on a webpage should you use the full URL (with the http://yoursite.com/somepath) and when should you use the relative path (/somepath)?

Internal links can be referenced with a shorter URL than external links, as they refer to files that fall within the same directory system as the HTML page containing the link. External links must include the complete URL as they are targeting an address entirely separated from the current directories.

How do you navigate the document tree with links (../../someotherpage)?

Relative links simply indicate the path to the document using the directory path from the directory in which the current HTML path resides.

How do you open links in external windows?

The target attribute can be added to an anchor tag with a value of _blank to force them to open in a new window. An example would be <a href="http://www.google.com" target="_blank">Google</a>

What are all the possible pseudo-states (e.g. :hover) of a link and when are they actually activated? How do you change styles based on them?

Different CSS styling can be used for the pseudo-states of :hover, :link, :visited, :active. They can all be selected in CSS individually and assigned a property and value, such as a color. They are activated when a link is hovered over, visited, or activated by the user. The :link state styles links to unvisited pages.

Divs

What is a div tag? What are they used for?

A <div> is a generic divider used to contain a set of elements that can then be styled together using CSS or manipulated together using JavaScript.

What is divitis and why is it an issue?

Divitis is the overuse of the div tag, cluttering the HTML page and making it less discernable to others.

How can you avoid divitis?

Use the other semantic tag options in HTML5 to more accurately divide sections of HTML. Also, only use div tags if they are necessary for good organization or styling.

HTML5 Semantic Tags

What are “sectioning elements” and why are they called that?

Sectioning elements are a category of semantic tags that include the head, body, section, article, nav, and aside tags. They help to define sections of the page and create a node in the DOM tree outline.

Are sectioning tags required?

The head and body tags are necessary, while others are technically optional, but it is good practice to include sectioning tags where appropriate to better organize and be able to manipulate the HTML.

What is an <article> tag?

An article tag encompasses a self-contained composition that could potentially be re-published independently. It allows you to define a new heading hierarchy, including the ability to use a new h1 tag.

What is a <section> tag?

Section tags should group content on a page that fall within a certain them, such as the section of a news site, chapters of a book, or subsections of an article. Each section tag can have its own heading hierarchy.

How is an <article> different from a <section>?

An article can be considered a self-contained piece that may be published as its own page, a section is a grouping together of several articles or parts of the HTML page.

Can you have multiple header hierarchies (e.g. <h1>) inside <article> or <section> tags?

Both the article and section tags allow for their own header hierarchy.

When would you use a <nav> or <footer> tag?

A nav tag is used for a grouping of navigational links on a page. Often the main navbar is placed within a nav tag. The footer tag includes items that are usually placed at the bottom of the page such as information on the creator and copyright.

What is an <aside>?

An aside tag can be used for any content that is tangential to the flow of the document.

When would you use the <main> tag?

The main tag can be used to surround the main content of the page. The main tag itself should not be enclosed within any other sectioning tags aside from the body tag.

HTML5 Functional Tags and New Features

What new forms of on-page media do you get in HTML5?

Functional tags for canvas (for JavaScript), video, and audio are all included in HTML5.

What new <input> types do you now get in HTML5?

Several new input attribute types were added to HTML5, including: search, number, range, color, tel, url, email, date, month, week, time, datetime, datetime-local.

What other interesting functionality is baked into HTML5 that you might want to explore later?

Local storage was added with HTML5, where a website can store bits of information in the user’s browser over time. They are similar to cookies, but can be used for larger chunks of data. Unlike cookies, these data pieces do not get sent back to the server with each request and just wait in the browser if needed by the JavaScript. “Web Workers” is another HTML5 functionality whereby multiple JavaScript threads can run at the same time. The geolocation feature of HTML5 creates the ability to discover where a user is by querying the browser via JavaScript.

HTML Lists

What is the basic list syntax?

A list is made up of an <ol> (ordered list) or <ul> (unordered list) opening and closing tags, with each list item contained within a <li>opening and closing tag.

How do you nest lists inside each other?

To nest a list inside another, simply place an entirely new list structure with tags of a list item node.

What’s the difference between <ol> and <ul>?

An ordered list <ol> labels each list item with a number or ordering device, while an unordered list <ul>

HTML Forms

Why are forms probably the most important part of your site?

Forms provide numerous different interfaces for users to submit data on an HTML page.

How do you construct a basic form?

Forms are created using the <form> tags with different input elements being placed inside, along with a submit button.

What are all the possible form element types?

There are several different types of form element types including input, textarea, labels, and fieldsets. The input element allows you to create many different types of user input devices, including text inputs, checkboxes, radio buttons, and dropdowns. Textarea provides the user with a large space to write their text. Labels and fieldsets help to show the user the purpose of the input or group of inputs.

When should you use check boxes instead of radio buttons?

Checkboxes are good when multiple items are being selected by the user, whereas radio buttons pertain more to a single choice between options.

When should you use a combobox/dropdown instead of a text field?

A dropdown is a good way to provide several different options for a user to choose from that can optionally be sorted into categories.

How do you make a very large text field?

The textarea creates a field for the user to write a larger piece of text input that can be resized by default.

How do you link elements with their labels?

Labels show a capitalized title of the input name. The name of the input and the for attribute value of the label are usually matched.

How do you link element selections together (e.g. check boxes) so they are nicely formatted when your server receives them?

Using the for attribute on labels allows you to connect the label to the input, including a set of inputs like checkboxes.

What should your “submit” button probably say instead of “submit”?

The submit button should have a visual label of whatever is most relevant to the input, such as “send” for a message or “confirm” for a password creation.

HTML Tables

When should you use tables?

Tables are a great way to organize or structure sets of information.

What is the structure of a table?

Tables are enclosed with the <table> tags, each row has a set of <tr> tags, and each data item is enclosed in <td> tags. Tables can also include a table heading within the <thead> and <th> tags, while the body of the table goes within the <tbody> tags.

What are the special tags that dictate certain parts of a table, e.g. headers or captions?

A heading is enclosed in the <th> tags within the <thead> tags. A footer can go in the <tfoot> tags.

How can you combine cells in a table?

Using the scope and colspan attributes, cells can be combined with a single row.

Why do you need to be careful about your padding and borders in tables?

Padding and borders make tables more comprehensible. Without them, data can appear squeezed together and less intelligible. Padding increases the space between each cell’s contents, while editing the borders creates visual delineations between cells or sections of the table.

How do you align text within cells in a table?

Content within cells can be styled using CSS and the td selector.

Deploying Your HTML5 Page

What is the difference between static and dynamic content? Why is it easier to serve and deploy static content?

Static content usually consists of HTML and CSS and runs entirely within the browser. Dynamic content requires a database and an environment to run server side languages. Dynamic content has more requirements for hosting, while static content is relatively simple to deploy.

What is Github Pages?

Github Pages is a service provided by Github where users can create static sites from their account.

How does Github Pages work?

It serves content uploaded to Git repositories. It using the repository as the root directory and looks for an index.html page to treat as the index page of the site.

How can you display a project homepage using Github pages?

Simply upload a project to a Github repository and make the main page an index.html.

What is Surge.sh?

Surge is another great service that provides free static site hosting.

How does Surge.sh work? How can you display a project homepage using Surge.sh?

Surge works entirely from the command line. You simply go into the project directory using the command line and then run $surge to upload all of the site’s files and directories. The service even allows for custom domain names.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s