Save
Upgrade to remove ads
Busy. Please wait.
Log in with Clever
or
show password
Forgot Password?
Don't have an account?  Sign up 
Sign up using Clever
or
Username is available taken
show password


Make sure to remember your password. If you forget it there is no way for StudyStack to send you a reset link. You would need to create a new account. Your email address is only used to allow you to reset your password. See our Privacy Policy and Terms of Service.

Already a StudyStack user? Log In

Reset Password
Enter the associated with your account, and we'll email you a link to reset your password.
focusNode
Didn't know it?
click below
 
Knew it?
click below
Don't Know
Remaining cards (0)
Know
0:00
edit
Embed Code - If you would like this activity on your web page, copy the script below and paste it into your web page.

  Normal Size     Small Size show me how

HTML Semantics

HTML Semantics and non-semantic Elements

QuestionAnswer
A semantic element clearly describes its meaning to both the browser and the developer. Example: Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.
Many web sites contain ________code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer. HTML
In HTML there are some semantic elements that can be used to define different parts of a web page: <article> <aside> <details> <figcaption> <figure> <footer> <header>
In HTML there are some semantic elements that can be used to define different parts of a web page: <main> <mark> <nav> <section> <summary> <time>
The <section> element defines a section in a document. According to W3C's HTML documentation: element; "A section is a thematic grouping of content, typically with a heading."
Examples of where a <section> element can be used: Chapters Introduction News items Contact information
specifies independent, self-contained content. An _________ should make sense on its own, and it should be possible to distribute it independently from the rest of the web site. The <article> element; article
Examples of where the <article> element can be used: Forum posts Blog posts User comments Product cards Newspaper articles
The ________ element specifies independent, self-contained content. The _________ element defines section in a document. <article> ; <section>
Can we use the definitions to decide how to nest those elements? No
you will find HTML pages with <section> elements containing <article> elements: and <article> elements containing <section> elements.
defines a footer for a document or section. The <footer> element
A <footer> element typically contains: authorship information copyright information contact information sitemap back to top links related documents
You can have ___________ <footer> elements in one document. several
Example A footer section in a document: <footer> <p>Author: Hege Refsnes</p> <p><a href="mailto:hege@example.com">hege@example.com</a></p> </footer>
defines a set of navigation links. The <nav> element
Example A set of navigation links: <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>
all links of a document should be inside a <nav> element: The <nav> element is intended only for major blocks of navigation links.
________, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content. Browsers
defines some content aside from the content it is placed in (like a sidebar). The <aside> element
should be indirectly related to the surrounding content. The <aside> content
specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. The <figure> tag
defines a caption for a <figure> element The <figcaption> tag
The <figcaption> element can be placed as the _____ or as the _____ child of a <figure> element. first; last
The <img> element defines the actual image/illustration. Example <figure> <img src="pic_trulli.jpg" alt="Trulli"> <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption> </figure>
allows data to be shared and reused across applications, enterprises, and communities. A semantic Web
Defines additional details that the user can view or hide <details>
Created by: rtshmm
 

 



Voices

Use these flashcards to help memorize information. Look at the large card and try to recall what is on the other side. Then click the card to flip it. If you knew the answer, click the green Know box. Otherwise, click the red Don't know box.

When you've placed seven or more cards in the Don't know box, click "retry" to try those cards again.

If you've accidentally put the card in the wrong box, just click on the card to take it out of the box.

You can also use your keyboard to move the cards as follows:

If you are logged in to your account, this website will remember which cards you know and don't know so that they are in the same box the next time you log in.

When you need a break, try one of the other activities listed below the flashcards like Matching, Snowman, or Hungry Bug. Although it may feel like you're playing a game, your brain is still making more connections with the information to help you out.

To see how well you know the information, try the Quiz or Test activity.

Pass complete!
"Know" box contains:
Time elapsed:
Retries:
restart all cards