HTML

all semantic html tags

<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

semantic html

    # Is it a meaningful area of the page?
    	Use an HTML5 block element like <header> or <footer>.
        
    # Does it label the start of a new section?
    	Use a heading (with the right level) like <h2> or <h3>
    
    # Does it navigate to a new page?
    	Use an <a href="/page">
        
    # Does it trigger JS behaviour?
    	Use a <button>
        
    # Does it allow user input?
    	Use a <form> containing <input>s (with <label>s!)
        
    # Is it just for applying some layout/styles?
    	Use something like <div class="grid"> or <span class="big-text">

html semantics

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>