HTML — A MUST FOR EVERY WEBSITE
What is a Website?
According to mdn web docs, a website is a collection of linked web pages (plus their associated resources) that share a unique domain name. Examples of website are Medium, Google, Twitter, Facebook, Jumia.
What is HTML?
According to w3schools, HTML (Hyper Text Markup Language) is a standard markup language for creating web pages that describes the structure of a web page and consists of series of elements that tell the browser how to display the content on the web page.
What is HTML semantics?
According to Wikipedia, semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in the web pages and web applications rather than merely to define its presentation or look.
Note: We have semantic (defines the content) and non-semantic (tells nothing about the content) elements. Examples of semantic html element includes: <form>, <table>, <article>. Examples of non-semantic HTML elements includes: <div>, <span>, <p>.
Examples of HTML Tags.
Container Tags;
◦ <html></html> — represents the root (top-level element) of an HTML document.
◦ <title></title> — defines the document’s title that is shown in a browser’s title bar or page’s bar.
◦ <body></body> — represents the content of an HTML document.
◦ <header></header> — represents introductory content of a webpage.
◦ <h1> to <h6> </h1> to </h6> — represents six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
◦ <nav></nav>- represents a section of a page whose purpose is to provide navigation links, either within the current document or other documents.
◦ <p></p>- represent a paragraph.
◦ <a></a> — anchor element with it “href” attributes create a hyperlink to web pages, files, email etc.
◦ <section></section> — represents a generic standalone section of a document, which does not have a more specific semantic element to represent it.
◦ <div></div> — A container for a block of content.
◦ <span></span> — A container for an inline content, such as content inside a paragraph.
◦ <ol></ol> — represents an ordered list of items-typically rendered as a numbered list.
◦ <ul></ul> — represents an unordered list of items-typically rendered as a bulleted list.
◦ <small></small> — represents side-comments and small print such as copyright etc.
◦ <strong></strong> — indicates that its contents have strong importance.
◦ <table></table> — represents tabular data
◦ <td></td> — it defines a cell of table that contains data.
◦ <th></th> — it defines a cell as header of a group of table cell.
◦ <tr></tr> — it defines a row of cell in a table.
◦ <form></form> — represents a document section containing interactive controls for submitting information.
Empty Tags;
◦ <br> — Line break
◦ <hr> — horizontal line rule
◦ <img> — inserts an image into a web page
◦ <meta> — represents Metadata that cannot be represented by other HTML meta-related elements
◦ <source> — specifies multiple media resources for the picture, audio or video
◦ <input> — is used to create interactive controls for web-based forms in order to accept data from the user.
◦ <track> — is used as a child of the media elements
◦ <link> — embed link
◦ <wbr> — represent a word break opportunity — a position within a text where the browser may optionally break a line.
◦ <param> — defines parameters for an object element.
◦ <keygen> — exists to facilitate generation of key material and submission of the public key as part of an HTML form
◦ <col> — defines a column within a table and is used for defining common semantics on all common cells.
◦ <area> — defines an area inside an image map that has predefined clickable area.
◦ <embed> — embeds external content at the specified points in the document.
◦ <base> — specifies the base URL to use for all relative URLs in a document.
◦ <colgroup> — defines a group of columns within a table.