HTML Tutorial For Beginners: Create Your First Website Today

By /

HTML stands for Hypertext Markup Language. HTML was originally based on the Standard Generalized Markup Language (SGML), a much larger, more complicated document-processing system. To write HTML pages, you won’t need to know much about SGML. Whether you want to create a basic webpage or a sophisticated website, you must first understand HTML.

Who Invented HTML?

Physicist Tim Berners-Lee invented HTML in 1991. He created it to organize and distribute documents online.

boAt Airdopes

boAt Airdopes 141 Power  Performance Pure Sound!

Check Price

HTML Boilerplate (Basic Structure)

All HTML documents follow to a typical layout called a boilerplate:

Explanation

  • <!DOCTYPE html> : It specifies this is an HTML5 document.
  • <html lang="en"> : This is the root element of an HTML page, with the language specified.
  • <head> : It contains metadata like CSS styles, titles etc.
  • <meta charset="UTF-8"> : It ensures the correct display of the characters you use on your website.
  • <title> : It defines the title of the page.
  • <body> : Contains the content of the webpage.

Sorry, I mistakenly wrote “c” at the end of the closing </html> tag in the above video. Please ignore this.

HTML Headings

There are six heading tags :

html-heading-element

Explanation:

  • <h1> is the most important heading.
  • <h6> is the least important heading.
  • Headings are used by search engines to understand page layout.

Caution

Don’t use headings to display text in boldface type or to make certain parts of your page stand out more. Even though the result may appear as intend, it will not properly represent the structure of your page in the markup. This comes into play for search engines, accessibility, and some browsers.

Paragraph and Line Break

Paragraphs are created using the <p> tag and <br> tag for line breaks.

Example:

paragraph-code-snap
output-of-paragraph-tag-new

How to Comment in HTML

You can put comments into HTML pages to describe the page itself or to provide some kind of indication of the status of the page. Some source code control programs store the page status in comments, for example. Text in comments is ignored when the HTML file is parsed; comments never show up onscreen- that’s why they’re comments. Comments look like the following:

<!-- This is a comment -->

How to Add an Image in HTML

After you have an image, you can include it on your web page. Inline images are placed in HTML documents using the <img> tag. This tag, like the <hr> and <br> tags, has no closing tag in HTML.

<img src="image.jpg" alt="A sample image" width="500" height="300">

Explanation

  • src : Indicates the location of the image file.
  • alt : Provides alternative text for accessibility.
  • width & height : Specifies the measurements of the image.

Creating Links

<a> Developers use this tag to create a hyperlink. Example:

<a href="https://www.bitramind.com">Visit My Blogging Website BitraMind Everyday👨🏾‍💻</a>

Explanation

When you create links using <a>, the link has two parts: the href attribute in the opening <a> tag, and the text between the opening and closing tags that serves as a hot spot for the link. This link tells the browser to load the website “bitramind.com“.

Horizontal Line

The <hr> tag creates a horizontal line to divide content. Example:

<p>First section</p>
<hr>
<p>Second section</p>

How to Create a Table in HTML

All the components of a table are placed within a <table>…..</table> element. Here’s the simple code example that produces the table.

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Arpan</td>
        <td>23</td>
    </tr>
    <tr>
        <td>Tony</td>
        <td>60</td>
    </tr>
    <tr>
        <td>Riya</td>
        <td>29</td>
    </tr>
</table>
html table

This is the output of the above code. Notice that the table starts with a <table> tag and its attributes and ends with a </table> tag.

Explanation

  • <table> : Creates a table.
  • <tr> : Defines a row.
  • <th> : Defines a table header.
  • <td> : Defines a table cell.

Creating Lists

There exist two kinds of lists: ordered and unordered.

Ordered List (<ol>)

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
ordered-list

Ordered lists are surrounded by the <ol>….</ol> tags (ol stands for ordered list), and each item within the list is included in the <li>….</li> (list item) tag. When the browser displays an ordered list, it numbers and indents each of the elements sequentially. You don’t have to number the items yourself, and if you add or delete items, the browser automatically renumbers them when the page loads next time.

Ordered lists are good for steps to follow or instructions to the readers or when you want to rank the items in a list.

Unordered List (<ul>)

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>
unordered list

People often refer to unordered lists as bulleted lists. Each element in the list has the same marker instead of a number. The markup to create an unordered list looks just like an ordered list except that the list is created by using <ul>….</ul> tags rather than ol. The elements of the list are placed within <li> tags, just as with ordered lists.

Browsers have standardized on using a solid bullet to mark each item in an unordered list by default.

9-brand-sastras
9 Brand Shaastras: The Power of Branding!
Check Price

Conclusion

This guide explained the fundamentals of HTML, featuring its structure, headings, images, tables, lists, comments, and hyperlinks. By learning these components, you can begin creating your own web pages. Continue to practice and experiment with HTML to enhance your abilities!

Don’t forget to comment on how you liked this HTML tutorial.

3,101 thoughts on “HTML Tutorial For Beginners: Create Your First Website Today”

  5. Vavada#casino[QuyrxinxupinulEG,2,5]IM

    Если вы столкнулись с тем, что вы можете зайти на Вавада казино, то самое время воспользоваться зеркалом игрового клуба. Вы можете на вавада официальный сайт вход выполнить через следующие виды зеркала:

    ссылка на сайт;
    плагин на браузер;
    клиент на компьютер;
    мобильная версия.
    Вне зависимости от того, какое зеркало вы выбираете, оно будет обеспечивать стабильный доступ, который поможет обойти абсолютно любые блокировки.

    Используйте зеркало для того, чтобы попасть на сайт Вавада
    Сегодня на vavada официальный сайт вход выполнить достаточно просто. Если вы воспользуетесь специализированным порталом, то сможете отыскать там ссылку на зеркало игрового клуба Вавада. Можно сразу сохранить страницу со ссылкой для того, чтобы у вас всегда был доступ к любым автоматам. Ссылка за 5 секунд находит новый адрес сайта, который еще не заблокирован со стороны провайдера и обеспечивает стабильный доступ к слотам. Также vavada casino официальный портал доступен через плагин на браузера. Часто многие специализированные сайты предоставляют большой выбор плагинов для любого браузера. Если вы попробуете зайти на заблокированный сайт казино вавада, то зеркало в автоматическом режиме перенаправит вас на свободный адрес.

    Скачивайте специальную версию Вавада для стабильного доступа
    Еще очень удобным способом зайти на вавада казино онлайн официальный сайт является скачивание мобильной версии к себе на смартфон. Доступ к сайту обеспечивается через приложение, а не через сайт, поэтому ваш провайдер не сможет заблокировать доступ к сайту. Мобильная версия это очень удобно, ведь теперь вы сможете играть в любой момент, когда вам захочется. Достаточно будет достать смартфон и зайти в приложение.

    Также скачать вавада казино официальный сайт предлагает сразу на компьютер. Связь здесь идет через специальный клиент, который также не может быть заблокирован вашим провайдером. Кроме того, что зеркало обеспечивает доступ к сайту, у него нет никаких отличий от сайта казино. Здесь все те же слоты и бонусы, а также техподдержка и вероятность выигрыша.

    Заходите на сайт казино Вавада, чтобы получить бонусы
    Если вы прочитаете про вавада казино официальный сайт отзывы, то узнаете, что данный игровой клуб предоставляет просто шикарные подарки. Во-первых, здесь после регистрации и первого депозита можно получить 100 процентов к депозиту, а также 100 бесплатных вращений дополнительно. После того, как вы отыграете вейджер, вы сможете получить деньги к себе на счет и вывести их на карту или на электронные платежные системы.

    Есть на сайте vavada бездепозитный бонус. Если вы играли на деньги и заработали достаточно очков, чтобы перейти на бронзовый уровень минимум, то вы получаете доступ к бесплатному турниру. Тут вы играете на бесплатные фишки, и ваша задача заработать как можно больше фишек. В конце турнира в зависимости от набранных очков начисляется выигрыш.

    Reply
  7. PassLeakBledy

    Data-Leaks – The Largest Dark Web Leak Database Ever Built
    Your leaked data is not gone — it’s being traded in telegram leaked database dumps, data leak github files, and countless leaks online. Data-Leaks uncovers them instantly.
    Search 33B+ stolen passwords and 50M new leaks daily, including known passwords from breach dumps and discord data leak archives no one else tracks.
    Run a free dark web check, detect credential reuse, and monitor personal information data breach risks — all in seconds.
    Full access is just $2 — scan deeper, download verified leak data, and stay ahead of hackers.
    Reveal the Truth: Discord data leak

    |

    Reply
  9. SheilaFrusy

    В поисках достоверного источника редкоземельных металлов и сплавов? Обратите внимание на компанию Редметсплав.рф. Мы предлагаем широкий ассортимент продукции, обеспечивая превосходное качество каждого изделия.

    Редметсплав.рф гарантирует все стадии сделки, предоставляя полный пакет необходимых документов для оформления товаров. Неважно, какие объемы вам необходимы – от мелких партий до крупнооптовых заказов, мы готовы выполнить любой запрос с непревзойденным обслуживанием.

    Наша команда поддержки всегда на связи, чтобы помочь вам в выборе товаров и ответить на любые вопросы, связанные с применением и характеристиками металлов. Выбирая нас, вы выбираете уверенность в каждой детали сотрудничества.

    Заходите на наш сайт Редметсплав.рф и убедитесь, что качество и уровень нашего сервиса – идеальный вариант для вас.
    Наши товары:

    Титановый квадрат 38 мм ОТ4-0 ГОСТ 26492-85 Выберите идеальный титановый квадрат для высокоточных работ из нашего разнообразного ассортимента. Надежные, прочные и устойчивые к коррозии инструменты из высококачественного титана для металлообработки, строительства и ремонта. Разнообразие размеров и форм обеспечивает оптимальное решение для широкого спектра задач. Получите непревзойденные возможности для высокоточных работ с нашими титановыми квадратами.

    Reply
  13. Douglasimpup

    People can’t stop talking about fresh launches, and the overall vibe is surprisingly consistent: when a game feels fun in the first hour, it usually wins them over. A lot of comments point out core mechanics first: smart progression earn love, while clunky UI turn players off. If it feels “right,” players stick around. Check this: https://topcaredak.nl/debt-management-steps-to-becoming-debt-free/

    Visuals still matter, but many say they’d prefer solid optimization than flashy effects. A clear art direction and good readability tends to beat photorealism. Of course, day-one problems dominate threads. Many players argue they’re fine waiting for fixes, but plenty of others won’t accept beta-at-full-price vibes. Frequent patches with honest notes change the tone quickly. One hot topic is monetization. Most are okay with optional skins if the game is complete, but they get loud when pricing gets aggressive. Respectful design go a long way.

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top