Skip to content

Instantly share code, notes, and snippets.

@timigod
Created November 15, 2017 03:19
Show Gist options
  • Save timigod/2c1bad3168fc9c644026698d0b5505df to your computer and use it in GitHub Desktop.
Save timigod/2c1bad3168fc9c644026698d0b5505df to your computer and use it in GitHub Desktop.

HTML Basics

HTML stands for Hyper Text Markup Language.

HTML is the markup language used for creating Web pages. HTML describes the structure of a Web page (to browsers) in terms of elements. HTML elements are the building blocks of a Web page and they're represented by HTML Tags.

You can start writing HTML right away with any text editor (TextEdit, Notepad). All you need to do is save the file with a .html file extension and you can test anything you've written by opening up the file (in the browser).

HTML Tags

HTML tags are keywords within your HTML code that define which elements your browser will display (and sometimes, how they're displayed, though this is mostly done with another language called CSS).

Most HTML tags consist of two parts; an opening and a closing part. This is because elements can contain context (like text) or have other elements nested within it.

The Div tag

<div> Content here </div>  

The div tag is used to define a section in an HTML document. It is also often used to group elements together in order to format them with CSS. It's the generic container for elements and it does not inherently represent anything visually unlike other elements (as we'll see). It's just a way to divvy up the Web page, hence the name; div.

<p>This is some text.</p>

<div style="color:#0000FF">
  <h3>This is a heading in a div element</h3>
  <p>This is some text in a div element.</p>
</div>

<p>This is some text.</p>

The example above shows the div tag in use. It's being used to group two other elements/tags. The style="color:#0000FF" is CSS used to style the entire div by colouring all the elements nested in it blue.

Example of Div with styling

The Headings tag

Content on a Webpage usually has headings. There are main headings and less important headings for subtopics or smaller sections of the webpage.

Headings are defined in HTML using the <h1> to <h6> tags. <h1> defines the most important heading while <h6> defines the least important heading.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Example of all header tags

The Anchor tag

The anchor tag <a> defines a hyperlink, which is used to let the user move from one page to another by clicking on it. The <a> tag allows you to specify a href attribute which indicates the destination of the hyperlink.

<a href="https://google.com"> Search the Internet! </a>

This creates a link on the Web page that will take the user to google.com when clicked on.

Example of anchor tag

The Image tag

The image tag <img> lets you define an image in an HTML page. The <img> tag allows you to specify a src attribute which indicates where the image to be display is hosted on.

<img src="smiley.png">

The Video tag

The video tag <video> lets you put video on a Web page. It lets you specify one or more <source> elements, which its it possible to have a sort of playlist where one video plays after the other is done.

<video controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Because the <video> tag is relatively new, not all browsers support them yet, so the video tag allows you to provide a fallback message, in the event that the browser does not support it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment