Check out example codes for "what is semantic html". It will help you in understanding the concepts better.
Code Example 1
<article> Defines independent, self-contained content <aside> Defines content aside from the page content <details> Defines additional details that the user can view or hide <figcaption> Defines a caption for a <figure> element <figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. <footer> Defines a footer for a document or section <header> Specifies a header for a document or section <main> Specifies the main content of a document <mark> Defines marked/highlighted text <nav> Defines navigation links <section> Defines a section in a document <summary> Defines a visible heading for a <details> element <time> Defines a date/time
Code Example 2
<!-- Answer to: "what is semantic html" --> <!-- A semantic element clearly describes its meaning to both the browser and the developer. 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. -->
Learn ReactJs, React Native from akashmittal.com