Skip to content

level-2

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

level-2

README.md

Semantic Markup

It is the markup that relates to the meaning of content.

Semantic tags Non-Semantic tags
<header></header> <div></div>
<main></main> <span></span>, etc
<footer></footer>
<nav></nav>
<article></article>
<section></section>
<aside></aside>, etc
  • Semantic tags are used to give meaning to the content they contain, making it easier for both developers and browsers to understand the structure and purpose of the content.
  • Non-semantic tags do not provide any information about the content they contain, they are used purely for layout and styling purposes.

Entities

  • An HTML entity is a piece of text ("string") that begins with an ampersand (&) and ends with a semicolon (;).
  • Used to display reserved characters (which would otherwise be interpreted as HTML code), and invisible characters (like non-breaking spaces).
  • Can also use in place of characters that are difficult to type with a standard keyboard.
  • Browser interprets them and renders the correct character.

E.g., Love symbol &hearts;

Emmet

A set of plugins for text editors that allows for high-speed coding and editing in HTML, XML, XSLT, and other structured code formats via content assist.

<!-- nav>ul>li -->
<nav>
    <ul>
        <li></li>
    </ul>
</nav>

<!-- ul>li*5 -->
 <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<!-- div>h1+p -->
 <div>
    <h1></h1>
    <p></p>
</div>

Visit emmet.io

Understanding HTML5

The term HTML5 is essentially a buzzword that refers to a set of modern web technologies. This includes the HTML Living Standard, along with JavaScript APIs to enhance storage, multimedia, and hardware access.

How HTML works:

HTML Standard (Living standard) is a document that tells the browser how HTML should work.