Skip to main content

Get Started to Learn HTML: Four Basic HTML Elements You Must Know

For the past two days, I had studied HTML from MDN Web Doc,which is provided by Udemy course. 

Before I started, I felt so excited and also nerves. Can I really understand the content? What if the code language is too complex to understand? 

Whatever......Not matter what, I told myself just start to learn. If I am too afraid to even open the web page, I would never figure it out. Try first, and then see what would happen. 

As I read through the first part: Getting Started with HTML, I find it is not to difficult to understand the information. By following the instruction, I can start to write some basic HTML element in the test code box, and see the good result. At that moment, I feel so motivated.

Now, I am going to share my study note and thought with you.

What is HTML?

According to MDN,  HTML is a markup language used to tell your browser how to structure the web pages to visit.

Image you are building a house, HTML is like your house frame and structure. Before you renovate your house or move furniture inside each room, at least you have an empty house built. Your house needs to have door, window, wall, bedroom, living room, bathroom, kitchen, and maybe some stairs to the second floor. Those things are the most basic elements to a house.

What is Basic HTML Element?


An HTML element includes: opening tag, content, and a closing tag.

(Screenshot From MDN: Get Started to learn HTML)

Like the example above, between the opening tag <p> and closing tag </p>, which means "paragraph", you write the content inside it. No matter you write one sentence or five sentences inside the tags, the whole thing is counted one HTML element.

Four Basic HTML Element You Must Know:

  • Nesting Element:
Nesting element is that you put elements inside other elements. 

For example: <p> It is very important to know that.</p>

If you want to bold the word "important", you need to add an <strong></strong> element inside the <p></p>.

So the new element would be :

<p> It is very <strong> important </strong> to know that.</p>

This code result: It is very important to know that. The "important" is bold.

<strong></strong> tags mean that the word is to be strongly emphasized. By the way, <em></em> tags means italic.

If you want to bold and italic the "important". The code would be: 

<p> It is very <strong><em>important</em></strong> to know that.</p>

The result: it is very important to know that.

Mistake needs to avoid:

When I first write nesting element, I forgot to put closing </strong> tag after "important", and that results the rest of the sentence bold. So, always remember to put opening and closing tag when you write the element.
  • Block-level Element:
Block-level elements form a visible block on a page, and they will appear an a new line from whatever content went before it.

Basically, block-level element is that you want to separate the content into different part to make a clear structure on your web page, such as a new paragraph, list of things, navigation menu, etc.

Some most common block-level tags are : <ol> (order list), <ul> (unordered list), <li> (list item), <header> (page header), <p> (paragraph), <aside> (aside content), heading levels <h1> to <h6>.

For example: 


The code uses <p></p> tags which means to separate each word into a new paragraph. The result will be:

You can see that after we insert the block level tag <p></p> between each word, each word will become a new line and start a new paragraph.

  • Inline Element
Inline elements can be within block-level element, and it will not cause a new line to appear in the document. 

From my understanding, the inline element is more like to make some words or sentences special in a paragraph, such as bold, italic, add a link etc. 

However, wherever you put the inline element, it would not separate the word or sentence into a new paragraph. In the other word, the paragraph is not going to change.

The most common inline element tags are :<a></a> (hyperlink), <em></em> (italic), <strong></strong> (bold), <img> (image).

For example: 

I copy one paragraph from a website. In the code part, it includes one block-level tag <p></p>, and two inline tag <strong></strong> and <em></em>.

When I put the inline elements, the output paragraph is still remain one paragraph, but the word "free" and "multi-media features" change the style.


From this example, we can see that inline elements can be nested inside in a block-level elements, but a block-level element can not be nested inside in inline element. The block-level element can be nested inside a block-level element.
  • Empty Element
MDN describes that an empty element is a single tag, which is usually used to insert/embed something in the document at the place it is included. 

If  you want to insert a picture on your webpage, you will use <img> tag.

The code would be <img src="image link or image name from file">

For example, I want to insert one picture on my web page. The first step is to find a image from Google. Then I would copy the image address by right click the picture, and paste the image link in the tag.
from Google image


The code would be <img src="http://images4.fanpop.com/image/photos/19900000/cat-fun-funny-never-looked-so-cute-19942391-460-350.jpg">

At the end, the picture will be showed on your web page.

Therefore, above four elements are the basic HTML elements you must know, and they could be used in every single web page coding. Just practice! 







Labels:

Comments

Post a Comment

Popular posts from this blog

Intermediate Express.js: How To Add Styles & Partials in EJS File?

So far, we only have simple HTML tags and ejs tags in each ejs file. Every template page has no style at all. And the basic HTML header and footer are also missing. Today, I learned how to add styles and partials in ejs file. Link Style Step One: Touch a Separate CSS file I create a new directory "Style" under the "EJSDemo" directory, then I add a new CSS file "app.css" inside "Style" folder. Step Two: Add app.use(express.static()) in the app.js I add app.use(express.static("style")) in the "app.js". This will tell Express.js to serve the content of "Style" directory. Step Three: Write styles in CSS file I simple give body an orange background color and set text color to be grey. Step Four: Link to CSS file in the EJS file I just add <link> tag to link the "app.css" file on the top of the h1 tag in each ejs template. As the result, when I run the app and...
Post a Comment
Read more

Intro to Backend: Is Browser The Only Place To Send HTTP Request?

Today,  I begin to learn the second part of web develop course: backend. Frontend is the stuff that we can see and interactive with, such as HTML, CSS, and JS. We can type our code, style our page, or write some function to make interaction. However, backend is everything else. For example, we type Target web address in the Internet Browser. As we hit "enter", there are a few steps to go through: 1. The HTTP request is sent to a particular server's IP address. 2. The server figures out what to send us 3. It sends a HTTP response back to us Those process we are hard to see, and it happens in less than one second. The instructor said that the browser is not the only place to send the HTTP request, and there are so many choices out there. In this learning course, we are going to use Postman App . Postman allows us to make HTTP requests and viewer responses. It is really for developers to understand how things are working or debug something. In the P...
Post a Comment
Read more

Intermediate CSS: Three Steps To Create A Photo Gallery

I have seen many image blogs these years. People love to post their photos online to express life and feeling.  Image is powerful because it could bring a visual story to audience. People can see what you see, and may be feel the same way as you feel, too. If we want to build our own photo gallery, what should we do? Luckily, the boot-camp instructor just showed me how to use HTML and CSS to create a simple photo gallery.  I would love to share my study note here. (p.s. all the image links are provided by Udemy course instructor) Step One: Add Image Links on HTMLPage The instructor provides all the image links. All we need to do is add those links inside the <img> tag. Without CSS, the page will looks like this: they are not organized, and sizes are different, too. Step Two: Set Image Property Values We set the width of each photo the same value which is 30%, so there will be three images per line. The percentage value can help...
Post a Comment
Read more