HTML tutorial: Elements

You might have heard of the word “elements” from your chemistry textbook. For HTML, there’s also something very similar to that and that is the Document Object Model (DOM) elements.


DOM Elements

DOM elements refer to the elements that can be interacted using Cascading Style Sheet (CSS) and Javascript (JS). So some examples of DOM elements would be <html>, <div> and <p>. We shall take a further look into this.


Div Element

The first elment we’ll be looking at would be the <div> element. The <div> element should be used where flow content is expected and for grouping content. It is now mainly used for content block customization through CSS and JS. Here’s an example of how the div element is being used:

marked-out-divs
The areas of the div elements are marked using the blue lines, therefore, a total of 7 div elements are being used here to group and organise the content appropriately.

Code Example

<div>This content is held inside a div element!</div>

Block-quote Element

The next element we’ll be looking into would be the <blockquote> element. This time, we will also cover 1 attribute that this element has. Attribute refers to a modifier for the HTML element and they are only added to the start tag of an element. Certain attributes are required for certain elements while others are optional. The <blockquote> element has an optional “cite” attribute which can be used for citing quotes.

Code Example

<blockquote cite="https://www.brainyquote.com/quotes/quotes/m/margaretme141040.html">
Always remember that you are absolutely unique. Just like everyone else.
 - Margaret Mead
</blockquote>

Conclusion

So to sum up everything, here are the keywords covered in this tutorial that you must remember: “elements” and “attributes”. For a full list of HTML elements, you can refer to the W3’s wiki – http://www.w3.org/community/webed/wiki/HTML/Elements

The example for this tutorial is also uploaded on Github – https://github.com/GIANTCRAB/HTML-tutorial-series/tree/master/tutorial-2

Author: Woo Huiren

Howdy, I'm a IT student who is currently serving my full time national service. I do lots of things related to IT but I have an exceptionally great love for the web and opensource, so expect me to blog a lot about it! :)

Leave a Reply