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:
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
