WebDesign: HTML Tags vs. Elements vs. Attributes (W7-P3)

Before we may have used the terms tags and elements synonymously.

However, we can now make a clear distinction among tags, elements and something called attributes.

We can and should make these distinctions when we are using HTML code like the following.

<p class="para1"> Welcome to the Fish Web Site. Everything you want to know about fish is in this web site. </p>

<img class="imagec" src="barracuda.jpg">

The above comes from some HTML code we played with in a recent post.

Read the following and note the definitions and distinctions among tags, elements and attributes.

• HTML tags vs. elements vs. attributes

After reading the page linked to above, we should be above to identify the elements, the tags and the attributes in the above HTML code.  Some questions: How many elements do we have above?  How many attributes are there in the img element?  Does the img element have a closing tag?

Also, based on the code we worked with recently, what is the purpose of the class attribute?  What does the class attribute have to do with the CSS code?  How are they linked?




Share this post with others. See the Twitter, Facebook and other buttons below.
Please follow, add, friend or subscribe to help support this blog.
See more about me at my web site WilliamHartPhD.com.

WebDesign: Webpage Structure (W4-P1) Sp18

Shay Howe, author of Learn to Code HTML & CSS, covers the basic structure (and related elements) for websites.

It may be helpful to think about the structure of a web page like the layout of a newspaper.  Compare this to Figure 2.5 in Howe.

HTML5 includes new semantic elements that provide structure to a web page.

• <header> -- "Defines a header for a document or section" (w3schools)
• <nav> -- "Defines navigation links"
• <article> -- "Defines an article"
• <section> -- "Defines a section in a document"
• <aside> -- "Defines content aside from the page content"
• <footer> -- "Defines a footer for a document or section"

A good reference source for these elements and others is w3schools.com's HTML Element Reference page.

Note: Shay refers to elements, while w3schools refers to tags.  For the difference between the elements and tags, see Johansson.    We'll follow the more accurate description of Johansson.


If you are interested, below is a video covering the above semantics elements.



Share this post with others. See the Twitter, Facebook and other buttons below.
Please follow, add, friend or subscribe to help support this blog.
See more about me at my web site WilliamHartPhD.com.