Useful Html tags

Layout

  • <html> wraps all the content on the entire page.
  • <main> defines content unique to this page, use only once per page.
  • <body> contains all the content that you want to show to web users when they visit your page.
  • <article> encloses a block of related content that makes sense on its own without the rest of the page.
  • <section> groups together a single part of the page that constitutes one single piece of functionality.
  • <aside> contains content that is not directly related to the main content but can provide additional information indirectly related to it.
  • <header> represents a group of introductory content.
  • <nav> contains the main navigation functionality for the page.
  • <footer> represents a group of end content for a page.
  • <br> creates a line break in a paragraph.
  • <hr> create a horizontal line in the document that denotes a thematic change in the text.

Block elements

  • <p> defines a paragrah.
  • <form> creates an form for user input.
  • <div> defines a block level non-semantic element

Inline elements

  • <em> gives the line italic emphasis.
  • <strong> gives line strong emphasis.
  • <a> wraps a piece of text around a hyperlink with attributes <href> and <title>, <download> attribute provide a default save filename.
  • <span> is used to group inline non-semantic elements in a document.

Table

  • <table> defines an HTML table.
  • <caption> defines a caption by putting it blow <table> tag.
  • <tr> defines a row in an HTML table.
  • <th> defines a header cell in an HTML table.
  • <td> defines a standard cell in an HTML table.

Special characters

  • &lt; gives <
  • &gt; gives >
  • &quot; gives "
  • &apos; gives '
  • &amp; gives &
  • <head> acts as a container for all the stuff you want to include on the HTML page that isn’t the content you are showing to your page’s viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, etc.
  • <title> sets the title of your page, which is the title that appears in the browser tab, and is used to describe the page when you bookmark/favourite it.
  • <meta> contains imformation about data within body. Many <meta> elements include name and content attributes.
  • <link> takes two attributes, rel="stylesheet", which indicates that it is the document’s stylesheet, and href, which contains the path to the css file.
  • <script> takes <src> attribute for javascript.

List

  • <ul> defines an unordered list.
  • <ol> defines an ordered list.
  • <li> defines a list item.
  • <dl> defines a description lists.
  • <dt> defines a description term.
  • <dd> defines a description description.

Multimedia

  • <img> inserts an image with attributes <src>, <alt>, <width>, <height>, <title.
  • <video> inserts an video with attributes <src, <controls>.
  • <audio> inserts an audio with attributes <src, <controls>.

Useful resources

mozillar.org