В этой статье мы обсудим различные методы сохранения списка элементов в файле HTML. Как правило, правильный отступ контента в браузере делает контент хорошо организованным и структурированным, улучшая общую читабельность, а также повышая интерактивность веб-сайта. Это стало возможным благодаря использованию семантических элементов HTML.
Семантический элемент объясняет значение фрагмента кода как для разработчика, так и для машиночитаемого способа. Списки HTML позволяют содержимому следовать правильной семантической структуре. Списки важны для визуального восприятия пользователя, так как они могут читать контент в правильном потоке, а не в беспорядочном тексте или абзацах. Это позволяет группировать элементы, которые связаны друг с другом в виде маркеров или нумерованных списков. В HTML есть 2 типа списков, а именно: неупорядоченный список и упорядоченный список.
Ненумерованные списки: по умолчанию он состоит из маленьких черных маркеров, представляющих список элементов. Список начинается с тега <ul> и содержит список элементов, начинающихся с тега <li>.
Синтаксис:
<ul>
<li>List Items</li>
</ul> Упорядоченный список: Упорядоченный список по умолчанию состоит из нумерованного списка. Список начинается с тега <ol> и содержит список элементов, начинающихся с тега <li>.
Синтаксис:
<ol>
<li>List Items</li>
</ol> Пример: этот пример иллюстрирует неупорядоченный список и упорядоченный список для отступа содержимого в списке от браузера.
HTML
<!DOCTYPE html><html><head><title>Types of Lists</title></head><body><h2>Unordered list </h2><ul><li>DSA</li><li>Algorithm</li><li>Web Tech</li></ul><h2>Creating an Ordered list </h2><ol><li>Placement Courses</li><li>Onlie Self-pace Course</li><li>Offline-Classes</li></ol></body></html>
Вывод:
Типы списков HTML
Мы научились создавать оба типа списков. Теперь мы узнаем отступы списка, их важность и различные способы сохранить список элементов в HTML-документе прямым.
Отступ списка:
Отступ — это метод форматирования, который помогает хорошо организовать и представить контент в правильной структуре на веб-странице. Это может помочь повысить интерактивность веб-страницы, а также улучшить взаимодействие с пользователем, что не только помогает улучшить читабельность, но и помогает улучшить рейтинг страницы, что, в свою очередь, достигает максимального количества пользователей.
Важность правильного отступа в списке:
- Отступ помогает читателю четко понять поток контекста.
- Это придает смысл похожим элементам, когда они сгруппированы вместе.
- Это позволяет различать родительский элемент и дочерний элемент/подэлемент, если таковые имеются.
- Поиск согласованности между различными дисплеями браузера.
Способы сохранить список элементов в виде прямой линии:
По умолчанию списки имеют автоматический отступ, и важно, чтобы список был выровнен в соответствии с настройками отображения. Для того, чтобы элементы списка располагались на прямой линии, существует несколько свойств CSS, которые используются не только для отступа содержимого, но и для стилизации списка с помощью настраиваемых параметров, которые приведены ниже:
- свойство text-indent
- свойство margin-left и padding-left
- отображать свойство
- свойство типа списка
Есть несколько других подходов к выполнению этой задачи, но в этой статье мы обсудим 4 вышеуказанных свойства CSS.
Свойство text-indent : это свойство используется для определения отступа первой строки в каждом блоке текста. Он также принимает отрицательные значения. Это означает, что если значение отрицательное, первая строка будет иметь отступ влево.
Синтаксис:
text-indent: length;
Пример: В этом примере описываются различные способы создания отступа в списке с помощью свойства text-indent.
HTML
<!DOCTYPE html><html><head><title>Indenting the list using CSS Propert</title><style>.sudo {text-indent: 5px;}.geeks {text-indent: 5em;}.gfg {text-indent: 30%;}</style></head><body><h2>text-indent: 50px:</h2><olclass="sudo"><li>The Best Data Structure and Algorithm CourseAvailable Online From Skilled mentors at GFG.</li><li>The course focuses on various MCQ's &Coding question likely to be asked inthe interviews & make your upcomingplacement season efficient andsuccessful.</li></ol><h2>text-indent: 5em:</h2><olclass="geeks"><li>The Best Data Structure and Algorithm CourseAvailable Online From Skilled mentors at GFG.</li><li>The course focuses on various MCQ's &Coding question likely to be asked inthe interviews & make your upcomingplacement season efficient andsuccessful.</li></ol><h2>text-indent: 30%:</h2><olclass="gfg"><li>The Best Data Structure and Algorithm CourseAvailable Online From Skilled mentors at GFG.</li><li>The course focuses on various MCQ's &Coding question likely to be asked inthe interviews & make your upcomingplacement season efficient andsuccessful.</li></ol></body></html>
Вывод:
Отступ списка с помощью свойства text-indent
свойство margin-left : используется для увеличения или уменьшения отступа вокруг списка снаружи блока. Например, если вы хотите создать отступ вокруг блока, вы можете использовать это свойство. Вы можете определить значение атрибута в px; является статическим измерением, указав значение в соответствии с требуемым отступом.
свойство padding-left : используется для увеличения или уменьшения заполнения внутри блока. Например, вы хотите увеличить или уменьшить внутреннее пространство блока, т. е. заполнение, вы можете использовать это свойство, определив значение атрибута в em; будучи относительным измерением, указав значение в соответствии с требуемым отступом.
Синтаксис:
<style>
ul.o{
margin-left: 50px;
padding-left: 50px;
}
</style> Пример: В этом примере мы создали четыре списка. Первый список без отступа или, можно сказать, с отступом по умолчанию, второй список с отступом с использованием свойства margin-left, обеспечивающего положительное значение для смещения списка вправо, третий список с отступом с использованием свойства margin-left, обеспечивающего отрицательное значение, чтобы подтолкнуть список к левой стороне, а четвертый список имеет отступ с использованием свойства padding-left.
HTML
<!DOCTYPE html><html><head><title>Indenting the list item in various format</title><style>ul.o {margin-left: 50px;}ul.p {margin-left: -20px;}ul.m {padding-left: 20em;}</style></head><body><h2><strong>List without Indent</strong></h2><ulclass="i"><li>Item1</li><li>Item2</li><li>Item3</li></ul><h2><strong>List with Indent using margin-left[+ve]</strong></h2><ulclass="o"><li>Item1</li><li>Item2</li><li>Item3</li></ul><h2><strong>List with Indent using margin-left[-ve]</strong></h2><ulclass="p"><li>Item1</li><li>Item2</li><li>Item3</li></ul><h2><strong>List with Indent using padding-left</strong></h2><ulclass="m"><li>Item1</li><li>Item2</li><li>Item3</li></ul></body></html>
Вывод:
Отступ списков HTML
Свойство list-style-type : используется для удаления типа списка, если это необходимо. С помощью этого свойства удаляются маркеры или числа перед элементами списка.
Синтаксис:
li {
list-style-type: none;
} Свойство отображения : используется для выравнивания элементов списка в одну строку, которая образует блок элементов. Однако вы можете добавить поля и отступы вокруг элементов списка для лучшего просмотра.
Синтаксис:
li {
display: inline-block;
} Пример: в этом примере мы создали неупорядоченный список внутри тела и стилизовали тот же список внутри заголовка, предоставив класс неупорядоченному списку.
HTML
<!DOCTYPE html><html><head><title> List items in a Straight Line </title><style>ul.i {list-style-type: none;}li {display: inline-block;}</style></head><body><h2><strong> List items in a Straight Line</strong></h2><ulclass="i"><li>DSA</li><li>Web Tech</li><li>Algorithm</li></ul></body></html>
Вывод:
Элементы списка HTML по прямой
